/* ==========================================================================
   ASQ UI KIT · Sistema de diseño reutilizable
   --------------------------------------------------------------------------
   Estética base: ASQ CRM (navy #1B3A6B + Arial). Pensado para replicarse en
   otras apps de ASQ — p.ej. "ASQ Inventarios APP" / "INVENTA".

   CÓMO RE-MARCAR (rebranding):
   Solo edite el bloque "MARCA" de abajo. Todo lo demás hereda de esas
   variables, así que cambiando 5–6 colores toda la app cambia de identidad
   sin tocar ni un componente.

     INVENTA (ejemplo verde):
       --brand:        #1E6B4F;
       --brand-dark:   #14523B;
       --brand-light:  #2C996F;
       --brand-50:     #EEF6F2;
       --brand-100:    #DCEDE4;
       --accent:       #E8A33D;   (el dorado ASQ funciona en ambas)

   La marca se define UNA vez; los tokens semánticos (--navy, --ok, --bad…)
   la consumen. No cambie los componentes: cambie la marca.
   ========================================================================== */

:root {
  /* ---------- MARCA (edite solo esto para re-marcar) ---------- */
  --brand:        #1B3A6B;   /* color primario */
  --brand-dark:   #142C52;   /* hover / fondos oscuros */
  --brand-light:  #2C5499;   /* bordes de foco / enlaces */
  --brand-50:     #EEF1F6;   /* fondo tenue (hover de filas) */
  --brand-100:    #DCE3EF;   /* chips / badges suaves */
  --accent:       #E8A33D;   /* acento (dorado) — avisos, detalles */

  /* ---------- Alias de compatibilidad ----------
     Mantienen los nombres originales del CRM para que el CSS de componentes
     y el HTML existente sigan funcionando sin cambios. */
  --navy:      var(--brand);
  --navy-dark: var(--brand-dark);
  --navy-light:var(--brand-light);
  --navy-50:   var(--brand-50);
  --navy-100:  var(--brand-100);

  /* ---------- Color semántico (estado) ---------- */
  --ok:     #1E8E5A;  --ok-bg:  #E4F4EC;   /* éxito / positivo */
  --bad:    #C0392B;  --bad-bg: #FBE9E7;   /* error / negativo */
  /* `--warn` estaba SIN su `-bg`, y era el único de los tres: dos plantillas la
     usaban igual —el chip «Aumento» de Descuadres y el de los requisitos
     propios— y salían sin fondo, como texto de color suelto. No fallaba nada y
     el CSS se leía correcto; lo encontró el banco visual. El valor es el de
     `.badge-accent`, que es el ámbar que el sistema ya usa para avisar. */
  --warn:   #B8860B;  --warn-bg: #FDF3E3;  /* advertencia */

  /* ---------- Neutros (con sesgo azul, no gris puro) ---------- */
  --ink:    #1E2A3A;   /* texto principal */
  --muted:  #6B7787;   /* texto secundario */
  --line:   #E2E7EE;   /* bordes / separadores */
  --bg:     #F4F6F9;   /* fondo de página */
  --white:  #FFFFFF;

  /* ---------- Forma ---------- */
  --radius: 10px;
  --shadow: 0 1px 3px rgba(20,44,82,.08), 0 4px 14px rgba(20,44,82,.06);

  /* ---------- Tipografía ---------- */
  --font: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/* ==========================================================================
   BASE
   ========================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; color: var(--navy); font-weight: bold; }
a { color: var(--navy-light); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ==========================================================================
   TOPBAR + NAVEGACIÓN (shell de la app)
   ========================================================================== */
.topbar {
  display: flex; align-items: center; gap: 16px;
  /* min-height en vez de height fija: la barra tiene 13 enlaces y 4 indicadores,
     que juntos piden 1667px. Con altura fija y sin envolver, todo lo que no
     entraba empujaba el ancho del body y la PAGINA ENTERA scrolleaba en
     horizontal, en cualquier pantalla de menos de ~1700px (o sea, en todos los
     notebooks). Envolver a una segunda fila es lo que ya hacia el layout movil. */
  min-height: 60px; padding: 6px 24px;
  background: var(--navy);
  position: sticky; top: 0; z-index: 50;
}
.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 9px;
  background: var(--white); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-weight: bold; font-size: 16px; letter-spacing: -.5px;
}
.brand-text { color: #fff; font-weight: bold; font-size: 17px; letter-spacing: .3px; }
.brand-text small { display: block; font-size: 11px; font-weight: normal; color: rgba(255,255,255,.7); letter-spacing: .5px; }

/* El nav se queda en una sola linea y a su tamaño: quien cede es la barra, que
   envuelve. Se probaron las dos alternativas y las dos estaban mal:
     - dejar que el nav envolviera por dentro partia la barra en tres o cuatro
       filas (hasta 185px de alto) incluso donde entraba de sobra;
     - darle overflow-x lo ensanchaba 184px y, peor, habria recortado el
       desplegable de "Mov Inventario", que necesita salirse del nav. */
.nav { display: flex; gap: 3px; align-items: center; }
.nav-link {
  color: rgba(255,255,255,.82);
  padding: 7px 10px; border-radius: 7px;
  font-size: 12.5px; font-weight: bold;
}
.nav-link:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.nav-link.active { background: var(--white); color: var(--navy); }

.topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto;
                flex: 0 0 auto; flex-wrap: wrap; }
