/* GCI Suppliers — hoja compartida.
   Paleta clara probada estilo monday.com, verificada AA (metodologia 5).
   NADA presionable escribe su propio CSS: todo hereda de los patrones de
   aqui (R13). Un elemento nuevo AGREGA su selector, no se estiliza aparte. */

:root {
  --bg:#F6F7FB;   --panel:#FFFFFF;  --panel2:#F5F6F8;  --panel3:#EBEDF1;
  --line:#E6E9EF; --acc:#0066D0;    --acc-dim:#005BB8;
  /* La pestana en la que estas parado. Medido: #0052A6 sobre #DBE9FA da
     6.18:1, muy por encima del 4.5:1 que pide AA. */
  --acc-suave:#DBE9FA;  --acc-suave2:#CFE1F8;  --acc-fuerte:#0052A6;
  --txt:#323338;  --txt-dim:#676879; --txt-faint:#9699A6;  /* faint = adorno */
  --red:#CC2039;  --green:#007A48;  --blue:#0071A2;  --purple:#913FD6;
  --amber:#8A5A00;
  --on-color:#fff;

  --r:8px;  --r-sm:6px;
  --sombra:0 1px 2px rgba(0,0,0,.06), 0 1px 8px rgba(0,0,0,.04);
}

* { box-sizing:border-box; }

html, body {
  margin:0; padding:0;
  background:var(--bg); color:var(--txt);
  font:14px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}

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

h1 { font-size:22px; font-weight:600; margin:0 0 4px; letter-spacing:-.01em; }
h2 { font-size:16px; font-weight:600; margin:0 0 12px; }
h3 { font-size:14px; font-weight:600; margin:0 0 8px; }

.dim   { color:var(--txt-dim); }
.faint { color:var(--txt-faint); }   /* R12: solo adorno, NUNCA informacion */

/* ---------- Estructura ---------- */
.barra {
  background:var(--panel); border-bottom:1px solid var(--line);
  padding:0 20px; height:56px; min-height:56px;
  display:flex; align-items:center; gap:20px;
  position:sticky; top:0; z-index:20;
  /* Con 11 pestanas mas la marca, debajo de ~1245px no caben. Antes se
     partia en dos renglones y empujaba el contenido; ahora se desliza. */
  overflow-x:auto; overflow-y:hidden; scrollbar-width:thin;
}
/* La marca de la barra es un ENLACE al inicio, asi que hereda el patron de
   lo presionable (R13) en vez de inventarse el suyo. */
.marca { display:inline-flex; align-items:center; align-self:center; gap:10px;
         flex:0 0 auto; height:44px; line-height:1;
         font-weight:700; font-size:15px; color:var(--txt);
         letter-spacing:-.01em; text-decoration:none; white-space:nowrap;
         padding:0 8px; margin-left:-8px; border-radius:var(--r-sm);
         transition:background .12s; }
.marca b { color:var(--acc); font-weight:700; }
a.marca:hover { background:var(--panel2); text-decoration:none; }
a.marca:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
/* El emblema es el logo COMPLETO: el chevron solo se lee como un pico
   incompleto, porque en el logo el triangulo lo cierra el soporte de abajo.
   A 40 px se reconoce la insignia y quedan 8 px de aire arriba y abajo en
   una barra de 56. */
.emblema { height:40px; width:auto; display:block; flex:0 0 auto; }
.logo-acceso { display:block; height:104px; width:auto; margin:0 auto 10px; }
.barra nav { display:flex; gap:2px; margin-left:8px; flex:1 0 auto;
              flex-wrap:nowrap; }
.barra .yo { color:var(--txt-dim); font-size:13px; display:flex;
             align-items:center; gap:10px; flex:0 0 auto; }

.envoltura { max-width:1280px; margin:0 auto; padding:24px 20px 60px; }
.cabecera { display:flex; align-items:flex-start; justify-content:space-between;
            gap:16px; margin-bottom:20px; flex-wrap:wrap; }

