/* Demo: reservas directas y atención al huésped (hotel boutique). Prefijo ht-. Datos ficticios. */
.ht-lang{display:inline-grid;place-items:center;height:16px;padding:0 5px;border-radius:5px;background:var(--dx-ink);color:#fff;font-size:9px;font-weight:700;letter-spacing:.06em;flex:none}
.ht-src,.dx-ai .ht-src{margin:0;font-size:11px;color:var(--dx-ink-3)}
.ht-sub{margin:-2px 0 10px;font-size:11.5px;color:var(--dx-ink-3)}
.ht-small{font-size:11px}
.dx-card .dx-row .dx-h5{margin:0}
.ht-nw{white-space:nowrap}
@keyframes htShim{from{background-position:120% 0}to{background-position:-20% 0}}

/* 1 · Chats: lista, conversación y lo que revisó la IA */
.ht-chats{display:grid;grid-template-columns:206px minmax(0,1fr) 282px;gap:12px;align-items:start}
.ht-list{display:grid;gap:2px;padding:10px 8px}
.ht-list-h{padding:2px 6px 8px}
.ht-count{display:grid;place-items:center;min-width:22px;height:18px;padding:0 6px;border-radius:99px;background:var(--dx-canvas);font-size:10.5px;font-weight:600;color:var(--dx-ink-3)}
.ht-conv{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;padding:8px 6px;border-radius:12px}
.ht-conv.is-on{background:var(--dx-peach)}
.ht-cv-tx{display:grid;gap:3px;min-width:0}
.ht-cv-tx .dx-row{gap:5px}
.ht-cv-tx b{min-width:0;font-size:12px;color:var(--dx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ht-cv-tx small{font-size:10px;color:var(--dx-ink-3);flex:none}
.ht-cv-pr{font-size:11.5px;color:var(--dx-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ht-cv-tx .dx-tag{height:19px;padding:0 7px;font-size:10px}
.ht-cv-tx > span:last-child{display:flex}
.ht-unread{position:absolute;right:8px;top:29px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--grad-cta);color:#fff;font-size:9.5px;font-style:normal;font-weight:700;transition:transform .3s var(--ease),opacity .3s}
.ht-unread.ht-gone{transform:scale(0);opacity:0}
.ht-thread{display:grid;grid-template-rows:auto 1fr auto;padding:0;overflow:hidden}
.ht-th-top{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--dx-line)}
.ht-th-top .sp{flex:1}
.ht-th-who{display:grid;min-width:0}
.ht-th-who b{font-size:13px;color:var(--dx-ink)}
.ht-th-who .dx-muted{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ht-chat{height:386px;padding:12px 14px;gap:7px;border-radius:0;justify-content:flex-end}
.ht-chat .dx-msg{max-width:80%}
.ht-compose{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-top:1px solid var(--dx-line);background:#fff}
.ht-compose .sp{flex:1}
.ht-ai-on{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:11.5px;font-weight:500;color:var(--dx-acc-ink)}
.ht-ai-on svg{width:14px;height:14px;flex:none}
.ht-compose .dx-btn{height:28px;padding:0 11px;font-size:11.5px}
.ht-pay{display:flex;align-items:center;gap:9px;margin:1px 0 6px;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.8);border:1px solid rgba(17,27,33,.08)}
.ht-pay > i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--grad-cta);color:#fff;flex:none}
.ht-pay svg{width:16px;height:16px}
.ht-pay b{display:block;font-size:12px;color:#111b21}
.ht-pay > span > span{display:block;font-size:11px;color:#667781}
.ht-side{gap:12px}
.ht-avail{gap:9px}
.ht-q{display:flex;align-items:center;gap:6px;font-size:12px!important;font-weight:600}
.ht-q svg{width:14px;height:14px;color:var(--dx-acc-ink)}
.ht-rooms{display:grid;gap:6px}
.ht-room{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 8px;align-items:center;padding:7px 10px;border-radius:11px;border:1px solid var(--dx-line);background:#fff;opacity:.25;transform:translateX(8px);transition:opacity .4s var(--ease),transform .5s var(--spring),border-color .3s,background-color .3s,box-shadow .3s}
.ht-room.is-in{opacity:1;transform:none}
.ht-rm-n{grid-row:1/3;display:grid;min-width:0}
.ht-rm-n b{font-size:12.5px;color:var(--dx-ink)}
.ht-rm-n span{font-size:10.5px;color:var(--dx-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ht-room em{justify-self:end;font-style:normal;font-size:10.5px;font-weight:600;color:var(--dx-ok)}
.ht-rm-p{justify-self:end;font-size:12.5px;color:var(--dx-ink)}
.ht-rm-p small{font-size:10px;font-weight:500;color:var(--dx-ink-3)}
.ht-room.is-pick{border-color:var(--peach-200);background:var(--dx-peach);box-shadow:0 0 0 3px rgba(229,97,45,.12)}
.ht-room.is-off em{color:var(--dx-ink-3)}
.ht-room.is-off.is-in{opacity:.55}
.ht-room.is-off .ht-rm-p{text-decoration:line-through;color:var(--dx-ink-3)}
.ht-book{display:grid;gap:10px;transition:border-color .4s,box-shadow .4s}
.ht-book-who{display:flex;align-items:center;gap:9px}
.ht-book-who b{display:block;font-size:12.5px;color:var(--dx-ink)}
.ht-book-who .dx-muted{font-size:11px}
.ht-lines{display:grid;gap:5px;padding:9px 0;border-top:1px dashed var(--dx-line-2);border-bottom:1px dashed var(--dx-line-2)}
.ht-lines > div{display:flex;justify-content:space-between;gap:8px;font-size:12px}
.ht-lines span{color:var(--dx-ink-3)}
.ht-nocom{display:flex;align-items:center;gap:6px;margin:0;font-size:11.5px;font-weight:600;color:var(--dx-ok)}
.ht-nocom svg{width:14px;height:14px}
.ht-book.is-paid{border-color:#cdebd9;box-shadow:0 0 0 3px rgba(19,122,70,.1)}

/* 2 · Calendario de ocupación (habitaciones × días; cada día son dos medias columnas: llegada en la tarde, salida en la mañana) */
.ht-calk .dx-kpi{padding:10px 14px}
.ht-calk .dx-kpi b{font-size:20px}
.ht-legend{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--dx-ink-3);white-space:nowrap}
.ht-legend i{width:12px;height:8px;margin-left:7px;border-radius:3px}
.ht-legend i:first-child{margin-left:0}
.ht-legend i.dir{background:var(--dx-peach-2);box-shadow:inset 3px 0 0 var(--dx-acc)}
.ht-legend i.ota{background:#ece8e4;box-shadow:inset 3px 0 0 #b9ada2}
.ht-legend i.blk{background:repeating-linear-gradient(135deg,#f3ece5 0 3px,#e2d6ca 3px 6px)}
.ht-cal{--lw:112px;display:grid;padding:4px 12px 8px;overflow:visible}
.ht-grow{display:grid;grid-template-columns:var(--lw) repeat(20,minmax(0,1fr));align-items:center;min-width:0}
.ht-hdr{height:36px}
.ht-row{height:36px;border-top:1px solid var(--dx-line);transition:background-color .5s}
.ht-occ{height:34px;border-top:1px solid var(--dx-line-2)}
.ht-cl{grid-column:1;grid-row:1;display:flex;align-items:baseline;gap:6px;min-width:0;font-size:11px;color:var(--dx-ink-3);white-space:nowrap;overflow:hidden}
.ht-cl b{font-size:12px;color:var(--dx-ink)}
.ht-dh{grid-row:1;align-self:stretch;display:grid;align-content:center;justify-items:center;line-height:1.15;font-size:12px;font-weight:600;color:var(--dx-ink);border-radius:8px 8px 0 0}
.ht-dh small{font-size:9.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--dx-ink-3)}
.ht-c{grid-row:1;align-self:stretch;border-left:1px solid var(--dx-line)}
.ht-c.we,.ht-dh.we{background:rgba(255,226,212,.3)}
.ht-bar{grid-row:1;position:relative;z-index:1;display:flex;align-items:center;gap:4px;min-width:0;height:22px;margin:0 2px;padding:0 7px;border-radius:7px;font-size:10.5px;font-weight:600;white-space:nowrap}
.ht-bar > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ht-bar > small{flex:none;font-size:9.5px;font-weight:500;opacity:.75}
.ht-bar.dir{background:var(--dx-peach-2);color:var(--dx-acc-ink);box-shadow:inset 3px 0 0 var(--dx-acc)}
.ht-bar.ota{background:#ece8e4;color:var(--dx-ink-2);box-shadow:inset 3px 0 0 #b9ada2}
.ht-bar.blk{background:repeating-linear-gradient(135deg,#f3ece5 0 5px,#e6dbd0 5px 10px);color:var(--dx-ink-3);font-weight:500}
.ht-bar.is-new{z-index:2;background:var(--grad-cta);color:#fff;box-shadow:0 8px 18px -10px rgba(230,27,87,.85);transform-origin:left center;transform:scaleX(0);opacity:0;transition:transform .75s var(--spring),opacity .25s}
.ht-bar.is-new.is-in{transform:none;opacity:1}
.ht-bar.is-new > small{opacity:.9}
.ht-row.is-target{position:relative;z-index:3}
.ht-row.is-lit{background:linear-gradient(90deg,rgba(255,226,212,.75),rgba(255,226,212,.15))}
.ht-pop{position:absolute;left:0;bottom:calc(100% + 9px);z-index:5;display:grid;gap:8px;width:226px;padding:11px;border-radius:14px;background:#fff;border:1px solid var(--dx-line);box-shadow:var(--sh-3);color:var(--dx-ink-2);font-weight:400;white-space:normal}
.ht-pop::before{content:"";position:absolute;left:24px;bottom:-6px;width:10px;height:10px;background:#fff;border-right:1px solid var(--dx-line);border-bottom:1px solid var(--dx-line);transform:rotate(45deg)}
.ht-pop[data-pop]{transform:translateY(-8px) scale(.97);transform-origin:24px 100%}
.ht-pop[data-pop].is-in{transform:none}
.ht-pop .dx-row{gap:8px}
.ht-pop-who{display:grid;min-width:0}
.ht-pop-who b{font-size:12.5px;color:var(--dx-ink)}
.ht-pop-who span{font-size:11px;color:var(--dx-ink-3)}
.ht-pop-tags{gap:5px!important}
.ht-pop-ft{font-size:11px}
.ht-pop .dx-btn{height:26px;padding:0 10px;font-size:11px}
.ht-oc{grid-row:1;justify-self:center;display:grid;place-items:center;min-width:36px;height:20px;padding:0 5px;border-radius:6px;font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;transition:background-color .4s,color .4s,transform .45s var(--spring)}
.ht-oc.h1{background:var(--dx-canvas);color:var(--dx-ink-3)}
.ht-oc.h2{background:var(--dx-peach-2);color:var(--dx-acc-ink)}
.ht-oc.h3{background:var(--dx-acc);color:#fff}
.ht-oc.is-up{transform:scale(1.18)}

/* 3 · Ficha del huésped */
.ht-bigav{width:38px;height:38px;font-size:13px}
.ht-guest{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
.ht-pre{display:grid}
.ht-docrow{position:relative;display:flex;align-items:center;gap:12px;margin-bottom:8px;padding:10px;border-radius:12px;background:var(--dx-canvas)}
.ht-pass{position:relative;flex:none;width:96px;height:64px;border-radius:8px;background:linear-gradient(135deg,#fff,var(--dx-peach-2));border:1px solid var(--dx-line-2);overflow:hidden}
.ht-pass i{position:absolute;display:block}
.ht-pass .ph{left:8px;top:8px;width:22px;height:28px;border-radius:5px;background:linear-gradient(180deg,var(--peach-200),var(--peach-300))}
.ht-pass .l1,.ht-pass .l2,.ht-pass .l3{left:36px;height:4px;border-radius:3px;background:var(--dx-line-2)}
.ht-pass .l1{top:10px;width:46px}.ht-pass .l2{top:19px;width:34px}.ht-pass .l3{top:28px;width:42px}
.ht-pass .mrz{left:8px;right:8px;bottom:8px;height:12px;border-radius:2px;background:repeating-linear-gradient(90deg,#cdbcac 0 3px,transparent 3px 5px)}
.ht-doc-tx{display:grid;gap:3px;justify-items:start;min-width:0}
.ht-doc-tx b{font-size:13px;color:var(--dx-ink)}
.ht-doc-tx .dx-muted{font-size:11.5px}
.ht-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.ht-f{display:grid;grid-template-columns:16px minmax(0,1fr);gap:1px 8px;align-items:center;padding:8px 10px;border-radius:11px;background:var(--dx-canvas);border:1px solid transparent;opacity:.35;transition:opacity .4s,background-color .4s,border-color .4s}
.ht-f svg{grid-row:1/3;width:15px;height:15px;color:var(--dx-ink-3);transition:color .4s}
.ht-f span{font-size:10.5px;color:var(--dx-ink-3)}
.ht-f b{font-size:12.5px;color:var(--dx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ht-f.is-in{opacity:1;background:#fff;border-color:var(--peach-200)}
.ht-f.is-in svg{color:var(--dx-acc)}
.ht-gr{gap:12px;align-content:start}
.ht-memory{gap:9px}
.ht-mems{display:flex;flex-wrap:wrap;gap:6px}
.ht-mem{display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 8px;border-radius:10px;background:var(--dx-canvas);border:1px solid var(--dx-line);font-size:11.5px;font-weight:600;color:var(--dx-ink);transition:color .3s,background-color .3s,border-color .3s}
.ht-mem.is-in{animation:htPop .5s var(--spring) both}
.ht-mem svg{width:14px;height:14px;color:var(--dx-ink-3);flex:none}
.ht-mem > span{display:grid;line-height:1.25}
.ht-mem small{font-size:9.5px;font-weight:500;color:var(--dx-ink-3)}
.ht-mem.bad{background:var(--dx-bad-bg);border-color:#f3cbc6}.ht-mem.bad svg{color:var(--dx-bad)}
.ht-mem.ai{background:var(--dx-peach);border-color:var(--peach-200)}.ht-mem.ai svg{color:var(--dx-acc)}
.ht-mem:not(.is-in){color:transparent;border-color:transparent;background:linear-gradient(90deg,var(--dx-line) 30%,#f8efe6 50%,var(--dx-line) 70%) 0 0/300% 100%;animation:htShim 1.6s linear infinite}
.ht-mem:not(.is-in) svg,.ht-mem:not(.is-in) small{opacity:0}
.ht-tcount{font-size:11px;font-variant-numeric:tabular-nums}
.ht-tasks{display:grid;gap:7px;margin-top:9px}
.ht-task{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;border:1px solid var(--dx-line);background:#fff;transition:border-color .3s,background-color .3s}
.ht-task > *{transition:opacity .3s}
.ht-task:not(.is-in){border-style:dashed;border-color:var(--dx-line-2);background:rgba(255,255,255,.45)}
.ht-task:not(.is-in) > *{opacity:0}
.ht-task:not(.is-in)::after{content:"";position:absolute;left:52px;top:50%;width:46%;height:9px;margin-top:-5px;border-radius:9px;background:linear-gradient(90deg,var(--dx-line) 30%,#f8efe6 50%,var(--dx-line) 70%) 0 0/300% 100%;animation:htShim 1.6s linear infinite}
.ht-task.is-in{animation:htPop .5s var(--spring) both}
.ht-gl{gap:12px;align-content:start}
.ht-stay{display:grid;gap:10px}
.ht-stay-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
.ht-stay-g > div{display:grid;gap:1px}
.ht-stay-g span{font-size:10.5px;color:var(--dx-ink-3)}
.ht-stay-g b{font-size:12.5px;color:var(--dx-ink)}
.ht-okc{color:var(--dx-ok)!important}
.ht-task-tx{display:grid;min-width:0}
.ht-task-tx small{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dx-acc-ink)}
.ht-task-tx b{font-size:12.5px;color:var(--dx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ht-task-tx .dx-muted{font-size:11px}

/* 4 · Solicitudes por área */
.ht-kanban{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
.ht-colk{min-height:340px;gap:7px}
.ht-colh{display:inline-flex;align-items:center;gap:6px;min-width:0}
.ht-colh svg{width:14px;height:14px;flex:none}
.ht-tk{gap:5px}
.ht-tk .dx-row{gap:6px}
.ht-tk-room{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--dx-acc-ink)}
.ht-tk small{font-size:10.5px}
.ht-tk-ft{flex-wrap:wrap;gap:5px!important}
.ht-tk .dx-tag{height:20px;padding:0 7px;font-size:10.5px}
.ht-tk.is-new{animation:htPop .5s var(--spring) both}
@keyframes htPop{from{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:none}}
.ht-sla{display:grid;gap:3px}
.ht-sla .dx-bar-p{height:5px}
.ht-sla small{font-size:10px;color:var(--dx-ink-3)}
.ht-sla.is-ok .dx-bar-p i{background:var(--dx-ok)}
.ht-sla.is-ok small{font-weight:600;color:var(--dx-ok)}
.ht-entry{border-color:var(--peach-200);box-shadow:0 0 0 3px rgba(229,97,45,.1);transition:opacity .4s,border-color .4s,box-shadow .4s}
.ht-entry b{font-size:12px}
.ht-quote{margin:0;font-size:11.5px;font-style:italic;color:var(--dx-ink)}
.ht-tr{display:flex;gap:6px;margin:0;font-size:11px;color:var(--dx-ink-3)}
.ht-tr svg{width:13px;height:13px;margin-top:1px;flex:none}
.ht-entry.is-done{border-color:var(--dx-line);box-shadow:none;opacity:.75}

/* 5 · Cuenta y propuesta que aprueba recepción */
.ht-acct{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:12px;align-items:start}
.ht-folio{display:grid;gap:10px}
.ht-folio .dx-tr{gap:8px}
.ht-fl b{justify-self:end;color:var(--dx-ink)}
.ht-fl.neg b{color:var(--dx-ok)}
.ht-fl.is-new{animation:htRow .7s var(--ease) both}
@keyframes htRow{from{opacity:0;transform:translateY(-6px);background:var(--dx-peach-2)}to{opacity:1;transform:none;background:transparent}}
.ht-total{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:12px;background:var(--dx-ink)}
.ht-total span{font-size:12px;color:#c9cce0}
.ht-total b{font-size:20px;color:#fff}
.ht-prop{gap:9px}
.ht-prop .dx-row{gap:8px}
.ht-prop-h{font-size:14px!important;font-weight:650}
.ht-why{display:grid;gap:5px;margin:0;padding:0;list-style:none}
.ht-why li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:12px;color:var(--dx-ink);opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .5s var(--spring)}
.ht-why li.is-in{opacity:1;transform:none}
.ht-why svg{width:14px;height:14px;color:var(--dx-acc)}
.ht-why small{padding:1px 7px;border-radius:99px;background:var(--dx-canvas);border:1px solid var(--dx-line);font-size:10px;color:var(--dx-ink-3);white-space:nowrap}
.ht-offer{display:grid;gap:4px;padding:9px 11px;border-radius:11px;background:var(--dx-canvas)}
.ht-offer > div{display:flex;justify-content:space-between;gap:8px;font-size:12px}
.ht-offer b{color:var(--dx-ink)}
.ht-offer .tot{margin-top:2px;padding-top:5px;border-top:1px dashed var(--dx-line-2);font-weight:600;color:var(--dx-ink)}
.ht-mini{height:128px;padding:8px;gap:5px;border-radius:11px;justify-content:flex-end}
.ht-mini .dx-msg{max-width:94%;font-size:11.5px}
.ht-pays{display:grid;gap:8px}
.ht-pays .dx-h5{margin:0}
.ht-payrow{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--dx-canvas)}
.ht-pr-tx{display:grid;min-width:0}
.ht-pr-tx b{font-size:12.5px;color:var(--dx-ink)}
.ht-pr-tx .dx-muted{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ht-payrow > b{font-size:13px;color:var(--dx-ok)}
.ht-prop .dx-hint::after{bottom:auto;top:calc(100% + 8px)}
.ht-approved{display:inline-flex;align-items:center;gap:6px;height:32px;font-size:12.5px;font-weight:600;color:var(--dx-ok)}
.ht-approved svg{width:15px;height:15px}

/* 6 · Después de la estadía */
.ht-post{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:12px;align-items:start}
.ht-survey{display:grid;gap:10px}
.ht-schat{height:236px;justify-content:flex-end}
.ht-ptl li{transition:opacity .4s}
.ht-ptl li:not(.is-done){opacity:.45}
.ht-score{display:flex;align-items:center;gap:10px}
.ht-stars{position:relative;display:flex;gap:3px}
.ht-stars::after{content:"";position:absolute;inset:-7px -9px;border-radius:14px;border:2px solid var(--dx-acc);opacity:0;pointer-events:none}
.ht-stars.is-burst::after{animation:htBurst .8s var(--ease) both}
@keyframes htBurst{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(1.25)}}
.ht-stars i{display:grid;color:var(--dx-line-2);transition:color .25s,transform .4s var(--spring)}
.ht-stars svg{width:24px;height:24px}
.ht-stars i.is-in{color:var(--dx-acc);transform:scale(1.1)}
.ht-stars i.is-in svg{fill:currentColor}
.ht-score b{font-size:22px;color:var(--dx-ink)}
.ht-insights{gap:8px}
.ht-wrap{flex-wrap:wrap;gap:6px!important}
.ht-ptl li{padding-bottom:10px}
.ht-coupon{display:grid;grid-template-columns:44px minmax(0,1fr);gap:6px 12px;padding:14px;border-radius:var(--dx-r);background:var(--grad-soft);border:1.5px dashed var(--peach-300)}
.ht-cp-ic{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--grad-cta);color:#fff}
.ht-cp-ic svg{width:22px;height:22px}
.ht-cp-tx{display:grid;gap:2px}
.ht-cp-tx small{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dx-acc-ink)}
.ht-cp-tx b{font-size:15px;color:var(--dx-ink)}
.ht-cp-tx span{font-size:11.5px;color:var(--dx-ink-2)}
.ht-cp-rule{grid-column:2;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--dx-ok)}
.ht-cp-rule svg{width:13px;height:13px}

/* 7 · Tablero */
.ht-kpis .dx-kpi b{font-size:20px}
.ht-dash{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.92fr);gap:12px}
.ht-chcard{display:grid;gap:6px;align-content:start}
.ht-stk .o{fill:var(--peach-100)}
.ht-stk .d{fill:var(--peach-300)}
.ht-stk .d.hl{fill:var(--dx-acc)}
/* la leyenda de la gráfica usa los mismos colores de las barras (no las muestras del calendario) */
.ht-chcard .ht-legend i.dir{background:var(--peach-300);box-shadow:none}
.ht-chcard .ht-legend i.ota{background:var(--peach-100);box-shadow:none}
.ht-stk g{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .8s var(--spring)}
.ht-stk.is-in g{transform:none}
.ht-stk .vl{opacity:0;transition:opacity .4s .7s}
.ht-stk.is-in .vl{opacity:1}
.ht-line .ht-area{fill:url(#htArea);opacity:0;transition:opacity .8s .7s}
.ht-line.is-in .ht-area{opacity:1}
.ht-goal{stroke:var(--dx-ink-3);stroke-width:1;stroke-dasharray:3 4;opacity:.55}
.ht-dot{fill:#fff;stroke:var(--dx-acc);stroke-width:1.6;opacity:0;transition:opacity .3s 1.3s}
.ht-line.is-in .ht-dot{opacity:1}
.ht-rev{display:grid;gap:6px;align-content:start}
.ht-rev-top{display:flex;align-items:center;gap:10px}
.ht-rev-top b{font-size:30px;font-weight:700;letter-spacing:-.03em;color:var(--dx-ink);font-variant-numeric:tabular-nums}
.ht-rev-st{display:flex;flex-wrap:wrap;align-items:center;gap:1px;max-width:120px;color:var(--dx-acc)}
.ht-rev-st svg{width:13px;height:13px;fill:currentColor}
.ht-rev-st small{flex-basis:100%;font-size:10.5px;color:var(--dx-ink-3)}
.ht-dist{display:grid;grid-template-columns:28px minmax(0,1fr) 30px;align-items:center;gap:8px;font-size:11px}
.ht-dist > span{display:inline-flex;align-items:center;gap:2px;color:var(--dx-ink-2)}
.ht-dist svg{width:10px;height:10px;fill:currentColor}
.ht-dist small{text-align:right;color:var(--dx-ink-3)}
.ht-dist .dx-bar-p{height:6px}
.ht-rev .dx-bar-p i{width:0}
.ht-rev.is-in .dx-bar-p i{width:calc(var(--p) * 1%)}
.ht-last{margin:4px 0 0;font-size:11.5px;font-style:italic;color:var(--dx-ink)}
.ht-last .dx-muted{display:block;margin-top:2px;font-size:11px;font-style:normal}
.ht-ins p{font-size:12.5px}
.ht-cap{margin:-2px 0 0;font-size:10.5px;color:var(--dx-ink-3);text-align:center}
.ht-dash2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px;align-items:stretch}
.ht-req{display:grid;gap:7px;align-content:start}
.ht-area-r{display:grid;grid-template-columns:16px 132px minmax(0,1fr) 38px 44px;align-items:center;gap:8px;font-size:11.5px;color:var(--dx-ink-2)}
.ht-area-r svg{width:14px;height:14px;color:var(--dx-acc)}
.ht-area-r b{font-size:11.5px;text-align:right;color:var(--dx-ink)}
.ht-area-r small{font-size:10.5px;color:var(--dx-ink-3);text-align:right}
.ht-area-r .dx-bar-p{height:6px}
.ht-req .dx-bar-p i{width:0}
.ht-req.is-in .dx-bar-p i{width:calc(var(--p) * 1%)}
.ht-dash2 .ht-ins{align-content:start}

/* Sin JS: lo que se ve sin animar (solo la primera pantalla, con la conversación y la reserva) */
html:not(.js):not(.js-motion) .ht-room{opacity:1;transform:none}

/* Tableta y ventanas medianas: sin lista de conversaciones; tablero y cuenta más simples */
@media (min-width:761px) and (max-width:1100px){
  .ht-chats{grid-template-columns:minmax(0,1fr) 264px}
  .ht-list{display:none}
}
@media (min-width:761px) and (max-width:1000px){
  .ht-dash{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ht-linec{display:none}
  .ht-dash2,.ht-acct{grid-template-columns:1fr}
  .ht-prop{order:-1}
}

/* Celular: una columna, calendario de 7 días, tablero apilado */
@media (max-width:760px){
  .ht-chats{grid-template-columns:1fr}
  .dx-screen[data-screen="chats"] .dx-head p{display:none}
  .ht-chat{height:250px;padding:10px}
  .ht-chat .dx-msg{max-width:88%}
  .ht-compose .dx-btn{display:none}
  .ht-avail .ht-src{display:none}
  .ht-room{padding:6px 9px}
  .ht-cal{--lw:40px;padding:2px 6px 6px}
  .ht-row{height:32px}
  .ht-grow{grid-template-columns:var(--lw) repeat(14,minmax(0,1fr)) repeat(6,0px)}
  .ht-cl > span{display:none}
  /* «Ocupación» no cabe en la columna de 40 px: se abrevia solo a la vista (la simulación es aria-hidden) */
  .ht-occ .ht-cl{font-size:0}
  .ht-occ .ht-cl::after{content:"Ocup.";font-size:10px}
  .ht-dh{font-size:11px}
  .ht-dh small{font-size:8.5px}
  .ht-oc{min-width:0;width:calc(100% - 4px);padding:0 1px;font-size:9px}
  .ht-bar{margin:0 1px;padding:0 4px;font-size:9.5px}
  .ht-bar > small{display:none}
  .ht-pop{left:auto;right:-24px;width:206px}
  .ht-pop::before{left:auto;right:52px}
  .ht-guest,.ht-acct,.ht-post,.ht-dash,.ht-dash2{grid-template-columns:1fr}
  .ht-kanban{grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
  .ht-kanban [data-col="entrada"]{grid-column:1/-1}
  .ht-kanban [data-col="mant"]{display:none}
  .ht-colk{min-height:0;padding:8px}
  .ht-colh{font-size:11px}
  .ht-prop{order:-1}
  .ht-why small{display:none}
  .ht-schat{height:150px}
  .ht-mini{height:140px}
}