/* ==========================================================================
   SIVAL — base.css
   Reset, tipografia, layout maestro (barra lateral + barra superior +
   contenido), grid de 12 columnas y utilidades sobre la grilla de 8 px.
   Depende de tokens.css: aqui no hay ni un color ni un tamano literal.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--t-cuerpo);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, pre { margin: 0; }

ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }

img, svg, video, canvas { display: block; max-width: 100%; }
svg { flex: none; }

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

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}

textarea { resize: vertical; }

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset { border: 0; margin: 0; padding: 0; }
legend { padding: 0; }

hr {
  border: 0;
  border-top: var(--linea) solid var(--borde);
  margin: var(--e5) 0;
}

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

/* Foco visible en todo elemento interactivo (anillo de 2 px). */
:focus-visible {
  outline: var(--linea-2) solid var(--primario);
  outline-offset: var(--linea);
}

[hidden] { display: none !important; }

::selection {
  background: var(--primario-suave);
  color: var(--texto);
}

/* --------------------------------------------------------------------------
   2. TIPOGRAFIA
   -------------------------------------------------------------------------- */

h1, .titulo {
  font-size: var(--t-titulo);
  font-weight: var(--peso-fuerte);
  line-height: var(--lh);
}

h2, .titulo-2 {
  font-size: var(--t-cuerpo);
  font-weight: var(--peso-fuerte);
}

h3, .titulo-3 {
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-etiqueta);
  color: var(--texto-2);
}

small, .mini { font-size: var(--t-mini); }

code, kbd, samp, pre, .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

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

.total {
  font-family: var(--mono);
  font-weight: var(--peso-total);
  color: var(--acento);
}

.silencioso { color: var(--texto-2); }
.apagado    { color: var(--texto-3); }
.ok         { color: var(--exito); }
.alerta     { color: var(--aviso); }
.grave      { color: var(--peligro); }

.truncar {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. LAYOUT MAESTRO
   Estructura: .app > (.barra-lateral + .principal > .barra-superior + .contenido)
   -------------------------------------------------------------------------- */

.app {
  display: grid;
  grid-template-columns: var(--ancho-barra-lateral) 1fr;
  min-height: 100vh;
}

/* Sidebar plegado a 56 px */
.app--plegado { grid-template-columns: var(--ancho-barra-lateral-plegada) 1fr; }

/* POS y vistas a pantalla completa */
.app--sin-barra-lateral { grid-template-columns: 1fr; }
.app--sin-barra-lateral > .barra-lateral { display: none; }

/* 3.1 Barra lateral --------------------------------------------------------- */

.barra-lateral {
  position: sticky;
  top: 0;
  z-index: var(--z-barra-lateral);
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--superficie);
  border-right: var(--linea) solid var(--borde);
  overflow: hidden;
}

.barra-lateral__marca {
  display: flex;
  align-items: center;
  gap: var(--e2);
  height: var(--alto-barra-superior);
  flex: none;
  padding: 0 var(--e3);
  border-bottom: var(--linea) solid var(--borde);
  color: var(--primario);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--espaciado-etiqueta);
  white-space: nowrap;
  overflow: hidden;
}

.barra-lateral__nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: var(--e3);
}

.barra-lateral__pie {
  flex: none;
  border-top: var(--linea) solid var(--borde);
  padding: var(--e2);
}

.nav-grupo + .nav-grupo { margin-top: var(--e2); }

.nav-grupo__titulo {
  padding: var(--e3) var(--e3) var(--e1);
  font-size: var(--t-micro);
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-etiqueta);
  color: var(--texto-3);
  white-space: nowrap;
}

.nav-enlace {
  display: flex;
  align-items: center;
  gap: var(--e2);
  height: var(--alto-control);
  padding: 0 var(--e3);
  border-left: var(--linea-2) solid transparent;
  color: var(--texto);
  white-space: nowrap;
  transition: background var(--transicion);
}
.nav-enlace:hover {
  background: var(--superficie-2);
  text-decoration: none;
}
.nav-enlace--activo {
  background: var(--primario-suave);
  border-left-color: var(--primario);
  color: var(--primario);
  font-weight: var(--peso-medio);
}

.nav-enlace__icono {
  width: var(--icono-2);
  height: var(--icono-2);
  flex: none;
  color: var(--texto-2);
}
.nav-enlace--activo .nav-enlace__icono { color: var(--primario); }

/* Módulo previsto que todavía no está construido: se ve, pero no lleva a ninguna parte.
   Lo decide solo el enrutador (Router::existe), así que no hay que tocar nada al construirlo. */
