/* =========================================================================
   LRM-FLOW · sistema visual
   Paleta sacada de los logos (assets/logo-lrm-flow-*.webp):
     día   → teal #22796E · pizarra #344650 · verde #B3DE94 sobre blanco
     noche → lima #CFE22E · blanco sobre negro
   Se carga DESPUÉS de Tailwind CDN y gana por especificidad (html[data-lrm] …),
   así que reviste las maquetas sin tener que reescribir cada clase.
   ========================================================================= */

html[data-lrm] {
  /* --- superficies --- */
  --lrm-page: #F4F7F5;
  --lrm-surface: #FFFFFF;
  --lrm-surface-2: #EFF4F1;
  --lrm-surface-3: #E6EDE9;

  /* --- texto --- */
  --lrm-ink: #16272E;
  --lrm-ink-2: #3B535E;
  --lrm-muted: #6B8290;
  --lrm-faint: #93A5AE;

  /* --- líneas --- */
  --lrm-line: #E1E9E5;
  --lrm-line-strong: #CBD8D2;

  /* --- marca --- */
  --lrm-brand: #22796E;
  --lrm-brand-ink: #146056;
  --lrm-brand-on: #FFFFFF;
  --lrm-brand-soft: #E2F1EB;
  --lrm-brand-soft-ink: #146056;
  --lrm-leaf: #B3DE94;

  /* --- semáforo --- */
  --lrm-ok: #2E7D5B;
  --lrm-ok-soft: #E3F3EA;
  --lrm-warn: #9A6B18;
  --lrm-warn-soft: #FBF0D9;
  --lrm-danger: #B33A32;
  --lrm-danger-soft: #FBE9E7;

  /* --- sombras: sombra difusa, nunca borde sólido --- */
  --lrm-shadow-sm: 0 1px 2px rgba(16, 39, 46, .06), 0 1px 1px rgba(16, 39, 46, .04);
  --lrm-shadow: 0 1px 3px rgba(16, 39, 46, .07), 0 6px 16px -6px rgba(16, 39, 46, .10);
  --lrm-shadow-lg: 0 2px 6px rgba(16, 39, 46, .08), 0 18px 40px -18px rgba(16, 39, 46, .22);
  --lrm-ring: 0 0 0 3px rgba(34, 121, 110, .22);

  /* --- curvas y tiempos (emil-design-eng) --- */
  --lrm-ease-out: cubic-bezier(.23, 1, .32, 1);
  --lrm-ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --lrm-fast: 140ms;
  --lrm-base: 200ms;

  --lrm-logo-blend: multiply;

  color-scheme: light;
}

html[data-lrm].dark {
  --lrm-page: #0A0C0A;
  --lrm-surface: #121512;
  --lrm-surface-2: #171C16;
  --lrm-surface-3: #1E241C;

  --lrm-ink: #F1F4E9;
  --lrm-ink-2: #C9D1BF;
  --lrm-muted: #8D9884;
  --lrm-faint: #6E7867;

  --lrm-line: #242B21;
  --lrm-line-strong: #333C2E;

  --lrm-brand: #CFE22E;
  --lrm-brand-ink: #DFF238;
  --lrm-brand-on: #0A0C0A;
  --lrm-brand-soft: rgba(207, 226, 46, .13);
  --lrm-brand-soft-ink: #DFF238;
  --lrm-leaf: #CFE22E;

  --lrm-ok: #9BD36B;
  --lrm-ok-soft: rgba(155, 211, 107, .14);
  --lrm-warn: #E3B341;
  --lrm-warn-soft: rgba(227, 179, 65, .14);
  --lrm-danger: #F0705F;
  --lrm-danger-soft: rgba(240, 112, 95, .14);

  --lrm-shadow-sm: 0 1px 2px rgba(0, 0, 0, .55);
  --lrm-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 8px 20px -8px rgba(0, 0, 0, .7);
  --lrm-shadow-lg: 0 2px 8px rgba(0, 0, 0, .6), 0 24px 48px -20px rgba(0, 0, 0, .8);
  --lrm-ring: 0 0 0 3px rgba(207, 226, 46, .28);

  --lrm-logo-blend: screen;

  color-scheme: dark;
}

