/* Gestlogix · DeCA. Claro por defecto (es la oficina), oscuro si el equipo lo pide.
   Los mismos azules que el PDF del documento, para que la pantalla y el papel se
   reconozcan. Ningún color va fijo en una regla: todo cuelga de :root. */

:root{
  --fondo:#F2F6F7; --panel:#FFFFFF; --panel-2:#E9F0F2; --borde:#C6CBCD;
  --texto:#12242B; --suave:#536268; --marca:#00354D; --acento:#1296A8; --acento-txt:#ffffff;
  --ok:#2F7D32; --ok-bg:#EAF5EA; --aviso:#8A5A00; --aviso-bg:#FFF4D6; --mal:#A33434; --mal-bg:#FDECEC;
  --radio:10px; --toque:44px; --sombra:0 1px 2px rgba(0,0,0,.06), 0 6px 18px -10px rgba(0,0,0,.25);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --fondo:#121A1D; --panel:#1B2529; --panel-2:#243137; --borde:#34444B;
    --texto:#E7EEF0; --suave:#9DB0B6; --marca:#7FC3D6; --acento:#3CB4C6; --acento-txt:#06242B;
    --ok:#7ED38A; --ok-bg:#183020; --aviso:#F2C94C; --aviso-bg:#3A2F12; --mal:#FF8F86; --mal-bg:#3B1C1A;
    --sombra:none; color-scheme:dark;
  }
}

*{ box-sizing:border-box; }
html,body{ margin:0; overflow-x:hidden; background:var(--fondo); color:var(--texto);
  font:16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust:100%; }
body{ padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
[hidden]{ display:none !important; }
a{ color:var(--acento); }
h1,h2,h3{ line-height:1.25; color:var(--marca); }
h1{ font-size:1.5rem; margin:.5rem 0; }
h2{ font-size:1.15rem; margin:1.25rem 0 .5rem; }
h3{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--acento); margin:1rem 0 .4rem; }
code{ font:.85rem ui-monospace, Menlo, monospace; background:var(--panel-2); padding:0 .3rem; border-radius:4px; word-break:break-all; }

/* ── Controles ─────────────────────────────────────────────────────────── */
input,select,textarea,button{ font:inherit; color:inherit; }
input,select,textarea{ background:var(--panel); border:1px solid var(--borde); border-radius:8px;
  padding:.55rem .7rem; min-height:var(--toque); width:100%; }
textarea{ min-height:4.5rem; resize:vertical; }
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
input[type=checkbox],input[type=radio]{ width:auto; min-height:0; accent-color:var(--acento); }
label{ display:block; margin:.45rem 0; color:var(--suave); font-size:.88rem; }
label.check{ display:flex; gap:.5rem; align-items:center; color:var(--texto); font-size:.95rem; }
button,.boton{ background:var(--marca); color:#fff; border:0; border-radius:8px; padding:.55rem 1rem;
  min-height:var(--toque); cursor:pointer; font-weight:600; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem; }
@media (prefers-color-scheme: dark){ button,.boton{ background:var(--acento); color:var(--acento-txt); } }
button:disabled{ opacity:.45; cursor:not-allowed; }
button.sec,.boton.sec{ background:transparent; color:var(--marca); border:1px solid var(--marca); }
button.discreto{ background:transparent; color:var(--suave); border:1px solid var(--borde); font-weight:400; }
button.peligro{ background:transparent; color:var(--mal); border:1px solid var(--mal); }
button.peq,.boton.peq{ min-height:34px; padding:.3rem .7rem; font-size:.88rem; }
.botones{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.75rem 0; }

.nota{ color:var(--suave); font-size:.88rem; }
.error{ color:var(--mal); }
.producto{ color:var(--acento); font-weight:800; letter-spacing:.04em; }