.nav-enlace--pronto {
  color: var(--texto-3);
  cursor: default;
}
.nav-enlace--pronto:hover { background: none; }
.nav-enlace--pronto .nav-enlace__icono { opacity: .5; }
.nav-enlace__pronto {
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-3);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: 0 var(--e1);
}

.nav-enlace__texto {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-enlace__contador {
  flex: none;
  min-width: var(--e4);
  padding: 0 var(--e1);
  border-radius: var(--r);
  background: var(--neutro-suave);
  color: var(--texto-2);
  font-family: var(--mono);
  font-size: var(--t-badge);
  text-align: center;
}
.nav-enlace__contador--aviso {
  background: var(--peligro);
  color: var(--texto-invertido);
}

/* Estado plegado: solo iconos */
.app--plegado .nav-enlace__texto,
.app--plegado .nav-enlace__contador,
.app--plegado .nav-grupo__titulo,
.app--plegado .barra-lateral__marca span,
.app--plegado .boton-plegar__texto { display: none; }

.app--plegado .nav-enlace { justify-content: center; padding: 0; }
.app--plegado .nav-grupo + .nav-grupo {
  margin-top: var(--e2);
  border-top: var(--linea) solid var(--borde);
  padding-top: var(--e2);
}

.boton-plegar {
  display: flex;
  align-items: center;
  gap: var(--e2);
  width: 100%;
  height: var(--alto-control);
  padding: 0 var(--e2);
  border-radius: var(--r);
  color: var(--texto-2);
  font-size: var(--t-mini);
}
.boton-plegar:hover { background: var(--superficie-2); }

/* 3.2 Columna principal ----------------------------------------------------- */

.principal {
  display: flex;
  flex-direction: column;
  min-width: 0;                       /* permite que las tablas hagan scroll */
}

/* 3.3 Barra superior de 48 px ----------------------------------------------- */

.barra-superior {
  position: sticky;
  top: 0;
  z-index: var(--z-barra-superior);
  display: flex;
  align-items: center;
  gap: var(--e3);
  height: var(--alto-barra-superior);
  flex: none;
  padding: 0 var(--pad-contenido);
  background: var(--superficie);
  border-bottom: var(--linea) solid var(--borde);
}

.barra-superior__titulo {
  font-size: var(--t-cuerpo);
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.barra-superior__separador {
  width: var(--linea);
  height: var(--e4);
  flex: none;
  background: var(--borde);
}

.barra-superior__centro {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.barra-superior__derecha {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex: none;
}

.barra-superior__usuario {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-size: var(--t-mini);
  text-align: right;
  white-space: nowrap;
}
.barra-superior__usuario b { font-weight: var(--peso-medio); }
.barra-superior__usuario span { color: var(--texto-2); }

/* Boton hamburguesa: solo por debajo de 768 px */
.boton-menu {
  display: none;
  width: var(--alto-control);
  height: var(--alto-control);
  align-items: center;
  justify-content: center;
  border-radius: var(--r);
  color: var(--texto-2);
}
.boton-menu:hover { background: var(--superficie-2); }

/* Indicador de conexion (api.js) */
.sin-conexion {
  display: none;
  align-items: center;
  gap: var(--e1);
  height: var(--alto-control-sm);
  padding: 0 var(--e2);
  border: var(--linea) solid var(--peligro);
  border-radius: var(--r);
  background: var(--peligro-suave);
  color: var(--peligro);
  font-size: var(--t-mini);
}
body.esta-sin-conexion .sin-conexion { display: inline-flex; }

/* 3.4 Contenido ------------------------------------------------------------- */

.contenido {
  flex: 1;
  padding: var(--pad-contenido);
}

.contenido__interior {
  max-width: var(--ancho-contenido);
  margin: 0 auto;
}

/* Cabecera de pantalla: titulo + breadcrumb a la izquierda, acciones a la derecha */
.cabecera-pantalla {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e3);
  margin-bottom: var(--e4);
}

.cabecera-pantalla__acciones {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex: none;
}

/* Separacion estandar entre secciones de una pantalla */
.seccion + .seccion { margin-top: var(--e5); }

.seccion__titulo {
  margin-bottom: var(--e3);
  padding-bottom: var(--e2);
  border-bottom: var(--linea) solid var(--borde);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-etiqueta);
  color: var(--texto-2);
}

/* Velo compartido por drawer y modal */
.velo {
  position: fixed;
  inset: 0;
  z-index: var(--z-velo);
  background: var(--velo);
}

/* --------------------------------------------------------------------------
   4. GRID DE 12 COLUMNAS
   -------------------------------------------------------------------------- */

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--e3);
}

