/* Sistema de tokens de diseño — Panel admin Vannier Prospectos
   Rediseño "Brix": lienzo lavanda-gris, primario índigo con degradé, todo
   redondeado, mucho aire, tipografía Poppins. Los nombres --color-* / --radius-*
   / --space-* / --shadow-* se conservan como contrato estable para el resto de
   las páginas; acá se afinan sus valores. */

:root {
  /* ── Marca — un solo azul de acento moderno para TODO el panel ──
     Botones primarios, avatar, ítem activo del sidebar (texto + ícono),
     badges/íconos de check de las KPI, barra destacada de los gráficos,
     card hero "Total productos". Todo referencia estos tokens, sin hex
     propios. El azul institucional viejo (#0066B3) quedó retirado del
     panel; la página pública del paciente (public/styles/prospecto.css)
     mantiene su propio sistema --brand aparte. */
  --color-primary:        #2E7FE8;   /* Acción primaria, nav activo, acento del sistema */
  --color-primary-light:  #4A9BF5;   /* Extremo claro del degradé / hover */
  --color-primary-strong: #1E67CE;   /* :active, hover del botón primario, texto/borde de alto énfasis */
  --color-primary-bg:     #E8F1FE;   /* Fondo suave de ítems activos / hover de nav */
  --color-primary-border: rgba(46, 127, 232, 0.22);

  /* Degradé de acción — mismo azul de acento (--color-primary) en los dos
     extremos, apenas aclarado hacia el final (color-mix, no un segundo
     azul distinto): nada de saltos de tono duros. */
  --gradient-primary:       linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 82%, white) 100%);
  --gradient-primary-hover: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 96%, white) 0%, color-mix(in srgb, var(--color-primary) 76%, white) 100%);
  /* Degradé diagonal de la card KPI destacada del dashboard — derivado del
     mismo --color-primary, extremo más claro para el efecto "premium". */
  --gradient-kpi-hero:      linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  /* Velo "liquid glass" que se superpone al degradé para dar volumen */
  --glass-sheen: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,0.06) 100%);

  /* Ítems de nav — activo: ícono/texto en el color de acento sólido (único
     elemento azul del sidebar), sin pastilla ni contenedor. Inactivo:
     ícono liso (sin fondo propio) en gris neutro puro — nada de azul. */
  --color-nav-icon-muted:   #A3A6B5;
  --color-nav-text-muted:   #8A8DA0;

  /* Acento secundario — coral. Uso escaso: links de acción, highlights puntuales. */
  --color-accent:        #FB6F43;
  --color-accent-strong: #D6521F;
  --color-accent-bg:     #FDE7DE;

  /* ── Neutrales — escalera de superficie (gris azulado, coherente con el azul) ── */
  /* Estructura de 3 capas del shell del panel (ver layout.css):
     Capa 1 — ventana: --color-bg-page. Gris bien visible (no casi-blanco):
     es el margen de 24px que tiene que notarse alrededor de la Capa 2.
     Capa 2 — marco general (sidebar + fondo del panel): --color-bg-sidebar,
     blanco puro — el mismo blanco de fábrica del PNG del logo, para que no
     se note ninguna costura cuadrada detrás del logo.
     Capa 3 — panel de contenido: --color-bg-panel, un gris marcado, un
     escalón más oscuro que la Capa 2.
     Las cards (KPIs, paneles) van encima de la Capa 3 en --color-bg-surface
     (blanco puro también). */
  --color-bg-page:        #DBDDE4;   /* Capa 1 — ventana (fallback si --app-shell-bg-image no carga) */
  /* Fondo de la Capa 1 — imagen decorativa (esferas translúcidas) detrás
     del marco del panel. --app-shell-bg-color es el respaldo mientras
     carga o si falla; solo en modo claro (ver override a "none" abajo,
     en el bloque de modo oscuro, donde no pega con el tema). */
  --app-shell-bg-image: url('/admin/assets/fondo_dashboard.webp');
  --app-shell-bg-color: #E8EDFA;
  --color-bg-panel:       #F6F8FE;   /* Capa 3 — panel de contenido */
  --color-bg-surface:     #FFFFFF;   /* Tarjetas, modal — blanco puro, sin imagen */
  /* Fondo de la Capa 3 — imagen clara detrás de las cards, en el panel
     de contenido (.main-content), NO en las cards en sí (que siguen
     siendo --color-bg-surface liso). --content-bg-color es el respaldo
     mientras carga o si falla; solo en modo claro (ver override a
     "none" abajo). */
  --content-bg-image: url('/admin/assets/capa3_fondo_limpio.webp');
  --content-bg-color: #FBFCFF;
  --color-bg-sidebar:     #FFFFFF;   /* Capa 2 — marco general (sidebar + fondo del panel), fallback si --panel-frame-bg-image no carga */
  /* Fondo de la Capa 2 — vidrio esmerilado degradé, detrás de sidebar +
     panel de contenido. --panel-frame-bg-color es el respaldo mientras
     carga o si falla; solo en modo claro (ver override a "none" abajo,
     en el bloque de modo oscuro). */
  --panel-frame-bg-image: url('/admin/assets/panel_marco_intermedio_fondo_vidrio_2880_FINAL.webp');
  --panel-frame-bg-color: #EAF1FB;
  --color-bg-input:       #E6E9EF;   /* Inputs y filas en hover — más oscuro que la superficie */
  --color-border:         #CFD5DF;   /* Bordes de contenedor */
  --color-border-light:   #E2E5EC;   /* Separadores entre filas */

  /* ── Texto — escalera de tinta (casi neutra, leve frío) ────────── */
  --color-text-heading:   #14161B;   /* H1 y títulos de sección */
  --color-text-primary:   #262931;   /* Nombre de producto, títulos, valores */
  --color-text-secondary: #4A4F59;   /* Área terapéutica, fechas, labels */
  --color-text-muted:     #6B7280;   /* Encabezados de columna, hints, "sin cargar" */

  /* ── Semánticos ──────────────────────────────────────────────── */
  --color-success:        #17A34A;
  --color-success-strong: #147A3B;
  --color-success-bg:     #DEF3E4;
  --color-success-border: rgba(20, 122, 59, 0.26);

  --color-warning:        #E08528;
  --color-warning-strong: #8A5214;
  --color-warning-bg:     #FBEEDD;
  --color-warning-border: rgba(138, 82, 20, 0.24);

  --color-info:           var(--color-primary);
  --color-info-strong:    var(--color-primary-strong);
  --color-info-bg:        var(--color-primary-bg);
  --color-info-border:    var(--color-primary-border);

  --color-danger:         #E0483C;
  --color-danger-strong:  #B42318;
  --color-danger-bg:      #FBE7E5;
  --color-danger-border:  rgba(180, 35, 24, 0.22);

  /* Violeta — uso puntual: ícono de "actualización de documento" en el
     feed de Actividad reciente del dashboard. */
  --color-violet:         #7C5CFC;
  --color-violet-strong:  #5B3FD6;
  --color-violet-bg:      #EEE9FE;

  /* Rampa índigo para gráficos (completo → vacío) */
  --ramp-1: var(--color-primary);
  --ramp-2: #57A6D6;
  --ramp-3: #C4E1F3;
  --color-accent-light: #9FCEEA;

  /* Punto de luz para highlights sobre superficie: blanco en claro, una
     superficie más clara en oscuro (ver override en [data-theme='dark']). */
  --color-icon-highlight: #ffffff;
}

