:root{
  --ink:#1F2937; --graf:#374151; --gris:#6B7280;
  --paper:#F4F4F7; --card:#FFFFFF; --card2:#F7F5FC; --linea:#E6E4EC;
  --p1:#6D28D9; --p2:#DB2777; --p-soft:#FAF5FF; --p-chip:#F3E8FF;
  --a-blue:#0EA5E9; --a-green:#10B981; --a-amber:#F59E0B; --a-teal:#14B8A6;
  --ok:#16A34A; --ok-cl:#DCFCE7; --alerta:#DC2626; --alerta-cl:#FEE2E2;
  --r:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink);
  font:15px/1.55 -apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding-bottom:64px;
}
a{color:var(--p1);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--p1);outline-offset:2px}

.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);font-weight:600}

/* ---------- barra superior ---------- */
header.top{background:var(--card);border-bottom:1px solid var(--linea)}
.top .wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:15px 24px}
.marca{display:flex;align-items:center;gap:11px;font-weight:700;font-size:19px;color:var(--ink)}
.marca:hover{text-decoration:none}
.marca .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--p1),var(--p2));
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:18px}
.marca span{color:var(--gris);font-weight:500;font-size:15px}
.top nav{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.top nav a{color:var(--graf);font-size:13.5px;font-weight:500;padding:7px 12px;border-radius:999px}
.top nav a:hover{color:var(--p1);background:var(--p-chip);text-decoration:none}

.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
main{padding-top:26px}

/* ---------- titulo ---------- */
.titulo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
h1{font-weight:700;font-size:28px;letter-spacing:-.02em;line-height:1.15}
h2{font-weight:700;font-size:15px;letter-spacing:.01em}
.sub{color:var(--gris);font-size:14px;margin-bottom:20px;max-width:70ch}

/* ---------- tableros de contadores ---------- */
.tableros{display:flex;flex-wrap:wrap;gap:22px;margin-bottom:16px}
.tablero{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tab-lbl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.tab-chips{display:flex;gap:8px;flex-wrap:wrap}
.cont{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--linea);
  border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:500;color:var(--ink);cursor:pointer;
  transition:background .12s,border-color .12s,transform .1s}
.cont:hover{border-color:var(--p1);background:var(--p-soft);transform:translateY(-1px);text-decoration:none}
.cont b{font-weight:700;color:var(--p1);font-variant-numeric:tabular-nums}
.cont.on{background:linear-gradient(135deg,var(--p1),var(--p2));border-color:transparent;color:#fff}
.cont.on b{color:#fff}

/* ---------- filtros ---------- */
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  background:var(--card);border:1px solid var(--linea);border-radius:var(--r);padding:12px;margin-bottom:14px}
input[type=text],input[type=search],input[type=password],input[type=date],
input[type=number],select,textarea{
  font:14px/1.4 -apple-system,system-ui,sans-serif;color:var(--ink);
  background:#fff;border:1px solid var(--linea);border-radius:10px;padding:9px 12px;width:100%}
textarea{min-height:74px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--p1);outline:none;box-shadow:0 0 0 3px rgba(109,40,217,.12)}
.filtros input[type=search]{flex:1 1 260px;width:auto}
.filtros select{flex:0 0 auto;width:auto;min-width:150px}

.btn{display:inline-block;font:600 13.5px/1 -apple-system,system-ui,sans-serif;
  background:linear-gradient(135deg,var(--p1),var(--p2));color:#fff;border:1px solid transparent;
  border-radius:10px;padding:10px 16px;cursor:pointer;transition:filter .12s,transform .1s,box-shadow .12s}
.btn:hover{filter:brightness(1.06);text-decoration:none;box-shadow:0 4px 14px rgba(109,40,217,.28)}
.btn:active{transform:scale(.98)}
.btn.sec{background:#fff;color:var(--graf);border-color:var(--linea)}
.btn.sec:hover{background:var(--p-soft);color:var(--p1);border-color:var(--p1);box-shadow:none}
.btn.mini{padding:6px 11px;font-size:12.5px;border-radius:8px}
.btn.peligro{background:#fff;color:var(--alerta);border-color:#F3C9C9}
.btn.peligro:hover{background:var(--alerta-cl);color:var(--alerta);box-shadow:none}

.conteo{color:var(--gris);font-size:12.5px;margin:2px 2px 12px}

/* ---------- registro ---------- */
.registro{background:var(--card);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
.fila{display:grid;
  grid-template-columns:46px 116px minmax(0,1fr) 108px 116px 104px 130px;
  gap:12px;align-items:center;padding:13px 16px;border-top:1px solid var(--linea)}
.acc{display:flex;gap:6px;justify-content:flex-end}
.acc form{margin:0}
.fila:first-child{border-top:none}
.fila.cab{background:var(--card2);border-top:none;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.fila:not(.cab):hover{background:var(--p-soft)}
.cod{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:13.5px;font-weight:600}
.cod a{color:var(--ink)}
.cod a:hover{color:var(--p1)}
.desc{font-weight:600;line-height:1.35;min-width:0}
.desc a{color:var(--ink)}
.desc a:hover{color:var(--p1)}
.desc small{display:block;color:var(--gris);font-weight:400;font-size:12.5px;margin-top:2px}
.tam{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:13px;color:var(--graf)}
.cel-sec{color:var(--graf);font-size:13.5px}

/* firma: la barra de calibre. el alto del bloque = el espesor real */
.calibre{display:flex;align-items:center;gap:7px}
.calibre .banda{width:30px;background:linear-gradient(180deg,var(--p1),var(--p2));border-radius:2px}
.calibre .val{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12px;color:var(--graf)}
.calibre.vacio .banda{background:repeating-linear-gradient(45deg,#E1DEEC,#E1DEEC 3px,#F0EEF6 3px,#F0EEF6 6px);height:9px}

.tipo-marca{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;font-weight:700}
.tipo-marca.bolsa{background:var(--p-chip);color:var(--p1)}
.tipo-marca.importado{background:#E0F2FE;color:#0369A1}

.pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.02em;
  padding:5px 11px;border-radius:999px;background:#EDEAF4;color:var(--graf);white-space:nowrap}
.pill.aprobado{background:var(--ok-cl);color:var(--ok)}
.pill.rechazado,.pill.descontinuado{background:var(--alerta-cl);color:var(--alerta)}
.pill.borrador{background:#FEF3C7;color:#92400E}
.pill.en-desarrollo,.pill.muestra-enviada{background:var(--p-chip);color:var(--p1)}

/* ---------- vacio ---------- */
.vacio{background:var(--card);border:1px dashed var(--linea);border-radius:var(--r);
  padding:52px 24px;text-align:center}
.vacio p{color:var(--gris);margin:8px 0 18px}

/* ---------- formulario / detalle ---------- */
.panel{background:var(--card);border:1px solid var(--linea);border-radius:16px;margin-bottom:18px;overflow:hidden}
.panel > h2{padding:13px 20px;background:var(--card2);border-bottom:1px solid var(--linea);
  display:flex;align-items:baseline;gap:10px}
.panel > h2 .n{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;color:var(--p1)}
.campos{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;padding:20px}
.campo label{display:block;font-size:12.5px;font-weight:600;color:var(--graf);margin-bottom:5px}
.campo .req{color:var(--alerta)}
.campo .ayuda{display:block;font-size:11.5px;color:var(--gris);margin-top:4px}
.campo.ancho{grid-column:1/-1}
.chk{display:flex;align-items:center;gap:8px;padding-top:20px}
.chk input{width:16px;height:16px;accent-color:var(--p1)}

.datos{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0;padding:0}
.dato{padding:13px 20px;border-top:1px solid #F0EEF6;border-right:1px solid #F0EEF6}
.dato dt{font-size:11.5px;color:var(--gris);margin-bottom:3px}
.dato dd{font-size:14.5px;font-weight:600}
.dato dd.na{color:#B6AFC8;font-weight:400}

.acciones{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 8px}

/* ---------- archivos ---------- */
.arch{display:flex;align-items:center;gap:12px;padding:13px 20px;border-top:1px solid #F0EEF6}
.arch:first-child{border-top:none}
.arch .ext{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:10px;font-weight:700;
  background:var(--p1);color:#fff;padding:5px 7px;border-radius:6px;text-transform:uppercase}
.arch .n{flex:1;min-width:0}
.arch .n b{display:block;font-weight:600;font-size:14px;word-break:break-all}
.arch .n small{color:var(--gris);font-size:12px}

.zona{border:1px dashed var(--linea);border-radius:var(--r);background:var(--p-soft);padding:18px;text-align:center}
.zona input[type=file]{width:auto;border:none;background:none;font-size:13.5px}

/* ---------- avisos ---------- */
.aviso{padding:12px 16px;border-radius:var(--r);margin-bottom:14px;font-size:14px;font-weight:500}
.aviso.ok{background:var(--ok-cl);color:var(--ok);border:1px solid #BBF7D0}
.aviso.error{background:var(--alerta-cl);color:var(--alerta);border:1px solid #FECACA}

.nota{font-size:12.5px;color:var(--gris);margin-top:10px}

/* ---------- entrar ---------- */
.caja{max-width:380px;margin:70px auto;background:var(--card);
  border:1px solid var(--linea);border-radius:16px;padding:28px}
.caja h1{font-size:22px;margin-bottom:6px}
.caja p{color:var(--gris);font-size:13.5px;margin-bottom:18px}
.caja .btn{width:100%;margin-top:14px;text-align:center}

@media (max-width:900px){
  .fila{grid-template-columns:46px 1fr;grid-auto-rows:min-content;gap:6px 12px;padding:14px 14px}
  .fila.cab{display:none}
  .fila .cod{grid-column:2}
  .fila .desc{grid-column:2}
  .fila .tam,.fila .cel-sec,.fila .calibre,.fila .est{grid-column:2}
  .fila .acc{grid-column:2;justify-content:flex-start;margin-top:4px}
  .fila .tipo-marca{grid-row:span 6}
  .dato{border-right:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- códigos QR ---------- */
.qr-bloque{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;padding:20px}
.qr-vista{width:180px;height:180px;flex:0 0 auto;background:#fff;border:1px solid var(--linea);
  border-radius:var(--r);padding:10px;image-rendering:pixelated}
.qr-texto{flex:1 1 320px;min-width:280px}
.qr-titular{font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.4}
.qr-nota{font-size:12.5px;color:var(--gris);margin-top:6px;max-width:62ch}
.qr-enlace{display:inline-block;margin-top:12px;font-size:12.5px;color:var(--p1);
  background:var(--p-soft);border:1px solid var(--p-chip);border-radius:8px;padding:6px 10px;
  word-break:break-all}
.qr-bloque .acciones{margin:16px 0 4px}