:root{
  --navy-deep:#101A30;
  --navy:#1E2E52;
  --navy-soft:#2E4478;
  --gold:#C9A227;
  --gold-soft:#E3C877;
  --gold-dim:#9A7F22;
  --lagoon:#2E7A78;
  --lagoon-soft:#DCEEEC;
  --bg:#F6F5F1;
  --surface:#FFFFFF;
  --ink:#171E2E;
  --stone:#5B6473;
  --stone-light:#98A0AE;
  --line:#E9E7DF;
  --danger:#B0442E;
  --danger-soft:#FBE9E4;
  --success:#2F7A52;
  --success-soft:#E6F3EA;
  --radius-sm:8px;
  --radius:12px;
  --shadow-card:0 1px 2px rgba(16,26,48,.04), 0 8px 24px rgba(16,26,48,.06);
  --shadow-card-hover:0 4px 10px rgba(16,26,48,.06), 0 16px 36px rgba(16,26,48,.10);
  --shadow-modal:0 24px 64px rgba(10,16,30,.35);
  --font-display:'Cormorant Garamond', serif;
  --font-body:'Inter', -apple-system, sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:var(--font-body); background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit;}
code{background:#EEF0F4; padding:1px 6px; border-radius:4px; font-family:var(--font-mono); font-size:12px;}

/* ===== LOGIN ===== */
.login-body{ background:radial-gradient(1200px 700px at 50% -10%, #1E2E52 0%, var(--navy-deep) 55%, #090E1B 100%); min-height:100vh; }
#loginScreen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px 20px; }
.login-card{ width:100%; max-width:420px; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-modal); padding:44px 40px 36px; }
.brand-eyebrow{ text-align:center; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.24em; color:var(--gold-dim); text-transform:uppercase; margin-bottom:6px;}
.brand-title{ text-align:center; font-family:var(--font-display); font-size:36px; color:var(--navy); margin-bottom:2px;}
.brand-title em{ font-style:italic; color:var(--gold-dim);}
.brand-sub{ text-align:center; font-size:11.5px; color:var(--stone); letter-spacing:.05em; margin-bottom:22px;}
.crest{ display:flex; align-items:center; justify-content:center; gap:14px; margin:16px 0 26px;}
.crest-line{ flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--gold-dim) 40%, var(--gold-dim) 60%, transparent); max-width:110px;}
.login-error{ display:block; background:var(--danger-soft); color:var(--danger); font-size:12.5px; padding:10px 12px; border-radius:var(--radius-sm); margin-bottom:14px;}

/* ===== FORM FIELDS / BUTTONS (shared) ===== */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--stone); margin-bottom:6px; font-weight:600;}
.field input, .field select, .field textarea{ width:100%; padding:11px 13px; border:1px solid var(--line); background:var(--surface); border-radius:var(--radius-sm); font-size:14.5px; color:var(--ink); outline:none; transition:.15s;}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold-dim); box-shadow:0 0 0 3px rgba(201,162,39,.14);}
textarea{ resize:vertical; min-height:90px;}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:680px){ .form-row{ grid-template-columns:1fr;} }
.helper-text{ font-size:11.5px; color:var(--stone-light); margin-top:5px;}

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; border-radius:var(--radius-sm); border:1px solid transparent; font-size:13.5px; font-weight:600; transition:.15s; }
.btn:active{ transform:translateY(1px);}
.btn-primary{ background:linear-gradient(135deg, var(--navy-soft), var(--navy)); color:var(--gold-soft);}
.btn-primary:hover{ background:linear-gradient(135deg, var(--navy), var(--navy-deep)); box-shadow:0 8px 20px rgba(30,46,82,.32);}
.btn-gold{ background:linear-gradient(135deg, var(--gold-soft), var(--gold)); color:var(--navy-deep);}
.btn-gold:hover{ background:linear-gradient(135deg, var(--gold), var(--gold-dim)); box-shadow:0 8px 20px rgba(201,162,39,.3);}
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--ink);}
.btn-ghost:hover{ border-color:var(--gold-dim); color:var(--gold-dim);}
.btn-danger-outline{ background:transparent; border-color:var(--danger); color:var(--danger);}
.btn-danger-outline:hover{ background:var(--danger-soft);}
.btn-block{ width:100%;}
.btn-sm{ padding:8px 14px; font-size:12.5px;}

