/* ═══════════════════════════════════════════════════════════════
   CRISTERMANCHA — Estilos comunes (paleta y componentes originales)
   ═══════════════════════════════════════════════════════════════ */
:root{
  color-scheme: only light;
  --navy:#1C2B3A; --navy2:#14213D; --navy3:#243B54;
  --orange:#E8610A; --orange2:#F79A54;
  --green:#16A34A; --blue:#2563EB; --amber:#F59E0B; --purple:#7C3AED; --teal:#0D9488;
  --red:#DC2626;
  --txt:#1C2B3A; --txt2:#5B6472; --txt3:#9CA3AF; --line:#E2E8F0;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:linear-gradient(160deg,#FCF8F2 0%,#FAF5EE 45%,#F4EADD 100%);
  min-height:100vh;color:var(--txt);padding:0;
}

/* ── Barra superior común ── */
.topbar{
  display:flex;align-items:center;gap:16px;padding:26px 32px 10px;max-width:1100px;margin:0 auto;
}
.logo-badge{
  width:58px;height:58px;border-radius:14px;background:var(--navy);display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#fff;font-size:11px;text-align:center;line-height:1.05;flex-shrink:0;
  box-shadow:0 6px 20px rgba(0,0,0,0.3);text-decoration:none;
}
.brand h1{font-size:26px;font-weight:800;letter-spacing:.3px;color:var(--txt);}
.brand h1 span{color:var(--orange);}
.brand .sub{font-size:12.5px;color:var(--txt2);margin-top:2px;}
.brand a{text-decoration:none;color:inherit;}
.hgap{flex:1;}
.reloj{text-align:right;font-size:12.5px;color:var(--txt2);line-height:1.5;}
.reloj .hora{font-size:22px;font-weight:700;color:var(--txt);font-family:Consolas,monospace;}
.user-box{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--txt2);}
.user-box a{color:var(--orange);text-decoration:none;font-weight:600;}
.user-box a:hover{text-decoration:underline;}

.wrap{max-width:1100px;margin:0 auto;padding:10px 32px 50px;}

footer{text-align:center;padding:26px 20px;color:var(--txt3);font-size:11px;line-height:1.6;}

/* ── Modales (patrón original) ── */
.modal-bg{position:fixed;inset:0;background:rgba(10,17,30,0.75);display:none;align-items:center;justify-content:center;z-index:200;padding:20px;}
.modal-bg.show{display:flex;}
.modal{background:#fff;color:var(--txt);border-radius:16px;max-width:520px;width:100%;padding:0;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.4);}
.modal-head{background:var(--navy2);color:#fff;padding:16px 22px;font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:space-between;}
.modal-head button{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;}
.modal-body{padding:22px;font-size:13.5px;line-height:1.6;color:var(--txt2);}
.modal-body h4{color:var(--navy);font-size:14px;margin:14px 0 6px;}
.modal-body ol{margin:6px 0 6px 20px;}
.modal-body li{margin-bottom:6px;}
.modal-body b{color:var(--navy);}

/* ── Toast (patrón original) ── */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translate(-50%,80px);
  background:var(--navy);color:#fff;padding:12px 22px;border-radius:10px;font-size:13.5px;font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,.35);opacity:0;transition:.25s;z-index:400;pointer-events:none;
}
.toast.show{transform:translate(-50%,0);opacity:1;}
.toast.ok{background:var(--green);}
.toast.warn{background:var(--amber);color:#1C2B3A;}
.toast.err{background:var(--red);}

/* ── Botones genéricos ── */
.cbtn{
  padding:11px 18px;border:none;border-radius:10px;font-size:13.5px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:.15s;color:#fff;
}
.cbtn:hover{filter:brightness(1.12);transform:translateY(-1px);}
.cbtn-naranja{background:var(--orange);}

@media(max-width:640px){
  .topbar{padding:20px 20px 8px;flex-wrap:wrap;}
  .wrap{padding:8px 20px 40px;}
  .reloj{display:none;}
  .brand h1{font-size:22px;}
}