.indicadores { display: flex; gap: 8px; }
.uf-badge {
  background: rgba(255,255,255,.14); color: #fff;
  border-radius: 7px; padding: 5px 8px; font-size: 11.5px; font-weight: bold;
}
.uf-badge small { color: rgba(255,255,255,.7); font-weight: normal; }

.nav-toggle {
  display: none;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  color: #fff; font-size: 20px; line-height: 1;
  width: 44px; height: 44px; border-radius: 8px; cursor: pointer;
  align-items: center; justify-content: center;
}

/* ==========================================================================
   CONTENEDOR + ENCABEZADO DE PÁGINA
   ========================================================================== */
.content { max-width: 1180px; margin: 0 auto; padding: 26px 24px 60px; }
.page-head { margin-bottom: 20px; }
.page-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; }
.page-sub { color: var(--muted); font-size: 13.5px; margin: 4px 0 0; }
.head-actions { display: flex; gap: 10px; align-items: center; }
.form-section-title { font-size: 13px; font-weight: bold; color: var(--navy); margin: 22px 0 10px; border-top: 1px solid var(--line); padding-top: 16px; }

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn {
  font-family: inherit; font-size: 13.5px; font-weight: bold;
  padding: 9px 16px; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  transition: filter .12s, background .12s, border-color .12s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-dark); }
.btn-accent { background: var(--accent); color: #3a2708; }
.btn-accent:hover { filter: brightness(.96); }
.btn-light { background: var(--navy-50); color: var(--navy); border-color: var(--navy-100); }
.btn-light:hover { background: var(--navy-100); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { background: var(--navy-50); }
.btn-danger { background: var(--bad-bg); color: var(--bad); }
.btn-danger:hover { filter: brightness(.97); }

/* ==========================================================================
   KPI CARDS (tarjetas de indicador)
   ========================================================================== */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.kpi-card {
  background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--navy); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--shadow);
}
.kpi-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; font-weight: bold; }
.kpi-value { font-size: 26px; font-weight: bold; color: var(--navy); font-variant-numeric: tabular-nums; }
.kpi-foot { font-size: 12px; color: var(--muted); }
.text-ok { color: var(--ok) !important; }
.text-bad { color: var(--bad) !important; }
.text-warn { color: var(--warn) !important; }

/* ==========================================================================
   PANELES / GRÁFICOS
   ========================================================================== */
