/* ==========================================================================
   GRADANN · 1. BASE
   Variables, reinicio y utilidades. Nada de componentes ni de disposición.
   Se carga PRIMERO: todo lo demás depende de estos tokens.
   ========================================================================== */

:root {
  /* --- Marca ------------------------------------------------------------ */
  --rojo:         #C1121F;   /* primario y crítico: el rojo del letrero */
  --rojo-oscuro:  #9C0E19;
  --rojo-suave:   #FDECEC;
  --rojo-borde:   #F3B6B6;

  --azul:         #0F3D91;   /* enlaces y estado activo */
  --azul-oscuro:  #0B2E6F;   /* su hover; ver componentes.css · .btn--azul */
  --azul-suave:   #EAF2FD;
  --azul-borde:   #B6D4F5;

  --verde:        #1B7F3B;   /* todo en orden */
  --verde-suave:  #EAF6EE;
  --verde-borde:  #B7DFC5;

  --ambar:        #B26A00;   /* atención, sin ser un error */
  --ambar-suave:  #FFF6E6;
  --ambar-borde:  #F3D9A4;

  --naranja:      #C25A00;   /* pendiente de alguien más */
  --naranja-suave:#FFF1E3;
  --naranja-borde:#F5CBA0;

  /* --- Azules de estructura --------------------------------------------- */
  /* Tres profundidades del mismo azul, no tres colores distintos:
       barra   la franja superior, lo más oscuro
       marino  el menú lateral y las CABECERAS DE TABLA
       acero   cabeceras de panel y barras de filtros, en claro
     Que la cabecera de una tabla comparta color con el menú no es un adorno:
     dice que las dos son estructura y no contenido. */
  --marino-barra: #0A1A2E;
  --marino:       #0F2847;
  --marino-2:     #17355C;   /* hover dentro del menú */
  --marino-borde: #1D3D63;
  --marino-texto: #D9E2EE;
  --marino-tenue: #5C9BD6;   /* rótulos de sección, azul claro */

  --acero:        #E8EEF6;   /* cabecera de panel en claro */
  --acero-2:      #EEF3F9;   /* barra de filtros */

  /* --- Superficies ------------------------------------------------------ */
  --fondo:        #EEF2F7;
  --superficie:   #FFFFFF;
  --superficie-2: #F7F9FB;   /* zonas hundidas, filas alternas */
  --borde:        #E2E6EC;
  --borde-fuerte: #C9D0DA;

  /* --- Texto ------------------------------------------------------------ */
  --texto:        #111418;
  --texto-2:      #5B6470;
  --texto-3:      #8A929D;
  --texto-inv:    #FFFFFF;

  /* --- Tipografía (no se toca: es regla del proyecto) ------------------- */
  --fuente: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:   'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --base:   clamp(12px, 0.8rem + 0.25vw, 15px);

  /* --- Espaciado en em, para que TODO escale con la letra --------------- */
  --e0: 0.25em;
  --e1: 0.5em;
  --e2: 0.75em;
  --e3: 1em;
  --e4: 1.5em;
  --e5: 2em;

  /* --- Controles --------------------------------------------------------- */
  /* Una sola altura para input, select y botón. Sin esto cada tipo trae la
     suya (35, 38, 39, 41 px medidos en la misma fila) y nada alinea con nada,
     por mucho que la fila diga `align-items`. */
  --control-alto: 2.5rem;
  /* Alto reservado para el rótulo de un campo. Se calcula en rem y no en em
     para que no cambie con el tamaño de letra de quien lo use. */
  --etiqueta-alto: 1.24rem;

  /* --- Formas ----------------------------------------------------------- */
  --radio:       6px;   /* tarjetas y paneles */
  --radio-chico: 4px;   /* botones, campos, etiquetas */

  /* Sombra mínima: separa la tarjeta del fondo sin hacerla flotar. */
  --sombra: 0 1px 2px rgba(13, 39, 69, .06);

  /* --- Medidas de la disposición ---------------------------------------- */
  --barra-alto:  3.4rem;
  --menu-ancho:  15rem;

  /* Desplazamiento de la cabecera pegajosa. Cada contenedor con scroll
     propio la pone a 0; ver DECISIONES.md · D-068. */
  --tabla-sticky-top: var(--barra-alto-real, var(--barra-alto));
}

/* ==========================================================================
   Reinicio
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: var(--base);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.45;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0 0 var(--e1); line-height: 1.25; font-weight: 600; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: 1rem; }

p { margin: 0 0 var(--e2); }

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

/* El `display:none` de `[hidden]` lo trae la hoja del navegador y pierde
   contra cualquier regla de autor. Se declara aquí para que el atributo mande. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 1px;
}

/* ==========================================================================
   Utilidades
   ========================================================================== */

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num  { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }

.oculto { display: none !important; }

/* Bloquea el desplazamiento del fondo mientras hay algo delante —el menú del
   móvil, un modal—. Sin esto se arrastra la lista de atrás creyendo que se
   desliza lo de delante. */
.sin-scroll { overflow: hidden; }

/* Texto que sólo leen los lectores de pantalla. Mide 1x1 px a propósito. */
.solo-lectura-pantalla {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Colores de estado, para números y textos sueltos ------------------- */
.es-ok      { color: var(--verde); }
.es-aviso   { color: var(--ambar); }
.es-critico { color: var(--rojo); }
.es-tenue   { color: var(--texto-2); }

/* Stock: verde cuando alcanza, ámbar bajo mínimo, rojo en cero. */
.stock-ok   { color: var(--verde); font-weight: 600; }
.stock-bajo { color: var(--ambar); font-weight: 600; }
.stock-cero { color: var(--rojo);  font-weight: 600; }

/* --- Anchos por contenido, en `ch` -------------------------------------- */
/* Un campo mide lo que mide su dato, no lo que mide la pantalla. */
.w-codigo    { width: 16ch; }
.w-cantidad  { width: 7ch;  }
.w-precio    { width: 11ch; }
.w-ruc       { width: 15ch; }
.w-placa     { width: 9ch;  }
.w-telefono  { width: 13ch; }
.w-fecha     { width: 12ch; }   /* fecha como TEXTO; para <input type=date> ver componentes.css */
.w-medio     { width: 24ch; }
.w-nombre    { max-width: 48ch; width: 100%; }
.w-busqueda  { max-width: 60ch; width: 100%; }