.panel { background:var(--panel); border:1px solid var(--line);
         border-radius:var(--r); box-shadow:var(--sombra); }
.panel + .panel { margin-top:16px; }
.panel > .cuerpo { padding:16px; }
.panel > .titulo { padding:12px 16px; border-bottom:1px solid var(--line);
                   font-weight:600; display:flex; align-items:center;
                   justify-content:space-between; gap:12px; }

.rejilla { display:grid; gap:16px; }
.rejilla.c2 { grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); }
.rejilla.c4 { grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); }

/* ---------- Tarjeta de cifra ---------- */
.cifra { background:var(--panel); border:1px solid var(--line);
         border-radius:var(--r); padding:14px 16px; box-shadow:var(--sombra); }
.cifra .n { font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.15; }
.cifra .e { color:var(--txt-dim); font-size:12px; margin-top:2px; }

/* ---------- TODO lo presionable (R13) ---------- */
.btn, button, input[type=submit] {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:34px; padding:0 14px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--panel); color:var(--txt);
  font:inherit; font-weight:500; font-size:13px;
  cursor:pointer; text-decoration:none;
  transition:background .12s, border-color .12s;
}
.btn:hover, button:hover, input[type=submit]:hover {
  background:var(--panel2); border-color:#D6DAE3; text-decoration:none;
}
.btn:focus-visible, button:focus-visible, input[type=submit]:focus-visible,
a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:2px solid var(--acc); outline-offset:2px;
}
.btn.pri, button.pri, input[type=submit] {
  background:var(--acc); border-color:var(--acc); color:var(--on-color);
}
.btn.pri:hover, button.pri:hover, input[type=submit]:hover {
  background:var(--acc-dim); border-color:var(--acc-dim);
}
.btn.peligro { background:var(--red); border-color:var(--red); color:var(--on-color); }
.btn.peligro:hover { background:#B01B31; border-color:#B01B31; }
.btn.chico { height:28px; padding:0 10px; font-size:12px; }
.btn[disabled], button[disabled] { opacity:.5; cursor:not-allowed; }

/* Pestanas de la barra: mismo patron presionable */
.barra nav a {
  height:34px; padding:0 12px; display:inline-flex; align-items:center;
  white-space:nowrap;
  border-radius:var(--r-sm); color:var(--txt-dim); font-weight:500; font-size:13px;
  transition:background .12s, color .12s;
}
.barra nav a:hover { background:var(--panel2); color:var(--txt); text-decoration:none; }
/* La pestana activa va en azul claro, no en gris: se distingue de un simple
   paso del mouse y dice de un vistazo donde estas parado. */
.barra nav a.activa { background:var(--acc-suave); color:var(--acc-fuerte);
                      font-weight:700; }
.barra nav a.activa:hover { background:var(--acc-suave2); color:var(--acc-fuerte); }

/* ---------- Formularios (R15: cada campo con su ficha) ---------- */
.campo { margin-bottom:14px; }
.campo > label { display:block; font-weight:600; font-size:13px; margin-bottom:4px; }
.campo .ficha { color:var(--txt-dim); font-size:12px; margin:-2px 0 6px; }

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=email], input[type=file], select, textarea {
  width:100%; min-height:34px; padding:6px 10px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--panel); color:var(--txt); font:inherit; font-size:13px;
}
input:focus, select:focus, textarea:focus { border-color:var(--acc); }
textarea { min-height:72px; resize:vertical; }
.fila { display:flex; gap:12px; flex-wrap:wrap; }
.fila > .campo { flex:1 1 180px; margin-bottom:14px; }

/* ---------- Tablas ---------- */
.tabla-envoltura { overflow-x:auto; }
table.datos { width:100%; border-collapse:collapse; font-size:13px; }
table.datos th {
  text-align:left; font-weight:600; font-size:11px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--txt-dim);
  padding:8px 12px; background:var(--panel2);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
