/*
 * Gestión Operativa CSN — complemento de DaisyUI 5 + Tailwind 4 (CDN).
 * Aquí solo vive: 1) los temas "csn" y "csn-dark" (paleta de marca, idéntica a Rendimientos) y
 * 2) unos pocos componentes propios que DaisyUI no trae (mini barras, captura en campo, impresión).
 * Todo lo demás se maqueta con clases de DaisyUI/Tailwind en el HTML. Ver CLAUDE.md.
 */

/* ---------- Tema claro (por defecto) ---------- */
[data-theme="csn"] {
  color-scheme: light;
  --color-base-100: #ffffff;
  --color-base-200: #f6f2ef;
  --color-base-300: #e9e1db;
  --color-base-content: #2b2220;
  --color-primary: #e0562a;          /* Naranja brasa (logo) */
  --color-primary-content: #ffffff;
  --color-secondary: #5b2a1d;        /* Café CSN */
  --color-secondary-content: #ffffff;
  --color-accent: #d9b48f;           /* Arena */
  --color-accent-content: #3f1c12;
  --color-neutral: #3f1c12;          /* Café oscuro (sidebar) */
  --color-neutral-content: #f3e7e0;
  --color-info: #3a6ea5;
  --color-info-content: #ffffff;
  --color-success: #2f7d5b;
  --color-success-content: #ffffff;
  --color-warning: #d99a1e;
  --color-warning-content: #3a2600;
  --color-error: #c0392b;
  --color-error-content: #ffffff;
  --radius-selector: 1rem;
  --radius-field: .5rem;
  --radius-box: .875rem;
  --size-selector: .25rem;
  --size-field: .25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

/* ---------- Tema oscuro ---------- */
[data-theme="csn-dark"] {
  color-scheme: dark;
  --color-base-100: #1f1714;
  --color-base-200: #171110;
  --color-base-300: #3a2c27;
  --color-base-content: #efe5df;
  --color-primary: #ee6a3e;
  --color-primary-content: #ffffff;
  --color-secondary: #c98a6b;
  --color-secondary-content: #1f1714;
  --color-accent: #d9b48f;
  --color-accent-content: #2a1a12;
  --color-neutral: #120c0a;
  --color-neutral-content: #efe5df;
  --color-info: #6c9bd2;
  --color-info-content: #0f1a26;
  --color-success: #4fae86;
  --color-success-content: #0c1f17;
  --color-warning: #e7b04a;
  --color-warning-content: #2a1c00;
  --color-error: #e5675a;
  --color-error-content: #1f0b08;
  --radius-selector: 1rem;
  --radius-field: .5rem;
  --radius-box: .875rem;
  --size-selector: .25rem;
  --size-field: .25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

html, body { font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
.pos { color: var(--color-success) !important; }
.neg { color: var(--color-error) !important; }
.upper { text-transform: uppercase; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ico { width: 1.15rem; height: 1.15rem; flex: none; }
[x-cloak], .js-hide { display: none; }

/* Mientras Tailwind (navegador) genera estilos, evita el destello sin estilo. */
html.tw-loading body { opacity: 0; }
body { transition: opacity .12s; }

/* KPI destacado con degradado de marca */
.stat-brand { background: linear-gradient(135deg, var(--color-primary), color-mix(in oklab, var(--color-primary) 70%, var(--color-secondary))); color: var(--color-primary-content); }
.stat-brand .stat-title, .stat-brand .stat-desc, .stat-brand .stat-value { color: var(--color-primary-content) !important; }
.stat-brand .stat-desc.pos, .stat-brand .stat-desc.neg { background: rgb(255 255 255 / .2); border-radius: .35rem; padding: 0 .4rem; width: fit-content; }

/* Mini barra en tablas */
.minibar { display: inline-block; width: 5.5rem; height: .5rem; background: var(--color-base-300); border-radius: 999px; overflow: hidden; vertical-align: middle; margin-right: .5rem; }
.minibar span { display: block; height: 100%; width: 0; border-radius: 999px; } /* color con bg-success|warning|error */

/* Filas destacadas del ranking */
.row-best td:first-child { box-shadow: inset 3px 0 0 var(--color-success); }
.row-worst td:first-child { box-shadow: inset 3px 0 0 var(--color-error); }

.chart-box { position: relative; height: 18rem; }

/* Captura en campo: objetivos táctiles grandes (mín. 44 px) en móvil */
@media (pointer: coarse) {
  .field-tap .btn { min-height: 2.75rem; }
}
.print-head { display: none; }

@media print {
  @page { size: landscape; margin: 12mm; }
  .drawer-side, .navbar, .dock, .no-print, footer, .filters { display: none !important; }
  body, .drawer-content { background: #fff !important; }
  main { padding: 0 !important; }
  .card, .stats { box-shadow: none !important; break-inside: avoid; }
  .print-head { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
  .print-head img { width: 54px; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Iconos dentro de etiquetas pequeñas */
.badge .ico { width: .8rem; height: .8rem; }
.btn-xs .ico { width: 1rem; height: 1rem; }

/* Estado de cada pregunta en el recorrido (franja lateral) */
.q-ok  { box-shadow: inset 4px 0 0 var(--color-success); }
.q-bad { box-shadow: inset 4px 0 0 var(--color-error); }
.q-na  { box-shadow: inset 4px 0 0 color-mix(in oklab, var(--color-base-content) 30%, transparent); }