*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0a0a12;--s:#111122;--s2:#0e0e1a;--b:#1a1a2e;--a:#7c3aed;--al:#c4b5fd;--g:#10b981;--y:#f59e0b;--r:#ef4444;--bl:#818cf8;--t:#e2e2ef;--tm:#8b8ba3;--td:#6b6b8a;--f:'Segoe UI',system-ui,-apple-system,sans-serif;--fs:11px}
[data-theme="light"]{--bg:#f5f5f9;--s:#ffffff;--s2:#fafafd;--b:#e2e2ec;--a:#7c3aed;--al:#5b21b6;--g:#059669;--y:#d97706;--r:#dc2626;--bl:#4f46e5;--t:#1a1a2e;--tm:#52526a;--td:#7a7a92}
[data-theme="light"] .btn-d{background:#fee2e2;color:#dc2626;border-color:#fca5a5}
[data-theme="light"] .btn-g{background:#d1fae5;color:#059669;border-color:#86efac}
[data-theme="light"] tr:hover td{background:rgba(124,58,237,.05)}
[data-theme="light"] .modal-bg{background:rgba(0,0,0,.4)}
body{background:var(--bg);color:var(--t);font-family:var(--f);min-height:100vh;font-size:var(--fs)}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--b);border-radius:3px}
.app{display:flex;min-height:100vh}
.sidebar{background:var(--s2);border-right:1px solid var(--b);width:220px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex-shrink:0;transition:transform .25s ease}
.main{flex:1;padding:18px 24px;overflow-y:auto;min-width:0}
.card{background:var(--s);border:1px solid var(--b);border-radius:10px;padding:16px;margin-bottom:12px}
.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:6px;border:1px solid var(--b);cursor:pointer;font-family:var(--f);font-size:var(--fs);font-weight:600;background:var(--s);color:var(--t);transition:opacity .15s}.btn:hover{opacity:.85}
.btn-p{background:var(--a);color:#fff;border-color:var(--a)}.btn-d{background:#2d0a0a;color:var(--r);border-color:rgba(239,68,68,.3)}.btn-g{background:#0d2818;color:var(--g);border-color:rgba(16,185,129,.3)}
/* Un boton bloqueado tiene que VERSE bloqueado: sin esto el usuario le pica y
   no pasa nada (p.ej. "Firmar" con la e.firma vencida). */
.btn:disabled,.btn[disabled]{opacity:.4;cursor:not-allowed;filter:grayscale(.5)}.btn:disabled:hover,.btn[disabled]:hover{opacity:.4}
.inp{width:100%;background:var(--s2);border:1px solid var(--b);border-radius:6px;padding:7px 10px;color:var(--t);font-family:var(--f);font-size:var(--fs);outline:none}.inp:focus{border-color:var(--a)}
.sel{width:100%;background:var(--s2);border:1px solid var(--b);border-radius:6px;padding:7px 10px;color:var(--t);font-family:var(--f);font-size:var(--fs)}
table{width:100%;border-collapse:collapse;font-size:var(--fs);font-family:var(--f)}
th{padding:8px 10px;text-align:left;font-size:var(--fs);font-weight:700;color:var(--td);letter-spacing:.02em;border-bottom:1px solid var(--b);font-family:var(--f)}
td{padding:8px 10px;border-bottom:1px solid var(--b);font-size:var(--fs);font-family:var(--f);font-weight:600;color:var(--t)}
tr:hover td{background:rgba(124,58,237,.03)}
.grid{display:grid;gap:10px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr 1fr}.g4{grid-template-columns:1fr 1fr 1fr 1fr}.g5{grid-template-columns:repeat(5,1fr)}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal{background:var(--s);border:1px solid var(--b);border-radius:14px;padding:24px;max-width:480px;width:100%;max-height:90vh;overflow-y:auto}.modal.w{max-width:720px}
.tag{display:inline-flex;padding:2px 7px;border-radius:4px;font-size:var(--fs);font-weight:600}
.login-box{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-card{background:var(--s);border:1px solid var(--b);border-radius:14px;padding:32px 36px;width:340px}
.nav-item{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:6px;cursor:pointer;font-size:var(--fs);margin-bottom:1px;font-family:var(--f)}.nav-item:hover{background:var(--b)}.nav-item.active{background:var(--b);color:var(--al);font-weight:600}
.stat{border-left:3px solid;padding:14px 16px}.stat .v{font-size:22px;font-weight:700;line-height:1}.stat .l{font-size:var(--fs);color:var(--td);letter-spacing:.02em;margin-top:4px}
.tb{padding:4px 10px;border-radius:5px;border:1px solid var(--b);cursor:pointer;font-family:var(--f);font-size:var(--fs);font-weight:600;background:transparent;color:var(--td)}.tb.on{background:var(--b);color:var(--al)}
#loading{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:999;font-size:14px;color:var(--al)}

/* ── Mobile top bar ────────────────────────────────────────── */
/* padding-top respeta safe-area-inset-top del notch / Dynamic Island en iOS standalone (PWA) */
.topbar{display:none;align-items:center;gap:10px;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top, 0px));padding-left:calc(14px + env(safe-area-inset-left, 0px));padding-right:calc(14px + env(safe-area-inset-right, 0px));background:var(--s2);border-bottom:1px solid var(--b);position:sticky;top:0;z-index:90;min-height:calc(52px + env(safe-area-inset-top, 0px));box-sizing:border-box}
.topbar-title{font-weight:700;color:var(--al);font-size:13px;flex:1}
.hamburger{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;border:1px solid var(--b);background:var(--s);cursor:pointer;color:var(--t);flex-shrink:0}
.hamburger svg{display:block}