/* Tipografía — SF Pro (la de Apple) para todo: títulos grandes, medios,
   texto de tabla, todo. No se puede linkear como webfont (no es de
   distribución libre), así que se usa la pila de fuentes de sistema:
   en Mac/iOS -apple-system resuelve directo a San Francisco / SF Pro;
   en Windows/Linux cae a la fuente de sistema más parecida. */
:root {
  --font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', ui-sans-serif, system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* Se mantiene el nombre para no romper reglas existentes; ahora es la misma
     familia — la jerarquía la dan peso, tamaño y color, no una segunda voz. */
  --font-family-heading: var(--font-family);

  --text-xs:    11px;   /* Badges, encabezados de columna */
  --text-sm:    12.5px; /* Área terapéutica, timestamps, hints */
  --text-base:  14px;   /* Texto de tabla, inputs, nav */
  --text-md:    15px;   /* Nombre de producto, títulos de sección */
  --text-lg:    17px;   /* Títulos de panel genéricos */
  --text-xl:    22px;   /* Títulos de página / saludo */
  --text-2xl:   28px;   /* Valores destacados */
  --text-3xl:   32px;   /* Headlines de auth / KPI hero */
  --text-panel-title: 19px; /* Títulos de las cards de gráficos del dashboard */
  --text-donut-value: 40px; /* Número central de la dona */
  --text-donut-legend: var(--text-sm); /* Filas de la leyenda al lado del donut */
  --donut-legend-dot:  10px; /* Punto de color de cada fila de la leyenda */
  --donut-legend-gap:  var(--space-2); /* Separación entre filas de la leyenda */

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --leading-tight:  1.2;
  --leading-normal: 1.55;
}

