/* Piel del producto OKTO Nexus (recreación fiel del panel: HeroUI + tokens de theme.css).
   Todo lo que va dentro de .ui usa Montserrat y los colores del panel, no los de la web. */

.ui {
  font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #0f172a;
  background: #eef1f6;
  --s: #fafbfd; --s2: #f2f5f9; --s3: #e8edf4; --ov: #fdfdfe;
  --mu: #5b6879; --ac: #4f46e5; --acs: #e0e0f9; --acsf: #3c38ad;
  --ok: #047857; --oks: #d5e7e4; --oksf: #094e44;
  --wa: #f59e0b; --was: #f9edd9; --wasf: #895f1a;
  --da: #dc2626; --das: #f5dbdd; --dasf: #912121;
  --bd: #e2e8f0; --sp: #eef2f7; --fb: #d8dfe9; --def: #f1f5f9;
  --info: #e0f2fe; --infof: #075985; --ind: #e0e7ff; --indf: #3730a3; --pur: #f3e8ff; --purf: #6b21a8; --pink: #fce7f3; --pinkf: #9d174d;
  --sh: 0 2px 4px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06), 0 0 1px rgba(0,0,0,.06);
  --ovsh: 0 2px 8px rgba(0,0,0,.06), 0 -6px 12px rgba(0,0,0,.03), 0 14px 28px rgba(0,0,0,.08);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.ui *, .ui *::before, .ui *::after { box-sizing: border-box; }
.ui p, .ui h1, .ui h2, .ui h3, .ui ul { margin: 0; }
.ui ul { padding: 0; list-style: none; }
.ui svg.i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui .tn { font-variant-numeric: tabular-nums; }

/* Shell: sidebar 256 + topbar 64 */
.ui-shell { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100%; }
.ui-shell.compact { grid-template-columns: 68px minmax(0, 1fr); }
.ui-side { background: var(--s); border-right: 1px solid var(--bd); display: flex; flex-direction: column; }
.ui-side-head { height: 64px; border-bottom: 1px solid var(--bd); display: flex; align-items: center; gap: 12px; padding: 0 16px; }
.ui-mark { width: 36px; height: 36px; border-radius: 12px; background: var(--ac); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 16px; flex: none; }
.ui-side-head b { font-weight: 800; letter-spacing: -.02em; font-size: 16px; display: block; line-height: 1.1; }
.ui-side-head small { font-size: 12px; color: var(--mu); display: block; }
.ui-nav { padding: 12px; }
.ui-nav .grp { padding: 0 12px; margin: 0 0 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--mu); line-height: 16px; }
.ui-nav ul + .grp { margin-top: 16px; }
.ui-nav li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; font-size: 14px; color: var(--mu); margin-bottom: 4px; white-space: nowrap; }
.ui-nav li svg { width: 20px; height: 20px; }
.ui-nav li.on { background: var(--acs); color: var(--acsf); font-weight: 600; }
.ui-nav li.on svg { color: var(--ac); }
.ui-nav li .bdg { margin-left: auto; }
.compact .ui-nav li { justify-content: center; padding: 8px 0; }
.compact .ui-nav li span, .compact .ui-nav .grp, .compact .ui-side-head div { display: none; }
.compact .ui-side-head { justify-content: center; padding: 0; }
.ui-side-foot { margin-top: auto; border-top: 1px solid var(--bd); padding: 8px 12px; display: flex; align-items: center; gap: 10px; }
.ui-av { width: 32px; height: 32px; border-radius: 50%; background: var(--acs); color: var(--acsf); display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.ui-av.g { background: var(--oks); color: var(--oksf); }
.ui-av.w { background: var(--was); color: var(--wasf); }
.ui-av.d { background: var(--def); color: #18181b; }
.ui-side-foot b { display: block; font-size: 14px; font-weight: 600; }
.ui-side-foot small { font-size: 12px; color: var(--mu); }

.ui-top { height: 64px; background: var(--s); border-bottom: 1px solid var(--bd); display: flex; align-items: center; gap: 12px; padding: 0 24px; }
.ui-search { flex: 1; max-width: 448px; margin-left: 8px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--bd); background: var(--s2); border-radius: 12px; padding: 6px 12px; color: var(--mu); font-size: 14px; }
.ui-search .kbd { margin-left: auto; font-size: 11px; border: 1px solid var(--bd); border-radius: 6px; padding: 1px 6px; background: var(--s); }
.ui-top-r { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 14px; }
.ui-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 12px; border: 1px solid var(--bd); background: var(--s); }
.ui-main { padding: 24px; min-width: 0; }
.ui-ph { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ui-ph h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.ui-ph .sub { font-size: 14px; color: var(--mu); margin-top: 2px; }
.ui-ph .acts { display: flex; gap: 8px; flex: none; }
.ui-kick { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--acsf); }
.ui-tile { width: 44px; height: 44px; border-radius: 14px; background: var(--acs); color: var(--acsf); display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px rgba(60,56,173,.12); }
.ui-tile.ok { background: var(--oks); color: var(--oksf); }
.ui-tile.wa { background: var(--was); color: var(--wasf); }

