/* Estilo del sitio de socios Q20 (un solo archivo para todas las pantallas)
   Imagen corporativa según el Manual Q20: azul #213242, dorado #E3A92B, gris #F4F4F4; letra Gill Sans
   (se usa si la computadora la tiene; no se descarga de internet). */
:root{--fondo:#F4F4F4;--tinta:#213242;--suave:#5b6878;--borde:#c9d2dc;--azul:#213242;--dorado:#E3A92B;--verde:#2e6b34;--rojo:#a8322d;--ambar:#9a6700;--tarjeta:#fff}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);font:16px/1.45 "Gill Sans MT","Gill Sans",Calibri,"Segoe UI",system-ui,Arial,sans-serif}
.c{max-width:1100px;margin:0 auto;padding:16px}
.c.angosta{max-width:520px}
header{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;margin-bottom:14px;
  background:var(--azul);color:#fff;border-bottom:4px solid var(--dorado);border-radius:14px;padding:12px 16px}
header .m{color:#c8ccd0}
header a{color:var(--dorado)}
.marca{display:flex;align-items:center;gap:14px}
.marca .logo{height:52px;width:auto;display:block}
.marca h1{color:#fff;font-weight:400;letter-spacing:.06em;border-left:1px solid var(--dorado);padding-left:14px}
.c.angosta header{flex-direction:column;justify-content:center;text-align:center;padding:22px 16px}
.c.angosta .marca{flex-direction:column;gap:10px}
.c.angosta .marca .logo{height:96px}
.c.angosta .marca h1{border-left:0;padding-left:0}
h1{font-size:21px;margin:0}
h2{font-size:18px;margin:0 0 8px}
.ver{font:12px ui-monospace,Consolas,monospace;background:var(--dorado);color:var(--azul);border-radius:10px;padding:2px 8px}
.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:16px;margin-bottom:12px}
label{display:block;font-weight:700;margin:8px 0 3px;font-size:14px}
input,select{width:100%;font:inherit;padding:8px;border:1px solid var(--borde);border-radius:8px;background:#fff}
button{font:inherit;font-weight:700;border:0;border-radius:8px;padding:8px 14px;background:var(--azul);color:#fff;cursor:pointer}
button.sec{background:#6b7785}
button.peligro{background:var(--rojo)}
button.chico{padding:3px 8px;font-size:13px}
.fila{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.fila>div{flex:1 1 150px}
.con-ojo{display:flex;gap:6px}
.con-ojo input{flex:1;min-width:0}
button.ojo{background:#fff;color:var(--azul);border:1px solid var(--borde);padding:0 12px;font-size:18px;line-height:1}
.error{color:var(--rojo);font-weight:700;margin-top:8px;min-height:1.3em}
.m{color:var(--suave);font-size:14px}
.cifras{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.cifra{background:#f6f8fa;border:1px solid var(--borde);border-radius:12px;padding:10px}
.cifra b{display:block;font-size:20px;color:var(--azul)}
table{width:100%;border-collapse:collapse;font-size:14px}
td,th{border-top:1px solid #e3e8ee;padding:6px 5px;text-align:left;vertical-align:top}
th{background:#f6f8fa;position:sticky;top:0}
td.n,th.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
tfoot td{font-weight:700;border-top:2px solid var(--tinta)}
tr.propio td{background:#fbf3df;font-weight:700}
.favor{color:var(--verde);font-weight:700}
.debe{color:var(--rojo);font-weight:700}
.ok{color:var(--verde);font-size:12px;white-space:nowrap}
.pend{color:var(--ambar);font-size:12px;font-weight:700;white-space:nowrap}
.pestanas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pestanas button{background:#dfe5ec;color:var(--tinta)}
.pestanas button.activa{background:var(--azul);color:#fff;box-shadow:inset 0 -3px 0 var(--dorado)}
.aviso{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:var(--verde);color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;max-width:90vw;z-index:9}
.aviso.malo{background:var(--rojo)}
a{color:var(--azul)}
[hidden]{display:none!important}
.solo-impresion{display:none}
input[type=checkbox]{width:auto}
a.wa{display:inline-block;background:#1f7a4d;color:#fff;border-radius:8px;padding:3px 8px;font-size:13px;font-weight:700;text-decoration:none}
#cajaCelular button{width:100%}
p.pend{white-space:normal;font-size:14px}
code{font:15px ui-monospace,Consolas,monospace}
/* Hojas de acceso (panel → accesos en lote): solo existen al imprimir, una por página */
#hojas{display:none}
.hoja{padding:8mm 6mm;font-size:14px}
.hoja-logo{height:90px;display:block}
.hoja h1{color:var(--azul);font-size:26px;margin:10px 0 8px;padding-bottom:6px;border-bottom:2px solid var(--dorado)}
.hoja dt{font-weight:700;margin-top:8px}
.hoja-dato{font:20px ui-monospace,Consolas,monospace;margin:2px 0 0}
.hoja li{margin-bottom:6px}
@media print{
  body{background:#fff;font-size:12px}
  .no-imprimir,.aviso,header .ver{display:none!important}
  /* al imprimir no sale el fondo azul: el encabezado va en blanco con la línea dorada y el título en azul */
  header{background:none;color:var(--azul);border-radius:0;padding:0 0 8px;border-bottom:2px solid var(--dorado)}
  .marca h1{color:var(--azul)}
  body.solo-hojas>.c{display:none!important}
  body.solo-hojas #hojas{display:block}
  .hoja{break-after:page;page-break-after:always}
  .solo-impresion{display:block}
  .tarjeta{border:0;padding:0;margin-bottom:10px}
  th{position:static}
}