/* ============================================
   Design Tokens — Cervecería Jardín ERP
   Estilo: "Futurismo orgánico". El alma sigue siendo el jardín (verde pino)
   y la madera/malta (ámbar), pero la ejecución es futurista-minimalista:
   más contraste, profundidad sutil, superficies glass y un glow de acento.
   Base "Soft UI Evolution" (ui-ux-pro-max): depth sutil, sombras mejoradas,
   WCAG AA+. Dark mode es protagonista, no una idea tardía.

   Los colores son variables CSS: el dark mode se activa con
   <html data-theme="dark"> sin tocar cada elemento. Tailwind (base.html)
   referencia estas variables.
   ============================================ */

:root {
  /* Marca — verde pino + ámbar malta */
  --color-primary: #1F4A38;          /* pino profundo, más sofisticado */
  --color-primary-light: #4E8C6A;    /* verde vivo para acentos/glow */
  --color-on-primary: #F4F8F4;
  --color-accent-wood: #C6863C;      /* ámbar malta (cerveza + madera) */
  --color-accent-wood-dark: #8A5A28;

  /* Superficies — papel cálido, crisp */
  --color-background: #F6F4EF;
  --color-surface: #FFFFFF;
  --color-surface-2: #EEEBE2;        /* headers de tabla, zonas sutiles */
  --color-surface-glass: rgba(255, 255, 255, 0.72);

  /* Texto */
  --color-text-primary: #15201A;
  --color-text-secondary: #5E6862;

  /* Líneas + semánticos */
  --color-border: #E2DDD2;
  --color-border-strong: #CFC9BC;
  --color-success: #2F7A4C;
  --color-warning: #C48A2E;
  --color-error: #B3452C;

  /* ── Paleta categórica de gráficos (skill `dataviz`) ───────────────
     Tres tonos para series que son IDENTIDAD (unidad de negocio, tipo de
     cerveza), asignados en orden fijo y nunca ciclados. Validados con
     `scripts/validate_palette.js` contra la superficie de tarjeta (#FFFFFF,
     que es donde viven los gráficos) con `--pairs all`: banda de luminosidad,
     piso de croma, separación CVD ΔE 14.4, visión normal 15.7 y contraste
     ≥ 3:1 — los seis checks en verde.

     ⚠️ NO usar los tokens semánticos (`--color-warning`, `--color-success`)
     como color de serie: están reservados para estado. Antes la dona de
     egresos usaba `--color-warning` de slot 4, y está a **ΔE 1.8** de
     `--color-accent-wood` — indistinguibles incluso con visión normal.
     ⚠️ Tampoco inventar un slot 4: se dobla la cola en "Otros" o se factea. */
  --chart-1: #00633D;   /* pino     — deriva de --color-primary */
  --chart-2: #C6853A;   /* ámbar    — deriva de --color-accent-wood */
  --chart-3: #2C6F9E;   /* pizarra  — frío, para separar del par cálido */

  /* Tipografía — Space Grotesk (display, techy pero limpio) + Inter (texto) */
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* Formas — radios más suaves = más moderno */
  --radius-card: 20px;
  --radius-button: 10px;
  --radius-pill: 999px;

  /* Elevación + glow */
  --shadow-soft: 0 6px 24px rgba(21, 32, 26, 0.07);
  --shadow-lift: 0 16px 40px -12px rgba(21, 32, 26, 0.18);
  --shadow-glow: 0 0 0 1px color-mix(in srgb, var(--color-primary-light) 30%, transparent),
                 0 12px 32px -10px color-mix(in srgb, var(--color-primary-light) 45%, transparent);

  --transition-base: 200ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Malla de fondo del hero (glow orgánico, muy sutil) */
  --mesh-a: color-mix(in srgb, var(--color-primary-light) 22%, transparent);
  --mesh-b: color-mix(in srgb, var(--color-accent-wood) 16%, transparent);
}

