/* ══════════════════════════════════════
   CAMARILLO · SISTEMA DE EVENTOS
   style.css
══════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:    #0a0a0f;
  --sb:    #0e0e17;
  --card:  #12121c;
  --card2: #181824;
  --inp:   #10101a;
  --brd:   rgba(255,255,255,0.07);
  --brd2:  rgba(255,255,255,0.04);

  --gold:  #d4a843;
  --gold2: #e8c068;
  --gdim:  rgba(212,168,67,0.1);
  --gbrd:  rgba(212,168,67,0.25);

  --tx: #eeeef5;
  --mt: #6b6b85;
  --ht: #32324a;

  --gn:    #22c55e; --gnbg: rgba(34,197,94,0.1);   --gnbrd: rgba(34,197,94,0.22);
  --yw:    #f59e0b; --ywbg: rgba(245,158,11,0.1);  --ywbrd: rgba(245,158,11,0.22);
  --rd:    #ef4444; --rdbg: rgba(239,68,68,0.1);   --rdbrd: rgba(239,68,68,0.22);
  --bl:    #60a5fa; --blbg: rgba(96,165,250,0.1);  --blbrd: rgba(96,165,250,0.22);
  --pu:    #a78bfa; --pubg: rgba(167,139,250,0.1); --pubrd: rgba(167,139,250,0.22);

  --r: 12px; --r2: 8px; --r3: 6px;
  --sb-w: 240px;
  --top-h: 52px;
}

body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  color: var(--tx);
  font-size: 14px;
  line-height: 1.5;
  height: 100vh;
  overflow: hidden;
}

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }

/* ── UTILITIES ── */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.g5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
.mb8  { margin-bottom: 8px; }
.mb12 { margin-bottom: 12px; }
.mb16 { margin-bottom: 16px; }
.mb20 { margin-bottom: 20px; }
.ml-auto { margin-left: auto; }
.flex-center { display: flex; align-items: center; }
.gap6 { gap: 6px; }
.gap8 { gap: 8px; }

/* ── TOAST ── */
#toast {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 9999; display: flex; flex-direction: column;
  gap: 6px; pointer-events: none;
}
.tst {
  padding: 10px 16px; border-radius: var(--r2);
  font-size: 13px; display: flex; align-items: center; gap: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  border: 1px solid var(--brd);
  animation: tstin .2s ease; pointer-events: auto;
}
.tst-ok  { background: var(--card2); color: var(--tx); border-color: var(--gnbrd); }
.tst-err { background: var(--rdbg);  color: var(--rd); border-color: var(--rdbrd); }
@keyframes tstin { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* ── BADGES ── */
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 500;
}
.b-ok   { background: var(--gnbg); color: var(--gn); border: 1px solid var(--gnbrd); }
.b-warn { background: var(--ywbg); color: var(--yw); border: 1px solid var(--ywbrd); }
.b-err  { background: var(--rdbg); color: var(--rd); border: 1px solid var(--rdbrd); }
.b-info { background: var(--blbg); color: var(--bl); border: 1px solid var(--blbrd); }
.b-gold { background: var(--gdim); color: var(--gold); border: 1px solid var(--gbrd); }
.b-pu   { background: var(--pubg); color: var(--pu);  border: 1px solid var(--pubrd); }