/* Espaciado y radios */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Escala de radios — un solo criterio por rol, sin mezclar entre
     componentes del mismo nivel. */
  --radius-control:   10px;  /* Inputs, botones, badges, botones-ícono chicos */
  --radius-md:        16px;  /* Cards chicas/medianas */
  --radius-container: 20px;  /* Cards grandes, paneles */
  --radius-panel:      22px;  /* Capa 3 — panel de contenido */
  --radius-shell:     30px;  /* Capa 2 — marco general (sidebar + fondo del panel) */
  --radius-full:      999px; /* Pastillas de nav, tags, tooltips flotantes */

  /* Compatibilidad con nombres previos */
  --radius-sm:   10px;
  --radius-lg:   20px;
  --radius-xl:   24px;

  /* Gráficos del dashboard — grosores y aire consistentes en todo el
     sistema, no valores sueltos por gráfico. */
  --chart-donut-stroke:  28;    /* Grosor del anillo de la dona (unidades SVG, sin px) */
  --chart-bar-gap:       10px;  /* Aire entre barras del gráfico de columnas (juntas, no separadas) */
  --chart-panel-padding-x: var(--space-8); /* Aire perimetral de las cards de gráficos */

  /* ── Shell — marco alrededor del contenido ──────────────────────
     Antes: 3 insets de 24px anidados (app-shell + body-layout + margen del
     panel de contenido) = 72px de marco por lado. Se reducen para ganar
     área útil sin perder el efecto "pantalla dentro de pantalla". */
  --shell-inset:        16px;
  /* Margen entre la Capa 1 (fondo del sistema) y la Capa 2 (marco) —
     deliberadamente más grande que --shell-inset (que sigue rigiendo el
     padding INTERNO de la Capa 2 y su separación con la Capa 3) para que
     la Capa 1 se note como franja de fondo alrededor del marco, no como
     un borde fino casi imperceptible. */
  --shell-outer-inset:  36px;
  --content-pad-x:      var(--space-6);  /* aire lateral dentro del panel de contenido */
  --content-pad-top:    var(--space-4);

  /* ── Dashboard — proporciones y alturas de fila ────────────────
     Las cards de una misma fila se igualan por CSS (grid + stretch); estos
     valores son el piso de altura y el tamaño de los elementos ampliados. */
  --dash-gap:              var(--space-4);
  --dash-kpi-min-h:        128px;
  --dash-kpi-value-size:   38px;
  --dash-row-charts-min-h: 260px;
  --dash-row-panels-min-h: 180px;
  --dash-chart-col-h:      184px;   /* alto mínimo del área de barras */
  --dash-donut:            152px;   /* dona "Estado de documentos" */
  --dash-donut-sm:         104px;   /* dona "Avance de publicación" */
  --dash-bar-col-max:      148px;   /* tope alto: en la práctica las columnas llenan el ancho */
  --dash-donut-col:        480px;   /* ancho de la columna de la dona en la fila de gráficos */
  --dash-quick-icon:       30px;    /* ícono cuadrado de cada acceso rápido */
  --dash-quick-pad:        8px;     /* padding interno de cada card de acceso rápido */
  --dash-callout-pad:      10px;    /* padding del callout bajo "Avance de publicación" */
  --dash-callout-icon:     18px;    /* ícono del callout */
  --dash-callout-margin-b: var(--space-3);  /* separación del callout con el borde inferior de la card */
  --dash-card-pad-x:       var(--space-5);  /* padding lateral de KPIs y cards de panel */
  --dash-card-pad-y:       var(--space-4);  /* padding vertical de las KPIs / cabecera de panel */
  --dash-donut-value-lg:   28px;  /* número central — dona "Estado de documentos" */
  --dash-donut-value-sm:   20px;  /* número central — dona chica "Avance de publicación" */

  /* Topbar — ancho del buscador global y separación entre sus acciones.
     En desktop grande sobra lugar; en notebook (ver breakpoints abajo)
     se achican para que buscador + íconos + CTA + usuario entren en una
     sola fila y no empujen "Panel general" a una segunda línea (eso era
     lo que le robaba ~60px de alto útil a la última fila del dashboard). */
  --topbar-search-basis:   360px;
  --topbar-search-min-w:   160px;
  --topbar-actions-gap:    var(--space-6);

  /* Elevación — sombras difusas y sutiles, sin bordes duros ni alta
     opacidad: dos niveles nada más (estándar / elevada). */
  --shadow-control:  none;
  --shadow-card:     0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-raised:   0 16px 40px rgba(0, 0, 0, 0.10);
  --shadow-nav:      1px 0 0 var(--color-border);
  --shadow-dropdown: var(--shadow-raised);
  --shadow-float:    0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-float-lg: 0 16px 40px rgba(0, 0, 0, 0.10);
  /* Separa la sidebar del lienzo sin usar un borde duro */
  --shadow-sidebar:  4px 0px 16px rgba(0, 0, 0, 0.04);
  /* Halo en los bordes del marco (Capa 2) y del panel de contenido
     (Capa 3): cada capa trae su propia imagen de fondo con un degradé
     independiente, y sin esto se nota un salto de color justo en el
     límite entre una imagen y la otra. Combina un glow hacia adentro
     (inset, blur grande) que difumina el propio borde de la capa, con uno
     hacia afuera que además sangra un poco sobre la capa de atrás — entre
     los dos, el corte entre imágenes queda como transición en vez de
     línea. Solo alcanza la franja cercana al borde, el centro del panel
     queda intacto. Sin imagen de fondo (modo oscuro) no aplica. */
  --layer-seam-glow: inset 0 0 90px rgba(255, 255, 255, 0.55), 0 0 40px 6px rgba(255, 255, 255, 0.5);
  /* Halo de acción — bajo la pastilla de nav activa y el botón primario */
  --glow-primary:    0px 6px 16px rgba(46, 127, 232, 0.25);

  /* Fondo de tooltips y badges oscuros (dona, gráfico de barras) — gris muy
     oscuro en vez de negro puro. */
  --color-tooltip-bg: #27272A;

  /* Curva de salida para micro-interacciones — nunca ease-in */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* ── Contenedor de ícono con fondo tenue del azul de acento ──────
     Badges de las cards KPI (Dashboard y Productos) y sellos del login.
     Cuadrado redondeado, no círculo. Único origen del valor. */
  --icon-badge-bg:      rgba(46, 127, 232, 0.10);
  --icon-badge-radius:  10px;

  /* ── Barra de progreso de las cards KPI ─────────────────────────
     Azul de acento por defecto. El verde es EXCEPCIÓN semántica: solo
     "completado al 100%" (ej. Productos activos), nunca decorativo. */
  --kpi-progress:          var(--color-primary);
  --kpi-progress-complete: var(--color-success);

  /* ── Login — inputs, sellos y panel de marca animado ─────────
     Valores propios de la pantalla de ingreso; se dejan como tokens
     para no tocar los compartidos del resto del panel. */
  --auth-input-bg:          #F7F7F9;
  --auth-input-border:      #ECECEF;
  --auth-input-radius:      12px;
  --auth-input-focus-ring:  0 0 0 3px rgba(46, 127, 232, 0.15);

  --auth-seal-badge-bg:     var(--icon-badge-bg);
  --auth-seal-badge-radius: var(--icon-badge-radius);

  /* Panel de marca: gradiente base del azul de acento + orbes
     desenfocados que flotan de fondo (animación CSS pura). */
  --auth-brand-bg:   linear-gradient(150deg, var(--color-primary-strong) 0%, var(--color-primary) 50%, var(--color-primary-light) 100%);
  --auth-orb-blur:      85px;
  --auth-orb-color-a:   #6BBAF0;   /* más claro que el azul base */
  --auth-orb-color-b:   #073F72;   /* más oscuro que el azul base */
  --auth-orb-color-c:   #2E86C9;
  --auth-orb-cycle:     16s;       /* 15–20s, ease-in-out, loop infinito */
  --auth-mock-float-cycle: 9s;
}

