/* Layout: app max 440px, top bar, scrolling content, six bottom tabs, and detail sheets. */
:root{
  --bg:#EAF0F6; --surface:#FFFFFF; --surface2:#F3F7FB; --ink:#0B2236; --ink2:#46596B; --line:#CFD9E3;
  --brand:#0370CD; --brand-ink:#FFFFFF; --navy:#003D6B; --tint:#DCEBF8;
  --ok:#00508F; --ok-bg:#D6E8F8; --warn:#8A4200; --warn-bg:#FFE3C2; --bad:#9E1C17; --bad-bg:#FADAD8; --muted-bg:#E3E9EF;
  --scrim:rgba(6,20,33,.55);
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:12px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#07121C; --surface:#0F2133; --surface2:#14293E; --ink:#ECF3FA; --ink2:#A8BBCD; --line:#27425C;
  --brand:#5FB1F6; --brand-ink:#04192B; --navy:#A9D5FB; --tint:#163856;
  --ok:#93CCFF; --ok-bg:#123B60; --warn:#FFBE70; --warn-bg:#4A2B07; --bad:#FFA39B; --bad-bg:#521713; --muted-bg:#1C334A;
  --scrim:rgba(0,0,0,.65); color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#07121C; --surface:#0F2133; --surface2:#14293E; --ink:#ECF3FA; --ink2:#A8BBCD; --line:#27425C;
  --brand:#5FB1F6; --brand-ink:#04192B; --navy:#A9D5FB; --tint:#163856;
  --ok:#93CCFF; --ok-bg:#123B60; --warn:#FFBE70; --warn-bg:#4A2B07; --bad:#FFA39B; --bad-bg:#521713; --muted-bg:#1C334A;
  --scrim:rgba(0,0,0,.65); color-scheme:dark }

html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0;text-wrap:balance}
h1{font-family:var(--font-display);font-weight:700;font-size:1.55rem;line-height:1.15;color:var(--navy)}
h2{font-family:var(--font-display);font-weight:600;font-size:1.15rem;line-height:1.2;color:var(--navy)}
h3{font-size:.98rem;font-weight:600}
p{margin:0}
.eyebrow{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink2)}
.sub{color:var(--ink2);font-size:.88rem}

.app{max-width:440px;margin:0 auto;height:100%;display:flex;flex-direction:column;background:var(--bg);position:relative}
@media (min-width:480px){.app{border-left:1px solid var(--line);border-right:1px solid var(--line)}}

/* Top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface);border-bottom:1px solid var(--line);
  padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
.brand img{height:24px;width:auto;display:block}
.brand b{font-family:var(--font-display);font-size:1.05rem;color:var(--navy)}
.brand span{font-size:.75rem;color:var(--ink2);display:block;line-height:1.1}
.who{display:flex;align-items:center;gap:8px}
.who .name{font-size:.8rem;font-weight:600;text-align:right;line-height:1.15}
.who .name small{display:block;font-weight:400;color:var(--ink2)}
.linkbtn{background:none;border:0;color:var(--brand);font-weight:600;font-size:.85rem;padding:6px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

main{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-block:18px 28px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.stack{display:flex;flex-direction:column;gap:14px}
.stack-s{display:flex;flex-direction:column;gap:8px}

/* Bottom nav */
nav.tabs{display:grid;grid-template-columns:repeat(7,1fr);background:var(--surface);border-top:1px solid var(--line);
  padding-left:max(4px,env(safe-area-inset-left,0px));padding-right:max(4px,env(safe-area-inset-right,0px))}
nav.tabs.personal-tabs{grid-template-columns:1fr}
nav.tabs:not(.personal-tabs) a{font-size:.62rem}
nav.tabs button{background:none;border:0;padding:8px 2px 9px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;color:var(--ink2);font-size:.7rem;position:relative}
nav.tabs button svg{width:22px;height:22px}
nav.tabs button[aria-current="page"]{color:var(--brand);font-weight:700}
nav.tabs button[aria-current="page"]::before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;background:var(--brand);border-radius:0 0 3px 3px}
nav.tabs .dot{position:absolute;top:5px;right:calc(50% - 18px);min-width:17px;height:17px;border-radius:9px;background:var(--warn);color:var(--surface);font-size:.65rem;font-weight:700;display:grid;place-items:center;padding:0 4px}