/* ===== SHELL ===== */
#app{ min-height:100vh; background:
    radial-gradient(900px 500px at 100% 0%, rgba(46,122,120,.05) 0%, transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(201,162,39,.05) 0%, transparent 55%);
}
.shell{ display:flex; min-height:100vh;}
.sidebar{ width:252px; flex-shrink:0; background:linear-gradient(180deg, var(--navy-deep) 0%, #0C1526 100%); color:#E6E9F0; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;}
.sidebar-brand{ padding:26px 22px 18px; border-bottom:1px solid rgba(255,255,255,.08);}
.mark{ display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.mark-v{ width:32px; height:32px; border:1px solid var(--gold); border-radius:7px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-style:italic; font-size:18px; color:var(--gold-soft); box-shadow:0 0 0 3px rgba(201,162,39,.08), 0 4px 14px rgba(0,0,0,.35); overflow:hidden;}
.mark-text{ font-family:var(--font-display); font-size:18px; letter-spacing:.02em; color:#F3F4F8; line-height:1.15;}
.mark-text small{ display:block; font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; color:var(--gold-dim); text-transform:uppercase; margin-top:2px;}
.sidebar-user{ font-size:11.5px; color:#9AA3B5;}
.sidebar-user b{ color:var(--gold-soft); font-weight:600;}
.nav{ flex:1; padding:14px 12px;}
.nav-group-label{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:#7C8598; padding:14px 10px 6px;}
.nav-item{ display:flex; align-items:center; gap:11px; padding:10px 10px; border-radius:8px; font-size:13.5px; color:#C7CCDA; margin-bottom:2px; transition:.15s; border-left:2px solid transparent;}
.nav-item svg{ width:17px; height:17px; flex-shrink:0; opacity:.85;}
.nav-item:hover{ background:rgba(255,255,255,.05); color:#fff;}
.nav-item.active{ background:linear-gradient(90deg, rgba(201,162,39,.14), rgba(201,162,39,.03)); color:var(--gold-soft); border-left-color:var(--gold);}
.nav-item.active svg{ opacity:1;}
.sidebar-foot{ padding:14px 12px 18px; border-top:1px solid rgba(255,255,255,.08);}
.sidebar-logout{ color:#C7CCDA !important; border-color:rgba(255,255,255,.15) !important;}

.main{ flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{ display:flex; align-items:center; gap:14px; justify-content:space-between; padding:20px 34px; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(201,162,39,.15); position:sticky; top:0; z-index:5;}
.topbar .eyebrow{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:4px;}
.topbar h1{ font-family:var(--font-display); font-size:27px; font-weight:600; color:var(--navy);}
.menu-toggle{ display:none; background:none; border:none; font-size:20px; color:var(--navy);}
.content{ padding:30px 34px 60px; flex:1;}
.section{ display:none; animation:fadeIn .2s ease;}
.section.active{ display:block;}
@keyframes fadeIn{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-card); transition:box-shadow .15s ease, transform .15s ease;}
.card-pad{ padding:22px 24px;}
.card-title-row{ padding:16px 22px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;}
.card-title-row h3{ font-family:var(--font-display); font-size:18px; color:var(--navy); font-weight:600;}
.grid{ display:grid; gap:18px;}
.grid-2{ grid-template-columns:1fr 1fr;}
.grid-3{ grid-template-columns:repeat(3,1fr);}
@media (max-width:1000px){ .grid-2,.grid-3{ grid-template-columns:1fr 1fr;} }
@media (max-width:680px){ .grid-2,.grid-3{ grid-template-columns:1fr;} }

.section-head{ margin-bottom:24px;}
.section-head .eyebrow{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:6px;}
.section-head h2{ font-family:var(--font-display); font-size:27px; font-weight:600; color:var(--navy);}
.section-head h2::after{ content:''; display:block; width:46px; height:3px; margin-top:13px; border-radius:2px; background:linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 100%);}
.section-head p{ font-size:13.5px; color:var(--stone); margin-top:14px; max-width:680px; line-height:1.6;}

.hero-banner{ position:relative; border-radius:var(--radius); overflow:hidden; min-height:280px; display:flex; align-items:flex-end; margin-bottom:28px; box-shadow:var(--shadow-card-hover);
  background-image:linear-gradient(180deg, rgba(16,26,48,.12) 0%, rgba(16,26,48,.58) 60%, rgba(16,26,48,.94) 100%), url('https://www.grandvenetian.mx/img/landing/header_one.jpg');
  background-size:cover; background-position:center;}
.hero-banner-inner{ padding:34px 36px 28px; max-width:640px;}
.hero-banner .eyebrow{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:8px;}
.hero-banner h2{ font-family:var(--font-display); font-size:34px; font-weight:600; color:#fff; line-height:1.15;}
.hero-banner h2::after{ content:''; display:block; width:46px; height:3px; margin-top:14px; border-radius:2px; background:linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 100%);}
.hero-banner p{ font-size:13.5px; color:#E4E7F0; margin-top:14px; max-width:520px; line-height:1.6;}
#dashQuickGrid{ margin-bottom:28px;}
@media (max-width:680px){ .hero-banner{ min-height:220px;} .hero-banner h2{ font-size:26px;} .hero-banner-inner{ padding:22px 20px 20px;} }

.badge{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:20px; text-transform:uppercase; letter-spacing:.03em;}
.badge-gold{ background:#F5EBC9; color:var(--gold-dim);}
.badge-navy{ background:#E4E9F4; color:var(--navy);}
.badge-success{ background:var(--success-soft); color:var(--success);}
.badge-danger{ background:var(--danger-soft); color:var(--danger);}
.badge-stone{ background:#EEF0F4; color:var(--stone);}
.badge-lagoon{ background:var(--lagoon-soft); color:var(--lagoon);}

.quick-card{ padding:20px; cursor:pointer; transition:.12s; display:flex; flex-direction:column; gap:10px;}
.quick-card:hover{ border-color:var(--gold-dim); transform:translateY(-2px);}
.quick-card .icon-wrap{ width:36px; height:36px; border-radius:8px; background:var(--navy); display:flex; align-items:center; justify-content:center;}
.quick-card .icon-wrap svg{ width:18px; height:18px; color:var(--gold-soft);}
.quick-card h3{ font-family:var(--font-display); font-size:18px; color:var(--navy); font-weight:600;}
.quick-card p{ font-size:12.5px; color:var(--stone); line-height:1.5;}

.kv-card{ padding:18px 20px; display:flex; flex-direction:column; gap:4px; position:relative;}
.kv-card .icon-wrap{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg, var(--gold-soft), #F5EBC9); display:flex; align-items:center; justify-content:center; margin-bottom:2px;}
.kv-card .icon-wrap svg{ width:15px; height:15px; color:var(--gold-dim);}
.kv-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--stone);}
.kv-value{ font-family:var(--font-mono); font-size:16px; color:var(--navy); font-weight:600; word-break:break-all;}
.kv-copy{ position:absolute; top:14px; right:14px; width:26px; height:26px; border-radius:6px; border:1px solid var(--line); background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--stone);}
.kv-copy:hover{ border-color:var(--gold-dim); color:var(--gold-dim);}
.kv-copy svg{ width:13px; height:13px;}

.radio-toggle{ display:flex; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; width:fit-content;}
.radio-toggle label{ position:relative;}
.radio-toggle input{ position:absolute; opacity:0;}
.radio-toggle span{ display:block; padding:9px 20px; font-size:12.5px; font-weight:600; color:var(--stone); border-right:1px solid var(--line);}
.radio-toggle label:last-child span{ border-right:none;}
.radio-toggle input:checked + span{ background:var(--navy); color:var(--gold-soft);}

table{ width:100%; border-collapse:collapse; font-size:13px;}
th{ text-align:left; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--stone); padding:10px 14px; border-bottom:1px solid var(--line);}
td{ padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle;}
tr:last-child td{ border-bottom:none;}
.table-wrap{ overflow-x:auto;}

.contact-row{ display:flex; align-items:center; gap:14px; padding:16px 20px; border-bottom:1px solid var(--line);}
.contact-row:last-child{ border-bottom:none;}
.contact-avatar{ width:38px; height:38px; border-radius:10px; background:var(--navy); color:var(--gold-soft); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:15px; flex-shrink:0;}
.contact-info{ flex:1; min-width:0;}
.contact-info .name{ font-weight:600; font-size:13.5px; color:var(--navy);}
.contact-info .role{ font-size:11.5px; color:var(--stone);}
.contact-actions{ display:flex; gap:8px;}
.icon-btn{ width:32px; height:32px; border-radius:8px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--stone);}
.icon-btn:hover{ border-color:var(--gold-dim); color:var(--gold-dim);}
.icon-btn svg{ width:14px; height:14px;}

.doc-card{ padding:20px; display:flex; gap:16px; align-items:center; transition:.15s ease;}
.doc-card:hover{ border-color:var(--gold-dim); box-shadow:var(--shadow-card-hover); transform:translateY(-2px);}
.doc-icon{ font-size:26px;}
.doc-card h4{ font-size:14px; font-weight:600; color:var(--navy); margin-bottom:3px;}
.doc-card p{ font-size:12px; color:var(--stone); line-height:1.5;}

.service-card{ padding:20px; display:flex; gap:14px; align-items:flex-start; transition:.15s ease;}
.service-card:hover{ box-shadow:var(--shadow-card-hover); transform:translateY(-2px);}
.service-card .icon-wrap{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg, var(--gold-soft), #F5EBC9); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.service-card .icon-wrap svg{ width:16px; height:16px; color:var(--gold-dim);}
.service-card h4{ font-size:13.5px; font-weight:600; color:var(--navy); margin-bottom:3px;}
.service-card p{ font-size:12px; color:var(--stone); line-height:1.5; margin-bottom:8px;}
.service-card a.doc-link, .service-card span.doc-link, .doc-card span.doc-link{ font-size:12px; font-weight:600; color:var(--gold-dim);}
.doc-view-btn{ margin-top:6px;}

.dish-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);}
.dish-marquee-track{ display:flex; gap:16px; width:max-content; animation:dishScroll 34s linear infinite;}
.dish-marquee:hover .dish-marquee-track{ animation-play-state:paused;}
.dish-card{ position:relative; width:170px; height:210px; flex-shrink:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-card);}
.dish-card img{ width:100%; height:100%; object-fit:cover; display:block;}
.dish-card .dish-label{ position:absolute; left:0; right:0; bottom:0; padding:12px 12px 10px; background:linear-gradient(180deg, transparent, rgba(16,26,48,.85) 70%); color:#fff; font-size:12.5px; font-weight:600;}
@keyframes dishScroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

.menu-cover-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:16px;}
.menu-cover-card{ cursor:pointer; position:relative; overflow:hidden; border-radius:var(--radius); aspect-ratio:4/5; box-shadow:var(--shadow-card); transition:box-shadow .15s ease, transform .15s ease;}
.menu-cover-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card-hover);}
.menu-cover-card img{ width:100%; height:100%; object-fit:cover; display:block;}
.menu-cover-card .menu-cover-label{ position:absolute; left:0; right:0; bottom:0; padding:18px 14px 14px; background:linear-gradient(180deg, transparent, rgba(16,26,48,.85) 75%); color:#fff; font-family:var(--font-display); font-size:20px; font-weight:600;}

.menu-slide-wrap{ display:flex; align-items:center; gap:10px; flex:1; min-height:0;}
.menu-slide-arrow{ flex-shrink:0; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--navy); font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.menu-slide-arrow:hover{ border-color:var(--gold-dim); color:var(--gold-dim);}
.menu-slide-viewport{ flex:1; min-width:0; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.menu-slide-viewport::-webkit-scrollbar{ display:none;}
.menu-slide-track{ display:flex; height:100%;}
.menu-slide-item{ flex:0 0 100%; scroll-snap-align:center; position:relative; height:100%; box-sizing:border-box;}

#menuViewerModal, #dishViewerModal{ padding:0;}
#menuViewerModal .modal-box, #dishViewerModal .modal-box{ width:100vw; height:100vh; height:100dvh; max-width:100vw; max-height:100vh; max-height:100dvh; border-radius:0; display:flex; flex-direction:column;}
#menuViewerModal .modal-body, #dishViewerModal .modal-body{ flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; position:relative;}
#dishViewerModal .modal-body{ align-items:center; justify-content:center;}

.zoomable-img{ cursor:zoom-in; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; touch-action:manipulation; -webkit-user-select:none; user-select:none;}
.zoomable-img.zoomed{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); max-width:96vw; max-height:96vh; width:auto; height:auto; z-index:400; cursor:zoom-out;}
#menuViewerModal .modal-head, #dishViewerModal .modal-head{ position:relative; z-index:401; background:var(--surface);}
.menu-slide-dots{ display:flex; justify-content:center; gap:7px; margin-top:14px;}
.menu-dot{ width:7px; height:7px; border-radius:50%; background:var(--line); cursor:pointer; transition:.15s;}
.menu-dot.active{ background:var(--gold-dim); width:18px; border-radius:4px;}

.reco-tabs{ display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap;}
.reco-tab{ padding:8px 16px; font-size:12px; font-weight:600; border:1px solid var(--line); border-radius:20px; color:var(--stone); display:inline-flex; align-items:center;}
.reco-tab-icon{ width:13px; height:13px; margin-right:5px;}
.reco-tab.active{ background:var(--navy); border-color:var(--navy); color:var(--gold-soft);}
.reco-card{ padding:18px 20px;}
.reco-card .name-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px;}
.reco-card h4{ font-family:var(--font-display); font-size:17px; color:var(--navy); font-weight:600; display:inline-flex; align-items:center;}
.reco-icon{ width:15px; height:15px; margin-right:6px; color:var(--gold-dim); flex-shrink:0;}
.reco-card .stars{ color:var(--gold); font-size:12px;}
.reco-card p{ font-size:12.5px; color:var(--stone); line-height:1.55;}

.view-tabs{ display:flex; gap:8px;}
.view-tab{ padding:9px 18px; font-size:12.5px; font-weight:600; border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--stone); background:var(--surface);}
.view-tab.active{ background:var(--navy); border-color:var(--navy); color:var(--gold-soft);}
.select-inline{ padding:9px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); font-size:13px; color:var(--ink);}

.family-dropdown{ display:none; position:absolute; left:0; right:0; top:100%; margin-top:4px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:0 8px 24px rgba(20,25,40,.12); max-height:220px; overflow-y:auto; z-index:20;}
.family-dropdown-item{ padding:10px 14px; font-size:14px; color:var(--ink); cursor:pointer;}
.family-dropdown-item:hover{ background:var(--bg);}
.family-dropdown-empty{ padding:10px 14px; font-size:13px; color:var(--stone-light);}

.cal-legend{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:18px;}
.cal-legend .item{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--stone);}
.cal-legend .dot{ width:9px; height:9px; border-radius:3px;}
.month-block{ margin-bottom:26px;}
.month-title{ font-family:var(--font-display); font-size:19px; color:var(--navy); font-weight:600; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--line);}
.week-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
@media (max-width:900px){ .week-grid{ grid-template-columns:1fr;} }

