/* 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;
  --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;
  display:flex; align-items:center; gap:20px;
  position:sticky; top:0; z-index:20;
}
.marca { font-weight:700; font-size:15px; color:var(--txt); letter-spacing:-.01em; }
.marca span { color:var(--acc); }
.barra nav { display:flex; gap:2px; margin-left:8px; flex:1; }
.barra .yo { color:var(--txt-dim); font-size:13px; display:flex; align-items:center; gap:10px; }

.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;
  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; }
.barra nav a.activa { background:var(--panel3); color:var(--txt); font-weight:600; }

/* ---------- 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:20px; text-align:center; display:block; margin-bottom:6px; }
.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; }
}