/* ---------- base ---------- */
html[data-lrm],
html[data-lrm] body {
  background-color: var(--lrm-page);
  color: var(--lrm-ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* El cambio de tema es un cambio de color, no de posición: transición corta y
   solo sobre color/fondo/borde. Nada de `transition: all`. */
html[data-lrm] body * {
  transition-property: background-color, border-color, color, fill, stroke, box-shadow;
  transition-duration: var(--lrm-base);
  transition-timing-function: var(--lrm-ease-out);
}
html[data-lrm].lrm-no-transition body * {
  transition-duration: 0ms !important;
}

/* ---------- mapeo de las utilidades que usan las maquetas ---------- */

/* fondos */
html[data-lrm] .bg-white,
html[data-lrm] .bg-ms-cream,
html[data-lrm] .bg-cream { background-color: var(--lrm-surface); }
html[data-lrm] .bg-slate-50,
html[data-lrm] .bg-gray-50,
html[data-lrm] .bg-cream-dark { background-color: var(--lrm-surface-2); }
html[data-lrm] .bg-slate-100,
html[data-lrm] .bg-gray-100 { background-color: var(--lrm-surface-3); }
html[data-lrm] .bg-slate-200 { background-color: var(--lrm-line-strong); }
html[data-lrm] .bg-slate-800,
html[data-lrm] .bg-slate-900,
html[data-lrm] .bg-navy,
html[data-lrm] .bg-ms-navy { background-color: var(--lrm-ink); color: var(--lrm-surface); }

/* marca */
html[data-lrm] .bg-teal-700,
html[data-lrm] .bg-primary,
html[data-lrm] .bg-cobalt,
html[data-lrm] .bg-ms-cobalt,
html[data-lrm] .bg-ms-green-sober { background-color: var(--lrm-brand); color: var(--lrm-brand-on); }
html[data-lrm] .bg-teal-50,
html[data-lrm] .bg-emerald-50,
html[data-lrm] .bg-cobalt\/10,
html[data-lrm] .bg-primary\/10 { background-color: var(--lrm-brand-soft); }
html[data-lrm] .bg-emerald-500,
html[data-lrm] .bg-green-500,
html[data-lrm] .bg-ms-gold,
html[data-lrm] .bg-gold { background-color: var(--lrm-brand); color: var(--lrm-brand-on); }

/* semáforo */
html[data-lrm] .bg-amber-50,
html[data-lrm] .bg-yellow-50,
html[data-lrm] .bg-\[\#FCEFD5\] { background-color: var(--lrm-warn-soft); }
html[data-lrm] .bg-red-50,
html[data-lrm] .bg-rose-50 { background-color: var(--lrm-danger-soft); }
html[data-lrm] .bg-red-500,
html[data-lrm] .bg-ms-destructive { background-color: var(--lrm-danger); color: #fff; }

/* texto */
html[data-lrm] .text-slate-900,
html[data-lrm] .text-gray-900,
html[data-lrm] .text-navy,
html[data-lrm] .text-ms-navy,
html[data-lrm] .text-text-primary,
html[data-lrm] .text-\[\#1E3A5F\] { color: var(--lrm-ink); }
html[data-lrm] .text-slate-700,
html[data-lrm] .text-slate-600,
html[data-lrm] .text-gray-700,
html[data-lrm] .text-gray-600 { color: var(--lrm-ink-2); }
html[data-lrm] .text-slate-500,
html[data-lrm] .text-gray-500,
html[data-lrm] .text-muted,
html[data-lrm] .text-text-muted,
html[data-lrm] .text-ms-text-muted,
html[data-lrm] .text-\[\#6B7280\] { color: var(--lrm-muted); }
html[data-lrm] .text-slate-400,
html[data-lrm] .text-slate-300,
html[data-lrm] .text-gray-400 { color: var(--lrm-faint); }
html[data-lrm] .text-teal-700,
html[data-lrm] .text-primary,
html[data-lrm] .text-cobalt,
html[data-lrm] .text-court-green-sober,
html[data-lrm] .text-emerald-700,
html[data-lrm] .text-emerald-600,
html[data-lrm] .text-gold,
html[data-lrm] .text-\[\#86640B\] { color: var(--lrm-brand-soft-ink); }
html[data-lrm] .text-red-600,
html[data-lrm] .text-red-500,
html[data-lrm] .text-rose-600,
html[data-lrm] .text-ms-destructive { color: var(--lrm-danger); }
html[data-lrm] .text-amber-600,
html[data-lrm] .text-orange-600,
html[data-lrm] .text-amber-700 { color: var(--lrm-warn); }
/* .text-white solo se reinterpreta cuando va sobre superficie, no sobre marca */
html[data-lrm].dark .text-white:not([class*="bg-"]) { color: var(--lrm-ink); }

/* bordes */
html[data-lrm] .border-slate-100,
html[data-lrm] .border-slate-200,
html[data-lrm] .border-gray-100,
html[data-lrm] .border-gray-200,
html[data-lrm] .border-border-default,
html[data-lrm] .border-ms-border,
html[data-lrm] .border-cream-dark { border-color: var(--lrm-line); }
html[data-lrm] .border-slate-300,
html[data-lrm] .border-ms-navy,
html[data-lrm] .border-navy { border-color: var(--lrm-line-strong); }
html[data-lrm] .border-teal-700,
html[data-lrm] .border-primary,
html[data-lrm] .border-gold,
html[data-lrm] .border-cobalt { border-color: var(--lrm-brand); }

/* divisores de tabla */
html[data-lrm] .divide-slate-100 > * + *,
html[data-lrm] .divide-slate-200 > * + * { border-color: var(--lrm-line); }

/* sombras: difusas, sin borde duro */
html[data-lrm] .shadow-sm { box-shadow: var(--lrm-shadow-sm); }
html[data-lrm] .shadow,
html[data-lrm] .shadow-md { box-shadow: var(--lrm-shadow); }
html[data-lrm] .shadow-lg,
html[data-lrm] .shadow-xl { box-shadow: var(--lrm-shadow-lg); }

/* ---------- piezas de marca ---------- */

/* Logo: los PNG llevan fondo sólido. `multiply` borra el blanco en día y
   `screen` borra el negro en noche, así se posa sobre cualquier superficie. */
.lrm-logo {
  display: block;
  mix-blend-mode: var(--lrm-logo-blend);
  user-select: none;
  -webkit-user-drag: none;
}

.lrm-brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-width: 0;
}
.lrm-brand__mark { height: 2.25rem; width: auto; flex: none; }
/* Las dos versiones del lockup no tienen la misma proporción (la de noche
   lleva la orla), así que se encajan en la MISMA caja y se centran a la
   izquierda: cambiar de tema no mueve nada de sitio. */
.lrm-brand__lockup {
  height: 2.75rem;
  width: 10.5rem;
  max-width: 100%;
  flex: none;
  object-fit: contain;
  object-position: left center;
}

/* Interruptor día/noche */
.lrm-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  width: 2.25rem;
  flex: none;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--lrm-muted);
  cursor: pointer;
  transition: transform var(--lrm-fast) var(--lrm-ease-out),
              background-color var(--lrm-base) var(--lrm-ease-out),
              color var(--lrm-base) var(--lrm-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .lrm-toggle:hover { background-color: var(--lrm-surface-3); color: var(--lrm-ink); }
}
.lrm-toggle:active { transform: scale(.94); }
.lrm-toggle:focus-visible { outline: none; box-shadow: var(--lrm-ring); }

/* Los dos iconos viven a la vez y se cruzan: sol gira y sale, luna entra.
   Nada aparece desde scale(0). */
.lrm-toggle__icon {
  position: absolute;
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  transition: transform 260ms var(--lrm-ease-out), opacity 180ms var(--lrm-ease-out);
}
.lrm-toggle__icon--sun { opacity: 1; transform: rotate(0deg) scale(1); }
.lrm-toggle__icon--moon { opacity: 0; transform: rotate(-70deg) scale(.7); }
html.dark .lrm-toggle__icon--sun { opacity: 0; transform: rotate(70deg) scale(.7); }
html.dark .lrm-toggle__icon--moon { opacity: 1; transform: rotate(0deg) scale(1); }

/* ---------- pulido general ---------- */

/* Todo lo pulsable responde al dedo */
html[data-lrm] button,
html[data-lrm] [role="button"],
html[data-lrm] a.btn,
html[data-lrm] .cursor-pointer {
  transition: transform var(--lrm-fast) var(--lrm-ease-out),
              background-color var(--lrm-base) var(--lrm-ease-out),
              color var(--lrm-base) var(--lrm-ease-out),
              box-shadow var(--lrm-base) var(--lrm-ease-out);
}
html[data-lrm] button:active,
html[data-lrm] [role="button"]:active { transform: scale(.97); }

html[data-lrm] :focus-visible { outline: none; box-shadow: var(--lrm-ring); border-radius: .5rem; }

/* Filas de tabla: el hover solo en puntero fino */
@media (hover: hover) and (pointer: fine) {
  html[data-lrm] tbody tr:hover { background-color: var(--lrm-surface-2); }
}

/* Cifras y horas alineadas: tabular para que no bailen al cambiar */
html[data-lrm] .font-mono,
html[data-lrm] .tabular-nums,
html[data-lrm] .lrm-num { font-variant-numeric: tabular-nums; }

/* Entrada escalonada de las tarjetas y filas, solo al cargar */
@keyframes lrm-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
html[data-lrm] .lrm-stagger > * {
  animation: lrm-rise 320ms var(--lrm-ease-out) both;
}
html[data-lrm] .lrm-stagger > *:nth-child(1) { animation-delay: 0ms; }
html[data-lrm] .lrm-stagger > *:nth-child(2) { animation-delay: 45ms; }
html[data-lrm] .lrm-stagger > *:nth-child(3) { animation-delay: 90ms; }
html[data-lrm] .lrm-stagger > *:nth-child(4) { animation-delay: 135ms; }
html[data-lrm] .lrm-stagger > *:nth-child(5) { animation-delay: 180ms; }
html[data-lrm] .lrm-stagger > *:nth-child(n+6) { animation-delay: 210ms; }

/* Importes largos: que no se parta el símbolo del número */
html[data-lrm] .lrm-amount { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* En móvil, nada de scroll horizontal de página */
@media (max-width: 767px) {
  html[data-lrm] body { overflow-x: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-lrm] .lrm-stagger > * { animation: none; }
  html[data-lrm] .lrm-toggle__icon { transition-property: opacity; }
  html[data-lrm] button:active,
  html[data-lrm] [role="button"]:active { transform: none; }
}

/* ---------- hex sueltos que quedaron escritos a mano en las maquetas ---------- */
html[data-lrm] .bg-\[\#1E3A5F\],
html[data-lrm] .bg-\[\#152B47\] { background-color: var(--lrm-ink); }
html[data-lrm] .bg-\[\#F5F2EC\] { background-color: var(--lrm-surface-2); }
html[data-lrm] .bg-\[\#E8F5E2\] { background-color: var(--lrm-ok-soft); }
html[data-lrm] .bg-\[\#F8E0E0\] { background-color: var(--lrm-danger-soft); }
html[data-lrm] .bg-\[\#C9A961\],
html[data-lrm] .bg-\[\#D9A85B\],
html[data-lrm] .bg-\[\#A88F45\],
html[data-lrm] .bg-\[\#176FA0\] { background-color: var(--lrm-brand); color: var(--lrm-brand-on); }
html[data-lrm] .border-\[\#E2DDD3\] { border-color: var(--lrm-line); }
html[data-lrm] .border-\[\#C9A961\] { border-color: var(--lrm-brand); }
html[data-lrm] .text-\[\#C9A961\],
html[data-lrm] .text-\[\#1D8BC8\],
html[data-lrm] .text-\[\#1F5B36\] { color: var(--lrm-brand-soft-ink); }
html[data-lrm] .text-\[\#8C2A2A\] { color: var(--lrm-danger); }

/* Sobre superficie oscura de marca (sidebars navy), el texto blanco se queda. */
html[data-lrm] .bg-\[\#1E3A5F\] .text-white,
html[data-lrm] .bg-\[\#152B47\] .text-white,
html[data-lrm] .bg-ms-navy .text-white { color: #FFFFFF; }
html[data-lrm].dark .bg-\[\#1E3A5F\],
html[data-lrm].dark .bg-\[\#152B47\],
html[data-lrm].dark .bg-ms-navy,
html[data-lrm].dark .bg-navy { background-color: var(--lrm-surface-2); }

/* Cifras grandes de KPI: nunca parten el símbolo del número */
html[data-lrm] .text-4xl,
html[data-lrm] .text-3xl { white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
@media (max-width: 1360px) {
  html[data-lrm] .text-4xl { font-size: 1.875rem; line-height: 2.25rem; }
}
@media (max-width: 420px) {
  html[data-lrm] .text-4xl { font-size: 1.75rem; line-height: 2.125rem; }
}

/* ---------- variantes con opacidad (cabeceras pegajosas, raíles, zonas) ---------- */
html[data-lrm] {
  --lrm-surface-veil: rgba(255, 255, 255, .82);
  --lrm-surface-2-veil: rgba(239, 244, 241, .72);
}
html[data-lrm].dark {
  --lrm-surface-veil: rgba(18, 21, 18, .82);
  --lrm-surface-2-veil: rgba(23, 28, 22, .72);
}
html[data-lrm] .bg-white\/80,
html[data-lrm] .bg-white\/70,
html[data-lrm] .bg-white\/90,
html[data-lrm] .bg-white\/50 { background-color: var(--lrm-surface-veil); }
html[data-lrm] .bg-slate-50\/50,
html[data-lrm] .bg-cream\/50,
html[data-lrm] .bg-cream\/30,
html[data-lrm] .bg-cream\/20,
html[data-lrm] .bg-teal-50\/50 { background-color: var(--lrm-surface-2-veil); }
html[data-lrm] .bg-surface { background-color: var(--lrm-surface); }
html[data-lrm] .bg-ms-border { background-color: var(--lrm-line); }
html[data-lrm] .bg-green-50 { background-color: var(--lrm-ok-soft); }
html[data-lrm] .bg-\[\#C9A961\]\/10,
html[data-lrm] .bg-gold\/10,
html[data-lrm] .bg-court-green-vibrant\/5 { background-color: var(--lrm-brand-soft); }

/* ---------- index.html trae su propio juego de variables: se reengancha ---------- */
html[data-lrm] {
  --bg-base: var(--lrm-surface-2);
  --bg-surface: var(--lrm-surface);
  --primary-navy: var(--lrm-ink);
  --primary-cobalt: var(--lrm-brand);
  --accent-gold: var(--lrm-brand);
  --accent-gold-light: var(--lrm-brand-soft);
  --court-vibrant: var(--lrm-leaf);
  --court-sober: var(--lrm-ok);
  --status-error: var(--lrm-danger);
  --status-warning: var(--lrm-warn);
  --text-primary: var(--lrm-ink);
  --text-muted: var(--lrm-muted);
  --border-default: var(--lrm-line);
}
html[data-lrm] body,
html[data-lrm] .viewport-wrapper,
html[data-lrm] .spec-section,
html[data-lrm] .tabs,
html[data-lrm] .viewer-meta,
html[data-lrm] .app-header { background-color: var(--lrm-surface); color: var(--lrm-ink); }
html[data-lrm] .viewport-wrapper { background-color: var(--lrm-surface-2); }
html[data-lrm] .btn.primary,
html[data-lrm] .btn.active,
html[data-lrm] .btn.gold { background: var(--lrm-brand); color: var(--lrm-brand-on); border-color: var(--lrm-brand); }
html[data-lrm] .btn { color: var(--lrm-ink-2); border-color: var(--lrm-line); background: var(--lrm-surface); }
html[data-lrm] .tab.active { color: var(--lrm-ink); }
/* El iframe del índice es otro documento: hereda el tema por su propio script */
html[data-lrm] iframe { color-scheme: normal; background: var(--lrm-surface); }

/* Tarjetas y botones de marca en tono profundo */
html[data-lrm] { --lrm-brand-deep: #0E4A43; }
html[data-lrm].dark { --lrm-brand-deep: var(--lrm-surface-3); }
html[data-lrm] .bg-teal-900,
html[data-lrm] .bg-teal-800 { background-color: var(--lrm-brand-deep); }
html[data-lrm].dark .bg-teal-900 { box-shadow: inset 3px 0 0 var(--lrm-brand); }
html[data-lrm] .hover\:bg-teal-800:hover,
html[data-lrm] .hover\:bg-primary\/90:hover { background-color: var(--lrm-brand-ink); }
html[data-lrm] .hover\:text-teal-800:hover { color: var(--lrm-brand-ink); }

/* ---------- barras de gráfico ---------- */
/* Las maquetas pintaban las barras con bg-slate-100: sobre blanco casi no se
   ven. Pasan a tinte de marca, y la barra apuntada se refuerza. */
html[data-lrm] { --lrm-chart-bar: #BCD8D2; --lrm-chart-bar-hover: #8FBFB6; }
html[data-lrm].dark { --lrm-chart-bar: rgba(207, 226, 46, .30); --lrm-chart-bar-hover: rgba(207, 226, 46, .55); }
html[data-lrm] [class*="rounded-t"][class*="bg-slate-100"],
html[data-lrm] [class*="rounded-t"][class*="bg-slate-200"],
html[data-lrm] [class*="rounded-t"][class*="bg-cream-dark"] { background-color: var(--lrm-chart-bar); }
@media (hover: hover) and (pointer: fine) {
  html[data-lrm] [class*="rounded-t"][class*="bg-slate-100"]:hover,
  html[data-lrm] [class*="rounded-t"][class*="bg-slate-200"]:hover { background-color: var(--lrm-chart-bar-hover); }
}
/* El tooltip de la barra sí es superficie invertida */
html[data-lrm] .bg-slate-900.text-white { background-color: var(--lrm-ink); color: var(--lrm-page); }