/* ============================================================================
   Sistema de Diseño ERP · v1.0  —  erp-design.css
   Fuente única de tokens y componentes de interfaz para Valiora.
   Basado en "Especificación de Interfaz V1.0" (17 apartados normativos).

   Cómo se usa:
     <link rel="stylesheet" href="/public/erp-design.css">   ← antes del <style> de la página
   El :root de abajo define los tokens canónicos + ALIAS de los nombres que las
   páginas ya usaban (--navy-2, --ink, --line, --bg, --red, --amber…), de modo que
   una página adopta el sistema con solo BORRAR su bloque :root local.
   Ningún color debe declararse fuera de este archivo (apartado 17).
   ========================================================================== */

/* Tipografía: Inter para todo el producto (apartado 2), AUTOHOSPEDADA (Fase 4):
   sin dependencia de Google Fonts ni de la CSP externa. woff2 subset latin en
   /public/fonts/. Si por algún motivo no cargan, cae al stack Segoe UI/Arial. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/public/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/public/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/public/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/public/fonts/inter-700.woff2') format('woff2')}

:root{
  /* ── Marca / estructura (apartado 6) ── */
  --ds-navy:#15384C;          /* azul corporativo */
  --ds-navy-light:#1F4B63;    /* azul secundario / hover */
  --ds-green:#2F6B4F;         /* verde operacional · ACCIÓN (confirmar/crear) */
  --ds-green-light:#DDEFE6;
  --ds-bronze:#AA7A35;        /* acento */

  /* ── Superficies ── */
  --ds-background:#F5F7F9;
  --ds-card:#FFFFFF;
  --ds-border:#DCE3E8;

  /* ── Texto ── */
  --ds-text:#202A33;
  --ds-muted:#6E7B86;

  /* ── Semántica (solo estado, nunca decoración) ── */
  --ds-danger:#B2473E;
  --ds-danger-d:#98362E;
  --ds-warning:#C18A2D;
  --ds-info:#3A6F86;
  --ds-focus:#2D6D90;         /* borde de foco en campos (apartado 11) */
  --ds-danger-bg:#F6E7E4;
  --ds-warning-bg:#FBF0DC;
  --ds-info-bg:#E7EFF3;

  /* ── Barra lateral / superior (apartados 7-8) ── */
  --ds-side-bg:#15384C; --ds-side-hover:#214D63; --ds-side-active:#2F6B4F; --ds-side-text:#F8FAFB;

  /* ── Tipografía ── */
  --ds-font:"Inter","Segoe UI",Roboto,Arial,sans-serif;

  /* ── Radios (apartado 4): 6 general · 8 tarjetas importantes · nada mayor ── */
  --ds-radius:6px; --ds-radius-lg:8px;

  /* ── Sombra (apartado 5): UNA sola elevación en todo el sistema ── */
  --ds-shadow:0 2px 8px rgba(0,0,0,.05);

  /* ── Espaciado (apartado 3): sistema de 8px ── */
  --ds-s1:4px;--ds-s2:8px;--ds-s3:12px;--ds-s4:16px;--ds-s5:24px;--ds-s6:32px;--ds-s7:40px;--ds-s8:48px;--ds-s9:64px;

  /* ── Paleta de series de gráficos (apartado 15): 5 colores en este orden ── */
  --ds-series-1:#245C7A;--ds-series-2:#2F6B4F;--ds-series-3:#AA7A35;--ds-series-4:#9AA5AC;--ds-series-5:#B2473E;

  /* ════════ ALIAS LEGADO ════════
     Los nombres que las páginas actuales ya consumen, re-apuntados a los valores
     canónicos. Al borrar el :root local de una página, esta adopta el sistema. */
  --navy:#15384C;
  --navy-2:#1F4B63; --navy2:#1F4B63; --navy-light:#1F4B63;
  --green:#2F6B4F; --green-d:#25553F; --green-light:#DDEFE6; --green-bg:#DDEFE6; --green-50:#DDEFE6;
  --bronze:#AA7A35;
  --ink:#202A33; --text:#202A33;
  --muted:#6E7B86;
  --line:#DCE3E8; --border:#DCE3E8;
  --bg:#F5F7F9; --background:#F5F7F9;
  --card:#FFFFFF;
  --red:#B2473E; --red-d:#98362E; --danger:#B2473E; --red-bg:#F6E7E4; --red-50:#F6E7E4;
  --amber:#C18A2D; --amber-d:#9A6E1E; --warning:#C18A2D; --amber-bg:#FBF0DC;
  --blue:#3A6F86; --info:#3A6F86; --blue-bg:#E7EFF3;
  --shadow:0 2px 8px rgba(0,0,0,.05);
  /* acentos de fruta legados → acento bronce del sistema */
  --kiwi:#AA7A35; --kiwi-d:#8A6329; --teal:#3A6F86;
}

/* ─────────────────────────── Base ─────────────────────────── */
/* Al enlazar este archivo, la página adopta Inter sin tocar su regla body local
   (html body gana en especificidad). Elementos con su propia fuente (mono) mandan. */
html body{font-family:var(--ds-font)}
.ds-font,body.ds{font-family:var(--ds-font)}

/* Campos numéricos SIN flechas de ajuste (spinners) — spec "sin adornos".
   Se ocultan en todos los navegadores; el valor se escribe. Aplica a TODO el ERP. */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* El badge de sesión (empresa · temporada · usuario · Cambiar · Salir) flota
   arriba-derecha. Se reserva una banda superior para que NO tape los controles
   de la página. El Centro se excluye (tiene su propio chip de contexto). */