/* Botones */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 24px; font-size: 14px; font-weight: 500; white-space: nowrap; border: 0; }
.ui-btn.p { background: var(--ac); color: #fff; }
.ui-btn.s { background: var(--def); color: var(--acsf); }
.ui-btn.t { background: var(--def); color: #0f172a; }
.ui-btn.o { background: transparent; border: 1px solid var(--bd); }
.ui-btn.g { background: transparent; }
.ui-btn.ok { background: var(--ok); color: #fff; }
.ui-btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
.ui-btn.ico { width: 36px; padding: 0; }
.ui-btn.ico.sm { width: 32px; }

/* Badges */
.bdg { display: inline-flex; align-items: center; gap: 4px; border-radius: 16px; padding: 0 8px; font-size: 12px; line-height: 20px; font-weight: 500; white-space: nowrap; }
.bdg.ok { background: var(--oks); color: var(--oksf); }
.bdg.wa { background: var(--was); color: var(--wasf); }
.bdg.er { background: var(--das); color: var(--dasf); }
.bdg.in { background: var(--info); color: var(--infof); }
.bdg.ix { background: var(--ind); color: var(--indf); }
.bdg.pu { background: var(--pur); color: var(--purf); }
.bdg.pk { background: var(--pink); color: var(--pinkf); }
.bdg.df { background: var(--def); color: #18181b; }
.bdg.ac { background: var(--acs); color: var(--acsf); }
.bdg.xs { font-size: 11px; line-height: 18px; padding: 0 6px; }
.bdg .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Marcas de canal */
.cm { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; font-size: 9px; font-weight: 800; color: #fff; flex: none; line-height: 1; }
.cm.airbnb { background: #d9363c; }
.cm.booking { background: #003580; }
.cm.vrbo { background: #1668e3; }
.cm.expedia { background: #ffc94d; color: #1d2b4a; }
.cm.direct { background: #0f766e; }
.cm.lg { width: 20px; height: 20px; font-size: 11px; border-radius: 5px; }

/* Tarjetas, tiles, tablas */
.ui-card { background: var(--s); border: 1px solid var(--bd); border-radius: 8px; box-shadow: var(--sh); }
.ui-card2 { background: var(--s); border: 1px solid var(--bd); border-radius: 16px; }
.ui-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ui-stat { border: 1px solid var(--bd); background: var(--s); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.ui-stat .k { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--mu); display: flex; align-items: center; gap: 6px; }
.ui-stat .k i { width: 20px; height: 20px; border-radius: 6px; background: var(--acs); display: inline-grid; place-items: center; color: var(--acsf); }
.ui-stat .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-stat.ac .v { color: var(--ac); }
.ui-stat.da { border-color: var(--da); background: var(--das); }
.ui-stat.da .v { color: var(--dasf); }
.ui-stat.wa .v { color: var(--wasf); }
.ui-table-wrap { border: 1px solid var(--bd); border-radius: 16px; background: var(--s); overflow: hidden; }
.ui-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.ui-table th { padding: 10px 16px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--mu); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--bd); background: var(--s); }
.ui-table td { padding: 12px 16px; border-bottom: 1px solid var(--sp); white-space: nowrap; vertical-align: middle; }
.ui-table tr:last-child td { border-bottom: 0; }
.ui-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.ui-table.dense th { padding: 8px 12px; }
.ui-table.dense td { padding: 10px 12px; white-space: normal; }
.ui-table.dense .bdg { white-space: nowrap; }
.ui-table tr.hl td { background: rgba(79,70,229,.06); }
.ui-table .who { display: flex; align-items: center; gap: 8px; }
.ui-table .mu { color: var(--mu); font-size: 12.5px; }
.ui-seg { display: inline-flex; background: var(--def); border-radius: 20px; padding: 4px; gap: 2px; margin-bottom: 16px; }
.ui-seg span { height: 32px; padding: 0 14px; border-radius: 24px; display: inline-flex; align-items: center; font-size: 13px; color: var(--mu); }
.ui-seg span.on { background: var(--ac); color: #fff; font-weight: 500; }

/* Realce de la reserva seguida */
.ring { position: relative; }
.ring::after { content: ''; position: absolute; inset: -5px; border: 2px solid var(--ac); border-radius: 10px; box-shadow: 0 0 0 4px rgba(79,70,229,.14); pointer-events: none; }
.ring-tag { position: absolute; top: -30px; left: -6px; background: var(--ac); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; white-space: nowrap; letter-spacing: .01em; }
.ring-tag::after { content: ''; position: absolute; left: 10px; bottom: -5px; border: 5px solid transparent; border-top-color: var(--ac); border-bottom: 0; }

/* Calendario propiedades × días */
.cal { background: var(--s); border: 1px solid var(--bd); border-radius: 16px; box-shadow: var(--sh); overflow: hidden; }
.cal-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--bd); font-size: 13px; }
.cal-bar .mon { font-weight: 600; font-size: 14px; }
.cal-bar .ui-btn { height: 30px; }
.cal-grid { display: grid; grid-template-columns: 200px 1fr; }
.cal-props { border-right: 1px solid var(--bd); }
.cal-props .h { height: 33px; border-bottom: 1px solid var(--sp); }
.cal-props .h2 { height: 36px; border-bottom: 1px solid var(--bd); }
.cal-props .p { height: 40px; display: flex; align-items: center; padding: 0 10px; font-size: 13px; border-bottom: 1px solid var(--sp); gap: 8px; }
.cal-props .p small { color: var(--mu); font-size: 11px; margin-left: auto; }
.cal-days { position: relative; overflow: hidden; }
.cal { --dw: 40px; }
.cal-row { display: grid; grid-auto-flow: column; grid-auto-columns: var(--dw); position: relative; }
.cal-row.mh { height: 33px; }
.cal-row.dh { height: 36px; border-bottom: 1px solid var(--bd); }
.cal-row.pr { height: 40px; border-bottom: 1px solid var(--sp); }
.cal-row > div { border-right: 1px solid var(--sp); position: relative; }
.cal-row.mh > div { border-right: 0; font-size: 11px; color: var(--mu); padding: 8px 6px 0; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.cal-row.dh > div { text-align: center; padding-top: 3px; font-size: 13px; line-height: 1.1; }
.cal-row.dh > div small { display: block; font-size: 10px; color: var(--mu); }
.cal-row > div.we { background: rgba(15,23,42,.05); }
.cal-row > div.td { background: rgba(79,70,229,.12); box-shadow: inset 2px 0 0 var(--ac); }
.cal-row.dh > div.td { color: var(--ac); font-weight: 700; }
.cal-row > div .pz { position: absolute; right: 3px; bottom: 2px; font-size: 10px; color: var(--mu); }
.bar { position: absolute; top: 4px; bottom: 4px; left: calc(var(--s, 0) * var(--dw) + 2px); width: calc(var(--n, 1) * var(--dw) - 4px); border-radius: 6px; font-size: 12px; font-weight: 500; color: #fff; display: flex; align-items: center; gap: 6px; padding: 0 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bar.airbnb { background: #e11d48; }
.bar.booking { background: #0369a1; }
.bar.direct { background: #f59e0b; color: #14161f; }
.bar.vrbo { background: #7e22ce; }
.bar.owner { background: #047857; }
.bar.olax { background: #4f46e5; }
.bar.block { background: repeating-linear-gradient(-45deg, #94a3b8 0 3px, transparent 3px 6px); color: #475569; }
.bar.req { background: rgba(245,158,11,.14); border: 2px dashed var(--wa); color: var(--wasf); }
.bar .cm { width: 14px; height: 14px; font-size: 8px; border-radius: 3px; }
.bar.ring { overflow: visible; z-index: 2; }
.cal-row > .ring-tag { top: -26px; left: calc(var(--s) * var(--dw) - 4px); z-index: 3; }
.cal-bar .otas { margin-left: auto; color: var(--mu); font-size: 12px; }

/* Cajón de la reserva (hero) */
.ui-col { min-width: 0; }
.hero-work { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.drawer { background: var(--ov); border: 1px solid var(--bd); border-radius: 16px; box-shadow: var(--ovsh); padding: 14px 0 6px; font-size: 12.5px; }
.dr-head { display: flex; align-items: center; gap: 10px; padding: 0 14px 12px; border-bottom: 1px solid var(--sp); }
.dr-head b { display: block; font-size: 14px; font-weight: 700; }
.dr-head small { display: block; color: var(--mu); font-size: 11.5px; }
.dr-head .bdg { margin-left: auto; }
.dr-data { margin: 0; padding: 10px 14px; display: grid; gap: 6px; border-bottom: 1px solid var(--sp); }
.dr-data div { display: grid; grid-template-columns: 76px 1fr; gap: 8px; }
.dr-data dt { color: var(--mu); }
.dr-data dd { margin: 0; font-weight: 600; }
.drawer h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--mu); padding: 12px 14px 4px; }
.dr-log li { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; padding: 7px 14px; align-items: center; }
.dr-log li + li { border-top: 1px solid var(--sp); }
.dr-log .h { color: var(--mu); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.dr-log .w { font-weight: 500; line-height: 1.3; }
.dr-log .w small { display: block; font-weight: 400; color: var(--mu); font-size: 11px; }

/* Toast + actividad */
.toast { position: absolute; z-index: 5; background: var(--ov); border: 1px solid var(--bd); border-radius: 12px; box-shadow: var(--ovsh); padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; width: 320px; font-size: 13px; }
.toast .t { font-weight: 600; }
.toast .d { color: var(--mu); font-size: 12px; margin-top: 2px; }
.toast .ico { width: 32px; height: 32px; border-radius: 10px; background: var(--acs); color: var(--acsf); display: grid; place-items: center; flex: none; }
.act { position: absolute; z-index: 4; background: var(--ov); border: 1px solid var(--bd); border-radius: 12px; box-shadow: var(--ovsh); width: 340px; padding: 4px 0; font-size: 12.5px; }
.act h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--mu); padding: 8px 14px 6px; }
.act li { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; padding: 6px 14px; align-items: center; }
.act li + li { border-top: 1px solid var(--sp); }
.act .h { color: var(--mu); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.act .w { font-weight: 500; }
.act .w small { display: block; font-weight: 400; color: var(--mu); font-size: 11px; }

/* Kanban */
.kb { display: flex; gap: 16px; overflow: hidden; }
.kcol { min-width: 196px; width: 196px; border: 1px solid var(--bd); flex: none; background: transparent; }
.kcol .kh { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--bd); font-size: 14px; }
.kcol .kh .bdg { margin-left: auto; }
.kcol .kb-body { padding: 8px; display: grid; gap: 8px; min-height: 260px; align-content: start; }
.kh.wa { background: var(--was); color: var(--wasf); }
.kh.ac { background: var(--acs); color: var(--acsf); }
.kh.df { background: var(--def); color: #18181b; }
.kh.solid { background: var(--ac); color: #fff; }
.kh.ok { background: var(--oks); color: var(--oksf); }
.kh.mu { background: var(--def); color: var(--mu); }
.kcard { background: var(--s); border: 1px solid var(--bd); border-radius: 8px; box-shadow: var(--sh); padding: 12px; font-size: 13px; display: grid; gap: 6px; }
.kcard .r1 { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mu); }
.kcard .r1 .bdg { margin-left: auto; }
.kcard .r1 .bdg + .bdg { margin-left: 0; }
.kcard .r2 { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.kcard .r3 { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mu); }
.kcard .r3 .u { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; }

/* Chat */
.chat { display: grid; grid-template-columns: 208px 320px minmax(0, 1fr); gap: 12px; height: 100%; }
.chat .ui-card { padding: 8px; }
.chat .fold { padding: 8px 10px; border-radius: 12px; font-size: 13px; display: flex; align-items: center; gap: 8px; color: #0f172a; }
.chat .fold.on { background: var(--acs); color: var(--acsf); font-weight: 500; }
.chat .fold .n { margin-left: auto; font-family: ui-monospace, monospace; font-size: 10.5px; background: var(--def); border-radius: 10px; padding: 1px 6px; }
.conv { display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 12px; border-radius: 16px; position: relative; }
.conv.on { background: var(--acs); box-shadow: inset 0 0 0 1px var(--ac); }
.conv .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.conv .nm { font-size: 13.5px; font-weight: 500; display: flex; gap: 6px; }
.conv .nm .h { margin-left: auto; font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--mu); font-weight: 400; }
.conv .nm .pr { color: var(--mu); font-weight: 400; }
.conv .pv { font-size: 12px; color: var(--mu); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv .ch { display: flex; gap: 4px; margin-top: 5px; }
.conv .un { position: absolute; right: 12px; bottom: 14px; width: 20px; height: 20px; border-radius: 50%; background: var(--ac); color: #fff; font-size: 11px; display: grid; place-items: center; }
.thread { display: flex; flex-direction: column; padding: 0 !important; overflow: hidden; }
.thread .th { padding: 10px 16px; border-bottom: 1px solid var(--bd); display: flex; align-items: center; gap: 10px; }
.thread .th b { font-size: 15px; font-weight: 600; }
.thread .th small { display: block; font-size: 11.5px; color: var(--mu); }
.thread .th .ui-btn { margin-left: auto; }
.strip { background: var(--s2); padding: 8px 16px; font-size: 12px; color: var(--mu); display: flex; gap: 6px; }
.strip b { color: #0f172a; font-weight: 500; }
.msgs { background: var(--s2); padding: 14px 16px; display: grid; gap: 10px; flex: 1; }
.day { justify-self: center; background: var(--s3); color: var(--mu); font-size: 11px; padding: 2px 10px; border-radius: 12px; }
.bub { max-width: 30rem; padding: 10px 14px; border-radius: 20px; font-size: 13.5px; line-height: 1.5; }
.bub.me { background: var(--ac); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.bub.them { background: var(--s); border: 1px solid var(--bd); box-shadow: var(--sh); border-bottom-left-radius: 4px; }
.bub .tb { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--acsf); background: var(--acs); border-radius: 10px; padding: 1px 8px; margin-bottom: 6px; }
.bub.me .tb { background: rgba(255,255,255,.2); color: #fff; }
.bub .orig { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--bd); color: var(--mu); font-size: 12px; }
.bub.me .orig { border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.8); }
.who-l { display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--mu); font-weight: 600; margin-bottom: -4px; }
.note-int { justify-self: center; background: var(--was); box-shadow: inset 0 0 0 1px var(--wa); border-radius: 12px; padding: 8px 12px; font-size: 12.5px; max-width: 26rem; }
.note-int b { display: block; font-size: 11px; color: var(--wasf); }
.composer { border-top: 1px solid var(--bd); padding: 10px 12px; display: flex; align-items: center; gap: 8px; color: var(--mu); font-size: 13px; }
.composer .box { flex: 1; border: 1px solid var(--fb); border-radius: 12px; padding: 8px 12px; background: var(--s); }
.alert { margin: 10px 12px 0; border-radius: 12px; background: var(--acs); color: var(--acsf); padding: 8px 12px; font-size: 12.5px; display: flex; gap: 8px; align-items: center; }
.alert .ui-btn { margin-left: auto; height: 26px; font-size: 12px; padding: 0 10px; background: #fff; }

/* Detalle de liquidación (cajón) */
.liq { background: var(--s2); }
.liq-head { background: var(--s); border-bottom: 1px solid var(--bd); padding: 16px 16px 12px; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.liq-head .ui-tile { width: 40px; height: 40px; border-radius: 12px; }
.liq-head b { font-size: 18px; font-weight: 700; letter-spacing: -.02em; display: block; }
.liq-head small { font-size: 14px; color: var(--mu); display: block; margin-top: 2px; }
.liq-body { padding: 16px; display: grid; gap: 12px; }
.dcard { background: var(--s); border: 1px solid var(--bd); border-radius: 16px; padding: 14px; }
.dcard h4 { margin: 0 0 10px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--mu); }
.drow { display: flex; justify-content: space-between; font-size: 14px; padding: 5px 0; gap: 12px; }
.drow span:first-child { color: var(--mu); }
.drow .neg { color: var(--da); }
.drow.tot { border-top: 1px solid var(--bd); margin-top: 6px; padding-top: 10px; font-size: 16px; font-weight: 600; }
.drow.tot span:first-child { color: #0f172a; }
.liq-foot { background: var(--s); border-top: 1px solid var(--bd); padding: 12px 16px; display: flex; justify-content: flex-end; gap: 8px; }

/* Móviles (apps) */
.phone { width: 290px; max-width: 100%; aspect-ratio: 290 / 600; border-radius: 40px; background: #0f172a; padding: 8px; box-shadow: 0 30px 60px -30px rgba(15,23,42,.45), 0 0 0 1px rgba(15,23,42,.08); margin-inline: auto; }
.phone .scr { width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: #eef1f6; display: flex; flex-direction: column; font-size: 13px; position: relative; }
.phone .sb { height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; font-size: 12px; font-weight: 600; }
.phone .sb i { display: inline-flex; gap: 3px; align-items: flex-end; }
.phone .sb i b { width: 3px; background: currentColor; border-radius: 1px; display: block; }
.phone .body { flex: 1; overflow: hidden; padding: 6px 14px; display: grid; gap: 10px; align-content: start; }
.phone .tabbar { height: 60px; border-top: 1px solid var(--bd); background: var(--s); display: grid; grid-auto-flow: column; align-items: center; justify-items: center; font-size: 10px; color: var(--mu); padding-bottom: 8px; }
.phone .tabbar span { display: grid; justify-items: center; gap: 3px; position: relative; }
.phone .tabbar span.on { color: var(--ac); font-weight: 600; }
.phone .tabbar .n { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--da); color: #fff; font-size: 10px; display: grid; place-items: center; padding: 0 4px; }
.phone .hd { display: flex; align-items: center; gap: 8px; padding: 6px 0 4px; }
.phone .hd b { font-size: 14px; font-weight: 600; display: block; }
.phone .hd small { font-size: 11px; color: var(--mu); }
.offer { background: var(--s); border: 1px solid var(--bd); border-radius: 12px; padding: 12px; display: grid; gap: 6px; box-shadow: var(--sh); }
.offer .t { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.offer .t .bdg { margin-left: auto; }
.offer .m { font-size: 12px; color: var(--mu); }
.offer .pr { font-size: 16px; font-weight: 700; }
.offer .pr small { font-size: 11px; color: var(--mu); font-weight: 500; margin-left: 4px; }
.offer .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
.offer .btns .ui-btn { height: 34px; font-size: 13px; }
.push { background: rgba(253,253,254,.96); border-radius: 18px; padding: 10px 12px; display: grid; grid-template-columns: 30px 1fr; gap: 10px; box-shadow: var(--ovsh); font-size: 12px; }
.push .ui-mark { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; }
.push b { display: block; font-size: 12.5px; }
.push .h { float: right; color: var(--mu); font-size: 11px; }
.clist { display: grid; gap: 6px; }
.clist li { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; background: var(--s); border: 1px solid var(--bd); border-radius: 10px; padding: 8px 10px; }
.clist li i { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--fb); display: grid; place-items: center; }
.clist li.ok i { background: var(--ok); border-color: var(--ok); color: #fff; }
.clist li .ph { width: 26px; height: 26px; border-radius: 6px; background: linear-gradient(135deg, #cbd5e1, #94a3b8); }

/* Portal propietario (móvil) */
.own .nav-o { display: flex; gap: 6px; overflow: hidden; }
.own .nav-o span { border: 1px solid var(--bd); border-radius: 12px; padding: 6px 10px; font-size: 12px; color: var(--mu); white-space: nowrap; }
.own .nav-o span.on { background: #0f172a; color: #eef1f6; border-color: #0f172a; }
.liq-mini { background: var(--s); border: 1px solid var(--bd); border-radius: 12px; padding: 12px; display: grid; gap: 6px; }
.liq-mini .t { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.liq-mini .l { display: flex; justify-content: space-between; font-size: 12px; color: var(--mu); }
.liq-mini .l.tot { color: #0f172a; font-weight: 600; font-size: 13px; border-top: 1px solid var(--bd); padding-top: 6px; margin-top: 2px; }
.exp { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; background: var(--s); border: 1px solid var(--bd); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; }
.exp .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--was); color: var(--wasf); display: grid; place-items: center; }
.exp small { display: block; color: var(--mu); font-size: 11px; }

/* Guest app (tema editorial de guest-app-web) */
.guest { background: #f6f3ee; color: #1c2b2a; font-family: 'Bricolage Grotesque', 'Montserrat', sans-serif; font-stretch: 100%; }
.guest .ghd { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px 2px; font-size: 12px; }
.guest .ghd b { display: block; font-size: 13px; }
.guest .ghd small { color: #5f6e6c; font-size: 11px; }
.guest .lang { border: 1px solid #e8e3da; border-radius: 12px; padding: 3px 8px; font-size: 11px; background: #fff; }
.guest .ghero { border-radius: 24px; background: linear-gradient(160deg, #0e4853, #0a363f); color: #f6f3ee; padding: 18px 16px; min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.guest .ghero h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: 600; font-size: 20px; letter-spacing: -.01em; line-height: 1.1; }
.guest .ghero .dates { align-self: flex-start; background: rgba(255,255,255,.14); border-radius: 12px; padding: 3px 10px; font-size: 11px; }
.guest .gwarn { background: #f8e7c6; border: 1px solid #ecd6a4; color: #7a500b; border-radius: 16px; padding: 10px 12px; font-size: 12px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.guest .gwarn b { display: block; color: #1c2b2a; font-size: 12.5px; }
.guest .gbtn { background: #0e4853; color: #fff; border-radius: 12px; padding: 7px 10px; font-size: 11px; font-weight: 700; }
.guest .gq { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.guest .gq div { background: #fff; border: 1px solid #e8e3da; border-radius: 16px; padding: 10px; display: grid; gap: 8px; font-size: 12px; font-weight: 700; }
.guest .gq i { width: 34px; height: 34px; border-radius: 12px; background: #e2edee; color: #0e4853; display: grid; place-items: center; }
.guest .gtab { height: 58px; border-top: 1px solid #e8e3da; background: rgba(255,255,255,.9); display: grid; grid-auto-flow: column; align-items: center; justify-items: center; font-size: 10px; font-weight: 700; color: #5f6e6c; padding-bottom: 8px; }
.guest .gtab span.on { color: #0e4853; }
.guest .gform { background: #fff; border: 1px solid #e8e3da; border-radius: 16px; padding: 12px; display: grid; gap: 8px; font-size: 12px; }
.guest .gform label { display: grid; gap: 3px; color: #5f6e6c; font-size: 11px; }
.guest .gform span { border: 1px solid #e8e3da; border-radius: 10px; padding: 7px 10px; color: #1c2b2a; font-size: 12px; background: #fff; }
.guest .gform .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.guest .gform .ok { color: #0e4853; font-weight: 700; font-size: 11px; }

/* Asistente */
.asst { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.asst .q { justify-self: end; background: var(--ac); color: #fff; padding: 10px 14px; border-radius: 20px; border-bottom-right-radius: 4px; font-size: 13.5px; max-width: 34rem; }
.asst .a { background: var(--s); border: 1px solid var(--bd); border-radius: 20px; border-bottom-left-radius: 4px; padding: 12px 14px; font-size: 13.5px; box-shadow: var(--sh); max-width: 40rem; display: grid; gap: 10px; }
.asst .a .tools { display: flex; flex-wrap: wrap; gap: 6px; }
.asst .a .tools span { font-size: 11px; background: var(--def); border-radius: 10px; padding: 2px 8px; color: var(--mu); display: inline-flex; gap: 4px; align-items: center; }
.asst .a .tools span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.asst .mini { border: 1px solid var(--bd); border-radius: 10px; overflow: hidden; }
.asst .mini table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.asst .mini th { text-align: left; padding: 6px 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--mu); background: var(--s2); }
.asst .mini td { padding: 6px 10px; border-top: 1px solid var(--sp); }
.asst .mini .r { text-align: right; font-variant-numeric: tabular-nums; }
.asst .box { display: flex; align-items: center; gap: 8px; border: 1px solid var(--fb); border-radius: 12px; padding: 9px 12px; color: var(--mu); background: var(--s); font-size: 13px; }

/* Workflow */
.wf { display: grid; gap: 10px; }
.wf .desc { background: var(--s); border: 1px solid var(--fb); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; display: flex; gap: 10px; align-items: center; }
.wf .desc i { color: var(--ac); }
.wf .rule { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; }
.wf .rule > span:first-child { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--mu); }
.wf .rule .node { background: var(--s); border: 1px solid var(--bd); border-radius: 12px; padding: 10px 12px; font-size: 13px; box-shadow: var(--sh); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wf .rule .node .bdg { font-weight: 600; }
.wf .sim { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; color: var(--mu); }
.wf .sim .bdg { font-weight: 500; }

/* Registro de viajeros (Hospedajes) */
.ses-line { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 4px 0 14px; position: relative; }
.ses-line::before { content: ''; position: absolute; left: 6%; right: 6%; top: 11px; height: 2px; background: var(--bd); }
.ses-line div { text-align: center; position: relative; font-size: 12px; color: var(--mu); }
.ses-line i { width: 22px; height: 22px; border-radius: 50%; background: var(--s); border: 2px solid var(--bd); display: grid; place-items: center; margin: 0 auto 6px; color: #fff; }
.ses-line div.ok i { background: var(--ok); border-color: var(--ok); }
.ses-line div.now i { background: var(--ac); border-color: var(--ac); box-shadow: 0 0 0 4px rgba(79,70,229,.15); }
.ses-line div.ok, .ses-line div.now { color: #0f172a; font-weight: 500; }
.ses-line small { display: block; font-weight: 400; color: var(--mu); font-size: 11px; }

/* Sync log */
.sync li { display: grid; grid-template-columns: 24px 1fr auto auto; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--sp); font-size: 13px; }
.sync li:last-child { border-bottom: 0; }
.sync .ms { color: var(--mu); font-size: 12px; font-variant-numeric: tabular-nums; }
.sync small { display: block; color: var(--mu); font-size: 11.5px; }

@media (max-width: 860px) {
  .ui-main { padding: 16px; }
}

/* Cabecera del registro de sincronización y aviso de aceptación */
.sync-h { padding: 10px 14px; border-bottom: 1px solid var(--bd); display: flex; align-items: center; gap: 10px; font-size: 13px; }
.sync-h b { font-weight: 600; }
.sync-h > span:last-child { margin-left: auto; color: var(--mu); font-size: 12px; }
.push-strip { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; background: var(--ov); border: 1px solid var(--bd); border-radius: 14px; box-shadow: var(--sh); padding: 10px 12px; margin-bottom: 14px; font-size: 12px; color: var(--mu); }
.push-strip .ui-mark { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; }
.push-strip b { display: block; font-size: 13px; color: #0f172a; font-weight: 600; }
.push-strip .h { font-variant-numeric: tabular-nums; }
.kb .kcol { flex: 1 1 0; min-width: 0; width: auto; }
.kb .kb-body { min-height: 0; }

/* Mantenimiento + inventario en un solo marco */
.dif-ui { padding: 20px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }

/* Móvil: columnas secundarias fuera (la pantalla se reescala después) */
@media (max-width: 860px) { .dif-ui { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .ui .m-x { display: none !important; } .dif-ui { padding: 14px; gap: 14px; } }
.ui-table.dense .r, .ui-table .r { white-space: nowrap; }
.liq-mini .l span:last-child, .liq-mini .t span:last-child { white-space: nowrap; }
.liq-mini .l { gap: 8px; }