/* ── Modo oscuro — mismos tokens, paleta equivalente. El azul Vannier
   (--color-primary / --gradient-primary) se mantiene como acento en los
   dos modos; lo que cambia es la escalera de superficie y texto. Se activa
   con data-theme="dark" en <html> (ver theme.js), guardado en localStorage. */
:root[data-theme='dark'] {
  --color-bg-page:        #12141B;
  /* La imagen es clara (esferas lavanda) — no pega con el tema oscuro,
     así que en dark mode la Capa 1 vuelve al color sólido de siempre. */
  --app-shell-bg-image: none;
  --app-shell-bg-color: var(--color-bg-page);
  --color-bg-panel:       #1B1E28;
  /* Mismo criterio que las Capas 1 y 2: imagen clara, no pega con el
     tema oscuro. */
  --content-bg-image: none;
  --content-bg-color: var(--color-bg-surface);
  --color-bg-surface:     #1B1E27;
  /* Mismo criterio que la Capa 1: la imagen es clara y no pega con el
     tema oscuro, así que la Capa 2 vuelve a su sólido de siempre. */
  --panel-frame-bg-image: none;
  --panel-frame-bg-color: var(--color-bg-sidebar);
  --color-bg-sidebar:     #171921;
  --color-bg-input:       #262A35;
  --color-border:         #333947;
  --color-border-light:   #262B37;

  --color-text-heading:   #F4F5F8;
  --color-text-primary:   #E3E5EA;
  --color-text-secondary: #B4B9C4;
  --color-text-muted:     #8087A0;

  --color-primary-bg:     rgba(74, 155, 245, 0.16);
  --color-primary-border: rgba(74, 155, 245, 0.35);
  --color-accent-bg:      rgba(251, 111, 67, 0.16);

  --color-nav-icon-muted: #7B7F92;
  --color-nav-text-muted: #7B7F92;

  /* Los "-strong" son tinta oscura pensada para fondos casi blancos: sobre
     el *-bg traslúcido de acá (que se ve oscuro) quedaban ilegibles — badge
     "Inactivo", "v1.0"/vigente, etc. Se aclaran para que el texto se siga
     leyendo sobre fondo oscuro. */
  --color-success-strong: #4ADE80;
  --color-success-bg:     rgba(23, 163, 74, 0.16);
  --color-success-border: rgba(23, 163, 74, 0.35);
  --color-info-strong:    var(--color-primary-light);
  --color-warning-strong: #F5A94E;
  --color-warning-bg:     rgba(224, 133, 40, 0.16);
  --color-warning-border: rgba(224, 133, 40, 0.35);
  --color-info-bg:        rgba(74, 155, 245, 0.16);
  --color-danger-strong:  #FF7A6E;
  --color-danger-bg:      rgba(224, 72, 60, 0.16);
  --color-danger-border:  rgba(224, 72, 60, 0.35);

  --color-violet-strong:  #A794FF;
  --color-violet-bg:      rgba(124, 92, 252, 0.18);

  --color-icon-highlight: #2A3040;

  --ramp-3: #29405A;

  --shadow-card:     0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-raised:   0 16px 40px rgba(0, 0, 0, 0.42);
  --shadow-nav:      1px 0 0 var(--color-border);
  --shadow-dropdown: var(--shadow-raised);
  --shadow-float:    0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-float-lg: 0 16px 40px rgba(0, 0, 0, 0.42);
  /* Sin imagen de fondo en oscuro, no hay salto de color que disimular */
  --layer-seam-glow: inset 0 0 90px rgba(255, 255, 255, 0), 0 0 40px 6px rgba(255, 255, 255, 0);
}