/* ── BUTTONS ── */
.btn {
  padding: 8px 16px; border-radius: var(--r2);
  font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 500;
  cursor: pointer; border: none; transition: all .15s;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.btn i { font-size: 14px; }
.btn-gold { background: var(--gold); color: #000; }
.btn-gold:hover { background: var(--gold2); }
.btn-out  { background: transparent; border: 1px solid var(--brd); color: var(--mt); }
.btn-out:hover  { background: rgba(255,255,255,.04); color: var(--tx); }
.btn-red  { background: var(--rdbg); color: var(--rd); border: 1px solid var(--rdbrd); }
.btn-red:hover  { background: rgba(239,68,68,.18); }
.btn-sm   { padding: 5px 10px; font-size: 12px; }

/* ── FORMS ── */
.fg { margin-bottom: 14px; }
.fl {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--mt); margin-bottom: 5px; font-weight: 500;
}
.fi, .fs, .fta {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--brd); border-radius: var(--r2);
  font-family: 'Outfit', sans-serif; font-size: 13px;
  color: var(--tx); background: var(--inp); outline: none;
  transition: border-color .15s; color-scheme: dark;
}
.fi:focus, .fs:focus, .fta:focus {
  border-color: rgba(212,168,67,.5);
  box-shadow: 0 0 0 3px rgba(212,168,67,.07);
}
.fta { resize: vertical; min-height: 70px; line-height: 1.5; }
.fr  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fr3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

/* ── CARDS ── */
.card {
  background: var(--card);
  border: 1px solid var(--brd);
  border-radius: var(--r);
}
.card-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--brd2);
  display: flex; align-items: center; justify-content: space-between;
}
.card-title {
  font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 7px; color: var(--tx);
}
.card-title i { font-size: 15px; color: var(--gold); }
.card-body { padding: 14px 16px; }

/* ── STAT CARDS ── */
.stat {
  background: var(--card); border: 1px solid var(--brd);
  border-radius: var(--r); padding: 14px;
}
.stat-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ht); margin-bottom: 6px;
  display: flex; align-items: center; gap: 4px;
}
.stat-label i { font-size: 12px; }
.stat-val { font-size: 24px; font-weight: 600; line-height: 1; color: var(--tx); }
.stat-sub { font-size: 11px; color: var(--mt); margin-top: 4px; }
.prog-bar { height: 3px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.prog-fill { height: 100%; border-radius: 3px; background: var(--gold); transition: width .4s; }

/* ── LOGIN ── */
#login {
  position: fixed; inset: 0;
  background: var(--bg); display: flex;
  align-items: center; justify-content: center; z-index: 1000;
  background-image:
    radial-gradient(ellipse at 15% 50%, rgba(212,168,67,.06) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(96,165,250,.04) 0%, transparent 50%);
}
.lbox {
  width: 420px; background: var(--card);
  border: 1px solid var(--brd); border-radius: 20px;
  padding: 36px 40px 32px; box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.l-logo { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.l-tag  { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--ht); margin-bottom: 24px; text-align:center; }
.l-err  {
  background: var(--rdbg); border: 1px solid var(--rdbrd);
  color: var(--rd); border-radius: var(--r2);
  padding: 10px 13px; font-size: 13px; margin-bottom: 14px; display: none;
}
.l-foot { font-size: 11px; color: var(--ht); text-align: center; margin-top: 16px; }

/* ── APP SHELL ── */
#app { display: none; height: 100vh; grid-template-columns: var(--sb-w) 1fr; }
#app.show { display: grid; }

/* ── SIDEBAR ── */
.sb {
  background: var(--sb); border-right: 1px solid var(--brd2);
  display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
}
.sb-head {
  padding: 14px 12px; border-bottom: 1px solid var(--brd2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: rgba(0,0,0,.15);
}

.sb-ev {
  margin: 12px 10px; padding: 12px;
  background: var(--gdim); border: 1px solid var(--gbrd); border-radius: var(--r2);
  flex-shrink: 0;
}
.sb-ev-tag  { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); opacity: .8; margin-bottom: 3px; }
.sb-ev-name { font-size: 12px; font-weight: 500; color: var(--tx); line-height: 1.3; }
.sb-ev-date { font-size: 10px; color: var(--mt); margin-top: 2px; }
.sb-days    { display: flex; align-items: baseline; gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.06); }
.sb-dnum    { font-family: 'Playfair Display', serif; font-size: 28px; color: var(--gold); line-height: 1; }
.sb-dlbl    { font-size: 10px; color: var(--ht); }

