/* ═══════════════════════════════════════════
   Vista Cana Pases CR80 — styles.css v1.0
   Mobile-first PWA — limpio sin conflictos
   ═══════════════════════════════════════════ */
:root {
  --green:#0a7c55; --green-d:#065e3f; --green-l:#d4f0e5;
  --orange:#d4780a; --orange-l:#fef3e2;
  --red:#c0392b;   --red-l:#fde8e6;
  --blue:#1a6fbf;  --blue-l:#e8f1fb;
  --g50:#f9f9f7; --g100:#f4f4f2; --g200:#e8e8e5;
  --g400:#a8a8a2; --g600:#6b6b65; --g800:#2c2c28; --g900:#1a1a16;
  --sh: 0 2px 16px rgba(0,0,0,.09);
  --shlg: 0 8px 40px rgba(0,0,0,.16);
  --rad: 10px;
  --tab-h: 60px;
  --top-h: 56px;
  --safe-top: env(safe-area-inset-top,0px);
  --safe-bot: env(safe-area-inset-bottom,0px);
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html { height:100%; font-size:16px; }
body { font-family:'Barlow',sans-serif; background:var(--g900); color:var(--g800); height:100%; display:flex; flex-direction:column; overflow:hidden; }
input,select,button,textarea { font-family:inherit; }

/* ── APP SHELL ── */
#appRoot { display:flex; flex-direction:column; height:100vh; overflow:hidden; }
.app-shell { display:flex; flex-direction:column; flex:1; overflow:hidden; }

/* ── INSTALL BANNER ── */
.install-banner { background:var(--green); color:#fff; padding:10px 16px; display:none; align-items:center; gap:10px; font-size:13px; font-weight:500; flex-shrink:0; }
.install-banner.show { display:flex; }
.install-banner button { padding:5px 14px; border-radius:6px; border:none; font-size:12px; font-weight:600; cursor:pointer; }
.install-yes { background:rgba(255,255,255,.25); color:#fff; }
.install-no  { background:transparent; color:rgba(255,255,255,.6); }

/* ── TOPBAR ── */
.topbar {
  background:#111110; border-bottom:3px solid var(--green);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; padding-top:var(--safe-top);
  height:calc(var(--top-h) + var(--safe-top));
  flex-shrink:0; z-index:100;
}
.brand { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:18px; color:#fff; letter-spacing:.07em; text-transform:uppercase; }
.brand span { color:var(--green); }
.desk-nav { display:none; gap:3px; }
.nb { padding:6px 14px; border-radius:6px; border:none; font-size:13px; font-weight:500; cursor:pointer; background:transparent; color:#aaa; transition:all .15s; white-space:nowrap; }
.nb:hover { background:#2a2a28; color:#fff; }
.nb.active { background:var(--green); color:#fff; }
.topbar-right { display:flex; align-items:center; gap:8px; }
.topinfo { font-size:11px; color:var(--g400); display:none; }
.notif-btn { position:relative; background:transparent; border:none; color:#888; font-size:20px; cursor:pointer; padding:4px; line-height:1; }
.notif-badge { position:absolute; top:0; right:0; background:var(--red); color:#fff; border-radius:10px; font-size:10px; font-weight:700; padding:1px 5px; min-width:16px; text-align:center; display:none; }
.notif-badge.show { display:block; }
.logout-btn { padding:5px 10px; border-radius:6px; border:1px solid #333; background:transparent; color:#888; font-size:12px; cursor:pointer; white-space:nowrap; }
.logout-btn:hover { color:#fff; border-color:#666; }

/* ── CONTENT ── */
.content { flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; }

/* ── PAGES ── */
.page { display:none; padding:14px; padding-bottom:calc(var(--tab-h) + var(--safe-bot) + 14px); }
.page.active { display:block; }

/* ── BOTTOM TABS (mobile) ── */
.tabbar { display:flex; position:fixed; bottom:0; left:0; right:0; height:calc(var(--tab-h) + var(--safe-bot)); padding-bottom:var(--safe-bot); background:#111110; border-top:2px solid var(--green); z-index:200; }
.tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:none; background:transparent; cursor:pointer; color:#555; transition:color .15s; padding:4px 0; }
.tab.active { color:var(--green); }
.tab-ico { font-size:20px; line-height:1; }
.tab-lbl { font-size:9px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; }

/* ── CARDS ── */
.card { background:#fff; border-radius:var(--rad); padding:16px; box-shadow:var(--sh); margin-bottom:12px; }
.card-dark { background:#161614; border-radius:var(--rad); padding:16px; margin-bottom:12px; }
.ctitle { font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--g800); margin-bottom:14px; padding-bottom:9px; border-bottom:2px solid var(--green); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.ctitle-sub { font-size:11px; font-weight:400; color:var(--g400); text-transform:none; letter-spacing:0; margin-left:auto; }

/* ── FORMS ── */
.fg { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ff { grid-column:1/-1; }
.fld { display:flex; flex-direction:column; gap:5px; }
.fld label { font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--g600); }
.fld input,.fld select,.fld textarea {
  padding:11px 12px; border:1.5px solid var(--g200); border-radius:8px;
  font-size:15px; color:var(--g800); background:#fff;
  transition:border-color .15s; width:100%; -webkit-appearance:none; appearance:none;
}
.fld select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:34px;
}
.fld input:focus,.fld select:focus,.fld textarea:focus { outline:none; border-color:var(--green); }
.fld input::placeholder { color:var(--g400); }

/* ── AUTOCOMPLETE ── */
.acw { position:relative; }
.acl { position:absolute; top:calc(100% + 2px); left:0; right:0; background:#fff; border:1.5px solid var(--green); border-radius:8px; z-index:600; max-height:220px; overflow-y:auto; box-shadow:var(--shlg); display:none; }
.aci { padding:11px 14px; font-size:14px; cursor:pointer; color:var(--g800); border-bottom:1px solid var(--g100); }
.aci:last-child { border-bottom:none; }
.aci:hover,.aci:active { background:var(--green-l); }
.acn { color:var(--green); font-weight:600; font-style:italic; font-size:13px; }

/* ── BUTTONS ── */
.btn { padding:11px 18px; border-radius:9px; border:none; font-size:14px; font-weight:600; cursor:pointer; letter-spacing:.03em; transition:all .15s; display:inline-flex; align-items:center; gap:6px; justify-content:center; -webkit-appearance:none; touch-action:manipulation; }
.btn-g  { background:var(--green);  color:#fff; } .btn-g:active  { background:var(--green-d); }
.btn-r  { background:var(--red);    color:#fff; } .btn-r:active  { filter:brightness(.85); }
.btn-o  { background:var(--orange); color:#fff; } .btn-o:active  { filter:brightness(.85); }
.btn-b  { background:var(--blue);   color:#fff; }
.btn-s  { background:var(--g100);   color:var(--g800); border:1.5px solid var(--g200); }
.btn-s:hover { background:var(--g200); }
.btn-sm { padding:5px 10px; font-size:12px; border-radius:6px; }
.bfull  { width:100%; }
.btn:disabled { opacity:.4; pointer-events:none; }

/* ── CHIPS ── */
.chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.chip { padding:7px 13px; border-radius:20px; border:1.5px solid var(--g200); font-size:12px; font-weight:600; cursor:pointer; background:#fff; color:var(--g600); transition:all .15s; }
.chip:active,.chip.active { background:var(--green); color:#fff; border-color:var(--green); }

/* ── STATS ── */
.sgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px; }
.scard { background:#fff; border-radius:var(--rad); padding:14px 16px; box-shadow:var(--sh); border-left:4px solid var(--green); }
.scard.o { border-left-color:var(--orange); }
.scard.r { border-left-color:var(--red); }
.scard.b { border-left-color:var(--blue); }
.scard.gr{ border-left-color:var(--g400); }
.snum { font-family:'Barlow Condensed',sans-serif; font-size:34px; font-weight:800; color:var(--g800); line-height:1; }
.slbl { font-size:11px; color:var(--g600); margin-top:3px; font-weight:500; }

/* ── TABLES ── */
.tw { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { background:var(--g100); text-align:left; padding:9px 11px; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--g600); border-bottom:1.5px solid var(--g200); white-space:nowrap; }
td { padding:10px 11px; border-bottom:1px solid var(--g200); color:var(--g800); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--g50); }
.mono { font-family:'Courier New',monospace; font-size:12px; }

/* ── BADGES ── */
.bdg { display:inline-flex; align-items:center; padding:3px 8px; border-radius:12px; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.bg  { background:var(--green-l);  color:var(--green-d); }
.bo  { background:var(--orange-l); color:var(--orange); }
.br  { background:var(--red-l);    color:var(--red); }
.bb  { background:var(--blue-l);   color:var(--blue); }
.bgr { background:var(--g100);     color:var(--g600); }

/* ── PROGRESS ── */
.bar-wrap { background:var(--g100); border-radius:4px; height:6px; overflow:hidden; }
.bar-fill { height:100%; border-radius:4px; transition:width .4s; }

/* ── FILTERS ── */
.filters { display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.filters input,.filters select { padding:8px 10px; border:1.5px solid var(--g200); border-radius:7px; font-size:13px; background:#fff; min-width:0; }

/* ══════════════════════════════
   PASE CR80 — 240×382px
   ══════════════════════════════ */
.pase-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; }
.pase-cr80 {
  width:240px; height:382px; background:#fff; border-radius:13px;
  overflow:hidden; display:flex; flex-direction:column;
  font-family:'Barlow Condensed',sans-serif; position:relative;
  box-shadow:0 10px 36px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.08);
  flex-shrink:0;
}
/* STRIPES */
.sband { height:40px; width:100%; flex-shrink:0; display:flex; align-items:center; padding:0 14px; gap:7px; }
.sband .bdot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.55); flex-shrink:0; }
.sband .btxt { font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.92); flex:1; text-align:center; }
.smid { height:20px; width:100%; flex-shrink:0; }
.sc-g { background:#0a7c55 !important; }
.sc-o { background:#d4780a !important; }
.sc-r { background:#c0392b !important; }
/* LOGO */
.pase-logo { display:flex; align-items:center; justify-content:center; padding:5px 10px 2px; border-bottom:1px solid #e8e8e8; }
.pase-shdr { text-align:center; padding:2px 0 1px; font-size:9px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:#666; }
/* BODY */
.pbody { flex:1; padding:5px 14px 4px; display:flex; flex-direction:column; gap:4px; }
.pname { text-align:center; font-size:15px; font-weight:800; color:#111; letter-spacing:.04em; text-transform:uppercase; line-height:1.1; }
.pced  { text-align:center; font-family:'Barlow',sans-serif; font-size:10px; color:#777; }
.prow  { display:flex; flex-direction:column; align-items:center; }
.pflbl { font-size:8px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:#bbb; }
.pfval { font-size:12.5px; font-weight:700; color:#111; text-transform:uppercase; text-align:center; }
.pdates { display:flex; justify-content:space-between; font-family:'Barlow',sans-serif; font-size:9px; color:#666; padding:3px 0; border-top:1px solid #eee; margin-top:auto; }
/* FOOTER */
.pfooter { padding:6px 14px 9px; display:flex; align-items:center; justify-content:space-between; gap:8px; background:#fafafa; }
.pnac   { font-size:13px; font-weight:800; border:2px solid #ccc; padding:2px 7px; border-radius:5px; color:#444; letter-spacing:.1em; text-align:center; }
.pstat  { font-size:8px; font-weight:700; padding:2px 7px; border-radius:10px; letter-spacing:.1em; text-transform:uppercase; margin-top:3px; text-align:center; }
.ss-g { background:#d4f0e5; color:#065e3f; }
.ss-o { background:#fef3e2; color:#b5660a; }
.ss-r { background:#fde8e6; color:#a0302a; }
/* WATERMARK */
.pwm { position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:13px; z-index:2; opacity:.055; }
.pwm svg { width:100%; height:100%; }
.pase-cr80>*:not(.pwm) { position:relative; z-index:3; }
/* LEYENDA */
.legend { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.li { display:flex; align-items:center; gap:5px; font-size:11px; color:#999; }
.ldot { width:10px; height:10px; border-radius:3px; }
/* BOTONES IMPRIMIR */
.print-btns { display:flex; gap:8px; width:100%; }
.print-btns .btn { flex:1; padding:11px 8px; font-size:13px; }

/* ── GUARDIA ── */
.scanbox { background:#161614; border:2px dashed var(--green); border-radius:13px; padding:28px 16px; text-align:center; cursor:pointer; transition:border-color .2s; margin-bottom:14px; }
.scanbox:active { border-color:#15d08a; }
.qrhid { position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
.vcard { background:#fff; border-radius:13px; overflow:hidden; box-shadow:var(--shlg); }
.vhdr  { padding:16px 18px 12px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--g200); }
.vico  { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.vok   { background:var(--green-l); }
.verr  { background:var(--red-l); }
.vbody { padding:14px 18px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vf label { font-size:10px; font-weight:600; color:var(--g600); text-transform:uppercase; letter-spacing:.07em; }
.vf p     { font-size:14px; font-weight:500; color:var(--g800); margin-top:1px; }
.vmeta { background:var(--g100); padding:10px 18px; border-top:1px solid var(--g200); font-size:11px; color:var(--g600); display:grid; grid-template-columns:1fr 1fr; gap:5px; }

/* ── MODALES ── */
.modal-ov { position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:800; display:none; align-items:center; justify-content:center; padding:16px; }
.modal-ov.open { display:flex; }
.modal { background:#fff; border-radius:14px; padding:24px; width:100%; max-width:440px; box-shadow:var(--shlg); animation:slideUp .25s ease; }
@keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:none;opacity:1} }
.modal-title { font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:700; color:var(--g800); margin-bottom:16px; }

/* ── LOGIN ── */
.login-screen { position:fixed; inset:0; background:var(--g900); z-index:900; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; }
.login-box { background:#fff; border-radius:16px; padding:32px 28px; width:100%; max-width:380px; box-shadow:var(--shlg); }
.login-logo { display:flex; flex-direction:column; align-items:center; margin-bottom:28px; gap:8px; }
.login-hint { background:var(--g100); border-radius:8px; padding:10px 14px; font-size:12px; color:var(--g600); margin-top:16px; line-height:1.7; }
.login-hint b { color:var(--g800); }
.otp-input { letter-spacing:.3em; text-align:center; font-size:22px; font-weight:700; }

/* ── TOAST ── */
.toast { position:fixed; bottom:calc(var(--tab-h) + var(--safe-bot) + 12px); left:12px; right:12px; background:var(--g900); color:#fff; padding:12px 16px; border-radius:10px; font-size:13px; font-weight:500; border-left:4px solid var(--green); z-index:999; opacity:0; transform:translateY(8px); transition:all .3s; pointer-events:none; }
.toast.show { opacity:1; transform:none; }
.toast.err  { border-left-color:var(--red); }
.toast.ok   { border-left-color:var(--green); }
.toast.warn { border-left-color:var(--orange); }

/* ── NOTIFICACIONES ── */
.notif-panel { position:fixed; top:calc(var(--top-h) + var(--safe-top)); right:0; width:min(320px,100vw); background:#fff; box-shadow:var(--shlg); z-index:700; border-left:1px solid var(--g200); border-radius:0 0 0 12px; display:none; max-height:60vh; overflow-y:auto; }
.notif-panel.open { display:block; }
.notif-item { padding:12px 16px; border-bottom:1px solid var(--g100); font-size:13px; color:var(--g800); }
.notif-item:last-child { border-bottom:none; }
.notif-ts { font-size:10px; color:var(--g400); margin-top:3px; }

/* ── USUARIOS ── */
.user-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--g100); }
.user-row:last-child { border-bottom:none; }
.user-avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:14px; color:#fff; flex-shrink:0; }
.ua-admin   { background:var(--green); }
.ua-emisor  { background:var(--blue); }
.ua-guardia { background:var(--orange); }

/* ── AUDITORÍA ── */
.audit-item { padding:8px 12px; border-left:3px solid var(--g200); margin-bottom:6px; border-radius:0 6px 6px 0; background:var(--g50); font-size:12px; }
.audit-item.login   { border-color:var(--green); }
.audit-item.revoc   { border-color:var(--red); }
.audit-item.anulado { border-color:var(--orange); }
.audit-item.pase    { border-color:var(--blue); }
.audit-action { font-weight:700; color:var(--g800); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.audit-detail { color:var(--g600); margin-top:2px; }
.audit-ts     { color:var(--g400); font-size:10px; margin-top:2px; }

/* ── PRINT ── */
@media print {
  @page { size:85.6mm 54mm; margin:0; }
  html,body { width:85.6mm; height:54mm; margin:0!important; padding:0!important; background:#fff!important; overflow:visible!important; }
  body>*:not(#printArea) { display:none!important; }
  #printArea { display:block!important; width:85.6mm; height:54mm; }
  * { -webkit-print-color-adjust:exact!important; print-color-adjust:exact!important; }
}
#printArea { display:none; }

/* ══════════════════════════════
   RESPONSIVE
   ══════════════════════════════ */

/* Mobile — default */
@media (max-width:767px) {
  .fg { grid-template-columns:1fr; }
  .ff { grid-column:1; }
  .vbody,.vmeta { grid-template-columns:1fr; }
}

/* Tablet / Desktop */
@media (min-width:768px) {
  /* Nav */
  .desk-nav { display:flex; }
  .tabbar   { display:none !important; }
  .topinfo  { display:block; }

  /* Content sin el tab bar */
  .content  { padding-bottom:0; }
  .page     { padding:22px 28px 40px; max-width:1200px; margin:0 auto; }

  /* Stats 4 col */
  .sgrid { grid-template-columns:repeat(4,1fr); }

  /* Dash two col tables */
  .dash-two { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

  /* Toast desktop */
  .toast { left:auto; right:24px; max-width:320px; bottom:24px; }

  /* Emisión: formulario izq + carnet der */
  #page-emit {
    display:grid;
    grid-template-columns:1fr 280px;
    grid-template-rows:auto;
    gap:20px;
    align-items:start;
  }
  /* Columna del formulario */
  .emit-form-col { grid-column:1; display:flex; flex-direction:column; }
  /* Columna del carnet — sticky */
  .emit-card-col {
    grid-column:2;
    grid-row:1 / 100;
    position:sticky;
    top:20px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  /* Admin dos col */
  .admin-two { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:14px; }

  /* Guardia centrado */
  #page-guardia > .guardia-inner { max-width:640px; margin:0 auto; }
}

/* ── Cola de Impresión ── */
.queue-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--g200);}
.queue-item:last-child{border-bottom:none;}

/* ── Paginación ── */
.pagination{display:flex;gap:5px;align-items:center;justify-content:center;margin-top:14px;flex-wrap:wrap;padding:4px 0;}
.pag-btn{padding:6px 11px;border-radius:6px;border:1.5px solid var(--g200);background:#fff;font-size:13px;cursor:pointer;color:var(--g800);transition:all .15s;}
.pag-btn:hover{background:var(--g100);}
.pag-btn.active{background:var(--green);color:#fff;border-color:var(--green);}
.pag-btn:disabled{opacity:.35;pointer-events:none;}
.pag-info{font-size:12px;color:var(--g600);padding:0 6px;}

/* ══ NAVEGACIÓN PÁGINAS — CRÍTICO ══ */
.page { display: none !important; }
.page.active { display: block !important; }
#page-emit.active {
  display: grid !important;
  grid-template-columns: 1fr 280px !important;
  gap: 20px !important;
  align-items: start !important;
}
@media (max-width: 767px) {
  #page-emit.active { display: block !important; }
}

/* ═══ 2FA inline (Fase 5B-v2) ═══ */
.twofa-block { border-top:1px solid #e5e5e5; margin-top:14px; padding-top:14px; }
.twofa-block.hidden { display:none; }
.twofa-head { font-size:12px; color:#555; text-align:center; margin-bottom:10px; }
.twofa-head b { color:#0a7c55; font-family:monospace; font-weight:700; }
.twofa-boxes { display:flex; gap:6px; justify-content:center; margin:10px 0 8px; }
.twofa-boxes input { width:38px; height:44px; text-align:center; font-size:20px; font-weight:700;
  border:2px solid #d0d0d0; border-radius:6px; background:#fff; font-family:monospace;
  transition:border-color .12s, transform .1s, background .1s; padding:0; }
.twofa-boxes input:focus { outline:none; border-color:#0a7c55; transform:scale(1.05); }
.twofa-boxes input.filled { border-color:#0a7c55; background:#f0f9f4; }
.twofa-boxes input.err { border-color:#c0392b; background:#fff2f0; animation:shake 0.25s; }
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);} }
.twofa-footer { display:flex; align-items:center; justify-content:space-between; margin-top:6px; font-size:11px; color:#666; }
.twofa-timer { flex:1; text-align:left; }
.twofa-timer.warn { color:#d97706; font-weight:700; }
.twofa-timer.err { color:#c0392b; font-weight:700; }
.twofa-resend { background:none; border:none; cursor:pointer; font-size:18px; padding:4px 8px;
  color:#999; transition:color .15s, transform .3s; border-radius:4px; }
.twofa-resend:hover:not(:disabled) { color:#0a7c55; background:#f0f9f4; }
.twofa-resend:not(:disabled) { color:#0a7c55; animation:pulse 1.5s infinite; }
.twofa-resend:disabled { cursor:not-allowed; opacity:0.35; }
@keyframes pulse { 0%,100%{transform:rotate(0);} 50%{transform:rotate(90deg);} }
.twofa-msg { text-align:center; font-size:12px; min-height:16px; margin-top:6px; }
.twofa-msg.err { color:#c0392b; }
.twofa-msg.ok { color:#0a7c55; }
#loginUser:disabled, #loginPw:disabled { opacity:0.55; background:#f5f5f5; cursor:not-allowed; }