/* Das de Ventas · consola de campañas
   Papel técnico: hueso, rejilla fina, tinta negra, morado de marca. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,700;12..96,800&family=IBM+Plex+Mono:wght@400;500;600&family=Public+Sans:wght@400;500;600&display=swap');

:root{
  --papel:#f2efe7; --papel-2:#fbfaf6; --tinta:#14120f; --tinta-40:#14120f66;
  --linea:#14120f1f; --linea-fuerte:#14120f;
  --marca:#6d28d9; --marca-suave:#6d28d914;
  --verde:#0f7b4a; --verde-suave:#0f7b4a14;
  --ambar:#a8620a; --ambar-suave:#a8620a14;
  --rojo:#a5170f; --rojo-suave:#a5170f14;
  --radio:3px;
  --sombra:4px 4px 0 var(--linea-fuerte);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--papel);
  background-image:linear-gradient(var(--linea) 1px,transparent 1px),linear-gradient(90deg,var(--linea) 1px,transparent 1px);
  background-size:28px 28px;
  color:var(--tinta);
  font:15px/1.5 'Public Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;margin:0}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ---------- acceso ---------- */
.acceso{min-height:100dvh;display:grid;place-items:center;padding:24px}
.acceso-caja{width:min(400px,100%);background:var(--papel-2);border:1.5px solid var(--linea-fuerte);box-shadow:var(--sombra);padding:36px 32px}
.marca{display:flex;align-items:center;gap:10px;margin-bottom:28px}
.marca-punto{width:12px;height:12px;background:var(--marca);border-radius:50%;flex:none}
.marca h1{font-size:19px}
.marca small{display:block;font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-40);margin-top:5px}
label{display:block;font:600 11px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-40);margin:0 0 7px}
input[type=text],input[type=password]{width:100%;padding:11px 13px;border:1.5px solid var(--linea-fuerte);background:var(--papel);font:15px 'Public Sans',sans-serif;border-radius:var(--radio)}
input:focus{outline:2px solid var(--marca);outline-offset:1px}
.campo{margin-bottom:18px}

button{font:600 13px/1 'Public Sans',sans-serif;cursor:pointer;border-radius:var(--radio);transition:transform .08s,box-shadow .08s}
.btn{padding:11px 18px;border:1.5px solid var(--linea-fuerte);background:var(--tinta);color:var(--papel-2)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--linea-fuerte)}
.btn:active{transform:translate(0,0);box-shadow:none}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-marca{background:var(--marca);border-color:var(--marca)}
.btn-plano{background:transparent;color:var(--tinta)}
.btn-plano:hover{background:var(--tinta);color:var(--papel-2)}
.btn-ancho{width:100%}
.btn-pequeno{padding:7px 12px;font-size:12px}

/* ---------- estructura ---------- */
.cabecera{border-bottom:1.5px solid var(--linea-fuerte);background:var(--papel-2);position:sticky;top:0;z-index:20}
.cabecera-int{max-width:1240px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:20px}
.cabecera .marca{margin:0}
.cabecera-sp{flex:1}
main{max-width:1240px;margin:0 auto;padding:28px 24px 80px}

.resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;border:1.5px solid var(--linea-fuerte);background:var(--papel-2);margin-bottom:34px}
.dato{padding:18px 20px;border-right:1px solid var(--linea)}
.dato:last-child{border-right:0}
.dato-n{font:600 34px/1 'IBM Plex Mono',monospace;letter-spacing:-.03em;display:block}
.dato-t{font:600 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-40);margin-top:8px;display:block}
.dato.acento .dato-n{color:var(--verde)}
.dato.aviso .dato-n{color:var(--rojo)}

.titulo-seccion{display:flex;align-items:baseline;gap:12px;margin:0 0 16px}
.titulo-seccion h2{font-size:15px;text-transform:uppercase;letter-spacing:.08em}
.titulo-seccion .regla{flex:1;height:1px;background:var(--linea-fuerte);opacity:.25}