/* Cards & rows */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.card.tint{background:var(--tint);border-color:transparent}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.row > .grow{min-width:0;flex:1}
.list{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.item{display:flex;align-items:center;gap:12px;padding:12px 14px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;width:100%;cursor:pointer}
.item:last-child{border-bottom:0}
.item:hover{background:var(--surface2)}
.item .grow{min-width:0;flex:1}
.item .t{font-weight:600}
.item .s{font-size:.82rem;color:var(--ink2)}
.item .amt{font-weight:600;text-align:right;white-space:nowrap}
.chev{color:var(--ink2);flex:none}

/* Chips: estado con símbolo + texto, nunca solo color */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;border:1.5px solid transparent;line-height:1.3}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad)}
.chip.mut{background:var(--muted-bg);color:var(--ink2)}
.chip i{font-style:normal}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:10px;border:1.5px solid var(--brand);background:var(--brand);color:var(--brand-ink);font-weight:700;padding:11px 16px;cursor:pointer;min-height:44px}
.btn.sec{background:transparent;color:var(--brand)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.full{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btns{display:flex;gap:8px}
.btns > *{flex:1}

/* Segmented */
.seg{display:flex;background:var(--muted-bg);border-radius:10px;padding:3px;gap:3px;overflow-x:auto}
.seg button{flex:1;border:0;background:none;padding:8px 10px;border-radius:8px;font-size:.84rem;font-weight:600;color:var(--ink2);cursor:pointer;white-space:nowrap}
.seg button[aria-selected="true"]{background:var(--surface);color:var(--navy);box-shadow:0 1px 2px rgba(0,0,0,.12)}

/* Big figure */
.fig{font-family:var(--font-display);font-weight:700;font-size:1.9rem;color:var(--navy);line-height:1}
.kv{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:.9rem}
.kv dt{color:var(--ink2)}
.kv dd{margin:0;text-align:right;font-weight:600}
.kv .tot{border-top:1px solid var(--line);padding-top:8px;font-weight:700;color:var(--ink)}

/* Lines table */
.lines{width:100%;border-collapse:collapse;font-size:.85rem}
.lines td{padding:8px 0;border-bottom:1px solid var(--line);vertical-align:top}
.lines td:last-child{text-align:right;white-space:nowrap;padding-left:10px;font-weight:600}
.lines .q{color:var(--ink2);font-size:.78rem}
.lines tr.total td{border-bottom:0;font-weight:700;font-size:.95rem;padding-top:10px}

/* Forms */
label.f{display:flex;flex-direction:column;gap:5px;font-size:.84rem;font-weight:600}
.f input,.f select,.f textarea{border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px;font-weight:400;font-size:1rem;min-height:44px;width:100%}
.f textarea{min-height:70px;resize:vertical}
.f .hint{font-weight:400;color:var(--ink2);font-size:.78rem}
.err{color:var(--bad);font-size:.84rem;font-weight:600}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Callouts */
.note{display:flex;gap:10px;padding:12px;border-radius:10px;font-size:.86rem;background:var(--surface2);border:1px solid var(--line)}
.note.warn{background:var(--warn-bg);border-color:transparent;color:var(--ink)}
.note.ok{background:var(--ok-bg);border-color:transparent}
.note.bad{background:var(--bad-bg);border:1.5px solid var(--bad)}
.note .ic{font-weight:800;flex:none;width:20px;text-align:center}

/* Timeline */
.tl{display:flex;flex-direction:column;gap:0;padding-left:4px}
.tl li{list-style:none;display:grid;grid-template-columns:22px 1fr;gap:10px;padding-bottom:12px;position:relative}
.tl li::before{content:"";position:absolute;left:10px;top:20px;bottom:0;width:2px;background:var(--line)}
.tl li:last-child::before{display:none}
.tl .b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:800;border:2px solid var(--line);background:var(--surface);color:var(--ink2)}
.tl .b.done{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.tl .b.now{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.tl .b.no{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.tl ul{margin:0;padding:0}
.tl .lt{font-weight:600;font-size:.9rem}
.tl .ls{font-size:.8rem;color:var(--ink2)}

/* Itinerary */
.day{display:flex;flex-direction:column;gap:6px}
.slot{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:start;padding:8px 10px;border-radius:8px}
.slot .h{font-size:.8rem;font-weight:700;color:var(--ink2);padding-top:1px}
.slot.mine{background:var(--tint);border-left:4px solid var(--brand)}
.slot.mine .who2{font-weight:700;color:var(--brand)}
.slot .who2{font-size:.74rem;color:var(--ink2)}

/* Checklist */
.check{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.check:last-child{border-bottom:0}
.check input{width:22px;height:22px;accent-color:var(--brand);flex:none;margin:1px 0 0}

/* Bars */
.bar{height:10px;border-radius:5px;background:var(--muted-bg);overflow:hidden}
.bar > span{display:block;height:100%;background:var(--brand)}
.bar.low > span{background:var(--warn)}


/* Sheet */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:40}
.sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(440px,100%);max-height:90%;overflow-y:auto;background:var(--surface);
  border-radius:18px 18px 0 0;z-index:41;padding-top:8px;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));animation:up .22s ease-out}
.sheet .grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 10px}
.sheet-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
.x{background:var(--muted-bg);border:0;border-radius:50%;width:34px;height:34px;flex:none;cursor:pointer;font-size:1.1rem;color:var(--ink)}
@keyframes up{from{transform:translate(-50%,30px);opacity:.4}to{transform:translate(-50%,0);opacity:1}}