table.datos td { padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
table.datos tbody tr:hover { background:var(--panel2); }
table.datos tbody tr:last-child td { border-bottom:0; }
table.datos td.num, table.datos th.num { text-align:right; font-variant-numeric:tabular-nums; }
code.np { font-family:ui-monospace, "Cascadia Code", Consolas, monospace;
          font-size:12.5px; font-weight:600; }

/* ---------- Estado: BLOQUE SOLIDO + texto blanco (R10) ----------
   Nunca tinte traslucido + texto de color: reprueba AA sobre fondo claro. */
.chip {
  display:inline-block; padding:2px 8px; border-radius:100px;
  font-size:11px; font-weight:600; line-height:18px;
  color:var(--on-color); background:var(--txt-dim); white-space:nowrap;
}
.chip.ok      { background:var(--green); }   /* R14: semaforo por significado, */
.chip.aviso   { background:var(--amber); }   /* nunca por el color de marca    */
.chip.malo    { background:var(--red); }
.chip.info    { background:var(--blue); }
.chip.neutro  { background:var(--txt-dim); }
.chip.marca   { background:var(--purple); }

/* ---------- Avisos ---------- */
.aviso { padding:10px 14px; border-radius:var(--r-sm); font-size:13px;
         border:1px solid var(--line); background:var(--panel2); margin-bottom:16px; }
.aviso.error { background:#FDECEE; border-color:#F5C4CB; color:#8A1424; }
.aviso.bien  { background:#E8F5EF; border-color:#B8DFCC; color:#005C36; }

.vacio { padding:36px 20px; text-align:center; color:var(--txt-dim); }
.vacio strong { display:block; color:var(--txt); margin-bottom:4px; font-size:15px; }

/* ---------- Especificaciones clave-valor ---------- */
.specs { display:grid; grid-template-columns:auto 1fr; gap:4px 16px;
         font-size:13px; margin:0; }
.specs dt { color:var(--txt-dim); white-space:nowrap; }
.specs dd { margin:0; font-weight:500; }

/* ---------- Login ---------- */
.acceso { min-height:100vh; display:flex; align-items:center; justify-content:center;
          padding:20px; }
.acceso .caja { width:100%; max-width:380px; }
.acceso .marca { font-size:22px; justify-content:center; display:flex;
                 margin:0 0 6px; padding:0; }
.acceso .marca:hover { background:transparent; }
.acceso .lema { text-align:center; color:var(--txt-dim); font-size:13px; margin-bottom:20px; }

@media (max-width:640px) {
  .barra { padding:0 12px; gap:10px; overflow-x:auto; }
  .envoltura { padding:16px 12px 48px; }
}

/* ---------- Matriz de acceso: familias x proveedores ----------
   Replica la hoja de Excel de Orlando. La primera columna se queda fija al
   desplazar a lo ancho, y los encabezados de proveedor van en vertical
   porque son nombres largos y las columnas tienen que ser angostas. */
.matriz-envoltura {
  overflow:auto;                      /* desplaza en los dos ejes */
  max-height:calc(100vh - 230px);     /* deja ver la barra y las cifras */
  border-radius:var(--r);
}
.matriz { border-collapse:separate; border-spacing:0; font-size:12px; }
.matriz th, .matriz td { border-bottom:1px solid var(--line); border-right:1px solid var(--line); }
.matriz thead th {
  background:var(--panel2); color:var(--txt-dim);
  font-size:11px; font-weight:600; padding:6px 4px;
  position:sticky; top:0; z-index:3; vertical-align:bottom;
}
.matriz th.giro { height:190px; padding:6px 2px; width:30px; }
.matriz th.giro > span {
  writing-mode:vertical-rl; transform:rotate(180deg);
  white-space:nowrap; text-align:left; color:var(--txt);
  font-weight:600; max-height:176px; overflow:hidden;
}
.matriz th.fija, .matriz td.fija {
  position:sticky; left:0; z-index:2; background:var(--panel);
  text-align:left; min-width:230px; max-width:300px;
}
.matriz thead th.fija { z-index:4; background:var(--panel2); }
.matriz tbody tr:hover td { background:var(--panel2); }
.matriz tbody tr:hover td.fija { background:var(--panel3); }
.matriz td.celda { padding:0; text-align:center; width:30px; }
.matriz td.conteo, .matriz th.conteo {
  text-align:right; padding:6px 8px; font-variant-numeric:tabular-nums;
  background:var(--panel2); min-width:54px;
}

/* El punto. Hereda del patron presionable: es un boton, no un adorno (R13). */
.punto {
  width:100%; height:30px; padding:0; border:0; border-radius:0;
  background:transparent; cursor:pointer; line-height:30px;
  font-size:15px; color:var(--txt-faint);
}
.punto:hover { background:var(--panel3); color:var(--txt-dim); }
.punto.on { background:var(--acc); color:var(--on-color); }
.punto.on:hover { background:var(--acc-dim); border-color:var(--acc-dim); }
.punto:focus-visible { outline:2px solid var(--acc); outline-offset:-2px; }

.leyenda { display:flex; gap:16px; align-items:center; flex-wrap:wrap;
           font-size:12px; color:var(--txt-dim); margin-top:10px; }
.leyenda .muestra { display:inline-block; width:22px; height:18px;
                    border-radius:3px; vertical-align:middle; margin-right:5px; }
.leyenda .muestra.on { background:var(--acc); }
.leyenda .muestra.off { background:var(--panel3); }

/* Renglon de marca dentro de la matriz. Banda solida, nunca tinte (R10). */
.matriz tr.grupo th {
  background:var(--panel3); color:var(--txt);
  font-weight:700; font-size:12px; padding:7px 8px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  position:sticky; z-index:1;
}
.matriz tr.grupo th.fija { z-index:2; text-align:left; }
.matriz tr.grupo th.celda { padding:0; }
.matriz tbody tr.grupo:hover th { background:#E1E4EA; }

/* Estados del atajo de marca: bloques solidos, sin transparencias. */
.punto.marca.todas   { background:var(--acc);    color:var(--on-color); }
.punto.marca.algunas { background:var(--panel);  color:var(--txt-dim);
                       box-shadow:inset 0 0 0 2px var(--acc); }
.punto.marca.ninguna { background:transparent;   color:var(--txt-faint); }
.punto.marca:hover   { filter:brightness(.94); }

/* Tres niveles en la misma celda. Todo en bloque solido (R10). */
.punto.directa  { background:var(--acc);   color:var(--on-color); }
.punto.heredado { background:var(--acc);   color:var(--on-color);
                  cursor:not-allowed; opacity:.85; }
.punto.skus     { background:var(--panel); color:var(--acc-dim);
                  box-shadow:inset 0 0 0 2px var(--acc);
                  font-size:10px; font-weight:700; }
.punto.ninguna  { background:transparent;  color:var(--txt-faint); }

/* Arbol de autorizacion de un proveedor */
.arbol { border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.arbol .marca-fila { background:var(--panel3); padding:10px 14px;
                     display:flex; align-items:center; gap:12px;
                     border-bottom:1px solid var(--line); }
.arbol .marca-fila strong { font-size:14px; }
.arbol .fam-fila { padding:8px 14px 8px 30px; display:flex; align-items:center;
                   gap:12px; border-bottom:1px solid var(--line); font-size:13px; }
.arbol .fam-fila:last-child { border-bottom:0; }
.arbol .fam-fila:hover { background:var(--panel2); }
.arbol .crece { flex:1; min-width:0; }
.arbol .cuenta { color:var(--txt-dim); font-size:12px; white-space:nowrap; }
.casillas { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
            gap:6px 16px; }
.casillas label { display:flex; align-items:flex-start; gap:8px; font-size:13px;
                  padding:5px 6px; border-radius:var(--r-sm); cursor:pointer; }
.casillas label:hover { background:var(--panel2); }
.casillas input { width:auto; min-height:0; margin-top:2px; }

/* La celda que se acaba de cambiar parpadea un momento: al recargar, la vista
   vuelve a donde estaba y esto senala que fue lo que se movio. */
@keyframes destello {
  from { box-shadow:inset 0 0 0 3px var(--amber); }
  to   { box-shadow:inset 0 0 0 3px transparent; }
}
.punto.cambiada { animation:destello 1.8s ease-out 1; }
@media (prefers-reduced-motion:reduce) { .punto.cambiada { animation:none; } }

/* ---------- Logos de marca ----------
   Los archivos traen su fondo incrustado (unos claro, Pneumex oscuro), asi
   que cada uno vive en su propia loseta con borde y NO se le pinta fondo
   encima: taparselo cambiaria el logo. */
.logo-marca { display:block; height:34px; width:auto; max-width:190px;
              border-radius:var(--r-sm); border:1px solid var(--line); }
.logo-marca.grande { height:52px; max-width:280px; }
.sin-logo { display:inline-flex; align-items:center; height:34px; padding:0 10px;
            border:1px dashed var(--line); border-radius:var(--r-sm);
            color:var(--txt-dim); font-size:12px; }

/* ---------- Grafica ----------
   Colores de serie VALIDADOS (ver app/grafica.py). Van en el atributo fill
   del SVG que arma el servidor, no aqui, porque pertenecen al dato y no al
   estilo; aqui solo vive la anatomia. */
.gr-envoltura { display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.gr-dona { flex:0 0 auto; }
.gr-dona path { stroke:var(--panel); stroke-width:2; }   /* separacion de 2px */
.gr-centro-n { font-size:34px; font-weight:700; fill:var(--txt); }
.gr-centro-e { font-size:11px; fill:var(--txt-dim); }
.gr-etiqueta { font-size:11px; font-weight:700; fill:var(--on-color); }
.gr-leyenda { flex:1 1 240px; display:grid; gap:2px; min-width:240px; }
.gr-fila { display:flex; align-items:center; gap:10px; padding:5px 6px;
           border-radius:var(--r-sm); font-size:13px; }
.gr-fila:hover { background:var(--panel2); }
.gr-marca { width:12px; height:12px; border-radius:3px; flex:0 0 auto; }
.gr-nombre { flex:1; min-width:0; }
.gr-n { font-variant-numeric:tabular-nums; font-weight:600; }
.gr-pct { color:var(--txt-dim); font-variant-numeric:tabular-nums;
          min-width:38px; text-align:right; }

/* ---------- Credencial que se revela al sostener ---------- */
.credencial { display:inline-flex; align-items:center; gap:8px; }
.credencial code { font-family:ui-monospace, "Cascadia Code", Consolas, monospace;
                   font-size:12.5px; letter-spacing:.02em; color:var(--txt-dim);
                   background:var(--panel2); border:1px solid var(--line);
                   border-radius:var(--r-sm); padding:3px 8px; min-width:130px;
                   display:inline-block; }
.credencial code.revelada { color:var(--txt); font-weight:700;
                            background:#FFF6E0; border-color:#E8CF93; }
.credencial code.sin-clave { font-style:italic; }

/* Una familia apagada sigue en la lista y se lee igual de bien: solo su
   fondo cambia, para distinguirla de un vistazo sin bajarle el contraste
   al texto (R12). */
table.datos tr.apagada > td { background:var(--panel2); }
table.datos tr.apagada:hover > td { background:var(--panel3); }
table.datos tr.apagada code.np { color:var(--txt-dim); }

/* Barra de filtros sobre una lista. Se nombra una vez aqui en vez de
   repetir estilos en linea en cada plantilla (R13): un estilo en linea no
   puede expresar :hover ni adaptarse, y acaba divergiendo entre pantallas. */
.filtros { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.filtros .campo { margin-bottom:0; }
.filtros .campo:first-child { flex:2 1 220px; }
.filtros .btn { margin-bottom:1px; }