/* ============================================================
   VCB Admin - Omenia-style Shell (rewrite 2026-05-05)
   ============================================================ */

:root {
  --brand-navy:#0a1628;
  --brand-deep-blue:#0d2137;
  --brand-ocean:#0a6e8a;
  --brand-teal:#0ab4d1;
  --brand-gold:#d4a853;
  --brand-light-gold:#f0d88a;
  --brand-sand:#f0f7fa;
  --brand-text:#2c3e50;

  --vcb-navy:#f3f8fb;
  --vcb-ink:#dce7f0;
  --vcb-ocean:#0ab4d1;
  --vcb-teal:#63d7e9;
  --vcb-gold:var(--brand-gold);
  --vcb-paper:#07131f;
  --vcb-card:rgba(13,33,55,.88);
  --vcb-surface:rgba(15,39,63,.92);
  --vcb-surface-2:rgba(18,48,73,.94);
  --vcb-line:rgba(240,247,250,.12);
  --vcb-muted:#99b0c1;
  --vcb-text:#edf5f9;
  --vcb-danger:#e47460;
  --vcb-ok:#2aa487;
  --vcb-warn:#d4a853;
  --vcb-shadow:0 24px 70px rgba(3,11,20,.36);

  /* sidebar tokens aligned with public brand */
  --sb-w:260px;
  --sb-w-collapsed:80px;
  --sb-bg:linear-gradient(180deg, rgba(10,22,40,.98) 0%, rgba(13,33,55,.96) 52%, rgba(8,21,35,.98) 100%);
  --sb-link:#c9dae4;
  --sb-link-hover:#ffffff;
  --sb-active-bg:linear-gradient(90deg, rgba(212,168,83,.18) 0%, rgba(10,110,138,.20) 100%);
  --sb-active-fg:#ffffff;
  --sb-border:rgba(240,247,250,.08);
  --sb-section:rgba(240,247,250,.52);

  /* email tokens aligned with public brand */
  --email-bg:#081523;
  --email-surface:#102132;
  --email-surface-2:#13314a;
  --email-border:rgba(240,247,250,.10);
  --email-hover:rgba(10,180,209,.08);
  --email-selected:rgba(10,110,138,.22);
  --email-unread-bg:rgba(10,180,209,.10);
  --email-text:#edf5f9;
  --email-text-muted:#9eb5c5;
  --email-accent:#0ab4d1;
  --email-row-h:64px;
}

* { box-sizing:border-box; }

html, body { margin:0; padding:0; }

body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(212,168,83,.16), transparent 24%),
    radial-gradient(circle at top right, rgba(10,180,209,.12), transparent 26%),
    linear-gradient(180deg, #081523 0%, #0a1628 42%, #07131f 100%);
  color: var(--vcb-text);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ============================================================
   LOGIN
   ============================================================ */
body.login-page {
  min-height:100vh;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 15% 20%, rgba(212,168,83,.18), transparent 30%),
    radial-gradient(circle at 85% 15%, rgba(10,180,209,.14), transparent 28%),
    linear-gradient(145deg, rgba(10,22,40,.98) 0%, rgba(13,33,55,.96) 52%, rgba(8,21,35,.98) 100%);
  color:#fff;
}
.login {
  width:min(420px,92vw);
  background: linear-gradient(180deg, rgba(13,33,55,.88), rgba(8,21,35,.94));
  border:1px solid rgba(240,247,250,.12);
  border-radius:18px;
  padding:30px;
  box-shadow: var(--vcb-shadow), inset 0 1px 0 rgba(240,247,250,.06);
  backdrop-filter: blur(18px);
}
.login h1 { font-family:Georgia,serif; margin:0 0 8px; font-size:2rem; }
.login .sub { color:rgba(240,247,250,.72); margin:0 0 24px; }
.login label { display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(240,247,250,.65); margin-bottom:8px; }
.login input { width:100%; border:1px solid rgba(240,247,250,.14); border-radius:10px; background:rgba(240,247,250,.06); color:#fff; padding:13px 14px; font-size:1rem; }
.login input:focus { outline:none; border-color:rgba(10,180,209,.45); box-shadow:0 0 0 3px rgba(10,180,209,.14); }
.login button {
  width:100%;
  margin-top:16px;
  border:0;
  border-radius:10px;
  padding:13px 16px;
  background:linear-gradient(135deg, var(--brand-gold), var(--brand-light-gold));
  color:var(--brand-navy);
  font-weight:800;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(212,168,83,.24);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.login button:hover { transform:translateY(-1px); filter:brightness(1.02); }
.login .login-mark { font-weight:900; letter-spacing:.18em; color:var(--brand-light-gold); font-size:.78rem; margin-bottom:8px; }
.login .login-eyebrow { display:block; color:rgba(240,247,250,.58); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px; }
.login .login-proof { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 20px; }
.login .login-proof span { background:rgba(240,247,250,.06); border:1px solid rgba(240,247,250,.14); border-radius:999px; padding:5px 10px; font-size:.7rem; color:rgba(240,247,250,.78); }
.login .flash { margin-bottom:16px; padding:12px 14px; border-radius:10px; background:rgba(52,211,153,.10); color:var(--vcb-ok); border:1px solid rgba(52,211,153,.24); }
.login .flash.error { background:rgba(248,113,113,.10); color:var(--vcb-danger); border-color:rgba(248,113,113,.28); }

/* ============================================================
   APP SHELL — left rail + main (omenia-style)
   ============================================================ */
body.admin-shell {
  background: transparent;
  min-height:100vh;
}
.admin-shell .admin-shell-grid {
  display:flex;
  min-height:100vh;
}

/* SIDEBAR */
.admin-sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:var(--sb-w);
  background: var(--sb-bg);
  color:#fff;
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--sb-border);
  z-index:50;
  transition: width .2s ease;
  overflow:hidden;
}
.admin-sidebar.is-collapsed { width: var(--sb-w-collapsed); }