.toast{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:10px;font-weight:600;font-size:.88rem;z-index:60;max-width:min(400px,90%);text-align:center}
.demo{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--warn)}
.back{background:none;border:0;color:var(--brand);font-weight:600;padding:4px 0;cursor:pointer;display:inline-flex;gap:4px;align-items:center}
.pill-n{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:11px;background:var(--warn-bg);color:var(--warn);font-weight:800;font-size:.78rem;padding:0 6px}
.list .tarea{color:var(--ink);text-decoration:none}
.tarea .tarea-icon{display:inline-grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;background:var(--warn-bg);color:var(--warn);font-size:.72rem;font-weight:800}
.list .reservation-row{min-height:68px;color:var(--ink);text-decoration:none}
button.reservation-row{font:inherit}
.reservation-row .grow{display:flex;flex-direction:column;gap:4px}
.reservation-row .t{font-weight:700;line-height:1.2}
.reservation-row .s{font-size:.78rem;color:var(--ink2);line-height:1.3}
.reservation-row .chip{flex:none;font-size:.68rem;padding:3px 7px}
.programs-page{gap:14px}
.programs-page h1{font-size:1.4rem;line-height:1.15}
.programs-page section{gap:8px}
.programs-page .program-row{min-height:68px;padding:10px 11px;color:var(--ink);text-decoration:none}
.program-row .grow{display:flex;flex-direction:column;gap:3px}
.program-row .t{font-size:.86rem;font-weight:700;line-height:1.2}
.program-row .s{font-size:.72rem;color:var(--ink2);line-height:1.3}
.program-row .chip{flex:none;font-size:.65rem;padding:3px 6px}
.reservation-empty{cursor:default}
.reservation-dialog{margin:0 auto;max-height:90dvh;border:0;color:var(--ink)}
.reservation-dialog::backdrop{background:var(--scrim)}
.reservation-details{margin:16px 0}
.reservation-details dd{overflow-wrap:anywhere}
.reservation-reason{margin-top:10px}
.reservation-actions{align-items:end;margin-top:16px}
.reservation-actions form{min-width:0}
.reservation-actions label.f{font-size:.76rem}
.reservation-actions textarea{font-size:.84rem;min-height:64px}
.invoice-page{gap:14px}
.invoice-page h1{font-size:1.4rem;line-height:1.15}
.invoice-cycle{gap:8px}
.invoice-row{min-height:70px;padding:10px 11px;cursor:default}
.invoice-row .grow{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.invoice-row .t{font-size:.82rem;font-weight:700;line-height:1.2}
.invoice-row .s{font-size:.7rem;color:var(--ink2);line-height:1.3}
.invoice-row .chip{font-size:.64rem;padding:2px 7px}
.invoice-row .amt{font-size:.78rem;white-space:nowrap}
.invoice-extra{display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--surface2)}
.invoice-extra .sub{width:100%;font-size:.76rem}
.invoice-dialog{border:0;color:var(--ink)}
.invoice-form{margin-top:12px}
@media (max-width:360px){.reservation-row{gap:7px;padding:11px 10px}.reservation-row .chip{font-size:.63rem;padding:3px 5px}}