/* ── Sidebar overlay (mobile) ──────────────────────────────── */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:140}
.sidebar-overlay.open{display:block}

/* ── Responsive breakpoint ─────────────────────────────────── */
@media(max-width:768px){
  .topbar{display:flex}
  /* sidebar respeta safe area arriba/abajo cuando se abre como overlay en PWA */
  .sidebar{position:fixed;left:0;top:0;height:100vh;z-index:150;transform:translateX(-100%);padding-top:env(safe-area-inset-top, 0px);padding-bottom:env(safe-area-inset-bottom, 0px);box-sizing:border-box}
  .sidebar.open{transform:translateX(0)}
  .main{padding:14px 14px;padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));padding-left:calc(14px + env(safe-area-inset-left, 0px));padding-right:calc(14px + env(safe-area-inset-right, 0px))}
  .g2,.g3,.g4,.g5{grid-template-columns:1fr 1fr}
  .modal{padding:16px;border-radius:10px}
  .modal-bg{padding:12px}
}

/* ── PWA standalone (iOS "Add to Home Screen") ─────────────── */
/* Detectamos el modo standalone para asegurar que el fondo del notch coincida con la topbar */
@media(display-mode:standalone){
  body{background:var(--s2)}
}
@supports(-webkit-touch-callout:none){
  /* iOS: garantiza que html/body no tengan scroll bounce que rompa el sticky */
  html,body{overscroll-behavior-y:none}
}
@media(max-width:480px){
  .g2,.g3,.g4,.g5{grid-template-columns:1fr}
}
/* Botón "Volver" del Super Admin dentro de un despacho (impersonation) */
.impersonation-back{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:10000;
  background:#7c3aed;color:#fff;border:none;border-radius:999px;padding:8px 16px;font-size:12px;
  font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35);white-space:nowrap;display:flex;align-items:center;gap:6px}
.impersonation-back:hover{background:#6d28d9}
@media(max-width:480px){
  .impersonation-back{bottom:10px;padding:5px 11px;font-size:11px;gap:4px}
}
@media print{
  body{background:#fff!important;color:#000!important;font-size:11px}
  .sidebar,.no-print,.topbar,nav,header,footer,button{display:none!important}
  .main{padding:12px!important;overflow:visible!important}
  .card{background:#fff!important;border:1px solid #ccc!important;box-shadow:none!important;color:#000!important;page-break-inside:avoid;margin-bottom:8px!important}
  .print-only{display:block!important}
  table,th,td{color:#000!important;background:#fff!important;border-color:#ccc!important}
  *{color:#000!important;background-color:transparent!important}
  .grid{display:block!important}
  .grid>*{margin-bottom:8px}
  h1,h2,h3,h4{color:#000!important;page-break-after:avoid}
  a{text-decoration:none!important}
  @page{margin:12mm;size:letter}
}

/* Opción del catálogo de fracciones del IMSS (pestaña IMSS del cliente).
   El desplegable va sobre un .card, así que necesita su propio realce al
   pasar el mouse para que se note cuál se va a elegir. */
.opt-frac:hover{background:var(--s2)}
.opt-frac:last-child{border-bottom:none}