.month-nav{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px;}
.month-nav-row{ display:flex; align-items:center; gap:10px;}
.month-nav-arrow{ padding:8px 12px; font-size:15px; line-height:1;}
.month-nav-label{ font-family:var(--font-display); font-size:24px; font-weight:600; color:var(--navy);}

.gcal-month{ border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface);}
.gcal-header-row{ display:flex; align-items:stretch;}
.gcal-week-label{ width:76px; flex-shrink:0; display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.04em; color:var(--stone); line-height:1.5; background:var(--bg); border-right:1px solid var(--line);}
.gcal-week-label-head{ font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--line);}
.gcal-weekday-row{ flex:1; display:grid; grid-template-columns:repeat(7,1fr);}
.gcal-weekday{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--stone); text-align:center; padding:8px 0; background:var(--bg); border-bottom:1px solid var(--line);}
.gcal-row{ display:flex; align-items:stretch; border-bottom:1px solid var(--line);}
.gcal-row:last-child{ border-bottom:none;}
.gcal-row-main{ flex:1; display:flex; flex-direction:column; min-width:0;}
.gcal-daynums{ display:grid; grid-template-columns:repeat(7,1fr);}
.gcal-bar{ margin:0 6px 10px; padding:10px 14px; border-radius:6px; cursor:pointer; transition:filter .15s ease, transform .15s ease; background-image:linear-gradient(160deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%); background-blend-mode:overlay;}
.gcal-bar:hover{ filter:brightness(1.06); transform:translateY(-1px);}
.gcal-bar span{ font-size:13px; font-weight:700; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,0.15);}
.gcal-bar .gcal-note{ font-weight:400; font-style:italic; opacity:.88; margin-left:4px;}
.gcal-bar-empty{ background:var(--bg); cursor:default;}
.gcal-bar-empty:hover{ filter:none; transform:none;}
.gcal-bar-empty span{ color:var(--stone-light); font-weight:600; text-shadow:none;}
@media (max-width:680px){ .gcal-week-label{ width:44px; font-size:8.5px;} .gcal-daynum-cell{ font-size:10px;} .gcal-bar{ padding:7px 8px; margin:0 3px 6px;} .gcal-bar span{ font-size:11px;} .menu-cover-grid{ grid-template-columns:repeat(auto-fill, minmax(120px,1fr));} .menu-slide-arrow{ width:32px; height:32px; font-size:17px;} }
.gcal-daynum-cell{ font-size:12px; color:var(--stone); font-weight:600; text-align:center; padding:10px 0 6px;}
.gcal-outside{ color:var(--stone-light); opacity:.45;}
.gcal-today{ color:var(--gold-dim);}
.gcal-today::after{ content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--gold-dim); margin-left:3px; vertical-align:middle;}
.week-card{ border:1px solid var(--line); border-left:4px solid var(--stone-light); border-radius:var(--radius-sm); padding:14px 16px; background:var(--surface); display:flex; flex-direction:column; gap:8px;}
.week-card .wk-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.week-card .wk-num{ font-family:var(--font-mono); font-size:10px; color:var(--stone); letter-spacing:.06em;}
.week-card .wk-dates{ font-size:13px; font-weight:600; color:var(--navy);}
.week-card .wk-family{ font-size:12.5px; color:var(--stone);}
.week-card .wk-family b{ color:var(--ink);}
.week-card .wk-note{ font-size:12px; color:var(--stone); background:var(--bg); border-radius:6px; padding:6px 9px; line-height:1.45; word-break:break-word;}
.week-card .wk-actions{ display:flex; gap:8px; margin-top:4px; flex-wrap:wrap;}

