/* Layout: banda azul Diestra arriba; a la izquierda los pasos en orden, a la derecha (fija) el link y el mensaje como se verá en WhatsApp; abajo el catálogo compartido de promociones. */
:root{
  --bg:#EEF1F5; --surface:#FFFFFF; --sunk:#F5F7FA; --line:#D5DCE5;
  --ink:#14263A; --muted:#5B6B7D;
  --navy:#1B344D; --on-navy:#FFFFFF; --navy-soft:#C9D6E3;
  --gold:#FBC021; --on-gold:#1B2A3A; --gold-ink:#8A6200;
  --ok:#1E7A46; --ok-bg:#DDF3E5; --warn:#8A5A00; --warn-bg:#FFF0C7; --bad:#B3261E; --bad-bg:#FBE2E0; --off:#5B6B7D; --off-bg:#E4E9EF;
  --chat:#EFEAE2; --bubble:#D9FDD3; --bubble-ink:#111B21; --bubble-link:#027EB5;
  --p-host:#5B6B7D; --p-hotel:#0B63B6; --p-date:#1E7A46; --p-occ:#7A4FB5; --p-cp:#B3261E; --p-partner:#8A5A00; --p-utm:#00707A;
  --display:"Poppins",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0E1924; --surface:#162534; --sunk:#111E2B; --line:#2B3D50;
  --ink:#E8EEF4; --muted:#9BABBB;
  --navy:#0A1520; --on-navy:#FFFFFF; --navy-soft:#9BB0C6;
  --gold:#FBC021; --on-gold:#1B2A3A; --gold-ink:#FBC021;
  --ok:#7FD9A2; --ok-bg:#143524; --warn:#F3CB6B; --warn-bg:#3A2E0E; --bad:#FF9D96; --bad-bg:#42191A; --off:#9BABBB; --off-bg:#223344;
  --chat:#0B141A; --bubble:#005C4B; --bubble-ink:#E9EDEF; --bubble-link:#53BDEB;
  --p-host:#9BABBB; --p-hotel:#7DB8F5; --p-date:#7FD9A2; --p-occ:#C5A6F2; --p-cp:#FF9D96; --p-partner:#F3CB6B; --p-utm:#6FD3DC;
  color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0E1924; --surface:#162534; --sunk:#111E2B; --line:#2B3D50;
  --ink:#E8EEF4; --muted:#9BABBB;
  --navy:#0A1520; --on-navy:#FFFFFF; --navy-soft:#9BB0C6;
  --gold:#FBC021; --on-gold:#1B2A3A; --gold-ink:#FBC021;
  --ok:#7FD9A2; --ok-bg:#143524; --warn:#F3CB6B; --warn-bg:#3A2E0E; --bad:#FF9D96; --bad-bg:#42191A; --off:#9BABBB; --off-bg:#223344;
  --chat:#0B141A; --bubble:#005C4B; --bubble-ink:#E9EDEF; --bubble-link:#53BDEB;
  --p-host:#9BABBB; --p-hotel:#7DB8F5; --p-date:#7FD9A2; --p-occ:#C5A6F2; --p-cp:#FF9D96; --p-partner:#F3CB6B; --p-utm:#6FD3DC;
  color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

.top{background:var(--navy);color:var(--on-navy)}
.top .wrap{padding-block:22px 20px;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:end;justify-content:space-between}
.top h1{font-family:var(--display);font-weight:700;font-size:clamp(22px,3.2vw,30px);line-height:1.15;margin:0;text-wrap:balance}
.top h1 em{font-style:normal;color:var(--gold)}
.top p{margin:4px 0 0;color:var(--navy-soft);max-width:60ch}
.top .motor{font-family:var(--mono);font-size:12px;color:var(--navy-soft);letter-spacing:.02em}

.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:24px;padding-block:24px;align-items:start}
@media (max-width:920px){.grid{grid-template-columns:minmax(0,1fr)}}
.steps{display:flex;flex-direction:column;gap:16px;min-width:0}
.step{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px}
.step > header{display:flex;gap:10px;align-items:baseline;margin-bottom:12px;flex-wrap:wrap}
.num{font-family:var(--display);font-weight:700;font-size:13px;background:var(--gold);color:var(--on-gold);width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;flex:none;transform:translateY(2px)}
.step h2{font-family:var(--display);font-weight:600;font-size:17px;margin:0}
.hint{color:var(--muted);font-size:13px}
.step > header .hint{margin-left:auto}
.linkbtn{background:none;border:0;padding:0;color:var(--p-hotel);font-weight:600;font-size:13px;text-decoration:underline;text-underline-offset:3px}

.hotels{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:8px}
.hotel{position:relative;text-align:left;background:var(--sunk);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:1px;min-width:0}
.hotel small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.hotel b{font-family:var(--display);font-weight:600;font-size:15px;line-height:1.2}
.hotel code{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:4px}
.hotel[aria-pressed="true"]{background:var(--surface);border-color:var(--gold);box-shadow:inset 0 0 0 1.5px var(--gold)}
.hotel[aria-pressed="true"]::after{content:"✓";position:absolute;top:8px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--gold);color:var(--on-gold);font-weight:700;font-size:12px;display:grid;place-items:center}
.hotel.samba small{color:var(--p-utm)}