nav#sb-nav { flex: 1; padding: 6px 0; }
.nav-sec    { padding: 12px 14px 3px; font-size: 9px; text-transform: uppercase; letter-spacing: .14em; color: var(--ht); }
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; margin: 1px 6px;
  border-radius: var(--r3); cursor: pointer;
  font-size: 13px; color: var(--mt);
  transition: all .1s; user-select: none;
}
.nav-item:hover  { background: rgba(255,255,255,.04); color: var(--tx); }
.nav-item.active { background: var(--gdim); color: var(--gold); }
.nav-item i { font-size: 15px; flex-shrink: 0; }
.nav-badge {
  margin-left: auto; background: var(--rd); color: #fff;
  font-size: 9px; padding: 1px 5px; border-radius: 8px; font-weight: 700;
}

.sb-foot { padding: 10px; border-top: 1px solid var(--brd2); flex-shrink: 0; }
.sb-user {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; background: var(--card2);
  border: 1px solid var(--brd2); border-radius: var(--r2); margin-bottom: 6px;
}
.sb-uname { font-size: 13px; font-weight: 500; color: var(--tx); }
.sb-urole { font-size: 10px; color: var(--ht); }
.sb-logout {
  width: 100%; display: flex; align-items: center; gap: 7px;
  padding: 8px 10px; border-radius: var(--r2);
  border: 1px solid var(--brd2); background: transparent;
  color: var(--mt); cursor: pointer; font-size: 13px;
  font-family: 'Outfit', sans-serif; transition: all .1s;
}
.sb-logout:hover { background: rgba(255,255,255,.04); color: var(--tx); }

/* ── AVATAR ── */
.av {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0; font-size: 11px;
}
.av32 { width: 32px; height: 32px; font-size: 12px; }
.av26 { width: 26px; height: 26px; font-size: 10px; }
.av40 { width: 40px; height: 40px; font-size: 14px; }
.av-gold   { background: var(--gold);  color: #000; }
.av-blue   { background: #2563eb;      color: #fff; }
.av-green  { background: #16a34a;      color: #fff; }
.av-red    { background: #dc2626;      color: #fff; }
.av-purple { background: #7c3aed;      color: #fff; }
.av-orange { background: #ea580c;      color: #fff; }

/* ── MAIN / TOPBAR ── */
.main { display: flex; flex-direction: column; overflow: hidden; }
.topbar {
  height: var(--top-h); background: var(--sb);
  border-bottom: 1px solid var(--brd2);
  padding: 0 20px; display: flex;
  align-items: center; justify-content: space-between; flex-shrink: 0;
}
.tb-left  { display: flex; align-items: center; gap: 10px; }
.tb-title { font-size: 15px; font-weight: 500; color: var(--tx); }
.tb-date  { font-size: 11px; color: var(--ht); }
.tb-right { display: flex; align-items: center; gap: 8px; }

.content { overflow-y: auto; padding: 18px 20px; flex: 1; }

/* ── TABLE ── */
.tw { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 10px; font-weight: 500;
  color: var(--ht); text-transform: uppercase; letter-spacing: .07em;
  padding: 9px 13px; border-bottom: 1px solid var(--brd2); white-space: nowrap;
}
td {
  padding: 9px 13px; font-size: 13px;
  border-bottom: 1px solid var(--brd2);
  vertical-align: middle; color: var(--tx);
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,.015); }

/* ── SECTION HEADER ── */
.sec-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.sec-title { font-size: 15px; font-weight: 500; color: var(--tx); }

/* ── INFO ROW ── */
.info-bar {
  background: var(--card); border: 1px solid var(--brd);
  border-radius: var(--r); padding: 12px 16px;
  display: flex; gap: 0; margin-bottom: 14px;
}
.info-item {
  flex: 1; border-right: 1px solid var(--brd2); padding: 0 14px;
}
.info-item:first-child { padding-left: 0; }
.info-item:last-child  { border-right: none; }
.info-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ht); margin-bottom: 2px; }
.info-val { font-size: 13px; font-weight: 500; color: var(--tx); }

/* ── ALERT ── */
.alert {
  padding: 10px 13px; border-radius: var(--r2); font-size: 13px;
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 12px; border: 1px solid;
}
.alert i { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.alert-warn { background: var(--ywbg); color: var(--yw); border-color: var(--ywbrd); }
.alert-err  { background: var(--rdbg); color: var(--rd); border-color: var(--rdbrd); }
.alert-info { background: var(--blbg); color: var(--bl); border-color: var(--blbrd); }
.alert-gold { background: var(--gdim); color: var(--gold); border-color: var(--gbrd); }

/* ── CHECKLIST ── */
.ck-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--brd2);
}
.ck-item:last-child { border-bottom: none; }
.ck-item input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--gold); cursor: pointer; flex-shrink: 0; }
.ck-txt { flex: 1; font-size: 13px; }
.ck-txt.done { text-decoration: line-through; color: var(--mt); }
.ck-area { font-size: 11px; color: var(--ht); }