.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* --------------------------------------------------------------------------
   5. UTILIDADES SOBRE LA GRILLA DE 8 px
   -------------------------------------------------------------------------- */

.fila {
  display: flex;
  align-items: center;
  gap: var(--e2);
}
.fila--arriba   { align-items: flex-start; }
.fila--abajo    { align-items: flex-end; }
.fila--fin      { justify-content: flex-end; }
.fila--entre    { justify-content: space-between; }
.fila--centro   { justify-content: center; }
.fila--envolver { flex-wrap: wrap; }

.columna {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}

.crece      { flex: 1; min-width: 0; }
.no-crece   { flex: none; }
.espaciador { flex: 1; }

.gap-1 { gap: var(--e1); }
.gap-2 { gap: var(--e2); }
.gap-3 { gap: var(--e3); }
.gap-4 { gap: var(--e4); }
.gap-5 { gap: var(--e5); }
.gap-6 { gap: var(--e6); }

.m-0  { margin: 0; }
.mt-1 { margin-top: var(--e1); }
.mt-2 { margin-top: var(--e2); }
.mt-3 { margin-top: var(--e3); }
.mt-4 { margin-top: var(--e4); }
.mt-5 { margin-top: var(--e5); }
.mt-6 { margin-top: var(--e6); }
.mb-1 { margin-bottom: var(--e1); }
.mb-2 { margin-bottom: var(--e2); }
.mb-3 { margin-bottom: var(--e3); }
.mb-4 { margin-bottom: var(--e4); }
.mb-5 { margin-bottom: var(--e5); }
.mb-6 { margin-bottom: var(--e6); }

.p-0 { padding: 0; }
.p-1 { padding: var(--e1); }
.p-2 { padding: var(--e2); }
.p-3 { padding: var(--e3); }
.p-4 { padding: var(--e4); }
.p-5 { padding: var(--e5); }

.ancho-total { width: 100%; }
.texto-izq    { text-align: left; }
.texto-centro { text-align: center; }
.texto-der    { text-align: right; }

.oculto { display: none !important; }
.solo-lectores {                       /* visible solo para lectores de pantalla */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.solo-movil { display: none; }

/* --------------------------------------------------------------------------
   6. RESPONSIVE — 768 px y 360 px
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  /* La barra lateral pasa a panel deslizante sobre el contenido */
  .app,
  .app--plegado { grid-template-columns: 1fr; }

  .barra-lateral {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--ancho-barra-lateral);
    height: 100%;
    transform: translateX(-100%);
    transition: transform var(--transicion-panel);
    box-shadow: var(--sombra-2);
  }
  .app--menu-abierto .barra-lateral { transform: translateX(0); }

  /* Plegado no aplica en movil: siempre se ven los textos */
  .app--plegado .nav-enlace__texto,
  .app--plegado .nav-enlace__contador,
  .app--plegado .nav-grupo__titulo { display: initial; }
  .app--plegado .nav-enlace { justify-content: flex-start; padding: 0 var(--e3); }

  .boton-menu {
    display: inline-flex;
    width: var(--alto-control-pos);
    height: var(--alto-control-pos);
  }

  /* Areas tactiles de 44 px (§9.8): en movil el menu se toca con el pulgar. */
  .nav-enlace { height: var(--alto-control-pos); }
  .boton-plegar { height: var(--alto-control-pos); }

  .barra-superior { padding: 0 var(--pad-contenido-movil); gap: var(--e2); }
  .barra-superior__centro { justify-content: flex-end; }

  .contenido { padding: var(--pad-contenido-movil); }

  .cabecera-pantalla {
    flex-direction: column;
    align-items: stretch;
  }

  /* El grid de 12 se reduce a 4 columnas: los campos escalan, no solo se apilan */
  .grid-12 { grid-template-columns: repeat(4, 1fr); gap: var(--e2); }
  .col-1, .col-2  { grid-column: span 1; }
  .col-3, .col-4  { grid-column: span 2; }
  .col-5, .col-6  { grid-column: span 2; }
  .col-7, .col-8,
  .col-9, .col-10,
  .col-11, .col-12 { grid-column: span 4; }

  .solo-movil      { display: initial; }
  .solo-escritorio { display: none !important; }
}

@media (max-width: 360px) {

  .barra-lateral { width: 100%; }

  .barra-superior__titulo,
  .barra-superior__separador { display: none; }

  /* Una sola columna: a este ancho no cabe una fila de dos campos */
  .grid-12 { grid-template-columns: 1fr; }
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { grid-column: span 1; }

  .cabecera-pantalla__acciones > * { flex: 1; }
}