/* ============================================================
   Design tokens — Ortopedia Belgrano (molde operativo)
   Fuente unica de verdad del sistema visual. Cambiar un color
   aca lo cambia en TODAS las vistas. Nada de hex sueltos.
   ============================================================ */

/* Fuentes autohosteadas (antes Google Fonts CDN). Cada familia es un
   unico archivo variable (subset latin): Montserrat cubre 600/700/800,
   Open Sans cubre 400/500/600/700 - el navegador interpola el peso
   pedido dentro del mismo archivo, por eso varios @font-face comparten
   el mismo src (asi lo serv­ia tambien Google Fonts). */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('/app/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/app/fonts/open-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- superficie --- */
  --ob-bg:        #EEF2F6;
  --ob-surface:   #ffffff;
  --ob-surface-2: #FAFBFD;

  /* --- marca --- */
  --ob-navy:        #14457A;  /* primario (texto/acento) */
  --ob-navy-deep:   #0E3460;  /* fondo sidebar */
  --ob-navy-active: #1A5FA0;  /* item activo del sidebar */
  --ob-orange:      #FF7847;  /* acento naranja (barra activa, CTA envio) */

  /* --- texto --- */
  --ob-ink:      #172230;
  /* Contraste medido sobre LAS DOS superficies: la tarjeta blanca Y el fondo
     gris --ob-bg (#EEF2F6). La medicion anterior era solo sobre blanco, y el
     mismo gris que pasaba AA en la tarjeta (#6B7885 = 4.52:1) caia a 4.01:1
     sobre el fondo — justo donde viven los labels de KPI y los metadatos que
     el deposito lee parado, a distancia de mostrador.
     --ob-muted pasa AA en ambas (4.86 sobre bg / 5.47 sobre blanco);
     --ob-muted-2 pasa AA sobre blanco (4.86) y roza sobre bg (4.32): sigue
     siendo para pistas, nunca dato. */
  --ob-muted:    #5C6B7A;  /* 4.86:1 bg · 5.47:1 blanco — AA en ambas */
  --ob-muted-2:  #66737F;  /* 4.86:1 blanco · 4.32:1 bg — solo pistas, nunca dato */
  --ob-side-ink: #CFE0F0;

  /* --- bordes --- */
  --ob-border:       #E3E9F0;
  --ob-border-2:     #DDE5EE;
  --ob-field-border: #C9D8EA;

  /* --- estados (semaforo) --- */
  /* Ojo con --ob-warn: el valor viejo (#B45309) daba 4.43:1 sobre --ob-warn-bg,
     o sea REPROBABA AA sobre su propio fondo — y ese par se usa para el aviso de
     transferencia pendiente, que es dato operativo. #B25209 lo sube a 4.52:1 y
     mejora todos los demas pares (5.12:1 sobre blanco). El corrimiento de tono
     es imperceptible; el que se arregla es el contraste. */
  --ob-ok:        #147A3A; /* 4.85:1 sobre ok-bg (el #15803D daba 4.49) · 5.42 blanco · 4.82 bg */  --ob-ok-bg:     #E7F6EC;  --ob-ok-dot:     #16A34A;
  --ob-warn:      #B25209;  --ob-warn-bg:   #FCEFDD;  --ob-warn-dot:   #D97706;
  --ob-danger:    #B91C1C;  --ob-danger-bg: #FBE9E9;  --ob-danger-dot: #DC2626;
  --ob-info:      #1D4ED8;  --ob-info-bg:   #E7F0FE;

  /* --- semaforo: bordes, tintes de superficie y tinta secundaria ---
     La triada (texto/fondo/punto) alcanzaba para una pill, no para una SUPERFICIE
     seleccionable como las tiles de cobro: ahi hacen falta ademas un borde y una
     tinta secundaria. Estaban resueltos con hex sueltos en las vistas, y los tres
     subtitulos reprobaban AA a 11.5px (3.40 a 4.19:1). Estos valores estan medidos
     contra su PROPIO tinte, no contra blanco. */
  --ob-ok-border:   #BCE4C8;  --ob-ok-tint:   #F1FBF4;  --ob-ok-ink-2:   #4E775C; /* 4.82:1 */
  --ob-warn-border: #F3D9C4;  --ob-warn-tint: #FFF8ED;
  /* danger-border vivia como #F1C4C4 suelto en cobros.js (boton Rechazar, x3)
     y lo iba a repetir la vista Verificacion: color repetido -> nace token. */
  --ob-danger-border: #F1C4C4;
  --ob-info-border: #C6D4FA;                            --ob-info-ink-2: #506BAB; /* 4.54:1 */
  --ob-navy-tint:   #F4F8FC;                            --ob-navy-ink-2: #567492; /* 4.57:1 */

  /* --- accion secundaria ---
     Azul de "adjuntar / refrescar": ni --ob-navy (primario) ni --ob-info (estado).
     Vivia como #2A6FB0 repetido en venta.js y cobros.js: usado en dos vistas ya no
     era un descuido, era un color del sistema sin nombre. Blanco encima: 5.25:1. */
  --ob-link: #2A6FB0;

  /* --- legados de base.css, ahora con nombre ---
     DESIGN.md ya los declaraba en su paleta y los marcaba "a migrar, no a imitar";
     seguian como hex sueltos. Un color declarado y sin token es un token pendiente. */
  /* El verde viejo (#2EA88B) dejaba el texto blanco del boton en 2.96:1 —
     ilegible a distancia de mostrador. Este pasa AA (5.33:1 con blanco). */
  --ob-verde-accion:  #17795F;  /* boton de confirmacion positiva */
  --ob-celeste-marca: #CBE3FB;  /* bloque de marca del sidebar */
  --ob-celeste-hover: #BCD9F7;
  --ob-sku-bg:        #EAF1F9;
  --ob-sku-border:    #D5E3F1;
  --ob-ghost-border:  #F0C7B0;  /* borde del boton ghost */

  /* --- texto sobre relleno (i182) ---
     Texto e icono sobre un relleno navy o verde-accion. Reemplaza los #fff
     sueltos de las vistas: blanco sobre navy 9.71:1, sobre verde 5.33:1. */
  --ob-on-fill: #ffffff;

  /* --- forma --- */
  /* El radio baja con el tamano del elemento: card > kpi > nav > field > chip. */
  --ob-r-card:  14px;
  --ob-r-kpi:   12px;  /* KPI y chip de filtro grande */
  --ob-r-nav:   9px;   /* item del riel de navegacion */
  --ob-r-field: 8px;   /* campos y botones */
  --ob-r-chip:  6px;   /* chip de SKU y chapas chicas (se usaba como var() sin existir) */
  --ob-r-pill:  999px;
  --ob-shadow:  0 14px 34px -16px rgba(23,34,48,.4);
  /* Sombra de lo que flota sobre el velo: login y modales. */
  --ob-shadow-modal: 0 20px 60px rgba(0,0,0,.3);
  /* Velo de los overlays a pantalla completa (paleta Ctrl K, i147): el navy
     profundo al 55%, el mismo tono que ya usaban los modales sueltos. */
  --ob-scrim:   rgba(14,52,96,.55);

  /* --- capas (z-index) del molde (i144) ---
     El orden es la regla: ficha < dialogo. Un dialogo (confirmar.js) que se
     abre desde una ficha superpuesta (drawer.js) tiene que quedar ARRIBA de
     ella: si no, sus botones caen en la capa de la ficha y la cierran.
     Los mismos numeros viven en js/capas.js (un test los compara). */
  --ob-z-riel:    40;   /* el riel asomado flota sobre la vista; debajo de menus, ficha y dialogos */
  --ob-z-ficha:   75;
  --ob-z-dialogo: 85;

  /* --- espaciado: escala de 4 (i182) ---
     margin, padding y gap salen de aca. El linter avisa (no corta) por los
     px sueltos que quedan en las vistas. */
  --ob-sp-1: 4px;   /* icono-texto, punto de una pill */
  --ob-sp-2: 8px;   /* gap entre botones y chips */
  --ob-sp-3: 12px;  /* fila de lista, grilla de KPIs */
  --ob-sp-4: 16px;  /* padding de tarjeta, gutter de celular */
  --ob-sp-5: 24px;  /* pagina en escritorio, entre bloques */
  --ob-sp-6: 32px;  /* entre secciones de una pagina larga */

  /* --- medidas fijas del sistema y del molde (brief 08, i144) ---
     Solo nacen aca: todavia nada las consume, asi que no cambian ninguna
     vista. --ob-tap NO se declara aca y queda como esta (decision de Pablo,
     i182): es RESPONSIVA, base.css la pone en 44px bajo 640px y las vistas la
     leen con un fallback de escritorio; fijarla en :root agrandaria esos
     botones. El toque fijo de 44 es --ob-tap-tactil. */
  --ob-tap-tactil:   44px;    /* toque fijo: mostrador, pared del deposito y el molde nuevo */
  --ob-text-min:     11px;    /* piso de texto de pantalla */
  --ob-text-nota:    12px;    /* escalon Nota de DESIGN.md: ayudas, leyendas y labels chicos */
  --ob-btn-alto:     37px;    /* alto del boton en escritorio */
  --ob-rail:         72px;    /* riel de navegacion plegado */
  --ob-rail-abierto: 220px;   /* riel expandido */
  --ob-barra:        48px;    /* barra de utilidades */
  --ob-ficha:        520px;   /* ficha superpuesta en escritorio */
  --ob-barra-inferior: 56px;  /* barra inferior de 4 iconos en el celular (sin contar el borde seguro del telefono) */
  --ob-pagina-max:   1120px;  /* tope de lectura de una vista de dos columnas */

  /* --- tipografia --- */
  --ob-font:      'Open Sans', system-ui, sans-serif;
  --ob-font-head: 'Montserrat', system-ui, sans-serif;

  /* --- alias de dos nombres que se usaban sin existir (auditoria 11) ---
     Las vistas que los leen (panel.js, vendedor.js, ventaSofiaModal.js) no se
     tocan en i182: el alias los resuelve sin editarlas. Cuando migren al nombre
     real, el alias se retira. */
  --ob-font-body: var(--ob-font);
  --ob-line:      var(--ob-border);
}