.admin-sidebar .sb-brand {
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px 18px 14px;
  border-bottom:1px solid var(--sb-border);
}
.admin-sidebar .sb-brand-mark {
  width:34px; height:34px; border-radius:9px;
  background: linear-gradient(135deg,var(--brand-gold),var(--brand-light-gold));
  color:#071827; font-weight:900; font-size:.78rem; letter-spacing:.06em;
  display:grid; place-items:center;
  box-shadow:0 10px 22px rgba(212,168,83,.22);
  flex-shrink:0;
}
.admin-sidebar .sb-brand-text {
  display:flex; flex-direction:column; line-height:1.1;
}
.admin-sidebar .sb-brand-text strong { font-size:.92rem; color:#fff; }
.admin-sidebar .sb-brand-text span { font-size:.65rem; color:rgba(255,255,255,.45); text-transform:uppercase; letter-spacing:.12em; }
.admin-sidebar.is-collapsed .sb-brand-text { display:none; }

.admin-sidebar .sb-collapse {
  margin-left:auto;
  background:transparent; border:0; color:rgba(255,255,255,.55);
  width:28px; height:28px; border-radius:6px;
  cursor:pointer; display:grid; place-items:center;
  flex-shrink:0;
}
.admin-sidebar .sb-collapse:hover { color:#fff; background:rgba(10,180,209,.12); }
.admin-sidebar.is-collapsed .sb-collapse i { transform: rotate(180deg); }

.admin-sidebar .sb-section-label {
  padding:14px 18px 6px;
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color: var(--sb-section);
  font-weight:700;
}
.admin-sidebar.is-collapsed .sb-section-label { text-align:center; padding:14px 4px 6px; font-size:.5rem; }

.admin-sidebar .sb-nav {
  display:flex;
  flex-direction:column;
  padding:4px 10px;
  gap:2px;
  flex:1;
  overflow-y:auto;
}
.admin-sidebar .sb-nav::-webkit-scrollbar { width:4px; }
.admin-sidebar .sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius:4px; }

.admin-sidebar .sb-link {
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:8px;
  color: var(--sb-link);
  text-decoration:none;
  font-size:.88rem;
  font-weight:600;
  transition: background .12s ease, color .12s ease;
}
.admin-sidebar .sb-link i {
  font-size:1.1rem;
  width:20px; text-align:center;
  flex-shrink:0;
}
.admin-sidebar .sb-link .sb-label { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-sidebar .sb-link .sb-badge {
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size:.66rem;
  font-weight:800;
  padding:2px 7px;
  border-radius:999px;
  min-width:22px; text-align:center;
}
.admin-sidebar .sb-link.is-active .sb-badge,
.admin-sidebar .sb-link[data-tone="gold"] .sb-badge { background: rgba(212,168,83,.25); color:var(--brand-light-gold); }
.admin-sidebar .sb-link[data-tone="warn"] .sb-badge { background: rgba(245,158,11,.18); color:#fbbf24; }
.admin-sidebar .sb-link[data-tone="ok"] .sb-badge { background: rgba(16,185,129,.18); color:#34d399; }

.admin-sidebar .sb-link:hover { background: rgba(10,110,138,.10); color: var(--sb-link-hover); }
.admin-sidebar .sb-link.is-active {
  background: var(--sb-active-bg);
  color: var(--sb-active-fg);
}
.admin-sidebar .sb-link.is-active::before {
  content:""; position:absolute; left:0; top:8px; bottom:8px;
  width:3px; border-radius:0 3px 3px 0;
  background: var(--vcb-gold);
}

.admin-sidebar.is-collapsed .sb-link {
  flex-direction:column;
  gap:3px;
  padding:8px 4px;
  text-align:center;
  margin: 1px 4px;
}
.admin-sidebar.is-collapsed .sb-link i { font-size:1.3rem; width:auto; }
.admin-sidebar.is-collapsed .sb-link .sb-label { font-size:.6rem; max-width:64px; line-height:1.1; font-weight:500; }
.admin-sidebar.is-collapsed .sb-link .sb-badge { display:none; }

.admin-sidebar .sb-foot {
  border-top:1px solid var(--sb-border);
  padding:12px 14px;
  display:flex; flex-direction:column; gap:8px;
}
.admin-sidebar.is-collapsed .sb-foot { padding:10px 6px; align-items:center; }
.admin-sidebar .sb-foot a, .admin-sidebar .sb-foot button {
  appearance:none; background:transparent; border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.8); border-radius:8px; padding:8px 10px;
  font-size:.78rem; font-weight:600; text-decoration:none;
  cursor:pointer; display:flex; align-items:center; gap:8px;
}
.admin-sidebar .sb-foot a:hover, .admin-sidebar .sb-foot button:hover { border-color:rgba(255,255,255,.2); color:#fff; }
.admin-sidebar .sb-foot .sb-foot-logout { color:#fca5a5; border-color:rgba(252,165,165,.25); }
.admin-sidebar .sb-foot .sb-foot-logout:hover { background: rgba(252,165,165,.08); color:#fecaca; }
.admin-sidebar.is-collapsed .sb-foot a span,
.admin-sidebar.is-collapsed .sb-foot button span { display:none; }

/* MAIN */
.admin-main {
  flex:1;
  margin-left: var(--sb-w);
  display:flex;
  flex-direction:column;
  min-width:0;
  transition: margin-left .2s ease;
}
.admin-shell.is-sidebar-collapsed .admin-main { margin-left: var(--sb-w-collapsed); }

.admin-topbar {
  position:sticky; top:0;
  background: rgba(10,22,40,.82);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--vcb-line);
  padding:14px 24px;
  display:flex; align-items:center; gap:18px;
  box-shadow:0 10px 30px rgba(3,11,20,.18);
  z-index:30;
}
.admin-topbar .tb-title { display:flex; flex-direction:column; min-width:0; }
.admin-topbar .tb-title strong { font-family:Georgia,serif; font-size:1.25rem; color:var(--vcb-navy); line-height:1.1; }
.admin-topbar .tb-title span { font-size:.78rem; color:var(--vcb-muted); }
.admin-topbar .tb-spacer { flex:1; }
.admin-topbar .tb-sync {
  display:flex; align-items:center; gap:8px;
  font-size:.76rem; color:var(--vcb-muted);
  background:rgba(13,33,55,.82); border:1px solid rgba(10,180,209,.14); border-radius:999px; padding:6px 12px;
}
.admin-topbar .tb-sync .dot { width:8px; height:8px; border-radius:50%; background:#2aa487; box-shadow:0 0 0 3px rgba(42,164,135,.16); }
.admin-topbar .tb-sync.is-refreshing .dot { background:var(--brand-gold); box-shadow:0 0 0 3px rgba(212,168,83,.18); }

.admin-content {
  padding:24px;
  flex:1;
  overflow-x:hidden;
}

/* mobile menu trigger (shown only on small screens) */
.admin-topbar .tb-menu-btn {
  display:none;
  appearance:none;
  background:var(--vcb-surface); border:1px solid var(--vcb-line);
  width:40px; height:40px; border-radius:10px;
  align-items:center; justify-content:center; font-size:1.1rem;
  cursor:pointer; color:var(--vcb-navy);
}

/* ============================================================
   FLASH
   ============================================================ */
.flash {
  margin-bottom:18px;
  padding:13px 16px;
  border-radius:12px;
  border:1px solid var(--vcb-line);
  background:rgba(52,211,153,.10); color: var(--vcb-ok);
  font-weight:600;
}
.flash.error { background:rgba(248,113,113,.10); color:var(--vcb-danger); border-color:rgba(248,113,113,.28); }

/* ============================================================
   VIEW SYSTEM
   ============================================================ */
.admin-view { display:none; }
.admin-view.is-active { display:block; }
.admin-view + .admin-view.is-active { display:block; }
.admin-view > .panel + .panel,
.admin-view > .panel + .admin-secondary-panel,
.admin-view > .panel + .admin-config-panel { margin-top:16px; }

/* ============================================================
   PANEL (shared card)
   ============================================================ */
.panel {
  background: linear-gradient(180deg, rgba(10,22,40,.78), rgba(13,33,55,.68));
  border:1px solid rgba(240,247,250,.09);
  border-radius:16px;
  box-shadow: 0 22px 62px rgba(3,11,20,.28), inset 0 1px 0 rgba(240,247,250,.05);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  overflow:hidden;
}
.panel-head {
  padding:16px 20px;
  border-bottom:1px solid rgba(240,247,250,.06);
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  background: linear-gradient(180deg, rgba(10,110,138,.08), rgba(10,22,40,.04));
}
.panel-head h2 { margin:0; font-size:1.05rem; color:rgba(255,255,255,.9); font-weight:700; }
.panel-body { padding:20px; }

.subtle { color: var(--vcb-muted); font-size:.86rem; }

/* ============================================================
   DASHBOARD
   ============================================================ */
.dashboard-hero {
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
  margin-bottom:18px;
  padding:22px;
  border:1px solid rgba(240,247,250,.08);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(212,168,83,.16),rgba(10,110,138,.18)),rgba(10,22,40,.76);
  box-shadow:0 20px 60px rgba(3,11,20,.24), inset 0 1px 0 rgba(240,247,250,.06);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
}
.dashboard-hero h1 {
  margin:4px 0 6px;
  font-family:Georgia,serif;
  font-size:1.7rem;
  color:#fff;
  letter-spacing:0;
}
.dashboard-hero p { margin:0; color:rgba(255,255,255,.62); max-width:760px; line-height:1.55; }
.dash-eyebrow { font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color:#f3d99b; font-weight:800; }
.dash-month-pill {
  display:inline-flex; align-items:center; gap:8px;
  min-height:38px; padding:8px 13px;
  border-radius:999px;
  background:rgba(10,110,138,.14);
  border:1px solid rgba(10,180,209,.22);
  color:var(--brand-light-gold); font-weight:800;
  white-space:nowrap;
}
.kpi-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.kpi-card {
  min-height:118px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(240,247,250,.14);
  border-radius:14px;
  padding:15px;
  background:linear-gradient(180deg, rgba(13,33,55,.96), rgba(8,21,35,.98));
  box-shadow:0 18px 40px rgba(3,11,20,.24), inset 0 1px 0 rgba(240,247,250,.05);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex; flex-direction:column; justify-content:space-between;
}
.kpi-card::before {
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:rgba(240,247,250,.14);
}
.kpi-card span {
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(240,247,250,.78);
  font-weight:800;
}
.kpi-card strong {
  display:block;
  margin:8px 0 6px;
  font-size:1.72rem;
  line-height:1.02;
  color:#fff;
  font-weight:900;
  text-shadow:0 2px 10px rgba(0,0,0,.18);
}
.kpi-card small {
  color:rgba(230,242,249,.84);
  line-height:1.4;
  font-size:.79rem;
}
.kpi-card.kpi-warn {
  border-color:rgba(212,168,83,.28);
  background:linear-gradient(180deg, rgba(54,39,18,.92), rgba(10,22,40,.98));
}
.kpi-card.kpi-warn::before { background:linear-gradient(90deg, rgba(212,168,83,.95), rgba(240,216,138,.9)); }
.kpi-card.kpi-warn span { color:rgba(240,216,138,.96); }
.kpi-card.kpi-ok {
  border-color:rgba(42,164,135,.28);
  background:linear-gradient(180deg, rgba(12,54,44,.92), rgba(10,22,40,.98));
}
.kpi-card.kpi-ok::before { background:linear-gradient(90deg, rgba(42,164,135,.92), rgba(104,220,189,.88)); }
.kpi-card.kpi-ok span { color:rgba(169,237,218,.96); }
.kpi-card.kpi-info {
  border-color:rgba(10,180,209,.28);
  background:linear-gradient(180deg, rgba(8,58,76,.92), rgba(10,22,40,.98));
}
.kpi-card.kpi-info::before { background:linear-gradient(90deg, rgba(10,110,138,.94), rgba(10,180,209,.92)); }
.kpi-card.kpi-info span { color:rgba(177,235,244,.96); }
.kpi-card.kpi-gold {
  border-color:rgba(212,168,83,.30);
  background:linear-gradient(180deg, rgba(66,50,23,.94), rgba(10,22,40,.98));
}
.kpi-card.kpi-gold::before { background:linear-gradient(90deg, rgba(212,168,83,.96), rgba(240,216,138,.92)); }
.kpi-card.kpi-gold span { color:rgba(248,228,174,.98); }
.dashboard-grid { display:grid; gap:16px; margin-top:16px; }
.dashboard-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.dash-panel .panel-body { padding:14px; }
.dash-list { display:grid; gap:8px; }
.dash-row {
  display:grid; grid-template-columns:36px minmax(0,1fr) auto;
  align-items:center; gap:10px;
  min-height:58px;
  padding:9px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.035);
  text-decoration:none; color:var(--vcb-text);
  transition:background .15s,border-color .15s,transform .15s;
}
.dash-row:hover { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); transform:translateY(-1px); }
.dash-row-icon {
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:#f3d99b; background:rgba(212,168,83,.1);
  border:1px solid rgba(212,168,83,.16);
}
.dash-row-main { min-width:0; }
.dash-row-main strong { display:block; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-row-main small { display:block; color:var(--vcb-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:3px; }
.dash-empty {
  display:flex; align-items:center; gap:9px;
  padding:14px;
  color:var(--vcb-muted);
  border:1px dashed rgba(255,255,255,.12);
  border-radius:12px;
}
.dash-empty i { color:#34d399; font-size:1.1rem; }
.dash-bars { display:grid; gap:13px; }
.dash-bar-row { display:grid; gap:7px; }
.dash-bar-row > div:first-child { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.dash-bar-row strong { color:#fff; font-size:.9rem; }
.dash-bar-row span { color:var(--vcb-muted); font-size:.76rem; text-align:right; }
.dash-bar {
  height:9px; overflow:hidden; border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.06);
}
.dash-bar i {
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--brand-gold),var(--brand-teal));
  box-shadow:0 0 16px rgba(212,168,83,.24);
}

/* ============================================================
   RESERVAS
   ============================================================ */
.reservations { display:grid; gap:14px; }
.res-card {
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding:15px;
  transition: background .18s, border-color .18s, transform .15s;
}
.res-card:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  transform: translateY(-1px);
}
.res-top {
  display:flex; justify-content:space-between; gap:12px; align-items:flex-start;
}
.res-card .code { font-weight:900; color:var(--vcb-navy); }
.badge { display:inline-flex; align-items:center; border-radius:999px; padding:5px 9px; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.badge.ok { background:rgba(52,211,153,.12); color:var(--vcb-ok); }
.badge.warn { background:rgba(251,191,36,.13); color:var(--vcb-warn); }
.badge.pending { background:rgba(10,180,209,.15); color:var(--vcb-ocean); }
.badge.muted { background:rgba(148,163,184,.12); color:var(--vcb-muted); }

.meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:12px 0; }
.meta div { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:10px; padding:9px; backdrop-filter:blur(4px); }
.meta span { display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--vcb-muted); }
.meta b { display:block; margin-top:4px; }

.timeline { display:grid; gap:7px; margin-top:10px; }
.timeline div { border-left:3px solid var(--vcb-line); padding-left:9px; }
.timeline strong { display:block; font-size:.7rem; color:var(--vcb-muted); }
.timeline span { font-size:.82rem; }

.contact-strip { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.touch {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; border:0; border-radius:10px;
  padding:8px 12px; font-weight:800; text-decoration:none; cursor:pointer;
  font-size:.78rem;
}
.touch.primary { background: var(--vcb-gold); color:#071827; }
.touch.ok { background:rgba(52,211,153,.12); color:var(--vcb-ok); }
.touch.info { background:rgba(10,110,138,.14); color:var(--vcb-ocean); }
.touch.danger { background:rgba(248,113,113,.12); color:var(--vcb-danger); }

.actions {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px; margin-top:12px;
}
.actions button, .actions a, .inline-button {
  border:0; border-radius:9px; padding:9px 10px; font-weight:800; cursor:pointer;
  text-decoration:none; text-align:center; font-size:.78rem;
}
.actions .primary { background: var(--vcb-gold); color:#071827; }
.actions .secondary { background:rgba(10,110,138,.14); color:var(--vcb-ocean); }
.actions .danger { background:rgba(248,113,113,.12); color:var(--vcb-danger); }
.actions .okbtn { background:rgba(52,211,153,.12); color:var(--vcb-ok); }

.res-card details { border-top:1px solid var(--vcb-line); margin-top:12px; padding-top:12px; }
.res-card summary { cursor:pointer; font-weight:900; color:var(--vcb-ocean); min-height:40px; display:flex; align-items:center; }

/* forms */
label { display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--vcb-muted); margin:0 0 6px; font-weight:700; }
input, select, textarea {
  width:100%;
  border:1px solid var(--vcb-line);
  border-radius:10px;
  background:var(--vcb-surface); color:var(--vcb-text);
  padding:10px 11px; font:inherit;
}
input:focus, select:focus, textarea:focus { outline:none; border-color: var(--vcb-teal); box-shadow:0 0 0 3px rgba(10,180,209,.16); }
textarea { min-height:78px; resize:vertical; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.form-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.form-section { border-top:1px solid var(--vcb-line); padding-top:16px; margin-top:16px; }
.save { background: var(--vcb-gold); color:#071827; border:0; border-radius:10px; padding:11px 16px; font-weight:900; cursor:pointer; }
.save:hover { background:#e7bf68; }
.check-row { display:inline-flex; align-items:center; gap:8px; font-size:.8rem; color:var(--vcb-text); margin-bottom:0; text-transform:none; letter-spacing:0; }
.check-row input { width:auto; margin:0; }

.config-summary {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.config-chip {
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  padding:12px;
  backdrop-filter:blur(8px);
}
.config-chip span {
  display:block;
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--vcb-muted);
  margin-bottom:5px;
}
.config-chip strong {
  display:block;
  color:rgba(255,255,255,.92);
  font-size:.95rem;
}

/* ============================================================
   CALENDARIO — Premium glassmorphism
   ============================================================ */

/* Animated orb background scoped to the calendar view */
#view-calendario {
  position:relative;
}
#view-calendario::before,
#view-calendario::after {
  content:'';
  position:fixed;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  filter:blur(100px);
}
#view-calendario::before {
  width:38vw; height:38vw;
  top:-10%; left:10%;
  background:rgba(212,168,83,.06);
  animation:calOrbA 20s ease-in-out infinite;
}
#view-calendario::after {
  width:28vw; height:28vw;
  bottom:0; right:8%;
  background:rgba(10,110,138,.07);
  animation:calOrbB 26s ease-in-out infinite;
}
@keyframes calOrbA { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(6%,10%) scale(1.1)} }
@keyframes calOrbB { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-8%,-6%) scale(1.15)} }

/* panel that wraps the calendar gets glass treatment */
#view-calendario > .panel {
  background: rgba(10,22,40,.74);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(240,247,250,.09);
  box-shadow: 0 24px 80px rgba(3,11,20,.35), inset 0 1px 0 rgba(240,247,250,.06);
  position:relative; z-index:1;
}

/* ---- header ---- */
.calendar-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px; gap:12px; flex-wrap:wrap;
}
.calendar-title {
  font-family:Georgia,serif; font-size:1.55rem; font-weight:800;
  background: linear-gradient(135deg, #d4a853 0%, #f3d99b 50%, #d4a853 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:-.02em;
}
.month-nav { display:flex; gap:6px; }
.month-nav a {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
  text-decoration:none; font-weight:900; font-size:1.1rem;
  backdrop-filter: blur(6px);
  transition: background .15s, border-color .15s, transform .15s;
}
.month-nav a:hover {
  background: rgba(212,168,83,.18);
  border-color: rgba(212,168,83,.4);
  color: #f3d99b;
  transform: scale(1.06);
}

/* ---- grid ---- */
.calendar {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px;
}
.weekday {
  font-size:.62rem; text-transform:uppercase; letter-spacing:.1em;
  color: rgba(255,255,255,.3); padding:6px 4px; font-weight:700;
  text-align:center;
}
.day {
  min-height:110px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius:14px;
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding:8px 7px;
  display:flex; flex-direction:column; gap:5px;
  transition: background .2s, border-color .2s, transform .15s;
}
.day:not(.empty):hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  transform: translateY(-1px);
}
.day.empty { visibility:hidden; }
.day.day-today {
  border-color: rgba(212,168,83,.40);
  background: rgba(212,168,83,.07);
  box-shadow: 0 0 0 1px rgba(212,168,83,.18), inset 0 1px 0 rgba(212,168,83,.08);
}
.day.day-today .day-num {
  background: linear-gradient(135deg, #d4a853, #f3d99b);
  color: #071827;
  font-weight:900;
}

.day.day-past {
  background: linear-gradient(180deg, rgba(148,163,184,.10), rgba(71,85,105,.08));
  border-color: rgba(148,163,184,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  filter: grayscale(1);
  opacity:.68;
}
.day.day-past:hover {
  background: linear-gradient(180deg, rgba(148,163,184,.10), rgba(71,85,105,.08));
  border-color: rgba(148,163,184,.18);
  transform:none;
}
.day.day-past .day-num {
  background: rgba(148,163,184,.14);
  color: rgba(226,232,240,.72);
}
.day.day-past .slot-chip::before { display:none; }

.day-num {
  font-weight:900; font-size:.8rem; color:rgba(255,255,255,.85);
  width:22px; height:22px; display:inline-flex;
  align-items:center; justify-content:center;
  border-radius:50%; margin-bottom:2px; flex-shrink:0;
  letter-spacing:-.01em;
}

/* ---- slot chip (interactive <details>) ---- */
.slot-chip {
  border-radius:9px;
  padding:5px 7px;
  font-size:.68rem;
  line-height:1.3;
  transition: all .18s;
  position:relative;
  overflow:hidden;
}
/* shimmer line at top for active/pending states */
.slot-chip.sc-pendiente::before,
.slot-chip.sc-confirmado::before {
  content:'';
  position:absolute; top:0; left:-100%; width:200%; height:1px;
  animation: shimmerLine 3s linear infinite;
}
.slot-chip.sc-pendiente::before { background: linear-gradient(90deg,transparent,rgba(212,168,83,.7),transparent); }
.slot-chip.sc-confirmado::before { background: linear-gradient(90deg,transparent,rgba(10,180,209,.6),transparent); }
@keyframes shimmerLine { to { left:100%; } }

/* state variants — glass fills */
.slot-chip.sc-libre {
  background: rgba(52,211,153,.06);
  border: 1px solid rgba(52,211,153,.18);
  backdrop-filter: blur(4px);
}
.slot-chip.sc-pendiente {
  background: rgba(212,168,83,.10);
  border: 1px solid rgba(212,168,83,.32);
  box-shadow: inset 2px 0 0 rgba(212,168,83,.6), 0 2px 12px rgba(212,168,83,.08);
  backdrop-filter: blur(4px);
}
.slot-chip.sc-confirmado {
  background: rgba(10,110,138,.12);
  border: 1px solid rgba(10,180,209,.28);
  box-shadow: 0 2px 12px rgba(10,110,138,.10);
  backdrop-filter: blur(4px);
}
.slot-chip.sc-bloqueado {
  background: rgba(248,113,113,.07);
  border: 1px solid rgba(248,113,113,.24);
  backdrop-filter: blur(4px);
}
.slot-chip.sc-pasado {
  background: rgba(100,116,139,.10);
  border: 1px solid rgba(148,163,184,.16);
  box-shadow:none;
  backdrop-filter: blur(2px);
}

/* summary row */
details.slot-chip > summary {
  list-style:none; cursor:pointer;
  display:flex; flex-direction:column; gap:2px;
}
details.slot-chip > summary::-webkit-details-marker { display:none; }
details.slot-chip > summary strong {
  font-size:.68rem; color:rgba(255,255,255,.9); font-weight:700;
}
details.slot-chip.sc-pasado > summary { cursor:not-allowed; }
details.slot-chip.sc-pasado > summary strong { color:rgba(226,232,240,.62); }
details.slot-chip.sc-pasado { pointer-events:none; }
details.slot-chip[open] > summary strong { color:#fff; }

/* state badge inside summary */
.sc-badge {
  display:inline-block; font-size:.56rem; font-weight:800;
  padding:2px 6px; border-radius:4px;
  text-transform:uppercase; letter-spacing:.05em; margin-top:1px;
  backdrop-filter: blur(4px);
}
.sc-libre     .sc-badge { background:rgba(52,211,153,.18);  color:#34d399; border:1px solid rgba(52,211,153,.25); }
.sc-pendiente .sc-badge { background:rgba(212,168,83,.20);  color:#f3d99b; border:1px solid rgba(212,168,83,.35); }
.sc-confirmado .sc-badge{ background:rgba(10,110,138,.22);  color:var(--vcb-ocean); border:1px solid rgba(10,180,209,.28); }
.sc-bloqueado .sc-badge { background:rgba(248,113,113,.15); color:#fca5a5; border:1px solid rgba(248,113,113,.25); }
.sc-pasado .sc-badge { background:rgba(148,163,184,.14); color:#cbd5e1; border:1px solid rgba(148,163,184,.20); }

/* expanded body */
.sc-body {
  margin-top:7px; padding-top:7px;
  border-top:1px solid rgba(255,255,255,.07);
  display:flex; flex-direction:column; gap:5px;
}
.sc-note { margin:0 0 4px; font-size:.64rem; color:var(--vcb-muted); line-height:1.4; }
.sc-row  { display:flex; gap:4px; align-items:center; }
.sc-select {
  flex:1; min-width:0;
  background: rgba(255,255,255,.05);
  color:var(--vcb-text);
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;
  font-size:.63rem; padding:4px 5px;
  backdrop-filter:blur(4px);
}

/* action buttons */
.sc-btn {
  border:1px solid transparent;
  border-radius:6px;
  padding:4px 9px; font-size:.63rem; font-weight:700;
  cursor:pointer; white-space:nowrap;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:3px;
  transition: all .15s;
  backdrop-filter: blur(4px);
}
.sc-btn-ok       { background:rgba(52,211,153,.12); color:#34d399; border-color:rgba(52,211,153,.22); }
.sc-btn-ok:hover { background:rgba(52,211,153,.24); border-color:rgba(52,211,153,.4); }
.sc-btn-block       { background:rgba(248,113,113,.10); color:#fca5a5; border-color:rgba(248,113,113,.22); }
.sc-btn-block:hover { background:rgba(248,113,113,.22); border-color:rgba(248,113,113,.4); }
.sc-btn-danger       { background:rgba(248,113,113,.08); color:#fca5a5; border-color:rgba(248,113,113,.18); }
.sc-btn-danger:hover { background:rgba(248,113,113,.20); border-color:rgba(248,113,113,.35); }
.sc-btn-reserve       { background:rgba(212,168,83,.12); color:#f3d99b; border-color:rgba(212,168,83,.28); }
.sc-btn-reserve:hover { background:rgba(212,168,83,.24); border-color:rgba(212,168,83,.45); }
.sc-btn-wa       { background:rgba(37,211,102,.10); color:#4ade80; border-color:rgba(37,211,102,.22); }
.sc-btn-wa:hover { background:rgba(37,211,102,.22); border-color:rgba(37,211,102,.4); }

/* reservation row inside expanded chip */
.sc-res {
  display:flex; flex-direction:column; gap:3px;
  padding-top:5px; margin-top:3px;
  border-top:1px solid rgba(255,255,255,.06);
}
.sc-res-name {
  font-size:.7rem; font-weight:700; color:rgba(255,255,255,.9);
  text-decoration:none; transition:color .12s;
}
.sc-res-name:hover { color:var(--vcb-ocean); }
.sc-res-st { font-size:.58rem; color:var(--vcb-muted); }
.sc-res-actions { display:flex; gap:3px; margin-top:3px; flex-wrap:wrap; }

/* legend strip in calendar panel-head */
.sc-legend {
  display:inline-flex; align-items:center; gap:5px;
  font-size:.64rem; color:rgba(255,255,255,.45);
}
.sc-dot {
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  box-shadow: 0 0 6px currentColor;
}
.sc-dot.sc-libre      { background:#34d399; color:#34d399; }
.sc-dot.sc-pendiente  { background:#fbbf24; color:#fbbf24; }
.sc-dot.sc-confirmado { background:var(--vcb-ocean); color:var(--vcb-ocean); }
.sc-dot.sc-bloqueado  { background:#f87171; color:#f87171; }
.sc-dot.sc-pasado     { background:#94a3b8; color:#94a3b8; }

/* ---- Manual reservation panel — glass card ---- */
#manual-reservation-panel {
  background: rgba(17,24,32,.65);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid rgba(212,168,83,.18);
  box-shadow: 0 20px 60px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
  position:relative; overflow:hidden; z-index:1;
}
#manual-reservation-panel::before {
  content:'';
  position:absolute; inset:-50%;
  background: radial-gradient(circle at 30% 20%, rgba(212,168,83,.06), transparent 50%);
  pointer-events:none;
}
#manual-reservation-panel .panel-head h2 i { color:var(--vcb-gold); }


/* ============================================================
   BLOQUEOS
   ============================================================ */
.block-list { display:grid; gap:8px; }
.block-item {
  display:flex; justify-content:space-between; gap:10px; align-items:center;
  border:1px solid rgba(255,255,255,.07); border-radius:10px;
  padding:10px 12px;
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .15s;
}
.block-item:hover { background: rgba(255,255,255,.06); }
.block-affected { margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; }
.block-affected a {
  font-size:.75rem; color:var(--vcb-ocean); font-weight:700;
  text-decoration:none; background:rgba(10,110,138,.12);
  border:1px solid rgba(10,180,209,.18);
  border-radius:999px; padding:5px 9px;
}

/* ============================================================
   EMAIL — Omenia parity
   ============================================================ */
.email-workspace { padding:0; overflow:hidden; }
.email-workspace .email-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  background: linear-gradient(180deg, rgba(10,22,40,.96), rgba(13,33,55,.94));
  color: var(--email-text);
  border-bottom:1px solid var(--email-border);
}
.email-workspace .email-topbar h2 {
  margin:0; font-size:1rem; font-weight:600; color:var(--email-text);
  display:flex; align-items:center; gap:8px;
}
.email-workspace .email-topbar h2 i { color: var(--email-accent); font-size:1.2rem; }
.email-workspace .email-count-badge {
  background: rgba(10,110,138,.18);
  color: var(--email-accent);
  font-size:.7rem; font-weight:700;
  padding:3px 9px; border-radius:999px;
}
.email-workspace .email-topbar-actions { display:flex; gap:8px; }
.email-workspace .email-action-btn {
  background: var(--email-surface-2);
  border:1px solid var(--email-border);
  color: var(--email-text);
  padding:7px 12px;
  border-radius:8px;
  font-size:.78rem; font-weight:600;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.email-workspace .email-action-btn:hover { border-color: var(--email-accent); background: rgba(10,110,138,.12); }

.email-layout {
  display:flex;
  height: 70vh;
  min-height:540px;
  background: var(--email-bg);
  color: var(--email-text);
}

/* folder sidebar */
.email-sidebar {
  width:200px; flex-shrink:0;
  display:flex; flex-direction:column;
  background: var(--email-bg);
  border-right:1px solid var(--email-border);
  padding:12px 8px;
  gap:2px;
  overflow-y:auto;
}
.email-compose-btn {
  display:flex; align-items:center; gap:8px;
  background: linear-gradient(135deg,var(--brand-ocean),var(--brand-teal));
  color:#fff; border:0;
  padding:10px 14px; border-radius:10px;
  font-weight:700; font-size:.85rem;
  cursor:pointer;
  margin-bottom:10px;
  box-shadow:0 10px 26px rgba(10,110,138,.24);
  justify-content:center;
}
.email-compose-btn:hover { filter: brightness(1.05); }
.email-folder-btn {
  display:flex; align-items:center; gap:10px;
  background:transparent; border:0;
  color: var(--email-text-muted);
  padding:9px 12px; border-radius:8px;
  font-size:.85rem; font-weight:500;
  cursor:pointer; text-align:left;
  transition: background .12s, color .12s;
}
.email-folder-btn i { font-size:1rem; width:18px; text-align:center; }
.email-folder-btn:hover { background: var(--email-hover); color: var(--email-text); }
.email-folder-btn.active {
  background: var(--email-selected);
  color: var(--email-text);
}
.email-folder-btn .folder-count {
  margin-left:auto;
  background: rgba(10,110,138,.18);
  color: var(--email-accent);
  font-size:.65rem; font-weight:700;
  padding:1px 7px; border-radius:999px;
  display:none;
}
.email-folder-btn.has-unread .folder-count { display:inline; }
.email-sidebar-divider { height:1px; background: var(--email-border); margin:8px 4px; }

/* list pane */
.email-list-pane {
  width:360px; flex-shrink:0;
  display:flex; flex-direction:column;
  background: var(--email-surface);
  border-right:1px solid var(--email-border);
}
.email-list-toolbar {
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-bottom:1px solid var(--email-border);
}
.email-search-wrap {
  position:relative; flex:1;
}
.email-search-wrap i {
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  color: var(--email-text-muted); font-size:.85rem; pointer-events:none;
}
.email-search-input {
  width:100%; background: var(--email-bg);
  border:1px solid var(--email-border); border-radius:8px;
  color: var(--email-text); padding:7px 10px 7px 30px;
  font-size:.82rem;
}
.email-search-input::placeholder { color: var(--email-text-muted); }
.email-account-selector {
  background: var(--email-bg); color: var(--email-text);
  border:1px solid var(--email-border); border-radius:8px;
  padding:6px 8px; font-size:.78rem;
  width:auto; max-width:160px;
}
.email-row-check { width:14px; height:14px; margin:0; accent-color: var(--email-accent); }

.email-list-body {
  flex:1; overflow-y:auto; position:relative;
}
.email-list-body::-webkit-scrollbar { width:4px; }
.email-list-body::-webkit-scrollbar-thumb { background: rgba(10,180,209,.28); border-radius:4px; }
.email-list-loading, .email-list-empty {
  display:flex; align-items:center; gap:8px;
  padding:24px; color: var(--email-text-muted); font-size:.85rem;
  flex-direction:column; justify-content:center; min-height:120px;
}
.email-list-empty i { font-size:2rem; opacity:.4; }
.email-spinner {
  width:14px; height:14px; border:2px solid rgba(10,180,209,.22); border-top-color: var(--email-accent);
  border-radius:50%; animation: vcbspin .8s linear infinite;
}
@keyframes vcbspin { to { transform:rotate(360deg); } }

.email-row {
  display:flex; align-items:flex-start; gap:10px;
  min-height: var(--email-row-h);
  padding:10px 12px;
  cursor:pointer;
  border-bottom:1px solid var(--email-border);
  transition: background .12s;
}
.email-row:hover { background: var(--email-hover); }
.email-row.active { background: var(--email-selected); }
.email-row.unread { background: var(--email-unread-bg); }
.email-row.threat-high { border-left:2px solid #ef4444; }
.email-row.threat-medium { border-left:2px solid #f59e0b; }
.email-row-star {
  background:transparent; border:0; cursor:pointer;
  color: var(--email-text-muted); font-size:.95rem;
}
.email-row-star:hover, .email-row-star.starred { color:#f59e0b; }
.email-row-avatar {
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  color:#fff; font-weight:700; font-size:.78rem;
  flex-shrink:0;
}
.av-0 { background:#d4a853; } .av-1 { background:#0a6e8a; } .av-2 { background:#0ab4d1; }
.av-3 { background:#148f77; } .av-4 { background:#e47460; } .av-5 { background:#0d2137; }
.av-6 { background:#4f8ba0; } .av-7 { background:#7ba9b9; }
.email-row-content { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.email-row-line { display:flex; align-items:baseline; gap:8px; min-width:0; }
.email-row-sender {
  flex:1; min-width:0;
  font-size:.85rem; color: var(--email-text-muted); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.email-row.unread .email-row-sender { color: var(--email-text); font-weight:700; }
.email-row-subject {
  font-size:.82rem; color: var(--email-text-muted); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.email-row.unread .email-row-subject { color: var(--email-text); font-weight:600; }
.email-row-snippet {
  font-size:.75rem; color: var(--email-text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:.78;
}
.email-row-date {
  flex-shrink:0;
  font-size:.7rem; color: var(--email-text-muted);
  white-space:nowrap;
}
.email-row.unread .email-row-date { color: var(--email-accent); font-weight:700; }

/* detail pane */
.email-detail-pane {
  flex:1; display:flex; flex-direction:column;
  min-width:0; background: var(--email-surface);
}
.email-detail-header {
  padding:18px 24px;
  border-bottom:1px solid var(--email-border);
}
.email-detail-subject {
  margin:0 0 10px; font-size:1.1rem; font-weight:700; color:var(--email-text);
}
.email-detail-meta-row {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px;
  font-size:.8rem; color:var(--email-text-muted);
}
.email-detail-meta-row .label { font-size:.65rem; text-transform:uppercase; letter-spacing:.06em; color:var(--email-text-muted); margin-bottom:2px; display:block; }
.email-detail-meta-row .value { color:var(--email-text); font-weight:500; }
.email-detail-empty {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; color:var(--email-text-muted); padding:40px 20px;
}
.email-detail-empty i { font-size:3rem; opacity:.25; }
.email-detail-empty p { font-size:.85rem; text-align:center; max-width:280px; margin:0; }
.email-detail-body {
  flex:1; overflow:auto;
  padding:0;
  background: var(--email-surface);
}
.email-detail-body iframe {
  width:100%; min-height:480px; border:0; background:var(--email-bg); display:block;
}
.email-detail-plain {
  padding:18px 24px; font-family: ui-monospace, SFMono-Regular, monospace;
  font-size:.82rem; color:var(--email-text); white-space:pre-wrap;
}
.email-attachments-bar {
  border-top:1px solid var(--email-border);
  padding:12px 24px;
}
.email-attachments-label {
  font-size:.7rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--email-text-muted); font-weight:700; margin-bottom:8px;
  display:flex; align-items:center; gap:6px;
}
.email-threat-bar {
  border-top:1px solid var(--email-border);
  padding:12px 24px; background: rgba(245,158,11,.06);
}
.email-threat-bar .email-attachments-label { color:#fbbf24; }
.email-threat-bar ul { margin:0; padding-left:18px; color:var(--email-text-muted); font-size:.78rem; }

.email-account-config { border:1px solid var(--vcb-line); border-radius:10px; margin-bottom:10px; padding:10px 12px; background:var(--vcb-surface); }
.email-account-config summary { cursor:pointer; font-weight:800; color:var(--vcb-navy); }
.email-account-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:10px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .form-grid.three { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .calendar { gap:5px; }
  .day { min-height:96px; }
  .email-list-pane { width:300px; }
}
@media (max-width: 991px) {
  .email-layout { flex-direction:column; height:auto; }
  .email-sidebar { width:100%; flex-direction:row; overflow-x:auto; padding:8px; }
  .email-list-pane, .email-detail-pane { width:100%; }
  .email-list-pane { min-height:340px; }
}
@media (max-width: 860px) {
  :root { --sb-w: 240px; }
  .admin-sidebar {
    transform: translateX(-100%);
    transition: transform .22s ease, width .2s ease;
  }
  .admin-shell.is-sidebar-open .admin-sidebar {
    transform: translateX(0);
    box-shadow: 0 18px 60px rgba(0,0,0,.4);
  }
  .admin-main { margin-left:0 !important; }
  .admin-shell.is-sidebar-collapsed .admin-main { margin-left:0 !important; }
  .admin-topbar .tb-menu-btn { display:inline-flex; }
  .admin-shell.is-sidebar-open::after {
    content:""; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:40;
  }
  .admin-content { padding:18px; }
  .dashboard-hero { align-items:flex-start; flex-direction:column; }
  .dashboard-grid.two { grid-template-columns:1fr; }
  .calendar { grid-template-columns:repeat(2,1fr); }
  .weekday { display:none; }
  .day.empty { display:none; }
}
@media (max-width: 560px) {
  .kpi-grid { grid-template-columns:1fr; }
  .dash-row { grid-template-columns:32px minmax(0,1fr); }
  .dash-row > .badge { grid-column:2; justify-self:flex-start; }
  .dash-bar-row > div:first-child { flex-direction:column; gap:2px; align-items:flex-start; }
  .dash-bar-row span { text-align:left; }
  .meta, .form-grid, .form-grid.three, .actions, .email-account-grid { grid-template-columns:1fr; }
  .res-top { flex-direction:column; }
  .calendar { grid-template-columns:1fr; }
  .admin-topbar { padding:12px 14px; }
  .admin-topbar .tb-title strong { font-size:1.05rem; }
}