/* ═══════════════════════════════════════════════════════
   Breakpoints de escritorio — Panel general (dashboard)
   El diseño base (arriba) se pensó para desktop grande, ≥1600px, y
   sigue intacto en ese rango. Estos dos bloques SOLO redefinen tokens
   --dash-*, --text-panel-title/--text-donut-value y --topbar-search-*
   para las dos resoluciones de notebook más comunes:
     · Notebook estándar: 1280–1599px (ej. 1366×768, 1440×900)
     · Notebook chica:     <1280px (hasta el colapso a 1 columna en
       1180px, que ya existe en dashboard.css/layout.css)
   Todo se reduce de forma proporcional (fuente, aire, alto de
   gráficos) para que la fila "Actividad reciente / Avance de
   publicación / Accesos rápidos" entre completa en la altura de
   ventana disponible, en vez de quedar recortada contra el borde.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1599px) {
  :root {
    --dash-gap:              var(--space-3);
    --dash-kpi-min-h:        88px;
    --dash-kpi-value-size:   22px;
    --dash-row-charts-min-h: 196px;
    --dash-row-panels-min-h: 150px;
    --dash-chart-col-h:      118px;
    --dash-donut:            108px;
    --dash-donut-sm:         82px;
    --dash-donut-col:        340px;
    --text-panel-title:      15px;
    --text-donut-value:      26px;
    --dash-card-pad-x:       var(--space-4);
    --dash-card-pad-y:       12px;
    --dash-donut-value-lg:   20px;
    --dash-donut-value-sm:   15px;
    --dash-quick-icon:       28px;
    --dash-quick-pad:        8px;
    --dash-callout-pad:      8px;
    --dash-callout-icon:     18px;
    --dash-callout-margin-b: 8px;
    --text-donut-legend:     11.5px;
    --donut-legend-dot:      9px;
    --donut-legend-gap:      6px;

    --topbar-search-basis:   220px;
    --topbar-search-min-w:   0px;
    --topbar-actions-gap:    var(--space-2);
  }
}

@media (max-width: 1279px) {
  :root {
    --dash-kpi-min-h:        84px;
    --dash-kpi-value-size:   20px;
    --dash-row-charts-min-h: 180px;
    --dash-row-panels-min-h: 140px;
    --dash-chart-col-h:      104px;
    --dash-donut:            96px;
    --dash-donut-sm:         76px;
    --dash-donut-col:        280px;
    --dash-card-pad-x:       var(--space-3);
    --dash-card-pad-y:       10px;
    --dash-donut-value-lg:   18px;
    --dash-donut-value-sm:   14px;
    --dash-quick-icon:       26px;
    --dash-quick-pad:        7px;
    --dash-callout-pad:      7px;
    --dash-callout-icon:     16px;
    --dash-callout-margin-b: 6px;
    --text-donut-legend:     11px;
    --donut-legend-dot:      8px;
    --donut-legend-gap:      5px;
  }
}

/* ── Notebook chica en 1 columna (≤1180px) ────────────────────────
   A este ancho "Por área terapéutica" + "Estado de documentos" ya
   colapsaron a 1 columna (ver dashboard.css, .dash-cols--charts) — la
   card de la dona pasa a tener todo el ancho del contenido disponible,
   igual que en mobile, pero el anillo seguía con el tamaño reducido del
   tier de 1279px de arriba (pensado para la mitad angosta de una fila de
   2 columnas) y el número + "Confirmados"/"Completos" no entraban sin
   pisarse. Mismo criterio que el bloque de mobile (≤860px) más abajo:
   agranda el anillo en vez de encoger más la fuente, ya que sobra ancho. */
