:root {
  --app-canvas: #f4f7fb;
  --app-surface: #ffffff;
  --app-surface-raised: #f9fbfd;
  --app-border: #d9e2ec;
  --app-text: #162b44;
  --app-muted: #62748a;
  --app-accent: #0f766e;
  --app-accent-strong: #0b5f59;
  --app-info: #2563eb;
  --app-success: #0f766e;
  --app-warning: #a16207;
  --app-danger: #b4233e;
  --app-offline: #64748b;
  --app-radius: 0.75rem;
  --app-shadow: 0 3px 14px rgb(22 43 68 / 0.08);
}

html { font-size: 16px; min-height: 100%; }
body { margin: 0; background: var(--app-canvas); color: var(--app-text); }

*:focus-visible {
  outline: 3px solid var(--app-info) !important;
  outline-offset: 3px;
}

.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  padding: .75rem 1rem; border-radius: var(--app-radius);
  background: #102a43; color: #ffffff; font-weight: 700;
}
.skip-link:focus { top: 1rem; }

.app-header { background: rgb(255 255 255 / .96); border-color: var(--app-border); box-shadow: 0 1px 0 rgb(22 43 68 / .05); }
.app-brand-link { min-width: 7.5rem; }
.app-brand-logo { display: block; height: 2.7rem; object-fit: contain; object-position: center; width: 8.5rem; }
.app-brand-mark { background: #e2f3f0; color: var(--app-accent); }
.app-nav-link { color: #52657b; border-radius: .5rem; padding: .5rem .625rem; }
.app-nav-link:hover, .app-nav-link[aria-current="page"] { color: var(--app-text); background: #eaf2f7; }
.app-nav-link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--app-accent); }
.app-nav-link i { color: var(--app-accent); }
.app-mobile-menu { border: 1px solid var(--app-border); border-radius: var(--app-radius); background: var(--app-surface); box-shadow: var(--app-shadow); flex: 0 0 auto; position: relative; }
.app-mobile-menu summary { align-items: center; cursor: pointer; display: flex; height: 2.75rem; justify-content: center; list-style: none; padding: 0; width: 2.75rem; color: var(--app-text); }
.app-mobile-menu summary::-webkit-details-marker { display: none; }
.app-mobile-menu nav { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius); box-shadow: var(--app-shadow); box-sizing: border-box; left: auto; max-width: calc(100vw - 2rem); min-width: 15rem; padding: .4rem; position: absolute; right: 0; top: calc(100% + .5rem); }
.app-mobile-menu .app-nav-link { display: flex; margin: .15rem 0; }
.app-primary-action, .app-secondary-action { align-items: center; border-radius: .75rem; display: inline-flex; font-size: .875rem; font-weight: 700; gap: .5rem; justify-content: center; min-height: 2.75rem; padding: .625rem 1rem; transition: background-color .15s ease, border-color .15s ease; }
.app-primary-action { background: var(--app-accent); color: #ffffff; }
.app-primary-action:hover { background: var(--app-accent-strong); color: #ffffff; }
.app-secondary-action { background: #ffffff; border: 1px solid var(--app-border); color: var(--app-text); }
.app-secondary-action:hover { background: #eef6f5; border-color: var(--app-accent); color: var(--app-text); }
.app-table-icon-action { align-items: center; border-radius: .5rem; display: inline-flex; height: 2.25rem; justify-content: center; transition: background-color .15s ease, color .15s ease; width: 2.25rem; }
.app-table-icon-action:hover { background: #edf2f6; }
.app-table-action { align-items: center; border-radius: .5rem; display: inline-flex; font-size: .75rem; font-weight: 700; gap: .35rem; justify-content: center; min-height: 2rem; min-width: 7.5rem; padding: .4rem .625rem; transition: background-color .15s ease; white-space: nowrap; }
.app-surface { background: var(--app-surface); border-color: var(--app-border); box-shadow: var(--app-shadow); }
.status-offline { color: var(--app-offline); }

/* Fase 8: componentes compartidos para que las pantallas operativas mantengan la misma jerarquía. */
.page-kicker { color: var(--app-accent); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.page-title { color: var(--app-text); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 750; letter-spacing: -.025em; line-height: 1.2; }
.page-copy { color: var(--app-muted); font-size: .875rem; line-height: 1.55; }
.app-panel { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 1rem; box-shadow: var(--app-shadow); }
.app-panel-heading { border-bottom: 1px solid var(--app-border); }
.metric-card { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 1rem; box-shadow: none; }
.metric-label { color: var(--app-muted); font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.form-label { color: #40536b; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.form-control { background: #ffffff; border: 1px solid var(--app-border); border-radius: .75rem; color: var(--app-text); min-height: 2.75rem; }
.form-control::placeholder { color: #8a9aae; }
.form-control:disabled, .form-control[readonly] { background: #eef3f7; color: #66768a; }
.status-badge { align-items: center; border: 1px solid currentColor; border-radius: 999px; display: inline-flex; font-size: .75rem; font-weight: 700; gap: .375rem; line-height: 1; padding: .4rem .625rem; }
.status-badge::before { background: currentColor; border-radius: 999px; content: ""; height: .42rem; width: .42rem; }
.status-ready { background: #e3f4ef; color: var(--app-success); }
.status-progress { background: #e8f0ff; color: var(--app-info); }
.status-attention { background: #fff6df; color: var(--app-warning); }
.status-error { background: #fff0f2; color: var(--app-danger); }
.status-neutral { background: #edf1f5; color: var(--app-offline); }
.empty-state { align-items: center; color: var(--app-muted); display: flex; flex-direction: column; gap: .5rem; justify-content: center; min-height: 9rem; padding: 1.5rem; text-align: center; }
.empty-state i { color: var(--app-accent); font-size: 1.5rem; }
.onboarding-steps { counter-reset: onboarding; display: grid; gap: .5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.onboarding-steps li { background: #f7f9fc; border: 1px solid var(--app-border); border-radius: .65rem; color: var(--app-muted); font-size: .75rem; min-height: 4.5rem; padding: .7rem; }
.onboarding-steps li::before { color: var(--app-accent); content: counter(onboarding); counter-increment: onboarding; display: block; font-size: .7rem; font-weight: 800; margin-bottom: .25rem; }
.onboarding-steps li[aria-current="step"] { background: #e4f4f1; border-color: var(--app-accent); color: var(--app-text); }

/* Puente de transición: las vistas existentes siguen usando utilidades Tailwind.
   Estas equivalencias centralizan la nueva identidad mientras se simplifican las vistas. */
html[class*="bg-slate"], body[class*="bg-slate"] { background-color: var(--app-canvas) !important; color: var(--app-text) !important; }
[class*="bg-slate-950"] { background-color: #eef3f7 !important; }
[class*="bg-slate-900"] { background-color: #f6f8fb !important; }
[class*="bg-slate-800"] { background-color: #ffffff !important; }
[class*="bg-slate-700"] { background-color: #edf2f6 !important; }
[class*="bg-slate-600"] { background-color: #dce5ed !important; }
[class*="border-slate-"] { border-color: #d9e2ec !important; }
[class*="text-slate-100"], [class*="text-slate-200"], [class*="text-slate-300"], [class*="text-white"] { color: var(--app-text) !important; }
[class*="text-slate-400"], [class*="text-slate-500"] { color: var(--app-muted) !important; }
[class*="text-emerald-"] { color: var(--app-accent) !important; }
[class*="bg-emerald-500/"] { background-color: #e3f4ef !important; }
[class*="bg-amber-500/"] { background-color: #fff6df !important; }
[class*="bg-rose-500/"] { background-color: #fff0f2 !important; }
[class*="bg-blue-500/"] { background-color: #e8f0ff !important; }
[class*="bg-sky-500/"] { background-color: #e8f4ff !important; }
[class*="text-rose-"] { color: var(--app-danger) !important; }
[class*="text-amber-"] { color: var(--app-warning) !important; }
[class*="text-blue-"], [class*="text-sky-"] { color: var(--app-info) !important; }
a[class*="bg-emerald-"], button[class*="bg-emerald-"], a[class*="bg-sky-"], button[class*="bg-sky-"], a[class*="bg-blue-"], button[class*="bg-blue-"], a[class*="bg-amber-"], button[class*="bg-amber-"] { color: #ffffff !important; }
a[class*="bg-emerald-"] *, button[class*="bg-emerald-"] *, a[class*="bg-sky-"] *, button[class*="bg-sky-"] *, a[class*="bg-blue-"] *, button[class*="bg-blue-"] *, a[class*="bg-amber-"] *, button[class*="bg-amber-"] * { color: inherit !important; }
input, select, textarea { background-color: #ffffff !important; border-color: var(--app-border) !important; color: var(--app-text) !important; }
input:disabled, select:disabled, textarea:disabled, input[readonly], textarea[readonly] { background-color: #eef3f7 !important; }

@media (max-width: 640px) {
  .onboarding-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}