/* ==========================================================================
   Los Desmontes - Panel de gestion
   Hotel + Restaurante + Asistente de WhatsApp
   Demo estatica, cero dependencias.
   ========================================================================== */

:root{
  /* Neutros calidos */
  --bg:#f6f5f2;
  --surface:#ffffff;
  --surface-2:#fbfaf8;
  --line:#e6e3dd;
  --line-strong:#d6d2c9;
  --ink:#1b1d1f;
  --ink-2:#4a4f55;
  --ink-3:#7c828a;

  /* Marca Los Desmontes */
  --wine:#8c2f39;
  --wine-dark:#6d232b;
  --wine-soft:#f7edee;
  --gold:#b8873b;
  --gold-soft:#faf3e6;

  /* Barra lateral */
  --nav:#15181b;
  --nav-2:#1e2226;
  --nav-ink:#c8ccd1;
  --nav-ink-2:#7e858d;

  /* Semanticos */
  --ok:#2e7d5b;
  --ok-soft:#eaf5f0;
  --warn:#b07407;
  --warn-soft:#fdf4e3;
  --danger:#b3261e;
  --danger-soft:#fbeceb;
  --info:#2c5c8f;
  --info-soft:#eaf1f8;

  --r-sm:6px; --r:10px; --r-lg:14px;
  --shadow:0 1px 2px rgba(20,24,28,.06), 0 6px 20px rgba(20,24,28,.06);
  --shadow-lg:0 10px 40px rgba(20,24,28,.16);
  --nav-w:246px;
  --font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-brand:"Fraunces", Georgia, serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.01em}