/* ── Entrada ───────────────────────────────────────────────────────────── */
.entrada{ max-width:400px; margin:10vh auto 0; padding:0 16px; }
.entrada button{ width:100%; margin-top:.5rem; }
.logo-entrada{ height:64px; width:auto; display:block; margin-bottom:.5rem; }
.pie{ margin-top:3rem; font-size:.85rem; text-align:center; }

/* ── Barra ─────────────────────────────────────────────────────────────── */
.barra{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  padding:.4rem 16px; background:var(--panel); border-bottom:1px solid var(--borde); }
.empresa{ display:flex; align-items:center; gap:.5rem; color:var(--marca); font-weight:800; text-decoration:none; }
.empresa img{ height:30px; width:auto; }
.barra nav{ display:flex; gap:.2rem; flex:1; overflow-x:auto; }
.barra nav a{ color:var(--suave); text-decoration:none; padding:.45rem .65rem; border-radius:8px;
  min-height:var(--toque); display:flex; align-items:center; white-space:nowrap; }
.barra nav a.activa{ color:var(--marca); background:var(--panel-2); font-weight:600; }
.barra nav a.destacado{ color:var(--acento); font-weight:700; }
.contenido{ max-width:1040px; margin:0 auto; padding:12px 16px 80px; }

/* ── Bloques ───────────────────────────────────────────────────────────── */
.tarjeta{ background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio);
  padding:14px 16px; box-shadow:var(--sombra); margin:.75rem 0; }
.cifras{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr)); margin:.75rem 0; }
.cifra{ background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio); padding:12px 14px; }
.cifra b{ display:block; font-size:1.9rem; line-height:1.1; color:var(--marca); }
.cifra span{ color:var(--suave); font-size:.88rem; }
.cifra.mal b{ color:var(--mal); }
.banda{ border-left:4px solid var(--acento); background:var(--panel-2); border-radius:0 8px 8px 0; padding:.6rem .9rem; margin:.75rem 0; }
.banda.mal{ border-color:var(--mal); background:var(--mal-bg); }
.banda.aviso{ border-color:var(--aviso); background:var(--aviso-bg); }
.banda.ok{ border-color:var(--ok); background:var(--ok-bg); }
.banda ul{ margin:.3rem 0 0; padding-left:1.2rem; }

.chip{ display:inline-block; padding:.05rem .55rem; border-radius:99px; font-size:.78rem; font-weight:700; white-space:nowrap; }
.chip.publicado{ background:var(--ok-bg); color:var(--ok); }
.chip.borrador{ background:var(--aviso-bg); color:var(--aviso); }
.chip.anulado{ background:var(--panel-2); color:var(--suave); }

/* ── Listas ────────────────────────────────────────────────────────────── */
.tabla{ overflow-x:auto; background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio); }
table{ width:100%; border-collapse:collapse; }
th{ background:var(--marca); color:#fff; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; text-align:left; padding:.5rem .7rem; }
@media (prefers-color-scheme: dark){ th{ background:var(--panel-2); color:var(--suave); } }
td{ padding:.55rem .7rem; border-bottom:1px solid var(--borde); vertical-align:middle; font-size:.93rem; }
tr:last-child td{ border-bottom:0; }
tr.baja td{ color:var(--suave); text-decoration:line-through; }
tr.fila-clic{ cursor:pointer; }
tr.fila-clic:hover td{ background:var(--panel-2); }
.derecha{ text-align:right; }
.busqueda{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin:.5rem 0; }
.busqueda input{ flex:1 1 220px; width:auto; }
.busqueda select{ width:auto; }

/* ── Pestañas ──────────────────────────────────────────────────────────── */
.pestanas{ display:flex; gap:.25rem; border-bottom:1px solid var(--borde); margin:.5rem 0 .75rem; overflow-x:auto; }
.pestanas button{ background:transparent; color:var(--suave); border-radius:8px 8px 0 0; font-weight:600; border-bottom:2px solid transparent; }
.pestanas button.activa{ color:var(--marca); border-bottom-color:var(--acento); }

/* ── Formulario del DeCA ───────────────────────────────────────────────── */
.pasos{ display:flex; gap:.4rem; margin:.5rem 0 1rem; list-style:none; padding:0; counter-reset:paso; flex-wrap:wrap; }
.pasos li{ flex:1 1 120px; counter-increment:paso; font-size:.82rem; color:var(--suave); border-top:4px solid var(--borde); padding-top:.3rem; }
.pasos li::before{ content:counter(paso) " · "; font-weight:700; }
.pasos li.hecho{ border-top-color:var(--acento); }
.pasos li.actual{ border-top-color:var(--marca); color:var(--marca); font-weight:700; }
.rejilla{ display:grid; gap:0 14px; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); }
.dos{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); align-items:start; }
.dos > *{ min-width:0; }
.papel{ display:flex; gap:.75rem; flex-wrap:wrap; }
.papel label{ flex:1 1 220px; display:flex; gap:.6rem; align-items:flex-start; border:1px solid var(--borde);
  border-radius:var(--radio); padding:.7rem .9rem; background:var(--panel); color:var(--texto); cursor:pointer; margin:0; }
