/* ============================================================================
   Sistema de diseño IFVG — paleta de marca (tomada del logotipo oficial) +
   variaciones premium. Compartido por las pantallas dedicadas (Kiosco,
   Recepción, Caja, Dashboard). index.html mantiene su propia copia de estos
   mismos tokens (para seguir siendo un archivo autocontenido), así que un
   cambio de paleta se hace en AMBOS lugares — ver el bloque :root de
   index.html, que debe reflejar exactamente estos valores.
   ============================================================================ */
:root{
  /* --- Marca (tonos exactos extraídos del logotipo) --- */
  --ifvg-navy-900:#0E1530;   /* navy más profundo — íconos, fondos de alto contraste */
  --ifvg-navy-800:#16214A;   /* navy del wordmark "INSTITUTO" */
  --ifvg-navy-700:#1D2B5E;   /* navy intermedio — botones/headers */
  --ifvg-blue-600:#1B68AC;   /* azul vivo de la "V" del isotipo */
  --ifvg-blue-500:#2C7BC0;
  --ifvg-blue-300:#8FC1E8;   /* azul claro — tintes suaves, hover */
  --ifvg-blue-100:#E6F1FA;
  --ifvg-red-700:#8C1116;    /* rojo profundo — sombras del degradado del logo */
  --ifvg-red-600:#B5171B;    /* rojo de marca (subtítulo del logotipo) */
  --ifvg-red-100:#F7E3E2;
  --ifvg-gold-600:#B8912B;   /* dorado — acento premium, se usa con moderación */
  --ifvg-gold-300:#DCC77A;
  --ifvg-gold-100:#F3EBD4;

  /* --- Tokens del sistema (lo que consume el resto del CSS) --- */
  --navy:var(--ifvg-navy-700);
  --navy-deep:var(--ifvg-navy-900);
  --brass:var(--ifvg-gold-600);
  --brassSoft:var(--ifvg-gold-300);
  --paper:#F7F5F1;
  --teal:var(--ifvg-blue-600);
  --tealSoft:var(--ifvg-blue-100);
  --line:#E1DCCF;
  --ink:#1B2030;
  --verde:#2E7D4F;
  --verdeSoft:#DCEEE1;
  --rojo:var(--ifvg-red-600);
  --rojoSoft:var(--ifvg-red-100);
  --naranja:#B8742B;
  --naranjaSoft:#F1DFC4;
  --card:#FFFFFF;

  /* --- Gradientes de marca (el degradado azul→rojo es un guiño directo a la
     barra inferior del logotipo oficial) --- */
  --grad-marca:linear-gradient(90deg,var(--ifvg-blue-600),var(--ifvg-red-600));
  --grad-header:linear-gradient(135deg,var(--ifvg-navy-900) 0%,var(--ifvg-navy-700) 60%,var(--ifvg-blue-600) 130%);
  --grad-boton:linear-gradient(135deg,var(--ifvg-navy-700),var(--ifvg-blue-600));
  --grad-boton-hover:linear-gradient(135deg,var(--ifvg-navy-800),var(--ifvg-blue-500));
  --grad-dorado:linear-gradient(135deg,var(--ifvg-gold-600),var(--ifvg-gold-300));

  /* --- Sombras premium (más suaves y en capas que una sombra plana) --- */
  --sombra-card:0 1px 2px rgba(14,21,48,.06),0 6px 18px -4px rgba(14,21,48,.10);
  --sombra-elev:0 12px 32px -8px rgba(14,21,48,.28);
  --sombra-boton:0 4px 14px -4px rgba(29,43,94,.45);
}

*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:var(--paper);color:var(--ink)}
.mono{font-family:'Courier New',monospace}
.muted{color:#7A7566}
.row{display:flex;align-items:center;gap:8px}
.row.between{justify-content:space-between}
.flex1{flex:1}
.card{background:var(--card);border-radius:16px;padding:16px;box-shadow:var(--sombra-card)}
.pill{border-radius:999px;padding:9px 16px;font-size:13px;font-weight:600;border:1px solid var(--line);background:transparent;color:var(--teal);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.pill.active,.pill-primary{background:var(--grad-boton);color:#fff;border-color:transparent;box-shadow:var(--sombra-boton)}
.pill.active:hover,.pill-primary:hover{background:var(--grad-boton-hover)}
.pill:active{transform:scale(.97)}
.pill:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
input,select{border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:9px 12px;font-size:13px;color:var(--ink);width:100%}
input:focus,select:focus{outline:2px solid var(--ifvg-blue-300);outline-offset:1px}
label.muted{font-size:11px;color:#7A7566;display:block;margin-bottom:4px}
.error-box{background:var(--rojoSoft);color:#7A1317;padding:10px 12px;border-radius:10px;font-size:13px;margin-bottom:10px}
.ok-box{background:var(--verdeSoft);color:#1C5C34;padding:10px 12px;border-radius:10px;font-size:13px}
.item{padding:10px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:none}
.tag{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700}
.tag-brass{background:var(--ifvg-gold-100);color:#7A5C10}
.tag-teal{background:var(--tealSoft);color:var(--teal)}
.tag-red{background:var(--rojoSoft);color:var(--rojo)}
.tag-green{background:var(--verdeSoft);color:var(--verde)}
.modal-overlay{position:fixed;inset:0;background:rgba(14,21,48,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal-box{background:#fff;border-radius:18px;padding:18px;max-width:380px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--sombra-elev)}
.modal-close{background:none;border:none;font-size:16px;cursor:pointer}
.toast-cobro{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:60;background:#fff;border:1px solid var(--verdeSoft);color:var(--verde);font-weight:700;font-size:14px;padding:12px 20px;border-radius:999px;box-shadow:var(--sombra-elev);max-width:92vw;text-align:center;animation:toastCobroIn .15s ease}
@keyframes toastCobroIn{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}

/* Encabezado de marca reutilizable: franja con degradado + barra de acento
   azul→rojo (el mismo recurso visual que la barra bajo el logotipo oficial). */
.marca-header{background:var(--grad-header);position:relative;color:#fff;box-shadow:var(--sombra-elev)}
.marca-header::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--grad-marca)}
.marca-logo{height:30px;width:auto;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}

.login-wrap{max-width:340px;margin:60px auto;padding:0 16px;text-align:center}
.login-logo{height:76px;width:auto;margin-bottom:18px;filter:drop-shadow(0 6px 14px rgba(14,21,48,.18))}
.login-wrap .card{text-align:left}

/* Credencial en grande: para leerla de lejos en Recepción, Cobranza y caja. */
.cred-grande{display:inline-block;font-size:34px;font-weight:800;letter-spacing:2px;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--navy-deep,#14235C);background:var(--tealSoft,#e8f1fb);border-radius:10px;padding:2px 12px;margin:2px 0}