/* ── TIMELINE ── */
.tl-row { display: flex; gap: 12px; padding: 10px 0; }
.tl-time { font-size: 12px; color: var(--mt); width: 48px; flex-shrink: 0; padding-top: 1px; }
.tl-line { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.tl-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tl-conn { width: 2px; flex: 1; background: var(--brd2); margin: 3px 0; }
.tl-body { flex: 1; padding-bottom: 6px; }
.tl-act  { font-size: 13px; font-weight: 500; }
.tl-resp { font-size: 11px; color: var(--mt); margin-top: 2px; }
.dot-pend { background: var(--ht); }
.dot-done { background: var(--gn); }
.dot-now  { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.dot-soon { background: var(--bl); }

/* ── PEND ITEM ── */
.pend-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--brd2);
}
.pend-item:last-child { border-bottom: none; }
.pend-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pend-txt { flex: 1; font-size: 13px; }
.pend-date { font-size: 11px; color: var(--ht); }

/* ── EMPTY STATE ── */
.empty-state {
  text-align: center; padding: 40px 20px; color: var(--ht);
}
.empty-state i { font-size: 38px; display: block; margin-bottom: 10px; opacity: .4; }
.empty-title { font-size: 14px; font-weight: 500; color: var(--mt); margin-bottom: 5px; }
.empty-sub   { font-size: 12px; color: var(--ht); margin-bottom: 16px; }

/* ── MODAL ── */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; z-index: 800;
}
.overlay.open { display: flex; }
.modal {
  background: var(--card); border: 1px solid var(--brd);
  border-radius: 16px; width: 480px; max-width: 96vw; max-height: 90vh;
  overflow-y: auto; box-shadow: 0 24px 80px rgba(0,0,0,.6);
  animation: modal-in .18s ease;
}
.modal-wide { width: 620px; }
@keyframes modal-in { from { opacity:0; transform:scale(.97) translateY(8px); } to { opacity:1; transform:none; } }
.modal-head {
  padding: 16px 20px; border-bottom: 1px solid var(--brd2);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.modal-title { font-size: 15px; font-weight: 500; }
.modal-close {
  width: 28px; height: 28px; border-radius: var(--r3);
  border: 1px solid var(--brd); background: var(--card2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--mt); font-size: 16px; font-weight: 400; line-height: 1;
  transition: all .1s;
}
.modal-close:hover { color: var(--tx); }
.modal-body { padding: 20px; }
.modal-foot {
  padding: 12px 20px; border-top: 1px solid var(--brd2);
  display: flex; justify-content: flex-end; gap: 8px;
  background: var(--card2);
}

/* ── EMPLOYEE CARD ── */
.emp-card {
  background: var(--card); border: 1px solid var(--brd);
  border-radius: var(--r); padding: 16px;
  display: flex; align-items: flex-start; gap: 14px;
}
.emp-info .emp-name { font-size: 14px; font-weight: 500; }
.emp-info .emp-meta { font-size: 12px; color: var(--mt); margin-top: 2px; }
.emp-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }

/* ── COUNTDOWN CARD ── */
.cd-card {
  background: var(--card); border: 1px solid var(--brd);
  border-radius: var(--r); padding: 16px;
  display: flex; align-items: center; gap: 16px;
}
.cd-num {
  font-family: 'Playfair Display', serif;
  font-size: 52px; color: var(--gold); line-height: 1; flex-shrink: 0;
}
.cd-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ht); margin-bottom: 3px; }
.cd-ev  { font-size: 13px; font-weight: 500; }
.cd-date { font-size: 11px; color: var(--mt); margin-top: 3px; }

/* ── EMPLEADO VIEW ── */
.emp-hero {
  background: linear-gradient(135deg, var(--gdim), transparent);
  border: 1px solid var(--gbrd); border-radius: var(--r);
  padding: 20px; margin-bottom: 14px;
}
.emp-hero-tag  { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--gold); margin-bottom: 4px; }
.emp-hero-name { font-family: 'Playfair Display', serif; font-size: 22px; color: var(--tx); }
.emp-hero-sub  { font-size: 13px; color: var(--mt); margin-top: 4px; }

/* ── PROGRESS BAR TALL ── */
.prog-tall { height: 6px; background: rgba(255,255,255,.06); border-radius: 6px; overflow: hidden; margin-top: 6px; }
.prog-tall .prog-fill { height: 100%; }

/* ── COLOR DOTS ── */
.color-row { display: flex; gap: 6px; flex-wrap: wrap; }
.color-dot {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: all .15s;
}
.color-dot.active { border-color: var(--tx); transform: scale(1.15); }

/* ── PROGRESS CIRCLE (SVG) ── */
.prog-circle-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.prog-circle-wrap svg { transform: rotate(-90deg); }
.prog-circle-text {
  position: absolute; font-size: 13px; font-weight: 600; color: var(--tx);
}

/* ── BANNER EVENT ── */
.ev-banner {
  background: var(--card); border: 1px solid var(--brd); border-radius: var(--r);
  padding: 16px 20px; margin-bottom: 16px;
  display: grid; grid-template-columns: 1fr auto auto; gap: 20px; align-items: center;
}
.ev-banner-name { font-family: 'Playfair Display', serif; font-size: 18px; }
.ev-banner-meta { font-size: 12px; color: var(--mt); margin-top: 3px; }

/* ══════════════════════════════════════
   RESPONSIVE — TABLET & MÓVIL
══════════════════════════════════════ */

/* ── Tablet (≤900px) ── */
@media (max-width: 900px) {
  :root { --sb-w: 210px; }

  .g3 { grid-template-columns: 1fr 1fr; }
  .g4 { grid-template-columns: 1fr 1fr; }
  .g5 { grid-template-columns: 1fr 1fr; }

  .ev-banner { grid-template-columns: 1fr; gap: 10px; }

  .fr3 { grid-template-columns: 1fr 1fr; }

  .info-bar { flex-wrap: wrap; gap: 8px; }
  .info-item { flex: none; width: calc(50% - 4px); border-right: none;
    padding: 0; border-bottom: 1px solid var(--brd2); padding-bottom: 8px; }
  .info-item:last-child { border-bottom: none; }
}