.papel label.elegido{ border-color:var(--acento); background:var(--panel-2); }
.papel b{ display:block; color:var(--marca); }
.envio{ border:1px dashed var(--borde); border-radius:var(--radio); padding:.4rem .9rem .8rem; margin:.6rem 0; background:var(--panel); }
.envio .cab{ display:flex; justify-content:space-between; align-items:center; font-weight:700; color:var(--marca); font-size:.9rem; }
.propia{ background:var(--panel-2); border-radius:8px; padding:.5rem .75rem; font-size:.93rem; }
.propia b{ color:var(--marca); }

/* La vista previa imita al PDF */
.hoja{ background:#fff; color:#12242B; border:1px solid #9aa6aa; border-radius:4px; padding:18px 20px; box-shadow:var(--sombra); font-size:.9rem; }
.hoja h4{ margin:0 0 .5rem; color:#00354D; font-size:1rem; text-transform:uppercase; }
.hoja dl{ display:grid; grid-template-columns:minmax(120px,38%) 1fr; gap:.25rem .75rem; margin:.5rem 0; }
.hoja dt{ color:#536268; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; padding-top:.1rem; }
.hoja dd{ margin:0; font-weight:600; }
.hoja .falta{ color:#A33434; font-style:italic; font-weight:600; }
.hoja hr{ border:0; border-top:1px solid #C6CBCD; margin:.6rem 0; }
.marca-borrador{ display:inline-block; border:1.5px solid #A33434; color:#A33434; font-weight:700; font-size:.72rem; letter-spacing:.08em; padding:0 .5rem; border-radius:3px; }

/* ── Ficha del DeCA ────────────────────────────────────────────────────── */
.cabecera-deca{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.cabecera-deca .datos{ flex:1 1 300px; }
.qr{ width:168px; height:168px; background:#fff; border:1px solid var(--borde); border-radius:8px; padding:8px; }
.versiones{ list-style:none; padding:0; margin:.3rem 0; }
.versiones li{ padding:.45rem 0; border-bottom:1px solid var(--borde); font-size:.92rem; }
.versiones .cambio{ color:var(--suave); font-size:.85rem; }
.versiones s{ color:var(--suave); }

/* ── Aviso flotante ────────────────────────────────────────────────────── */
.aviso{ position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:20; max-width:92vw;
  background:var(--marca); color:#fff; padding:.65rem 1rem; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.aviso.mal{ background:var(--mal); }

@media (max-width:640px){
  .barra nav{ order:3; flex:1 1 100%; }
  .barra nav a{ padding:.45rem .5rem; }
  .empresa{ flex:1; min-width:0; }
  .empresa span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .hoja dl{ grid-template-columns:1fr; }
  .qr{ width:140px; height:140px; }
}