html.agd-ready body{padding-top:56px}
html.agd-ready .appbar{top:56px}   /* barras de página sticky quedan bajo el badge */

/* "Volver / Inicio" en UN SOLO lugar: el botón Inicio del badge. Se ocultan los
   back-links al hub/inicio dispersos por cada página (← Utilidades, ← Volver, el
   botón "Utilidades" de informe-packing…). Los enlaces de FLUJO (a páginas .html
   puntuales, p. ej. "← Generar liquidación") se conservan. */
html.agd-ready a[href^="/public/utilidades"],
html.agd-ready a[href^="/public/centro/"],
html.agd-ready .link-back{display:none!important}

/* ═══════════════════════ Kit de componentes ═══════════════════════
   Clases opcionales para páginas ya migradas. Prefijo ds- para no chocar
   con estilos locales de páginas aún sin migrar. */

/* Shell: barra lateral (240) + barra superior (64) — apartados 7-8 */
.ds-shell{display:grid;grid-template-columns:240px 1fr;grid-template-rows:64px 1fr;min-height:100vh;
  grid-template-areas:"side top" "side main"}
.ds-sidebar{grid-area:side;background:var(--ds-side-bg);color:var(--ds-side-text);padding:var(--ds-s4) var(--ds-s3)}
.ds-sidebar a{display:flex;align-items:center;gap:var(--ds-s3);color:var(--ds-side-text);text-decoration:none;
  font-size:13px;font-weight:500;padding:9px var(--ds-s3);border-radius:var(--ds-radius);opacity:.9}
.ds-sidebar a:hover{background:var(--ds-side-hover);opacity:1}
.ds-sidebar a.active{background:var(--ds-side-active);opacity:1}
.ds-topbar{grid-area:top;background:var(--ds-side-bg);color:var(--ds-side-text);
  display:flex;align-items:center;gap:var(--ds-s4);padding:0 var(--ds-s5)}
.ds-main{grid-area:main;background:var(--ds-background);padding:var(--ds-s5);overflow:auto}

/* Tarjeta KPI (apartado 9): alto 110, relleno 20, número protagonista */
.ds-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--ds-s3)}
.ds-kpi{background:var(--ds-card);border:1px solid var(--ds-border);border-radius:var(--ds-radius-lg);
  box-shadow:var(--ds-shadow);min-height:110px;padding:var(--ds-s5);display:flex;flex-direction:column;justify-content:center;gap:6px}
.ds-kpi .ds-kpi-label{font-size:12px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--ds-muted)}
.ds-kpi .ds-kpi-value{font-size:34px;font-weight:700;line-height:1;color:var(--ds-text);font-variant-numeric:tabular-nums}
.ds-kpi .ds-kpi-delta{font-size:12px;font-weight:500;color:var(--ds-muted)}
.ds-kpi .ds-kpi-delta.up{color:var(--ds-green)}
.ds-kpi .ds-kpi-delta.down{color:var(--ds-danger)}

/* Botones (apartado 10): alto 38, un principal por pantalla, sin gradientes */
.ds-btn{height:38px;border:1px solid transparent;border-radius:var(--ds-radius);padding:0 var(--ds-s4);
  font-family:var(--ds-font);font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;gap:6px;white-space:nowrap;transition:background .12s}
.ds-btn:disabled{opacity:.55;cursor:default}
.ds-btn--primary{background:var(--ds-green);color:#fff}.ds-btn--primary:hover:not(:disabled){background:var(--ds-green-d,#25553F)}
.ds-btn--secondary{background:#fff;border-color:var(--ds-border);color:var(--ds-navy)}.ds-btn--secondary:hover:not(:disabled){background:#F2F6F7}
.ds-btn--danger{background:var(--ds-danger);color:#fff}.ds-btn--danger:hover:not(:disabled){background:var(--ds-danger-d)}

/* Campos (apartado 11): alto 38, radio 6, foco azul */
.ds-field{height:38px;border:1px solid var(--ds-border);border-radius:var(--ds-radius);padding:0 10px;
  font-family:var(--ds-font);font-size:14px;background:#fff;color:var(--ds-text);outline:0;width:100%}
.ds-field:focus{border-color:var(--ds-focus)}
.ds-label{font-size:12px;font-weight:600;color:var(--ds-text)}

/* Tablas (apartado 12): filas 42, alternancia suave, sin bordes verticales */
.ds-table{border-collapse:collapse;width:100%}
.ds-table th{font-size:12px;font-weight:600;text-transform:uppercase;text-align:left;color:var(--ds-text);
  background:#F8FAFB;padding:0 12px;height:42px;border-bottom:1px solid var(--ds-border)}
.ds-table td{font-size:13px;color:var(--ds-text);padding:0 12px;height:42px;border-bottom:1px solid var(--ds-border)}
.ds-table tbody tr:nth-child(even){background:#FBFCFD}
.ds-table tbody tr:hover{background:#F2F6F7}
.ds-table .num{text-align:right;font-variant-numeric:tabular-nums}

/* Badges de estado */
.ds-badge{display:inline-flex;align-items:center;gap:4px;border-radius:var(--ds-radius);padding:3px 8px;
  font-size:11px;font-weight:600;white-space:nowrap}
.ds-badge--ok{background:var(--ds-green-light);color:var(--ds-green)}
.ds-badge--warn{background:var(--ds-warning-bg);color:var(--ds-warning)}
.ds-badge--bad{background:var(--ds-danger-bg);color:var(--ds-danger)}
.ds-badge--info{background:var(--ds-info-bg);color:var(--ds-info)}
.ds-badge--neutral{background:#EEF1F4;color:var(--ds-muted)}