/* campo — hoja única.
 *
 * Dos reglas de diseño mandan sobre todo lo demás:
 *
 *   1. Estética ERP (Odoo): barra superior, migas, acciones a la vista, paneles.
 *   2. SIN SCROLL DE PÁGINA. La vista entra completa en el viewport. Lo que no
 *      cabe se pagina o se reparte; lo único que puede desplazarse por dentro es
 *      el cuerpo de una tabla, y eso es deliberado.
 *
 * De ahí sale toda la estructura: .app es una grilla de alto fijo y cada nivel
 * declara min-height:0 para que el hijo pueda encogerse en vez de empujar la
 * página. Sin ese min-height:0 la grilla crece y aparece el scroll que no queremos.
 */

:root {
  --verde:       #1f4d3a;
  --verde-claro: #2c6b50;
  --acento:      #0f8a5f;
  --fondo:       #f4f5f7;
  --panel:       #ffffff;
  --borde:       #e3e6ea;
  --texto:       #1c2b26;
  --suave:       #6b7a75;
  --alerta:      #b3261e;
  --aviso:       #8a6100;
  --ok:          #1e7a46;
  --radio:       8px;
  --sombra:      0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;                 /* la promesa: la página no scrollea */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: var(--texto);
  background: var(--fondo);
}

/* ---------- estructura ---------- */
.app {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto auto 1fr;
  overflow: hidden;
}
/* La columna implícita de este grid se dimensiona por el min-content de sus
   hijos, y los hijos de un grid traen min-width:auto. Sin este min-width:0, el
   ancho mínimo de la tabla apilada estiraba .app a 444px dentro de una ventana
   de 375: la barra superior y todo el resto se salían por la derecha, y como
   html tiene overflow:hidden el desbordamiento quedaba recortado en silencio
   —ni siquiera aparecía en document.scrollWidth—. Solo se veía en la captura. */
.app > * { min-width: 0; }