[data-theme="dark"] {
  --color-primary: #4E8C6A;          /* en dark el verde sube de tono (WCAG) */
  --color-primary-light: #6FB78C;
  --color-on-primary: #0C120F;
  --color-accent-wood: #D69A55;
  --color-accent-wood-dark: #B87C39;

  --color-background: #0E1311;        /* bosque casi-negro */
  --color-surface: #161D19;
  --color-surface-2: #1E2823;
  --color-surface-glass: rgba(22, 29, 25, 0.66);

  --color-text-primary: #ECF1EC;
  --color-text-secondary: #93A099;

  --color-border: #2A342E;
  --color-border-strong: #3A473F;

  /* El dark mode NO es un volteo automático del claro: son sus propios pasos,
     revalidados contra la superficie oscura (#161D19). Separación CVD ΔE 8.1
     (target), visión normal 16.0, contraste ≥ 3:1. */
  --chart-1: #408E65;
  --chart-2: #C78300;
  --chart-3: #5E97CD;

  --shadow-soft: 0 6px 24px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 18px 44px -12px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 1px color-mix(in srgb, var(--color-primary-light) 40%, transparent),
                 0 14px 36px -10px color-mix(in srgb, var(--color-primary-light) 30%, transparent);

  --mesh-a: color-mix(in srgb, var(--color-primary-light) 26%, transparent);
  --mesh-b: color-mix(in srgb, var(--color-accent-wood) 18%, transparent);
}

body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Estado activo del menú: primaryLight sutil (color-mix respeta dark mode). */
.nav-active {
  background-color: color-mix(in srgb, var(--color-primary-light) 15%, transparent);
  color: var(--color-primary);
}
[data-theme="dark"] .nav-active { color: var(--color-primary-light); }

/* Veta de madera muy sutil (signature) en el header del sidebar. */
.wood-grain {
  background-image: repeating-linear-gradient(
    92deg,
    color-mix(in srgb, var(--color-accent-wood) 7%, transparent) 0 1px,
    transparent 1px 7px
  );
}

/* ── Utilidades del lenguaje "futurismo orgánico" ─────────────────── */

/* Malla de glow orgánico para el hero de bienvenida. */
.mesh-bg {
  position: relative;
  isolation: isolate;
}
.mesh-bg::before {
  content: "";
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 130%;
  z-index: -1;
  background:
    radial-gradient(42% 55% at 18% 18%, var(--mesh-a) 0%, transparent 60%),
    radial-gradient(38% 50% at 88% 12%, var(--mesh-b) 0%, transparent 62%),
    radial-gradient(46% 60% at 70% 92%, var(--mesh-a) 0%, transparent 64%);
  filter: blur(8px);
  opacity: 0.9;
  animation: mesh-drift 22s ease-in-out infinite alternate;
}
@keyframes mesh-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -2%, 0) scale(1.06); }
}

/* Superficie glass con borde fino (tarjetas de módulo). */
.glass-card {
  background-color: var(--color-surface-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base);
}
.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--color-primary-light) 45%, var(--color-border));
}
.glass-card:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow);
}

/* Halo de icono para las tarjetas. */
.icon-halo {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--color-primary-light) 22%, transparent),
    color-mix(in srgb, var(--color-accent-wood) 16%, transparent)
  );
  color: var(--color-primary);
}
[data-theme="dark"] .icon-halo { color: var(--color-primary-light); }

/* Scroll propio del menú lateral: discreto y solo visible al pasar el mouse,
   para que la barra no compita visualmente con los iconos de navegación. */
