/* ==========================================================================
   PegaloRD — sistema de diseno
   Paleta sacada del logo: azul marino + azul medio + dorado sobre hueso.
   Estructura deliberadamente distinta a la de El Portal: barra superior
   solida, tarjetas redondeadas con borde, y el dorado SOLO para dinero,
   premios y llamadas a la accion.
   ========================================================================== */
:root{
  --navy:#0A325A;
  --navy-900:#07213C;
  --navy-700:#123F6E;
  --blue:#1E5A96;
  --blue-400:#326EAA;
  --gold:#F0B23C;
  --gold-300:#FAD26E;
  --gold-700:#BE8232;
  --bone:#FAFAFA;
  --paper:#FFFFFF;
  --ink:#132033;
  --ink-soft:#4A5A70;
  --line:#DFE5EC;
  --ok:#1B8A5A;
  --ok-bg:#E7F5EE;
  --warn:#B9741A;
  --warn-bg:#FDF3E2;
  --bad:#C1352B;
  --bad-bg:#FBEAE8;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(10,50,90,.06), 0 8px 24px rgba(10,50,90,.08);
  --shadow-sm:0 1px 2px rgba(10,50,90,.08);
  --font:"Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:var(--bone);
  color:var(--ink);
  font-size:16px;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
[hidden]{display:none !important}

/* ---------- barra superior ---------- */
.topbar{
  background:var(--navy);
  color:#fff;
  position:sticky;top:0;z-index:50;
  box-shadow:0 2px 12px rgba(7,33,60,.25);
}
.topbar-in{
  max-width:1120px;margin:0 auto;padding:10px 16px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.brand:hover{text-decoration:none}
.brand img{height:42px;width:auto;border-radius:8px;display:block}
.brand-txt{display:flex;flex-direction:column;line-height:1.1}
.brand-name{font-weight:800;letter-spacing:.5px;font-size:19px}
.brand-name em{font-style:normal;color:var(--gold)}
.brand-tag{font-size:11px;color:#BCD0E6;letter-spacing:.4px}
.topbar .spacer{flex:1}
.topbar nav{display:flex;gap:4px;flex-wrap:wrap}
.topbar nav a,.topbar nav button{
  color:#DCE7F3;background:transparent;border:0;font:inherit;font-size:14px;
  padding:8px 12px;border-radius:999px;cursor:pointer;
}
.topbar nav a:hover,.topbar nav button:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.topbar nav a.on,.topbar nav button.on{background:var(--gold);color:var(--navy-900);font-weight:700}

/* saldo en la barra */
.saldo-chip{
  display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 14px;
}
.saldo-chip b{color:var(--gold-300);font-size:17px}
.saldo-chip span{font-size:11px;color:#BCD0E6;display:block;line-height:1}

/* ---------- estructura ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:20px 16px 56px}
.wrap-narrow{max-width:560px}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:18px;margin-bottom:16px;
}
.card h2{margin:0 0 4px;font-size:19px;color:var(--navy)}
.card h3{margin:0 0 10px;font-size:16px;color:var(--navy)}
.card .sub{margin:0 0 14px;color:var(--ink-soft);font-size:14px}
.section-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.section-head h2{margin:0}
.section-head .sub{margin:0}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.right{margin-left:auto}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:700;font-size:15px;cursor:pointer;
  padding:11px 18px;border-radius:var(--radius-sm);border:1px solid transparent;
  background:var(--blue);color:#fff;transition:filter .12s,transform .04s;
}
.btn:hover{filter:brightness(1.07);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;filter:none}
.btn-gold{background:var(--gold);color:var(--navy-900)}
.btn-navy{background:var(--navy)}
.btn-ghost{background:transparent;color:var(--blue);border-color:var(--line)}
.btn-ghost:hover{background:#F2F6FA}
.btn-danger{background:var(--bad)}
.btn-sm{padding:7px 12px;font-size:13.5px}
.btn-block{width:100%}
.btn-link{background:none;border:0;color:var(--blue);font:inherit;cursor:pointer;padding:0;text-decoration:underline}

/* ---------- formularios ---------- */
label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin:0 0 5px}
input,select,textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 12px;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue-400);outline-offset:-1px;border-color:var(--blue-400)}
input[readonly],input:disabled{background:#F2F5F8;color:var(--ink-soft)}
.field{margin-bottom:13px}
.field .hint{font-size:12.5px;color:var(--ink-soft);margin-top:4px;font-weight:400}
fieldset{border:0;padding:0;margin:0}

/* ---------- avisos ---------- */
.msg{border-radius:var(--radius-sm);padding:11px 14px;font-size:14.5px;margin:0 0 13px;border:1px solid}
.msg-ok{background:var(--ok-bg);border-color:#BFE3D1;color:#125E3E}
.msg-bad{background:var(--bad-bg);border-color:#F1C6C1;color:#8E241C}
.msg-warn{background:var(--warn-bg);border-color:#F0D9AE;color:#82500E}
.msg-info{background:#EDF4FB;border-color:#CBDEF0;color:#14456F}

/* ---------- tarjetas de loteria ---------- */
.lot-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
.lot{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:13px 14px;cursor:pointer;text-align:left;
  font:inherit;color:inherit;transition:border-color .12s, box-shadow .12s;
}
.lot:hover{border-color:var(--blue-400);box-shadow:var(--shadow)}
.lot .flag{font-size:11px;font-weight:700;letter-spacing:.6px;color:var(--ink-soft);text-transform:uppercase}
.lot .nom{font-weight:700;font-size:16px;color:var(--navy);margin:3px 0 6px;line-height:1.25}
.lot .cierre{font-size:13px;color:var(--ink-soft)}
.lot .cierre b{color:var(--ink)}
.lot.sel{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-300) inset;background:#FFFCF4}
.lot.cerrada{opacity:.5;cursor:not-allowed;background:#F6F8FA}
/* aviso de cierre: <=30 min dorado, <=15 min rojo (comportamiento del original) */
.lot.pronto{border-color:var(--gold-700);background:#FFFAF0}
.lot.pronto .cierre b{color:var(--gold-700)}
.lot.urgente{border-color:var(--bad);background:#FFF4F3}
.lot.urgente .cierre{color:var(--bad);font-weight:700}
.lot .tick{display:block;font-variant-numeric:tabular-nums}

/* ---------- chips ---------- */
.chip{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;
  padding:3px 10px;border-radius:999px;border:1px solid;letter-spacing:.2px;
}
.chip-ok{background:var(--ok-bg);border-color:#BFE3D1;color:#125E3E}
.chip-bad{background:var(--bad-bg);border-color:#F1C6C1;color:#8E241C}
.chip-warn{background:var(--warn-bg);border-color:#F0D9AE;color:#82500E}
.chip-info{background:#EDF4FB;border-color:#CBDEF0;color:#14456F}
.chip-gold{background:#FFF6E3;border-color:#F0D9AE;color:var(--gold-700)}
.chip-mute{background:#F2F5F8;border-color:var(--line);color:var(--ink-soft)}

/* ---------- tablas ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:#F4F7FA;color:var(--navy);font-size:12.5px;text-transform:uppercase;letter-spacing:.5px;position:sticky;top:0}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#F8FBFE}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl-scroll{max-height:460px;overflow-y:auto}

/* ---------- dinero ---------- */
.money{font-variant-numeric:tabular-nums;font-weight:700}
.money-gold{color:var(--gold-700)}
.big-num{font-size:26px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}

/* ---------- bolas de numeros ---------- */
.bolas{display:flex;gap:6px;flex-wrap:wrap}
.bola{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 7px;border-radius:50%;
  background:var(--navy);color:#fff;font-weight:800;font-size:15px;
  font-variant-numeric:tabular-nums;
}
.bola-gold{background:var(--gold);color:var(--navy-900)}
.bola-sm{min-width:29px;height:29px;font-size:13px}

/* ---------- modales propios (nada de confirm()/prompt() del navegador) ---------- */
.modal-bg{
  position:fixed;inset:0;background:rgba(7,33,60,.55);z-index:100;
  display:flex;align-items:flex-start;justify-content:center;padding:24px 14px;overflow-y:auto;
}
.modal{
  background:var(--paper);border-radius:var(--radius);width:100%;max-width:520px;
  box-shadow:0 20px 60px rgba(7,33,60,.35);margin:auto;
}
.modal-wide{max-width:860px}
.modal-head{
  display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line);
}
.modal-head h3{margin:0;font-size:18px;color:var(--navy);flex:1}
.modal-x{background:none;border:0;font-size:24px;line-height:1;color:var(--ink-soft);cursor:pointer;padding:0 4px}
.modal-body{padding:18px}
.modal-foot{padding:14px 18px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* ---------- listas de terminos ---------- */
.terminos{margin:0;padding-left:20px;font-size:14.5px;color:var(--ink)}
.terminos li{margin-bottom:8px}

/* ---------- tickets ---------- */
.ticket{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;background:#fff}
.ticket-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:11px 14px;background:#F4F7FA;border-bottom:1px solid var(--line)}
.ticket-head .ref{font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.ticket-body{padding:12px 14px}
.jugada{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.jugada:last-child{border-bottom:0}
.jugada .lot-nom{font-weight:600;min-width:140px}

/* ---------- utilidades ---------- */
.muted{color:var(--ink-soft)}
.small{font-size:13px}
.center{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.stack>*+*{margin-top:12px}
.empty{padding:28px 16px;text-align:center;color:var(--ink-soft);font-size:15px}
.loading{padding:22px;text-align:center;color:var(--ink-soft)}
.divider{height:1px;background:var(--line);margin:16px 0}

/* ---------- pie ---------- */
.foot{background:var(--navy-900);color:#9FB6CE;padding:26px 16px;font-size:13.5px}
.foot-in{max-width:1120px;margin:0 auto;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.foot a{color:#CFE0F0}

/* ---------- movil ---------- */
@media (max-width:640px){
  .wrap{padding:14px 12px 44px}
  .card{padding:14px}
  .brand img{height:36px}
  .brand-name{font-size:17px}
  .topbar-in{padding:8px 12px;gap:8px;flex-wrap:nowrap}
  .brand-tag{display:none}
  .topbar nav{flex-wrap:nowrap}
  .topbar nav a,.topbar nav button{padding:6px 8px;font-size:14px}
  .lot-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  th,td{padding:9px 10px}
}
@media (max-width:380px){
  .brand img{height:30px}
  .brand-name{font-size:15px}
  .brand{gap:6px}
  .topbar-in{gap:4px;padding:8px 10px}
  .topbar nav{gap:0}
  .topbar nav a,.topbar nav button{padding:5px 6px;font-size:13px}
  .saldo-chip{padding:4px 10px}
  .saldo-chip b{font-size:15px}
}