.req-item{ display:flex; align-items:center; gap:14px; padding:16px 20px; border-bottom:1px solid var(--line);}
.req-item:last-child{ border-bottom:none;}
.req-item .req-body{ flex:1; font-size:13px; color:var(--ink); line-height:1.5;}
.req-item .req-body b{ color:var(--navy);}
.req-item .req-meta{ font-size:11px; color:var(--stone-light); margin-top:2px;}
.req-empty{ padding:18px 22px; color:var(--stone-light); font-size:13px;}
.pill-btn-row{ display:flex; gap:8px;}

/* ===== MANTENIMIENTO ===== */
.mnt-stats-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px;}
.mnt-stat{ display:flex; align-items:baseline; gap:6px;}
.mnt-stat-num{ font-family:var(--font-display); font-size:26px; color:var(--navy); font-weight:600;}
.mnt-stat-label{ font-size:12px; color:var(--stone);}
.mnt-toggle-row{ display:flex; gap:6px; flex-wrap:wrap;}
.pill-toggle{ padding:8px 16px; font-size:12.5px; font-weight:600; border:1px solid var(--line); border-radius:20px; color:var(--stone); background:var(--surface);}
.pill-toggle.active{ background:var(--navy); border-color:var(--navy); color:var(--gold-soft);}