@media (max-width: 1180px) {
  :root {
    --dash-donut:            132px;
    --dash-donut-sm:         112px;
    --dash-donut-value-lg:   24px;
    --dash-donut-value-sm:   18px;
  }
}

/* ── Adaptación por ALTURA (notebooks bajas) ─────────────────────
   Los bloques de arriba solo reaccionan al ANCHO: a 1366px de ancho
   entra el tier de 1599px, pero eso no alcanza cuando la ventana real
   tiene ~625-715px de alto (notebook 1366x768 con barra del navegador
   descontada) - el contenido se corta igual. Estos bloques reaccionan
   solo a la ALTURA y se ubican después de los de ancho para poder
   pisar sus valores cuando ambas condiciones se dan a la vez. No tocan
   layout ni funcionalidad, solo compactan los mismos tokens. */
@media (max-height: 800px) {
  :root {
    --shell-inset:           12px;
    --shell-outer-inset:     24px;
    --content-pad-top:       var(--space-2);
    --dash-gap:              var(--space-2);
    --dash-kpi-min-h:        72px;
    --dash-kpi-value-size:   19px;
    --dash-row-charts-min-h: 150px;
    --dash-row-panels-min-h: 112px;
    --dash-chart-col-h:      84px;
    --dash-donut:            78px;
    --dash-donut-sm:         60px;
    --dash-donut-col:        260px;
    --dash-card-pad-x:       var(--space-3);
    --dash-card-pad-y:       8px;
    --dash-donut-value-lg:   16px;
    --dash-donut-value-sm:   12px;
    --dash-quick-icon:       22px;
    --dash-quick-pad:        6px;
    --dash-callout-pad:      6px;
    --dash-callout-icon:     14px;
    --dash-callout-margin-b: 5px;
    --text-panel-title:      14px;
    --text-donut-value:      22px;
    --text-donut-legend:     10.5px;
    --donut-legend-dot:      7px;
    --donut-legend-gap:      4px;
  }
}