p{margin:0}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:none; padding:0}
a{color:inherit; text-decoration:none}
svg{display:block}
::selection{background:var(--wine); color:#fff}

/* ---------- Estructura ----------
   El scroll vive dentro de .main, no en el body. Asi las pantallas de altura fija
   (la bandeja de WhatsApp) caben exactas y no hay que bajar para escribir. */
.app{display:flex; height:100vh; overflow:hidden}

.nav{
  width:var(--nav-w); flex:0 0 var(--nav-w); background:var(--nav);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.nav__brand{display:flex; align-items:center; gap:11px; padding:20px 18px 16px}
.nav__mark{
  width:34px; height:34px; flex:0 0 34px; border-radius:9px;
  background:linear-gradient(150deg,var(--wine),var(--wine-dark));
  display:grid; place-items:center; color:var(--gold);
}
.nav__name{font-family:var(--font-brand); font-size:15px; color:#fff; line-height:1.15; font-weight:600}
.nav__name span{display:block; font-family:var(--font); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--nav-ink-2); font-weight:500; margin-top:2px}

.nav__scroll{flex:1; overflow-y:auto; padding:6px 10px 14px; scrollbar-width:thin}
.nav__scroll::-webkit-scrollbar{width:6px}
.nav__scroll::-webkit-scrollbar-thumb{background:#31363b; border-radius:3px}
.nav__group{padding:14px 8px 6px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#5d646c; font-weight:600}
.nav__item{
  display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border-radius:8px;
  color:var(--nav-ink); font-size:13.5px; margin-bottom:1px; text-align:left; transition:background .12s,color .12s;
}
.nav__item:hover{background:var(--nav-2); color:#fff}
.nav__item.is-active{background:var(--nav-2); color:#fff; box-shadow:inset 2px 0 0 var(--gold)}
.nav__item svg{width:17px; height:17px; flex:0 0 17px; opacity:.85}
.nav__item.is-active svg{opacity:1; color:var(--gold)}
.nav__badge{
  margin-left:auto; min-width:20px; height:19px; padding:0 6px; border-radius:10px;
  background:var(--wine); color:#fff; font-size:11px; font-weight:600; display:grid; place-items:center;
}
.nav__foot{padding:12px 16px 16px; border-top:1px solid #24282c; color:#5d646c; font-size:11.5px; display:flex; align-items:center; justify-content:space-between; gap:8px}
.nav__foot b{color:#868d95; font-weight:600}

.main{flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden}
.main.is-flush{overflow:hidden}

/* ---------- Barra superior ---------- */
.top{
  position:sticky; top:0; z-index:40; background:rgba(246,245,242,.86);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; padding:12px 24px;
}
.top__title h1{font-size:19px}
.top__title p{font-size:12.5px; color:var(--ink-3); margin-top:1px}
.top__spacer{flex:1}
.search{
  display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line);
  border-radius:9px; padding:7px 11px; width:280px; transition:border-color .15s, box-shadow .15s;
}
.search:focus-within{border-color:var(--wine); box-shadow:0 0 0 3px var(--wine-soft)}
.search svg{width:15px;height:15px;color:var(--ink-3); flex:0 0 15px}
.search input{border:none; background:none; outline:none; width:100%; font-size:13px}
.top__date{
  display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line);
  border-radius:9px; padding:7px 12px; font-size:13px; color:var(--ink-2);
}
.top__date svg{width:15px;height:15px;color:var(--ink-3)}

.page{padding:22px 24px 60px; max-width:1580px; width:100%}
.page--flush{padding:0; max-width:none; flex:1; display:flex; min-height:0}

/* ---------- Piezas ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow)}
.card__head{display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--line)}
.card__head h3{font-size:14.5px}
.card__head p{font-size:12.5px; color:var(--ink-3)}
.card__head .grow{flex:1}
.card__body{padding:18px}
.card__body--tight{padding:0}

.grid{display:grid; gap:16px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g-1-2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
@media(max-width:1240px){.g-4,.g-5{grid-template-columns:repeat(2,minmax(0,1fr))} .g-2-1,.g-1-2,.g-3{grid-template-columns:minmax(0,1fr)}}
@media(max-width:820px){.g-2,.g-4,.g-5{grid-template-columns:minmax(0,1fr)}}

.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 17px; box-shadow:var(--shadow)}
.kpi__top{display:flex; align-items:center; gap:9px; color:var(--ink-3); font-size:12.5px; font-weight:500}
.kpi__top svg{width:15px;height:15px}
.kpi__val{font-size:27px; font-weight:650; letter-spacing:-.025em; margin-top:9px; line-height:1}
.kpi__val small{font-size:14px; font-weight:500; color:var(--ink-3); letter-spacing:0}
.kpi__sub{font-size:12.5px; color:var(--ink-3); margin-top:7px}
.kpi__bar{height:5px; border-radius:3px; background:var(--line); margin-top:11px; overflow:hidden}
.kpi__bar i{display:block; height:100%; border-radius:3px; background:var(--wine)}

/* Estado: punto + texto, sin pastillas chillonas */
.st{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-2); white-space:nowrap}
.st::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ink-3); flex:0 0 7px}
.st--ok::before{background:var(--ok)} .st--ok{color:var(--ok)}
.st--warn::before{background:var(--warn)} .st--warn{color:var(--warn)}
.st--danger::before{background:var(--danger)} .st--danger{color:var(--danger)}
.st--info::before{background:var(--info)} .st--info{color:var(--info)}
.st--wine::before{background:var(--wine)} .st--wine{color:var(--wine)}
.st--muted::before{background:var(--line-strong)}

.tag{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink-2);
  border:1px solid var(--line-strong); border-radius:5px; padding:2px 7px; background:var(--surface-2); white-space:nowrap;
}
.tag--wine{border-color:#e3c9cc; color:var(--wine); background:var(--wine-soft)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; height:35px; padding:0 14px;
  border-radius:8px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  font-size:13px; font-weight:500; transition:background .13s,border-color .13s,color .13s;
}
.btn:hover{background:var(--surface-2); border-color:var(--ink-3)}
.btn svg{width:15px;height:15px}
.btn--primary{background:var(--wine); border-color:var(--wine); color:#fff}
.btn--primary:hover{background:var(--wine-dark); border-color:var(--wine-dark); color:#fff}
.btn--ghost{border-color:transparent; background:transparent}
.btn--ghost:hover{background:var(--surface-2); border-color:var(--line)}
.btn--sm{height:29px; padding:0 10px; font-size:12.5px; border-radius:7px}
.btn--sm svg{width:13px;height:13px}
.btn--danger{color:var(--danger); border-color:#e8c9c7}
.btn--danger:hover{background:var(--danger-soft); border-color:var(--danger)}
.btn[disabled]{opacity:.45; pointer-events:none}
.btn--icon{width:35px; padding:0}
.btn--icon.btn--sm{width:29px}

.field{display:block}
.field>span{display:block; font-size:12px; font-weight:500; color:var(--ink-2); margin-bottom:5px}
.field>span em{font-style:normal; color:var(--ink-3); font-weight:400}
.input, .select, .textarea{
  width:100%; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface);
  padding:8px 11px; font-size:13.5px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.textarea{resize:vertical; min-height:76px; line-height:1.55}
.input:focus,.select:focus,.textarea:focus{border-color:var(--wine); box-shadow:0 0 0 3px var(--wine-soft)}
.select{padding-right:26px; cursor:pointer}

.switch{position:relative; width:38px; height:22px; flex:0 0 38px; border-radius:11px; background:var(--line-strong); transition:background .16s}
.switch::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .16s}
.switch.is-on{background:var(--ok)}
.switch.is-on::after{transform:translateX(16px)}

/* ---------- Tablas ---------- */
.table{width:100%; border-collapse:collapse}
.table th{
  text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  font-weight:600; padding:10px 16px; border-bottom:1px solid var(--line); background:var(--surface-2); white-space:nowrap;
}
.table td{padding:11px 16px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tbody tr{transition:background .1s}
.table tbody tr.is-clickable{cursor:pointer}
.table tbody tr.is-clickable:hover{background:var(--surface-2)}
.table .num{text-align:right; font-variant-numeric:tabular-nums}
.table .nowrap{white-space:nowrap}
.t-strong{font-weight:600}
.t-mut{color:var(--ink-3); font-size:12.5px}
.t-right{text-align:right}

.avatar{
  width:32px; height:32px; flex:0 0 32px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:600; color:#fff; letter-spacing:.02em;
}
.who{display:flex; align-items:center; gap:10px; min-width:0}
.who__n{font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.who__s{font-size:12px; color:var(--ink-3); white-space:nowrap}

.empty{padding:44px 20px; text-align:center; color:var(--ink-3)}
.empty svg{width:26px;height:26px; margin:0 auto 10px; color:var(--line-strong)}

/* ---------- Rack / planning de habitaciones ---------- */
.rack{overflow:auto; max-height:calc(100vh - 250px)}
.rack table{border-collapse:separate; border-spacing:0; min-width:100%}
.rack th,.rack td{border-bottom:1px solid var(--line); border-right:1px solid var(--line)}
.rack thead th{
  position:sticky; top:0; z-index:3; background:var(--surface-2); padding:7px 4px; text-align:center;
  font-size:11px; color:var(--ink-3); font-weight:600; min-width:44px; line-height:1.25;
}
.rack thead th b{display:block; font-size:13px; color:var(--ink); font-weight:600}
.rack thead th.is-today{background:var(--wine-soft); color:var(--wine)}
.rack thead th.is-today b{color:var(--wine)}
.rack thead th.is-wknd{background:#f1efe9}
.rack .rk-room{
  position:sticky; left:0; z-index:2; background:var(--surface); min-width:158px; padding:0 12px;
  text-align:left; box-shadow:1px 0 0 var(--line);
}
.rack thead .rk-room{z-index:4}
.rack .rk-room .rk-n{display:block; font-weight:600; font-size:13.5px; line-height:1.2}
.rack .rk-room .rk-t{display:block; font-size:11.5px; color:var(--ink-3); line-height:1.2}
.rack .rk-room > div{display:flex; align-items:center; gap:9px; height:44px}
.rack td{height:44px; padding:0; position:relative; background:var(--surface)}
.rack td.is-wknd{background:#faf9f6}
.rack td.is-today{box-shadow:inset 1px 0 0 var(--wine), inset -1px 0 0 var(--wine)}
.rack td.is-past{background:repeating-linear-gradient(45deg,#fbfaf8,#fbfaf8 5px,#f4f2ee 5px,#f4f2ee 10px)}
.rk-bar{
  position:absolute; top:6px; bottom:6px; left:3px; right:3px; border-radius:6px; cursor:pointer;
  display:flex; align-items:center; padding:0 8px; font-size:11.5px; font-weight:550; color:#fff;
  overflow:hidden; white-space:nowrap; z-index:1; transition:filter .12s, transform .12s;
}
.rk-bar:hover{filter:brightness(1.08); transform:translateY(-1px); z-index:2; box-shadow:var(--shadow)}
.rk-bar--booking{background:#1f6fb2}
.rk-bar--web{background:#8c2f39}
.rk-bar--tel{background:#4a5c3d}
.rk-bar--wa{background:#1f8a5c}
.rk-bar--expedia{background:#c47a12; color:#1b1d1f}
.rk-bar--mostrador{background:#5b5563}
.rk-bar--block{background:repeating-linear-gradient(45deg,#8a8f96,#8a8f96 6px,#767c83 6px,#767c83 12px)}
.rk-bar--limpieza{background:#b07407}
.rk-bar.is-pending{opacity:.62; border:1.5px dashed rgba(255,255,255,.8)}
.rk-legend{display:flex; flex-wrap:wrap; gap:14px; padding:12px 18px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-2)}
.rk-legend i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px}

/* ---------- Plano de sala ---------- */
.floor{
  position:relative; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
  height:430px; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:34px 34px; overflow:hidden;
}
.tb{
  position:absolute; border-radius:8px; border:1.5px solid var(--line-strong); background:var(--surface);
  display:grid; place-items:center; cursor:pointer; transition:transform .12s, box-shadow .12s;
  text-align:center; line-height:1.15;
}
.tb:hover{transform:scale(1.05); box-shadow:var(--shadow); z-index:2}
.tb b{font-size:13px; display:block}
.tb span{font-size:10.5px; color:var(--ink-3)}
.tb.is-round{border-radius:50%}
.tb.is-busy{background:var(--wine); border-color:var(--wine-dark); color:#fff}
.tb.is-busy span{color:rgba(255,255,255,.78)}
.tb.is-soon{background:var(--gold-soft); border-color:var(--gold)}
.tb.is-block{background:#eceae5; color:var(--ink-3)}
.floor__label{position:absolute; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:600}

/* ---------- WhatsApp ---------- */
.wa{display:flex; flex:1; min-height:0; background:var(--surface)}
.wa__list{width:322px; flex:0 0 322px; border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0}
.wa__filters{display:flex; gap:6px; padding:12px 12px 10px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.chip{
  font-size:12px; padding:4px 10px; border-radius:14px; border:1px solid var(--line-strong);
  color:var(--ink-2); background:var(--surface); transition:.12s;
}
.chip:hover{border-color:var(--ink-3)}
.chip.is-on{background:var(--ink); border-color:var(--ink); color:#fff}
.wa__scroll{overflow-y:auto; flex:1}
.wa__item{display:flex; gap:11px; padding:12px 14px; border-bottom:1px solid var(--line); cursor:pointer; width:100%; text-align:left; transition:background .1s}
.wa__item:hover{background:var(--surface-2)}
.wa__item.is-active{background:var(--wine-soft); box-shadow:inset 3px 0 0 var(--wine)}
.wa__item-b{min-width:0; flex:1}
.wa__item-t{display:flex; align-items:baseline; gap:8px}
.wa__item-t b{font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wa__item-t span{margin-left:auto; font-size:11px; color:var(--ink-3); white-space:nowrap}
.wa__item-p{display:block; font-size:12.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px}
.wa__item-m{display:flex; align-items:center; gap:8px; margin-top:6px}
.wa__unread{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ok);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center}

.wa__thread{flex:1; display:flex; flex-direction:column; min-width:0; background:#f2efe9}
.wa__head{display:flex; align-items:center; gap:12px; padding:11px 18px; border-bottom:1px solid var(--line); background:var(--surface)}
.wa__msgs{flex:1; overflow-y:auto; padding:20px 24px; display:flex; flex-direction:column; gap:8px}
.msg{max-width:64%; padding:8px 12px; border-radius:12px; font-size:13.5px; line-height:1.5; position:relative; box-shadow:0 1px 1px rgba(0,0,0,.05); white-space:pre-wrap}
.msg--in{align-self:flex-start; background:#fff; border-top-left-radius:3px}
.msg--out{align-self:flex-end; background:#dcf6e4; border-top-right-radius:3px}
.msg--note{align-self:center; background:var(--gold-soft); border:1px solid #ecd9b4; color:#6d5220; font-size:12.5px; max-width:74%; text-align:center; border-radius:8px}
.msg__meta{display:flex; align-items:center; gap:5px; justify-content:flex-end; font-size:10.5px; color:var(--ink-3); margin-top:3px}
.msg__meta svg{width:13px;height:13px;color:#4c8bd9}
.msg__who{font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ok); margin-bottom:2px}
.msg__who--h{color:var(--wine)}
.wa__day{align-self:center; background:rgba(255,255,255,.75); color:var(--ink-3); font-size:11.5px; padding:3px 11px; border-radius:10px; margin:8px 0 2px}
.wa__compose{border-top:1px solid var(--line); background:var(--surface); padding:12px 16px}
.wa__compose-row{display:flex; gap:10px; align-items:flex-end}
.wa__bot{display:flex; align-items:center; gap:9px; padding:9px 14px; background:var(--ok-soft); border-bottom:1px solid #cde5da; font-size:12.5px; color:#245e46}
.wa__bot .grow{flex:1}
.wa__bot > svg{width:16px; height:16px; flex:0 0 16px}
.msg--note svg{display:inline-block; width:13px; height:13px; vertical-align:-2px; margin-right:5px}
.wa__side{width:302px; flex:0 0 302px; border-left:1px solid var(--line); overflow-y:auto; background:var(--surface)}
.wa__side-sec{padding:15px 17px; border-bottom:1px solid var(--line)}
.wa__side-sec h4{font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}
.dl{display:grid; grid-template-columns:auto 1fr; gap:7px 12px; font-size:13px}
.dl dt{color:var(--ink-3); white-space:nowrap}
.dl dd{margin:0; text-align:right; font-weight:500}

/* ---------- Drawer ---------- */
.drawer-bg{position:fixed; inset:0; background:rgba(20,24,28,.36); z-index:80; opacity:0; pointer-events:none; transition:opacity .2s}
.drawer-bg.is-open{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:460px; max-width:94vw; background:var(--surface); z-index:81;
  box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform .24s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.drawer.is-open{transform:none}
.drawer__head{display:flex; align-items:flex-start; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line)}
.drawer__head h3{font-size:17px}
.drawer__head p{font-size:12.5px; color:var(--ink-3); margin-top:2px}
.drawer__body{flex:1; overflow-y:auto; padding:18px 20px}
.drawer__foot{padding:14px 20px; border-top:1px solid var(--line); display:flex; gap:9px; justify-content:flex-end; background:var(--surface-2)}
.sec{margin-bottom:22px}
.sec:last-child{margin-bottom:0}
.sec h4{font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}

/* ---------- Timeline ---------- */
.tl{position:relative; padding-left:20px}
.tl::before{content:""; position:absolute; left:5px; top:5px; bottom:5px; width:1.5px; background:var(--line)}
.tl__i{position:relative; padding-bottom:16px}
.tl__i:last-child{padding-bottom:0}
.tl__i::before{content:""; position:absolute; left:-18px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--surface); border:2px solid var(--line-strong)}
.tl__i.is-ok::before{border-color:var(--ok)}
.tl__i.is-warn::before{border-color:var(--warn)}
.tl__i.is-danger::before{border-color:var(--danger)}
.tl__t{font-size:13px; font-weight:550}
.tl__d{font-size:12px; color:var(--ink-3); margin-top:1px}

/* ---------- Calendario ---------- */
.cal{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-left:1px solid var(--line); border-top:1px solid var(--line)}
.cal__h{padding:8px; text-align:center; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); font-weight:600; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface-2)}
.cal__d{min-height:118px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:6px 7px; background:var(--surface)}
.cal__d.is-out{background:var(--surface-2)}
.cal__d.is-today{background:var(--wine-soft)}
.cal__n{font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:5px; display:flex; align-items:center; gap:6px}
.cal__d.is-out .cal__n{color:var(--line-strong)}
.cal__d.is-today .cal__n{color:var(--wine)}
.cal__n small{margin-left:auto; font-weight:500; color:var(--ink-3); font-size:11px}
.cal__e{
  display:block; width:100%; text-align:left; font-size:11.5px; padding:2px 6px; border-radius:4px; margin-bottom:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-left:2.5px solid var(--ink-3); background:var(--surface-2); color:var(--ink-2);
}
.cal__e:hover{background:var(--line)}
.cal__e.e-hotel{border-left-color:#2c5c8f; background:var(--info-soft)}
.cal__e.e-resto{border-left-color:var(--wine); background:var(--wine-soft)}
.cal__e.e-evento{border-left-color:var(--gold); background:var(--gold-soft)}
.cal__e.e-campana{border-left-color:var(--ok); background:var(--ok-soft)}
.cal__e.e-cierre{border-left-color:var(--danger); background:var(--danger-soft)}

/* ---------- Menu del dia ---------- */
.menu-day{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface)}
.menu-day__h{display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--surface-2); border-bottom:1px solid var(--line)}
.menu-day__h b{font-size:13.5px; text-transform:capitalize}
.menu-day__h .grow{flex:1}
.menu-day__b{padding:12px 14px; display:grid; gap:12px}
.ml{display:grid; gap:6px}
.ml__t{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); font-weight:700}
.ml__row{display:flex; align-items:center; gap:8px}
.ml__row .input{flex:1; padding:5px 9px; font-size:13px}

/* ---------- Movil (vista QR) ---------- */
/* Marco de movil. La guia se renderiza a 390px de ancho (un movil de verdad) y se
   reduce con transform, en vez de aplastarla dentro de un iframe estrecho. */
.phone{
  width:300px; height:600px; border-radius:34px; background:#15181b; padding:11px; box-shadow:var(--shadow-lg);
  flex:0 0 300px;
}
.phone__s{width:278px; height:578px; border-radius:25px; background:#fff; overflow:hidden; position:relative}
.phone__s iframe{
  width:390px; height:811px; border:none; display:block;
  transform:scale(.7128); transform-origin:0 0;
}

.qr-box{display:grid; place-items:center; gap:14px; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.qr-box canvas{image-rendering:pixelated; border-radius:6px}

/* ---------- Toast ---------- */
.toasts{position:fixed; right:20px; bottom:20px; z-index:200; display:flex; flex-direction:column; gap:9px; align-items:flex-end}
.toast{
  background:var(--nav); color:#fff; border-radius:9px; padding:11px 15px; font-size:13px; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:10px; animation:tin .22s ease-out; max-width:380px;
}
.toast svg{width:16px;height:16px; color:#7fd6a8; flex:0 0 16px}
@keyframes tin{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ---------- Aviso demo ---------- */
.demo-note{
  display:flex; align-items:flex-start; gap:10px; padding:11px 14px; border:1px solid var(--line-strong);
  border-radius:var(--r); background:var(--surface-2); font-size:12.5px; color:var(--ink-2); line-height:1.55;
}
.demo-note svg{width:16px;height:16px; color:var(--ink-3); flex:0 0 16px; margin-top:1px}
.demo-note b{font-weight:600; color:var(--ink)}

.bar-mini{height:6px; border-radius:3px; background:var(--line); overflow:hidden; min-width:70px}
.bar-mini i{display:block; height:100%; background:var(--wine)}

/* ---------- Graficos ---------- */
.cht{position:relative}
.cht svg{width:100%; height:auto; display:block; overflow:visible}
.cht-grid line{stroke:var(--line); stroke-width:1}
.cht-ax{font-size:10.5px; fill:var(--ink-3); font-family:var(--font)}
.cht-bar{transition:opacity .12s; cursor:default}
.cht-bar:hover{opacity:.75}
.cht-media{stroke:var(--ink-3); stroke-width:1.5; stroke-dasharray:4 4}
.cht-media-t{font-size:10.5px; fill:var(--ink-3); font-family:var(--font); font-weight:600}
.cht-tip{
  position:absolute; left:0; top:0; pointer-events:none; z-index:6;
  background:var(--nav); color:#fff; font-size:12px; padding:6px 10px; border-radius:7px;
  white-space:nowrap; opacity:0; transform:translate(-50%,-100%); transition:opacity .1s;
  box-shadow:var(--shadow-lg);
}
.cht-tip.is-on{opacity:1}

.bh{display:grid; gap:12px}
.bh__row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:baseline}
.bh__lab{display:flex; align-items:center; gap:8px; font-size:13px; min-width:0}
.bh__lab span:last-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bh__dot{width:9px; height:9px; border-radius:2px; flex:0 0 9px}
.bh__val{font-weight:600; font-size:13px; white-space:nowrap}
.bh__track{grid-column:1 / -1; height:10px; background:var(--surface-2); border:1px solid var(--line); border-radius:5px; overflow:hidden}
.bh__fill{display:block; height:100%; border-radius:5px}

.stk{display:flex; height:14px; border-radius:7px; overflow:hidden; gap:2px; background:var(--surface-2)}
.stk i{display:block; height:100%}

.leg{display:flex; flex-wrap:wrap; gap:16px; font-size:12px; color:var(--ink-2)}
.leg i{width:10px; height:10px; border-radius:2px; display:inline-block; margin-right:6px; vertical-align:-1px}

.split{display:flex; gap:16px; align-items:flex-start}
.stack{display:grid; gap:16px}
.row{display:flex; align-items:center; gap:10px}
.row--wrap{flex-wrap:wrap}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}
.grow{flex:1}
.hide-sm{display:initial}
@media(max-width:1100px){
  .nav{position:fixed; z-index:90; transform:translateX(-100%); transition:transform .2s}
  .nav.is-open{transform:none}
  .wa__side{display:none}
  .hide-sm{display:none}
}