.sidebar-scroll { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.sidebar-scroll:hover { scrollbar-color: var(--color-border) transparent; }
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.sidebar-scroll:hover::-webkit-scrollbar-thumb { background: var(--color-border); }

/* Chip/pill sutil para métricas y estados. */
.chip {
  border: 1px solid var(--color-border);
  background-color: color-mix(in srgb, var(--color-surface-2) 60%, transparent);
  border-radius: var(--radius-pill);
}

/* ── Marca en pantallas públicas (login "La puerta del jardín") ────── */

/* El logo es negro puro; en dark mode se invierte a crema (sin asset nuevo).
   Se usa en el sello, el watermark y el logo del sidebar. */
[data-theme="dark"] .logo-invert-dark { filter: invert(1) sepia(0.12); }

/* Sello del logo con halo de glow + flotación sutil (protagonismo de marca). */
.brand-seal { position: relative; }
.brand-seal::before {
  content: ""; position: absolute; inset: -18%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb, var(--color-primary-light) 26%, transparent) 0%, transparent 70%);
  filter: blur(6px);
}
.brand-seal img {
  width: clamp(150px, 22vw, 240px); height: auto; display: block;
  animation: seal-float 7s ease-in-out infinite;
}
@keyframes seal-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Sello gigante de fondo (watermark). */
.brand-watermark {
  position: absolute; z-index: -1; width: min(78vh, 700px); opacity: 0.05;
  left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg);
  pointer-events: none; user-select: none;
}
[data-theme="dark"] .brand-watermark { opacity: 0.06; }

/* Burbujas de cerveza subiendo (signature) — solo transform/opacity. */
.beer-bubbles { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.beer-bubbles span {
  position: absolute; bottom: -4rem; border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent-wood) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent-wood) 30%, transparent);
  animation: bubble-rise linear infinite;
}
.beer-bubbles span:nth-child(odd) {
  background: color-mix(in srgb, var(--color-primary-light) 18%, transparent);
  border-color: color-mix(in srgb, var(--color-primary-light) 26%, transparent);
}
.beer-bubbles span:nth-child(1)  { left: 8%;  width: 14px; height: 14px; animation-duration: 15s; }
.beer-bubbles span:nth-child(2)  { left: 18%; width: 8px;  height: 8px;  animation-duration: 11s; animation-delay: 2s; }
.beer-bubbles span:nth-child(3)  { left: 29%; width: 18px; height: 18px; animation-duration: 19s; animation-delay: 5s; }
.beer-bubbles span:nth-child(4)  { left: 41%; width: 6px;  height: 6px;  animation-duration: 10s; animation-delay: 1s; }
.beer-bubbles span:nth-child(5)  { left: 52%; width: 12px; height: 12px; animation-duration: 16s; animation-delay: 7s; }
.beer-bubbles span:nth-child(6)  { left: 63%; width: 9px;  height: 9px;  animation-duration: 12s; animation-delay: 3s; }
.beer-bubbles span:nth-child(7)  { left: 74%; width: 16px; height: 16px; animation-duration: 20s; animation-delay: 8s; }
.beer-bubbles span:nth-child(8)  { left: 84%; width: 7px;  height: 7px;  animation-duration: 11s; animation-delay: 4s; }
.beer-bubbles span:nth-child(9)  { left: 92%; width: 11px; height: 11px; animation-duration: 17s; animation-delay: 6s; }
.beer-bubbles span:nth-child(10) { left: 36%; width: 10px; height: 10px; animation-duration: 14s; animation-delay: 9s; }
@keyframes bubble-rise {
  0%   { transform: translateY(0) translateX(0);          opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 0.85; }
  100% { transform: translateY(-108vh) translateX(1.5rem); opacity: 0; }
}

/* Rotador "¿Sabías que…?": crossfade del texto del dato curioso. */
.fact-text { transition: opacity 300ms ease; }
.fact-text.is-fading { opacity: 0; }
.fact-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-border); transition: background 300ms; }
.fact-dot.is-on { background: var(--color-accent-wood); }

/* Respeto a prefers-reduced-motion: nada de deriva ni lifts animados. */
@media (prefers-reduced-motion: reduce) {
  .mesh-bg::before { animation: none; }
  .glass-card { transition: box-shadow 1ms linear; }
  .glass-card:hover { transform: none; }
  .brand-seal img, .beer-bubbles span { animation: none; }
  .fact-text { transition: none; }
}