@media (max-height: 680px) {
  :root {
    --dash-kpi-min-h:        62px;
    --dash-row-charts-min-h: 128px;
    --dash-row-panels-min-h: 96px;
    --dash-chart-col-h:      68px;
    --dash-donut:            64px;
    --dash-donut-sm:         50px;
    --text-donut-legend:     10px;
    --donut-legend-dot:      6px;
    --donut-legend-gap:      3px;
  }
}

/* ═══════════════════════════════════════════════════════
   Mobile (≤860px) — mismo breakpoint que layout.css/productos.css/
   auditoria.css/configuracion.css. En 1 columna (ver dashboard.css
   ≤1180px) la card del donut chico ya tiene todo el ancho disponible, no
   el 40% angosto que tenía en la grilla de 2 columnas de desktop/notebook
   — se agranda en vez de solo achicar la fuente, así "Confirmados" entra
   cómodo. Nombres de variable nuevos siguiendo la convención pedida
   (--mobile-nav-*, --mobile-card-*). */
@media (max-width: 860px) {
  :root {
    --dash-donut:            132px;
    --dash-donut-sm:         112px;
    --dash-donut-value-lg:   24px;
    --dash-donut-value-sm:   18px;

    --mobile-nav-height:        68px;
    --mobile-nav-bottom-offset: 16px;
    --mobile-nav-side-inset:    16px;
    --mobile-nav-radius:        28px;
    /* Dos capas (borde cercano + difusa lejana), no una sola sombra suave:
       contra un fondo casi blanco (--color-bg-panel) una sola sombra tenue
       casi no se distingue — la capa cercana marca el borde con nitidez y
       la lejana da el efecto "flotando". */
    --mobile-nav-shadow: 0px 2px 8px rgba(0, 0, 0, 0.10), 0px 16px 40px rgba(0, 0, 0, 0.20);
    --mobile-nav-active-bg:     rgba(46, 127, 232, 0.1);
    --mobile-nav-active-radius: 12px;
    --mobile-card-gap:          16px;
    --mobile-sheet-duration:    280ms;

    /* Header "hero" con degradé: corregido a los dos tonos del azul de
       marca (mismo criterio que --gradient-kpi-hero, la card "Total de
       productos" en desktop) — el azul→verde de la ronda anterior no
       correspondía a la identidad de Vannier y se descarta. */
    --mobile-hero-gradient: var(--gradient-kpi-hero);
    --mobile-hero-radius-bottom: 32px;
    /* Antes era un margin-top negativo (la card "hero" se montaba sobre
       la curva). Como las dos formas usan el mismo azul, quedaban
       percibidas como una sola pieza continua — ahora es aire real
       (positivo) para que el fondo del canvas separe visualmente el
       bloque de color de la card. */
    --mobile-hero-gap: 20px;
    --mobile-hero-text: #fff;
    --mobile-hero-text-muted: rgba(255, 255, 255, 0.82);

    /* FAB "Cargar producto" — reemplaza la fila suelta de buscador+CTA de
       la ronda anterior (patrón SaaS mobile estándar). Despegado de la
       isla de navegación con el mismo alto+offset que ya usa esta para
       flotar sobre el borde inferior. */
    --mobile-fab-size: 56px;
    --mobile-fab-bottom-offset: calc(var(--mobile-nav-height) + var(--mobile-nav-bottom-offset) + 16px);
    --mobile-fab-side-inset: 20px;
  }
}

/* Badges de ícono de las cards KPI (pstat-icon en Productos, dash-kpi-badge
   en Dashboard): en modo oscuro el ícono usa el azul más claro para que se
   siga viendo sobre el fondo tenue del badge. */
:root[data-theme='dark'] .pstat-icon,
:root[data-theme='dark'] .dash-kpi-badge {
  color: var(--color-primary-light);
}

/* La barra de filtros de Productos usa vidrio translúcido (rgba blanco +
   blur) para no "cortar" la imagen de la Capa 3 en modo claro; en oscuro
   no hay imagen detrás, así que ese blanco traslúcido se ve lavado —
   vuelve a superficie sólida oscura, sin blur. */
:root[data-theme='dark'] .filters-section .search-input,
:root[data-theme='dark'] .filter-chip {
  background: var(--color-bg-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-family);
  /* Poppins Regular (400) a estos tamaños se leía fino/desvaído; 500
     (Medium) es el piso para todo el texto del panel — nada de negrita,
     solo un poco más de peso para que no se pierda. Lo que ya pedía un
     peso mayor (semibold/bold explícitos) no se ve afectado. */
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}