.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px}
.tarjeta{background:var(--papel-2);border:1.5px solid var(--linea-fuerte);display:flex;flex-direction:column;animation:entra .4s both}
.tarjeta:nth-child(1){animation-delay:.02s}.tarjeta:nth-child(2){animation-delay:.06s}
.tarjeta:nth-child(3){animation-delay:.1s}.tarjeta:nth-child(4){animation-delay:.14s}
.tarjeta:nth-child(5){animation-delay:.18s}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tarjeta-cab{padding:16px 18px 14px;border-bottom:1px solid var(--linea);display:flex;align-items:flex-start;gap:12px}
.codigo{font:600 11px/1 'IBM Plex Mono',monospace;background:var(--tinta);color:var(--papel-2);padding:6px 8px;letter-spacing:.06em;flex:none}
.tarjeta-cab h3{font-size:16px;line-height:1.25;flex:1}
.tarjeta-cuerpo{padding:14px 18px;flex:1}
.barras{display:flex;height:7px;border:1px solid var(--linea-fuerte);overflow:hidden;margin-bottom:12px;background:var(--papel)}
.barra-i{background:var(--verde)}.barra-c{background:var(--marca)}.barra-n{background:var(--tinta-40)}.barra-b{background:var(--rojo)}
.cifras{display:flex;flex-wrap:wrap;gap:12px 18px}
.cifra{font:500 12px/1.4 'IBM Plex Mono',monospace;color:var(--tinta-40)}
.cifra b{font-weight:600;font-size:16px;color:var(--tinta);display:block}
.tarjeta-pie{padding:12px 18px;border-top:1px solid var(--linea);display:flex;gap:8px;flex-wrap:wrap}

.etiqueta{font:600 10px/1 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;padding:5px 7px;border:1px solid currentColor;border-radius:var(--radio)}
.et-ok{color:var(--verde);background:var(--verde-suave)}
.et-espera{color:var(--ambar);background:var(--ambar-suave)}
.et-mal{color:var(--rojo);background:var(--rojo-suave)}

/* ---------- tabla ---------- */
.tabla-caja{border:1.5px solid var(--linea-fuerte);background:var(--papel-2);overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font:600 10px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-40);text-align:left;padding:12px 14px;border-bottom:1.5px solid var(--linea-fuerte);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--linea)}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--marca-suave)}
.vacio{padding:34px 20px;text-align:center;color:var(--tinta-40);font-size:14px}

/* ---------- ventana ---------- */
.velo{position:fixed;inset:0;background:#14120fa8;display:grid;place-items:center;padding:24px;z-index:60;animation:aparece .15s both}
@keyframes aparece{from{opacity:0}to{opacity:1}}
.ventana{width:min(540px,100%);max-height:86dvh;overflow:auto;background:var(--papel-2);border:1.5px solid var(--linea-fuerte);box-shadow:8px 8px 0 #14120f}
.ventana-cab{padding:18px 22px;border-bottom:1.5px solid var(--linea-fuerte);display:flex;align-items:center;gap:14px}
.ventana-cab h3{font-size:17px;flex:1}
.ventana-cuerpo{padding:22px}
.ventana-pie{padding:16px 22px;border-top:1px solid var(--linea);display:flex;gap:10px;justify-content:flex-end}
.pista{font-size:13px;color:var(--tinta-40);margin:10px 0 0}
.aviso-caja{border-left:3px solid var(--ambar);background:var(--ambar-suave);padding:11px 14px;font-size:13px;margin-top:14px}

.nota{position:fixed;right:20px;bottom:20px;background:var(--tinta);color:var(--papel-2);padding:13px 17px;border-radius:var(--radio);font-size:14px;box-shadow:var(--sombra);z-index:80;animation:sube .25s both;max-width:min(420px,90vw)}
@keyframes sube{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.nota.mal{background:var(--rojo)}
.nota.bien{background:var(--verde)}
.error{color:var(--rojo);font-size:13px;margin-top:12px;min-height:18px}
.cargando{display:inline-block;width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:giro .6s linear infinite;vertical-align:-2px}
@keyframes giro{to{transform:rotate(360deg)}}
.oculto{display:none!important}
@media(max-width:640px){.cabecera-int,main{padding-left:16px;padding-right:16px}.dato{border-right:0;border-bottom:1px solid var(--linea)}}