.contenido {
  min-height: 0;                    /* clave: deja que el panel se encoja */
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

/* ---------- barra superior ---------- */
.topbar {
  background: var(--verde);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 16px;
  height: 46px;
}
.marca {
  font-weight: 700;
  letter-spacing: .3px;
  font-size: 15px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.modulos {
  display: flex;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.modulos::-webkit-scrollbar { display: none; }
.modulos a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  padding: 6px 11px;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 13.5px;
}
.modulos a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.modulos a.activo { background: rgba(255, 255, 255, .18); color: #fff; font-weight: 600; }

.topbar-fin { display: flex; align-items: center; gap: 10px; }
.topbar-fin form { display: flex; }
.selector-empresa {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  max-width: 210px;
}
.selector-empresa option { color: var(--texto); }
.usuario { font-size: 13px; color: rgba(255, 255, 255, .85); white-space: nowrap; }

/* Campana de avisos. El globo con el número va pegado arriba a la derecha. */
.campana { position: relative; text-decoration: none; font-size: 16px; line-height: 1; padding: 4px; }
.campana .globo {
  position: absolute;
  top: -3px;
  right: -5px;
  background: #d93025;
  color: #fff;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 5px;
  line-height: 1.5;
}
/* Texto solo para lectores de pantalla: el número del globo no se lee solo. */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.salir { color: rgba(255, 255, 255, .85); text-decoration: none; font-size: 13px; }
.salir:hover { color: #fff; text-decoration: underline; }

/* ---------- barra de migas y acciones ---------- */
.subbar {
  background: var(--panel);
  border-bottom: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 18px;
  min-height: 46px;
}
.migas { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--suave); min-width: 0; }
.migas a { color: var(--suave); text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.migas .actual { color: var(--texto); font-weight: 600; font-size: 15px; }
.acciones { display: flex; gap: 8px; flex-shrink: 0; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--borde);
  background: var(--panel);
  color: var(--texto);
  border-radius: 6px;
  padding: 6px 13px;
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: #f2f4f6; }
.btn-primario { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }
.btn-primario:hover { background: #0c7550; }
.btn-peligro { color: var(--alerta); border-color: #e7c3c0; }
.btn-peligro:hover { background: #fdf3f2; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ---------- paneles ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.panel.crece { flex: 1; }
.panel-cab {
  padding: 11px 14px;
  border-bottom: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.panel-cab h2 { margin: 0; font-size: 14px; font-weight: 600; }
/* flex:1 para que el pie del panel quede pegado abajo y no flotando bajo el
   contenido cuando el panel es más alto que lo que lleva dentro. */
.panel-cuerpo { padding: 14px; min-height: 0; overflow: auto; flex: 1 1 auto; }
.panel-pie {
  padding: 9px 14px;
  border-top: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Envuelve: en el pie del conteo de bodega conviven una fecha y un botón, y
     en 390px salían empujados fuera del panel. */
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: var(--suave);
}

.columnas { display: grid; grid-template-columns: 1fr 320px; gap: 14px; flex: 1; min-height: 0; }
/* min-width:0 además de min-height:0. Un hijo de grid trae min-width:auto, así
   que NO puede encogerse por debajo del ancho mínimo de su contenido: con una
   tabla de nueve columnas adentro, la columna medía 418px dentro de una ventana
   de 375 y el contenido se cortaba por la derecha. Y el corte pasaba dentro de
   un contenedor con overflow:auto, así que document.scrollWidth no lo delataba:
   solo se veía en la captura. */
.columnas > * { min-height: 0; min-width: 0; }

/* ---------- tablas ---------- */
.tabla-wrap { flex: 1; min-height: 0; overflow: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tabla thead th {
  position: sticky;
  top: 0;
  background: #fafbfc;
  border-bottom: 1px solid var(--borde);
  text-align: left;
  padding: 9px 12px;
  font-weight: 600;
  color: var(--suave);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
  z-index: 1;
}
table.tabla td { padding: 9px 12px; border-bottom: 1px solid #f0f2f4; }
table.tabla tbody tr:hover { background: #fbfcfd; }
table.tabla tbody tr.clicable { cursor: pointer; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vacio { padding: 34px 14px; text-align: center; color: var(--suave); }

/* ---------- etiquetas de estado ---------- */
.tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.tag-gris    { background: #eef0f2; color: #55605c; }
.tag-azul    { background: #e7f0fb; color: #1d4f91; }
.tag-verde   { background: #e6f4ec; color: var(--ok); }
.tag-ambar   { background: #fdf3e0; color: var(--aviso); }
.tag-rojo    { background: #fceceb; color: var(--alerta); }

/* ---------- tarjetas del panel de inicio ---------- */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
/* Variante para grupos de distinto tamaño: auto-fill deja la columna vacía en
   vez de estirar la única tarjeta del grupo a lo ancho de la pantalla. */
.tarjetas.parejas { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.tarjeta {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  display: block;
}
.tarjeta:hover { border-color: var(--acento); }
.tarjeta .cifra { font-size: 26px; font-weight: 700; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.tarjeta .rotulo { font-size: 12.5px; color: var(--suave); text-transform: uppercase; letter-spacing: .3px; }
.tarjeta .pie { font-size: 12.5px; color: var(--suave); }

/* ---------- formularios ---------- */
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo label { font-size: 12.5px; color: var(--suave); font-weight: 600; }
.campo input, .campo select, .campo textarea {
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 13.5px;
  font-family: inherit;
  background: #fff;
  color: var(--texto);
  width: 100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid rgba(15, 138, 95, .25);
  border-color: var(--acento);
}
.linea-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }

/* ---------- avisos ---------- */
.aviso {
  padding: 10px 13px;
  border-radius: var(--radio);
  font-size: 13.5px;
  border: 1px solid;
}
.aviso-error { background: #fceceb; border-color: #f0c9c6; color: var(--alerta); }
.aviso-ok    { background: #e6f4ec; border-color: #bfe3cd; color: var(--ok); }
.aviso-info  { background: #eef4fb; border-color: #cfe0f3; color: #1d4f91; }

/* ---------- login ---------- */
/* Dos mitades: el panel verde donde caen las frases y el formulario. En el
   teléfono el panel desaparece (regla al final del archivo) y queda el
   formulario centrado sobre el mismo verde de siempre. */
.acceso { height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; }

.acceso-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 42px 44px;
  color: #fff;
  background: linear-gradient(125deg, #143026, var(--verde), var(--verde-claro), #0f8a5f, var(--verde));
  background-size: 300% 300%;
  animation: acceso-fondo 16s ease infinite;
}
@keyframes acceso-fondo {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.hero-marca { position: relative; z-index: 20; font-size: 19px; font-weight: 700; letter-spacing: .3px; }
/* El titular va DEBAJO de las fichas (z-10 contra z-15) porque además es el
   obstáculo físico sobre el que se apilan: se ve el borde de la pila apoyada. */
.hero-titular { position: relative; z-index: 10; margin-top: auto; max-width: 480px; }
.hero-antetitulo {
  margin: 0 0 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px;
  color: rgba(255, 255, 255, .72);
}
.hero-titular h1 {
  margin: 0;
  font-size: clamp(25px, 2.6vw, 36px); line-height: 1.18; font-weight: 800;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .28);
}
.hero-titular h1 span { color: #9fe3c4; }
.hero-lluvia { position: absolute; inset: 0; z-index: 15; pointer-events: none; }

.ficha {
  position: absolute; top: 0; left: 0;
  max-width: 200px; padding: 8px 14px;
  border-radius: 10px;
  font-size: 12px; font-weight: 600; line-height: 1.35; text-align: center;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .18);
  user-select: none; pointer-events: none;
  transition: opacity .6s ease;
}
.ficha.sale { opacity: 0; }
.ficha.t1 { background: rgba(15, 138, 95, .93);  border: 1px solid rgba(120, 220, 175, .5); }
.ficha.t2 { background: rgba(44, 107, 80, .95);  border: 1px solid rgba(140, 200, 170, .45); }
.ficha.t3 { background: rgba(23, 122, 110, .90); border: 1px solid rgba(110, 210, 200, .45); }
.ficha.t4 { background: rgba(101, 122, 46, .92); border: 1px solid rgba(190, 214, 130, .45); }
.ficha.t5 { background: rgba(138, 97, 0, .88);   border: 1px solid rgba(232, 190, 110, .45); }

.acceso-forma { display: grid; place-items: center; padding: 20px; background: var(--fondo); }

.login-fondo {
  height: 100dvh;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--verde) 0%, #143026 100%);
  padding: 20px;
}
.login-caja {
  background: var(--panel);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
  padding: 30px 28px;
  width: 100%;
  max-width: 370px;
}
.login-caja h1 { margin: 0 0 3px; font-size: 21px; }
.login-caja .sub { margin: 0 0 20px; color: var(--suave); font-size: 13.5px; }
.login-caja .campo { margin-bottom: 13px; }
.login-caja .btn { width: 100%; justify-content: center; padding: 9px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .columnas { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
}

/* En pantalla angosta el panel de la lluvia no aparece: dejaría el formulario
   en una franja, y quien entra desde el teléfono está en terreno y va a lo suyo.
   El JS lo detecta solo (el panel mide 0) y ni arranca la física. */
@media (max-width: 880px) {
  .acceso { grid-template-columns: 1fr; }
  .acceso-hero { display: none; }
  .acceso-forma { background: linear-gradient(160deg, var(--verde) 0%, #143026 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .acceso-hero { animation: none; }
}

@media (max-width: 760px) {
  .topbar { gap: 10px; padding: 0 10px; }
  .usuario { display: none; }
  .selector-empresa { max-width: 130px; }
  .subbar { flex-direction: column; align-items: stretch; gap: 8px; padding: 9px 12px; }
  .acciones { justify-content: flex-end; }

  /* En el teléfono la promesa cambia de forma, no de fondo: la PÁGINA sigue sin
     scrollear (body queda fijo), pero el área de contenido sí se desplaza por
     dentro. Comprimir dos paneles apilados en 667px de alto deja la tabla en una
     franja de tres filas, que es peor que desplazar. En escritorio la regla se
     mantiene entera: todo cabe sin desplazar nada. */
  .contenido { padding: 10px 12px 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .columnas { display: flex; flex-direction: column; }
  /* Los paneles toman su alto natural y es el contenido el que se desplaza. Sin
     el `.contenido > .panel`, varios paneles apilados se reparten el alto del
     teléfono y cada uno recorta lo suyo por dentro: en el índice de datos se
     veía media tarjeta de «Bodegas» y media de «Certificaciones». */
  .columnas > *, .panel.crece, .contenido > .panel { flex: 0 0 auto; }
  .tabla-wrap { overflow: visible; flex: 0 0 auto; }
  .panel-cuerpo { overflow: visible; }

  /* El índice de datos maestros son doce accesos: en el teléfono valen como
     botones en dos columnas, no como tarjetas con explicación. La ayuda de
     cada uno se lee igual al entrar. */
  .tarjetas.parejas { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 9px; }
  .tarjetas.parejas .tarjeta { padding: 9px 11px; }
  .tarjetas.parejas .cifra { font-size: 19px; margin: 2px 0 0; }
  .tarjetas.parejas .pie { display: none; }

  /* Las tablas se apilan como fichas: en un teléfono, 8 columnas no se leen.
     Cada celda muestra su rótulo desde data-rotulo. */
  table.tabla thead { display: none; }
  table.tabla, table.tabla tbody, table.tabla tr, table.tabla td { display: block; width: 100%; }
  table.tabla tr {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    margin-bottom: 9px;
    padding: 5px 3px;
  }
  table.tabla td {
    border: 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 11px;
    min-width: 0;
    overflow-wrap: break-word; /* un nombre largo parte en vez de ensanchar la fila */
  }
  table.tabla td > * { min-width: 0; }
  table.tabla td::before {
    content: attr(data-rotulo);
    color: var(--suave);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    flex-shrink: 0;
  }
  .num { text-align: right; }

  /* Tablas de contenido mixto (rótulo + detalle + monto) que como ficha quedan
     ilegibles: se mantienen en formato tabla y sin rótulos repetidos.
     Va al final del bloque a propósito: tiene la misma especificidad que la
     regla de arriba que pone el ::before, así que solo gana por orden. */
  table.tabla-simple, table.tabla-simple tbody, table.tabla-simple tr { display: table; width: 100%; }
  table.tabla-simple tr { border: 0; border-bottom: 1px solid #f0f2f4; border-radius: 0; margin: 0; padding: 0; }
  table.tabla-simple td { display: table-cell; }
  table.tabla-simple td::before { content: none; }
}