.chart-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.panel {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
}
.panel--table { padding: 0; overflow: hidden; }
.panel-title { font-size: 15px; margin-bottom: 14px; }
.panel-title small { color: var(--muted); font-weight: normal; font-size: 12px; }
.chart-box { position: relative; height: 300px; }
.chart-box--tall { height: 380px; }

/* ==========================================================================
   TOOLBAR / FILTROS / INPUTS
   ========================================================================== */
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar--filters { align-items: center; }
.input {
  font-family: inherit; font-size: 13px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--white); color: var(--ink);
}
.input:focus { outline: none; border-color: var(--navy-light); box-shadow: 0 0 0 3px rgba(44,84,153,.15); }
.input-search { flex: 1; min-width: 240px; }
/* Un <select> crece hasta su opción más larga, y varias listas de INVENTA traen
   nombres de químicos de 60 caracteres: en el dashboard eso empujaba la barra de
   filtros a 509px dentro de una pantalla de 375 y desbordaba la página entera.
   El texto de la opción elegida se recorta; el desplegable abierto se ve completo. */
select.input { cursor: pointer; max-width: 100%; text-overflow: ellipsis; }
.input.ro { background: var(--navy-50); color: var(--ink); cursor: default; }

/* ==========================================================================
   TABLAS
   ========================================================================== */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th {
  background: var(--navy); color: #fff; text-align: left;
  font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
  padding: 12px 14px; white-space: nowrap;
}
.data-table th.num, .data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table tbody tr:hover { background: var(--navy-50); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .empty { text-align: center; color: var(--muted); padding: 28px; }
.data-table tbody tr.row-total td { border-top: 2px solid var(--navy); background: var(--navy-50); font-weight: bold; color: var(--navy); }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.cell-strong { font-weight: bold; color: var(--navy); }
.cell-sub { font-size: 12px; color: var(--muted); }

/* ==========================================================================
   BADGES (etiquetas de estado)
   ========================================================================== */
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: bold; letter-spacing: .3px; }
.badge-brand   { background: var(--navy-100); color: var(--navy); }
.badge-ok      { background: var(--ok-bg);   color: var(--ok); }
.badge-bad     { background: var(--bad-bg);  color: var(--bad); }
.badge-muted   { background: #EDEFF3;        color: var(--muted); }
.badge-accent  { background: #FDF3E3;        color: #8a5a0a; }
.badge-purple  { background: #E7E0F5;        color: #5B3FA0; }

/* ==========================================================================
   FORMULARIOS
   ========================================================================== */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: bold; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.field .input, .field textarea, .field select { width: 100%; }
.field textarea { font-family: inherit; font-size: 13px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; min-height: 70px; }
.field .req { color: var(--bad); }
.field-hint { font-size: 11px; color: var(--muted); }

/* ==========================================================================
   MODAL
   ========================================================================== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20,28,44,.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; z-index: 100; overflow-y: auto;
}
.modal { background: var(--white); border-radius: 12px; width: 100%; max-width: 720px; box-shadow: 0 20px 60px rgba(0,0,0,.3); animation: pop .15s ease-out; }
.modal--wide { max-width: 860px; }
.modal--xwide { max-width: 1120px; }
@keyframes pop { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.modal-head h2 { font-size: 18px; }
.modal-close { background: none; border: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.modal-close:hover { color: var(--bad); }
.modal-body { padding: 22px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--line); background: #FAFBFD; border-radius: 0 0 12px 12px; }

/* Ventana nativa (<dialog>). El navegador la centra y le pone su ::backdrop, asi
   que no hace falta `.modal-overlay`; pero SI hay que quitarle el borde y el
   padding propios. Reusa .modal-head/.modal-body/.modal-foot/.modal-close. */
dialog.modal-ventana {
  border: none; border-radius: 12px; padding: 0;
  background: var(--white); color: var(--ink);
  width: 100%; max-width: 920px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
dialog.modal-ventana::backdrop { background: rgba(20,28,44,.55); }
/* Una celda de tabla no estira su contenido y `.input` no declara ancho: sin
   esto el campo del producto -que lleva nombres de 60 caracteres- sale mas
   angosto que los de precio. */
.modal-ventana td .input { width: 100%; }
/* Sin esto el formulario largo empuja la ventana fuera de la pantalla en un
   portatil: son 5 campos de cabecera mas una fila por producto. */
dialog.modal-ventana .modal-body { max-height: 62vh; overflow-y: auto; }

/* ==========================================================================
   AVISO (banner de alerta con acento)
   ========================================================================== */
.aviso {
  display: flex; align-items: center; gap: 10px;
  background: #FFF7E6; color: #92600A;
  border: 1px solid #F2D68A; border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px;
  font-size: 13.5px; font-weight: bold; box-shadow: var(--shadow);
}
.aviso .aviso-link { margin-left: auto; color: var(--navy-light); font-weight: bold; white-space: nowrap; }

/* ==========================================================================
   TOAST (notificación flotante)
   ========================================================================== */
#toast-root { position: fixed; bottom: 22px; right: 22px; display: flex; flex-direction: column; gap: 10px; z-index: 200; }
.toast {
  background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 13px; font-weight: bold;
  animation: slidein .2s ease-out; max-width: 340px;
}
.toast.ok { background: var(--ok); }
.toast.bad { background: var(--bad); }
@keyframes slidein { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ==========================================================================
   UTILIDADES
   ========================================================================== */
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
/* La barra completa (marca + 13 enlaces + 4 indicadores) pide ~1700px. Debajo
   de eso el nav baja a una fila propia, entera, y arriba quedan la marca y los
   indicadores. Se fija explicitamente en vez de dejar que flexbox reparta: sin
   esto la barra se partia en tres o cuatro filas y llegaba a 185px de alto.
   Dos filas de ~95px es el peor caso, y solo entre 821px y 1700px. */
@media (max-width: 1700px) {
  .topbar { gap: 12px; padding-left: 16px; padding-right: 16px; flex-wrap: wrap; }
  /* El nav baja a una fila propia, entera. Se fija explicitamente en vez de
     dejar que flexbox reparta: sin esto la barra se partia en tres o cuatro
     filas y llegaba a 185px de alto. */
  .nav {
    order: 5; flex: 1 0 100%;
    flex-wrap: wrap;      /* ultimo recurso, si ni la fila entera alcanza */
  }
  .topbar-right { gap: 8px; }
  .indicadores { gap: 4px; }
}

@media (max-width: 980px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .chart-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav { display: none; width: 100%; order: 5; flex-direction: column; gap: 2px; margin: 6px 0 0; }
  .nav.open { display: flex; }
  .nav-link { min-height: 44px; display: flex; align-items: center; }
  .topbar { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 12px; }
  .topbar-right { width: 100%; order: 6; flex-wrap: wrap; }
  .btn { min-height: 44px; }
  .input, select.input, .field .input, .field select, .field textarea { min-height: 44px; font-size: 16px; }
  .data-table { min-width: 640px; }
}
@media (max-width: 620px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .content { padding: 18px 14px 50px; }
}


/* ==========================================================================
   [hidden] TIENE QUE ESCONDER
   ==========================================================================
   El `display: none` del atributo `hidden` lo pone el NAVEGADOR, con la
   especificidad mas baja que existe, asi que cualquier regla propia le gana:
   `.btn` declara `display: inline-flex` y un `<button class="btn" hidden>`
   se sigue viendo. El JS queda en verde, la API en 200 y nada en el log.

   Lo encontro el banco visual de la ventana de cotizaciones el 14-09-2026, y
   es el mismo defecto que el CRM cerro el 11-09 con dos enlaces de descarga a
   un 404 a la vista. Va con `!important` y con una prueba que lo exige: sin el
   vuelve a perder contra la proxima clase que declare un `display`.
   ========================================================================== */
[hidden] { display: none !important; }