/* ── Móvil (≤640px) — sidebar se convierte en drawer ── */
@media (max-width: 640px) {
  :root { --top-h: 54px; }

  body { overflow: hidden; }

  /* ─ Login ─ */
  .lbox {
    width: 100%; max-width: 100%;
    border-radius: 0; height: 100vh;
    padding: 48px 24px 32px;
    display: flex; flex-direction: column; justify-content: center;
    border: none; box-shadow: none;
  }

  /* ─ App shell: solo 1 columna ─ */
  #app.show { grid-template-columns: 1fr; position: relative; }

  /* ─ Sidebar: drawer lateral oculto ─ */
  .sb {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 280px; z-index: 500;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow: 4px 0 32px rgba(0,0,0,.6);
  }
  .sb.open { transform: translateX(0); }

  /* ─ Overlay oscuro al abrir sidebar ─ */
  #sb-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.55); z-index: 499;
    backdrop-filter: blur(2px);
  }
  #sb-overlay.show { display: block; }

  /* ─ Topbar: botón menú hamburguesa ─ */
  .topbar { padding: 0 14px; }
  .tb-date { display: none; }
  .tb-title { font-size: 14px; }

  #btn-menu {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--r2);
    background: transparent; border: 1px solid var(--brd);
    color: var(--mt); cursor: pointer; flex-shrink: 0;
    font-size: 18px; transition: all .15s;
  }
  #btn-menu:hover { background: rgba(255,255,255,.04); color: var(--tx); }

  /* ─ Botones topbar: solo icono en móvil ─ */
  .tb-right .btn .btn-label { display: none; }

  /* ─ Content padding reducido ─ */
  .content { padding: 14px 12px; }

  /* ─ Grids ─ */
  .g2  { grid-template-columns: 1fr; }
  .g3  { grid-template-columns: 1fr; }
  .g4  { grid-template-columns: 1fr 1fr; }
  .g5  { grid-template-columns: 1fr 1fr; }
  .fr  { grid-template-columns: 1fr; }
  .fr3 { grid-template-columns: 1fr; }

  /* ─ Info bar: columna ─ */
  .info-bar { flex-direction: column; gap: 0; }
  .info-item { width: 100%; border-right: none;
    padding: 8px 0; border-bottom: 1px solid var(--brd2); }
  .info-item:last-child { border-bottom: none; }

  /* ─ Encabezado de sección ─ */
  .sec-head { flex-wrap: wrap; gap: 8px; }
  .sec-head .btn { font-size: 12px; padding: 6px 10px; }

  /* ─ Cards ─ */
  .card-head { flex-wrap: wrap; gap: 8px; }

  /* ─ Stat val ─ */
  .stat-val { font-size: 20px; }

  /* ─ Countdown ─ */
  .cd-num { font-size: 38px; }

  /* ─ Emp card ─ */
  .emp-card { flex-wrap: wrap; }
  .emp-actions { margin-left: 0; width: 100%; justify-content: flex-end; }

  /* ─ Banner evento ─ */
  .ev-banner { grid-template-columns: 1fr; gap: 8px; padding: 14px; }

  /* ─ Tabla: scroll horizontal ─ */
  .tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 480px; }

  /* ─ Modal ─ */
  .modal { width: 100%; max-width: 100%;
    max-height: 92vh; border-radius: 20px 20px 0 0;
    position: fixed; bottom: 0; left: 0; right: 0; }
  .overlay { align-items: flex-end; }
  @keyframes modal-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

  /* ─ Toast ─ */
  #toast { bottom: 16px; right: 12px; left: 12px; }
  .tst { font-size: 12px; }

  /* ─ Perfil: g2 → columna ─ */
  .g2 { grid-template-columns: 1fr; }

  /* ─ Sidebar footer: nombre largo truncado ─ */
  .sb-uname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }

  /* ─ Sidebar head: logo más pequeño ─ */
  .sb-head img { width: 100px !important; }

  /* ─ PDF toolbar: botones compactos ─ */
  #pdf-toolbar { flex-wrap: wrap; gap: 8px; }
  #pdf-sheet { padding: 16px; }

  /* ─ Hero empleado ─ */
  .emp-hero-name { font-size: 18px; }
}

/* ── Extra pequeño (≤380px) ── */
@media (max-width: 380px) {
  .g4 { grid-template-columns: 1fr; }
  .g5 { grid-template-columns: 1fr; }
  .lbox { padding: 32px 18px 24px; }
}