.row{display:flex;flex-wrap:wrap;gap:12px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 150px}
.field.narrow{flex:0 1 120px}
.field label,.lab{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em}
input[type=text],input[type=date],input[type=number],select,textarea{background:var(--sunk);border:1.5px solid var(--line);border-radius:9px;padding:9px 10px;width:100%;min-width:0}
input.mono{font-family:var(--mono);font-size:13.5px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
.chip{background:var(--sunk);border:1.5px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:500}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
:root[data-theme="dark"] .chip[aria-pressed="true"]{border-color:var(--gold)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chip[aria-pressed="true"]{border-color:var(--gold)}}
.stepper{display:flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:9px;background:var(--sunk);overflow:hidden}
.stepper button{background:none;border:0;width:38px;height:38px;font-size:18px;font-weight:600}
.stepper output{flex:1;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.nights{font-family:var(--display);font-weight:600}

.promos{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.promo{text-align:left;background:var(--sunk);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.promo[aria-pressed="true"]{background:var(--surface);border-color:var(--gold);box-shadow:inset 0 0 0 1.5px var(--gold)}
.promo .pname{font-family:var(--display);font-weight:600;font-size:14.5px;line-height:1.2}
.promo .pcode{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--p-cp)}
.promo .pline{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.promo.dim{opacity:.72}
.pill{display:inline-block;border-radius:999px;padding:1px 8px;font-size:11.5px;font-weight:600;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.soon{background:var(--warn-bg);color:var(--warn)} .pill.over{background:var(--bad-bg);color:var(--bad)} .pill.off{background:var(--off-bg);color:var(--off)}
.note{border-radius:9px;padding:8px 11px;font-size:13.5px;margin-top:10px}
.note.warn{background:var(--warn-bg);color:var(--warn)} .note.bad{background:var(--bad-bg);color:var(--bad)} .note.info{background:var(--off-bg);color:var(--ink)}
.empty{border:1.5px dashed var(--line);border-radius:10px;padding:14px;color:var(--muted);font-size:13.5px}
details.adv{margin-top:12px}
details.adv summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--muted)}
details.adv .row{margin-top:10px}
.check{display:flex;gap:8px;align-items:center;font-size:13.5px}

.out{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);display:flex;flex-direction:column;gap:14px;min-width:0}
@media (max-width:920px){.out{position:static}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;min-width:0}
.card h3{font-family:var(--display);font-weight:600;font-size:14px;margin:0 0 10px;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.url{font-family:var(--mono);font-size:12.5px;line-height:1.7;background:var(--sunk);border:1px solid var(--line);border-radius:9px;padding:10px 12px;overflow-wrap:anywhere;word-break:break-all;user-select:all}
.url .h{color:var(--p-host)} .url .ho{color:var(--p-hotel);font-weight:600} .url .d{color:var(--p-date);font-weight:600} .url .o{color:var(--p-occ);font-weight:600} .url .c{color:var(--p-cp);font-weight:600} .url .pa{color:var(--p-partner);font-weight:600} .url .u{color:var(--p-utm)}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.btn{border-radius:9px;padding:9px 14px;font-weight:600;border:1.5px solid var(--line);background:var(--surface);text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.btn.primary{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.btn.danger{color:var(--bad)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.phone{background:var(--chat);border-radius:11px;padding:14px 12px 16px;display:flex;justify-content:flex-end}
.bubble{background:var(--bubble);color:var(--bubble-ink);border-radius:10px 0 10px 10px;padding:8px 10px 6px;max-width:94%;font-size:14.2px;line-height:1.42;overflow-wrap:anywhere;box-shadow:0 1px .5px rgba(0,0,0,.18)}
.bubble .lk{color:var(--bubble-link);word-break:break-all}
.bubble .tm{display:block;text-align:right;font-size:11px;opacity:.6;margin-top:2px}
.tones{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}

.cat{padding-block:8px 48px}
.cat-head{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:end;margin-bottom:12px}
.cat h2{font-family:var(--display);font-weight:600;font-size:20px;margin:0}
.tablebox{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px}
table{border-collapse:collapse;width:100%;min-width:720px;font-size:13.5px}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);text-align:left;font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line)}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
td.m{font-family:var(--mono);font-size:12.5px}
td .mini{background:none;border:0;padding:2px 4px;font-size:13px;font-weight:600;color:var(--p-hotel);text-decoration:underline;text-underline-offset:3px}
td .mini.del{color:var(--bad)}
#pf{background:var(--surface);border:1.5px solid var(--gold);border-radius:14px;padding:16px;margin-bottom:12px}
#pf h3{font-family:var(--display);font-size:15px;margin:0 0 12px}
#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translateX(-50%);background:var(--navy);color:var(--on-navy);border:1px solid var(--gold);padding:9px 16px;border-radius:999px;font-weight:600;font-size:14px;z-index:20}
#fallback{position:absolute;left:-9999px;top:0}

html{color-scheme:light dark}
body{margin:0}
.foot{padding-block:4px 40px;font-size:13.5px}
.foot a,.plain a{color:var(--p-hotel);font-weight:600}
.gate{position:fixed;inset:0;background:var(--bg);z-index:30;display:grid;place-items:center;padding:16px}
.gatecard{width:min(380px,100%)}
.gatecard h2{font-family:var(--display);font-size:20px;margin:0 0 4px}
.gatecard .field{margin-top:14px}
.sec{padding-block:24px 8px}
.sec h2{font-family:var(--display);font-weight:600;font-size:20px;margin:0}
.sum{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
.sum .chip{cursor:default}
[hidden]{display:none!important}
img{max-width:100%}