/* Login */
.login{flex:1;display:flex;flex-direction:column;justify-content:center;gap:22px;padding-block:32px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.login .logo{height:54px;width:auto;align-self:flex-start}
.code{letter-spacing:.5em;font-size:1.5rem !important;text-align:center;font-weight:700 !important}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* Enlaces de navegación y formularios del portal */
nav.tabs a{background:none;border:0;padding:8px 2px 9px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;color:var(--ink2);font-size:.7rem;position:relative;text-decoration:none;min-width:0}
nav.tabs a[aria-current="page"]{color:var(--brand);font-weight:700}
nav.tabs a[aria-current="page"]::before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;background:var(--brand);border-radius:0 0 3px 3px}
.tab-ic{font-size:1.35rem;line-height:1.05;height:22px;display:grid;place-items:center}
.seg a{flex:1;border:0;background:none;padding:8px 10px;border-radius:8px;font-size:.84rem;font-weight:600;color:var(--ink2);cursor:pointer;white-space:nowrap;text-decoration:none;text-align:center}
.seg a[aria-selected="true"]{background:var(--surface);color:var(--navy);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.auth-main{display:flex;flex-direction:column;justify-content:center;gap:14px}
.auth-main .login{flex:none}
.profile-option input{width:20px;height:20px;accent-color:var(--brand);flex:none}
.profile-option{cursor:pointer}
.profile-option .s{display:block}
.top form{margin:0}
.top .brand{text-decoration:none}
.program-tabs{scrollbar-width:thin}
.pagination-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:100%;margin:8px 0}
.pagination-summary{font-size:.78rem;color:var(--ink2);text-align:center}
.pagination{display:flex;align-items:center;justify-content:flex-start;gap:4px;max-width:100%;overflow-x:auto;list-style:none;padding:2px 0 6px;margin:0}
.pagination li{flex:none}
.pagination .page-link,.pagination .page-current,.pagination .page-disabled,.pagination .page-ellipsis{display:grid;place-items:center;min-width:34px;height:34px;padding:0 7px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:.82rem;line-height:1;text-decoration:none}
.pagination .page-link:hover{background:var(--surface2);border-color:var(--brand)}
.pagination .page-current{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:700}
.pagination .page-disabled{color:var(--ink2);opacity:.5}
.pagination .page-ellipsis{min-width:22px;padding:0;border-color:transparent;background:transparent}
@media (min-width:480px){.auth-main{border-left:1px solid var(--line);border-right:1px solid var(--line)}}

/* Contacto de WhatsApp para proveedores */
.whatsapp-help{position:absolute;right:16px;bottom:calc(70px + env(safe-area-inset-bottom,0px));z-index:20}
.whatsapp-help summary{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border-radius:999px;background:#128C7E;color:#fff;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.22);cursor:pointer;list-style:none}
.whatsapp-help summary::-webkit-details-marker{display:none}
.whatsapp-help summary svg{width:22px;height:22px;fill:currentColor}
.whatsapp-contacts{position:absolute;right:0;bottom:calc(100% + 10px);width:min(300px,calc(100vw - 32px));padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 8px 28px rgba(0,0,0,.2)}
.whatsapp-contacts .eyebrow{margin:0 0 8px}
.whatsapp-contacts a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 4px;color:var(--ink);text-decoration:none;border-top:1px solid var(--line)}
.whatsapp-contacts a:hover{color:var(--brand)}
.whatsapp-contacts strong,.whatsapp-contacts small{display:block}
.whatsapp-contacts small{margin-top:2px;color:var(--ink2);font-size:.78rem}

/* Calendario mensual de programas del proveedor */
.calendar-section{gap:10px}
.calendar-heading{flex-wrap:wrap}
.calendar-nav{display:flex;align-items:center;gap:10px}
.calendar-nav a{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--brand);font-size:1.25rem;line-height:1;text-decoration:none}
.calendar-nav strong{min-width:116px;text-align:center;text-transform:capitalize;font-size:.85rem}
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:var(--line)}
.calendar-weekday{padding:7px 2px;background:var(--surface2);color:var(--ink2);font-size:.65rem;font-weight:700;text-align:center}
.calendar-empty,.calendar-day{min-width:0;min-height:76px;background:var(--surface)}
.calendar-day{padding:5px 3px}
.calendar-day-number{display:block;margin-bottom:3px;font-size:.7rem;font-weight:700}
.calendar-event{display:block;margin-top:3px;padding:3px;border-radius:4px;background:var(--tint);color:var(--navy);font-size:.58rem;line-height:1.15;text-decoration:none;overflow-wrap:anywhere}
.calendar-event:hover{background:var(--brand);color:var(--brand-ink)}
.calendar-empty-message{padding:8px 2px}