.mnt-admin-bar{ margin-bottom:20px;}
.mnt-admin-filters{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:10px; margin-bottom:14px;}
.mnt-admin-filters input, .mnt-admin-filters select{ padding:9px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); font-size:13px; background:var(--surface); color:var(--ink);}
.mnt-admin-toolbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:14px;}
.mnt-bins{ display:flex; gap:8px; flex-wrap:wrap;}
.mnt-bin-btn{ padding:7px 14px; font-size:11.5px; font-weight:600; border-radius:16px; border:1px solid var(--line); color:var(--stone); background:var(--surface);}
.mnt-bin-btn.active{ background:var(--gold); border-color:var(--gold); color:var(--navy-deep);}
.mnt-metrics{ display:grid; grid-template-columns:repeat(auto-fit, minmax(110px,1fr)); gap:10px;}
.mnt-metric{ padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg);}
.mnt-metric-num{ font-family:var(--font-display); font-size:20px; color:var(--navy); font-weight:600; display:block;}
.mnt-metric-label{ font-size:10.5px; color:var(--stone); text-transform:uppercase; letter-spacing:.04em;}

.mnt-ticket-list{ display:flex; flex-direction:column; gap:12px;}
.mnt-ticket-card{ display:flex; gap:14px; padding:16px; cursor:pointer; transition:.12s;}
.mnt-ticket-card:hover{ border-color:var(--gold-dim); transform:translateY(-1px);}
.mnt-ticket-card:focus-visible{ outline:2px solid var(--gold-dim); outline-offset:2px;}
.mnt-ticket-thumb{ width:64px; height:64px; border-radius:8px; object-fit:cover; flex-shrink:0; background:var(--bg);}
.mnt-ticket-thumb-empty{ width:64px; height:64px; border-radius:8px; flex-shrink:0; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--stone-light); font-size:22px;}
.mnt-ticket-main{ flex:1; min-width:0;}
.mnt-ticket-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px;}
.mnt-ticket-folio{ font-family:var(--font-mono); font-size:10px; color:var(--stone-light); letter-spacing:.04em;}
.mnt-ticket-title{ font-size:14px; font-weight:600; color:var(--navy); margin:2px 0 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mnt-ticket-badges{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:4px;}
.mnt-ticket-meta{ font-size:11.5px; color:var(--stone-light);}

.mnt-badge{ display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; padding:3px 9px; border-radius:14px; text-transform:uppercase; letter-spacing:.02em; white-space:nowrap;}
.mnt-status-nuevo{ background:#E4E9F4; color:var(--navy);}
.mnt-status-por_revisar{ background:#F5EBC9; color:var(--gold-dim);}
.mnt-status-asignado{ background:var(--lagoon-soft); color:var(--lagoon);}
.mnt-status-en_proceso{ background:#DCE7F5; color:#2A5C99;}
.mnt-status-esperando_respuesta, .mnt-status-esperando_proveedor{ background:#EEF0F4; color:var(--stone);}
.mnt-status-resuelto{ background:var(--success-soft); color:var(--success);}
.mnt-status-cerrado{ background:#EEF0F4; color:var(--stone-light);}
.mnt-status-cancelado{ background:var(--danger-soft); color:var(--danger);}
.mnt-priority-urgente{ background:var(--danger-soft); color:var(--danger);}
.mnt-priority-alta{ background:#FBE4D2; color:#9C4A34;}
.mnt-priority-normal{ background:#EEF0F4; color:var(--stone);}
.mnt-priority-baja{ background:var(--lagoon-soft); color:var(--lagoon);}

/* Kanban (con alternativa accesible: select de estado en cada tarjeta) */
.mnt-kanban{ display:grid; grid-template-columns:repeat(5,minmax(220px,1fr)); gap:14px; overflow-x:auto; padding-bottom:8px;}
.mnt-kanban-col{ background:var(--bg); border-radius:var(--radius-sm); padding:12px; min-width:220px;}
.mnt-kanban-col-title{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--stone); margin-bottom:10px; display:flex; justify-content:space-between;}
.mnt-kanban-card{ background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-bottom:10px; cursor:grab; box-shadow:var(--shadow-card);}
.mnt-kanban-card.dragging{ opacity:.4;}
.mnt-kanban-card h5{ font-size:12.5px; color:var(--navy); font-weight:600; margin-bottom:6px; cursor:pointer;}
.mnt-kanban-card select{ width:100%; margin-top:6px; padding:5px 8px; font-size:11px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink);}
@media (max-width:900px){ .mnt-kanban{ grid-template-columns:1fr;} }

/* Detalle de ticket */
#mntTicketModal .modal-box{ max-width:640px;}
.mnt-detail-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:6px;}
.mnt-detail-folio{ font-family:var(--font-mono); font-size:11px; color:var(--stone-light);}
.mnt-detail-badges{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 16px; align-items:center;}
.mnt-detail-badges select{ padding:6px 10px; border:1px solid var(--line); border-radius:14px; font-size:11px; font-weight:600; background:var(--surface); color:var(--ink);}
.mnt-detail-meta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; font-size:12.5px; color:var(--ink); margin-bottom:16px;}
.mnt-detail-meta-grid span{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--stone-light); margin-bottom:2px;}
.mnt-detail-photos{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.mnt-detail-photos img{ width:88px; height:88px; object-fit:cover; border-radius:8px; border:1px solid var(--line);}
.mnt-empty-badge{ display:inline-block; background:#EEF0F4; color:var(--stone); font-size:12px; padding:8px 12px; border-radius:8px; margin-bottom:16px;}
.mnt-detail-desc{ font-size:13.5px; color:var(--ink); line-height:1.6; white-space:pre-wrap; margin-bottom:16px;}
.mnt-admin-edit{ background:var(--bg); border-radius:var(--radius-sm); padding:16px; margin-bottom:18px;}
.mnt-admin-edit .field{ margin-bottom:12px;}
.mnt-detail-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}
.mnt-timeline{ display:flex; flex-direction:column; gap:12px; margin-bottom:16px; border-top:1px solid var(--line); padding-top:14px;}
.mnt-timeline-item{ font-size:12.5px; color:var(--stone); display:flex; gap:8px;}
.mnt-timeline-dot{ width:6px; height:6px; border-radius:50%; background:var(--gold-dim); margin-top:6px; flex-shrink:0;}
.mnt-timeline-comment{ background:var(--bg); border-radius:8px; padding:10px 12px; flex:1;}
.mnt-timeline-comment p{ color:var(--ink); margin-top:3px; font-size:12.5px;}
.mnt-comment-form{ display:flex; gap:8px;}
.mnt-comment-form input{ flex:1; padding:9px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); font-size:13px; background:var(--surface); color:var(--ink); outline:none;}
.mnt-comment-form input:focus{ border-color:var(--gold-dim); box-shadow:0 0 0 3px rgba(201,162,39,.14);}
@media (prefers-reduced-motion: reduce){ .mnt-ticket-card, .mnt-kanban-card{ transition:none;} }

#toastHost{ position:fixed; bottom:24px; right:24px; z-index:200; display:flex; flex-direction:column; gap:10px;}
.toast{ background:var(--navy-deep); color:#F3F4F8; padding:14px 18px; border-left:3px solid var(--gold); border-radius:var(--radius-sm); font-size:13px; min-width:280px; box-shadow:var(--shadow-modal); display:flex; align-items:center; gap:10px; animation:slideIn .2s ease;}
@keyframes slideIn{ from{transform:translateX(30px); opacity:0;} to{transform:translateX(0); opacity:1;} }

.modal-overlay{ display:none; position:fixed; inset:0; background:rgba(12,18,34,.55); z-index:150; align-items:center; justify-content:center; padding:20px;}
.modal-overlay.open{ display:flex;}
.modal-box{ background:var(--surface); border-radius:var(--radius); width:100%; max-width:480px; box-shadow:var(--shadow-modal); max-height:88vh; overflow-y:auto;}
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--line);}
.modal-head h3{ font-family:var(--font-display); font-size:20px; color:var(--navy); font-weight:600;}
.modal-close{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:var(--stone); border-radius:6px;}
.modal-close:hover{ color:var(--danger);}
.modal-body{ padding:22px 24px;}
.modal-info{ font-size:13px; color:var(--stone); margin-bottom:16px; line-height:1.5;}
.modal-info b{ color:var(--navy);}
.modal-foot{ padding:16px 24px 22px; display:flex; gap:10px; justify-content:flex-end;}

.status-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px;}
.status-dot.on{ background:var(--success);}
.status-dot.off{ background:var(--stone-light);}

/* ===== NOTIFICACIONES ===== */
.notif-badge{ position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--danger); color:#fff; font-size:9.5px; font-weight:700; display:flex; align-items:center; justify-content:center; line-height:1;}
.notif-item{ display:flex; gap:12px; padding:16px 24px; border-bottom:1px solid var(--line); cursor:pointer; transition:.12s;}
.notif-item:last-child{ border-bottom:none;}
.notif-item:hover{ background:var(--bg);}
.notif-item.unread{ background:rgba(201,162,39,.06);}
.notif-icon{ font-size:18px; flex-shrink:0; line-height:1.3;}
.notif-body{ flex:1; min-width:0;}
.notif-title{ font-size:13px; font-weight:600; color:var(--navy);}
.notif-item.unread .notif-title{ color:var(--gold-dim);}
.notif-text{ font-size:12.5px; color:var(--stone); margin-top:3px; line-height:1.5;}

/* ===== MI PERFIL / ADMIN: recordatorios ===== */
.profile-section{ padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--line);}
.profile-section-title{ font-family:var(--font-display); font-size:16px; color:var(--navy); font-weight:600; margin-bottom:10px;}
.reminder-list{ display:flex; flex-direction:column; gap:8px;}
.reminder-row{ display:flex; align-items:center; gap:10px;}
.reminder-days-input{ width:64px; padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius-sm); font-size:13.5px; color:var(--ink); background:var(--surface);}
.reminder-row span{ font-size:12.5px; color:var(--stone);}
.reminder-remove{ width:26px; height:26px; border-radius:6px; border:1px solid var(--line); background:var(--surface); color:var(--stone); flex-shrink:0;}
.reminder-remove:hover{ border-color:var(--danger); color:var(--danger);}

::-webkit-scrollbar{ width:9px; height:9px;}
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px;}
.sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15);}

@media (max-width:860px){
  .sidebar{ position:fixed; left:-260px; top:0; z-index:100; transition:left .2s ease; box-shadow:var(--shadow-modal);}
  .sidebar.open{ left:0;}
  .topbar{ padding:16px 18px;}
  .content{ padding:20px 18px 50px;}
  .menu-toggle{ display:flex; align-items:center;}
}