/* hotel.css — rubro Hotel (js/hotel.js): rack de ocupación, limpieza, cuentas y tarifas. */

/* ---------- Comunes ---------- */
.ht-num { flex-shrink: 0; width: 42px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; font-size: 13.5px; }
.ht-tabla tbody tr { cursor: pointer; }
.ht-tabla tbody tr:hover { background: #FAFBFC; }
.ht-canal.is-booking { background: #E7EEFB; color: #1D4ED8; }
.ht-canal.is-whatsapp { background: #E3F6EA; color: #15803D; }
.ht-canal.is-directo { background: var(--brand-soft); color: var(--brand-ink); }
.ht-est.is-confirmada { background: #E7EEFB; color: #1D4ED8; }
.ht-est.is-adentro { background: #E3F6EA; color: #15803D; }
.ht-est.is-cancelada { background: #FDECEC; color: #B42318; }
.ht-aviso { margin-bottom: 14px; border-radius: 10px; border: 1px solid; }
.ht-foot { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Rack de ocupación ---------- */
.ht-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: -4px 0 12px; font-size: 12.5px; color: var(--mute); }
.ht-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.ht-sw { width: 16px; height: 10px; border-radius: 3px; display: inline-block; }
.ht-rack { padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ht-grid { --lab: 112px; --cw: 54px; min-width: calc(var(--lab) + var(--n) * var(--cw)); user-select: none; -webkit-user-select: none; }
.ht-row { display: grid; grid-template-columns: var(--lab) repeat(var(--n), minmax(var(--cw), 1fr)); grid-template-rows: 42px; border-bottom: 1px solid var(--line); }
.ht-row:last-child { border-bottom: 0; }
.ht-row > * { grid-row: 1; }
.ht-row-head { grid-template-rows: 52px; background: #FAFBFC; position: sticky; top: 0; z-index: 3; }
.ht-rl { grid-column: 1; position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: 7px; padding: 0 10px 0 14px; background: var(--card); border-right: 1px solid var(--line); font-size: 12px; color: var(--mute); min-width: 0; }
.ht-row-head .ht-rl { background: #FAFBFC; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.ht-rl b { color: var(--ink); font-size: 14px; }
.ht-rl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ht-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; background: #9CA3AF; }
.ht-dot.is-lista { background: #22A55A; }
.ht-dot.is-sucia { background: #E0573F; }
.ht-dot.is-limpiando { background: #E9A23B; }
.ht-dot.is-bloqueada { background: #4B5563; }
.ht-rd { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-left: 1px solid var(--line); position: relative; }
.ht-rd small { font-size: 11px; color: var(--mute); text-transform: capitalize; }
.ht-rd b { font-size: 14px; }
.ht-rd.is-finde { background: #F4F5F7; }
.ht-rd.is-hoy { background: var(--brand-soft); }
.ht-rd.is-hoy b, .ht-rd.is-hoy small { color: var(--brand-ink); font-weight: 700; }
.ht-temp { display: inline-block; width: 16px; height: 3px; border-radius: 2px; background: #CBD5E1; }
.ht-rd .ht-temp { position: absolute; bottom: 4px; }
.ht-temp.is-alta { background: #E0573F; }
.ht-temp.is-media { background: #E9A23B; }
.ht-temp.is-baja { background: #94A3B8; }
.ht-rc { border-left: 1px solid var(--line); cursor: copy; transition: background .1s; }
.ht-rc:hover { background: var(--brand-soft); }
.ht-rc.is-hoy { background: color-mix(in oklab, var(--brand) 5%, white); }
.ht-rc.is-bloq { background: repeating-linear-gradient(-45deg, #EEF0F3 0 6px, #F7F8FA 6px 12px); cursor: not-allowed; }
.ht-rc.is-target { background: color-mix(in oklab, #22A55A 22%, white); }
.ht-rc.is-mal { background: color-mix(in oklab, #E0573F 22%, white); }
.ht-bar { z-index: 1; margin: 6px 3px; border-radius: 7px; padding: 0 8px; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 12px; cursor: pointer; color: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); transition: opacity .15s, box-shadow .15s; }
.ht-bar b { overflow: hidden; text-overflow: ellipsis; }
.ht-bar span { opacity: .8; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.ht-bar.is-confirmada, .ht-sw.is-confirmada { background: #3B6FD8; }
.ht-bar.is-adentro, .ht-sw.is-adentro { background: var(--brand); }
.ht-bar.is-salio, .ht-sw.is-salio { background: #A8AFB9; }
.ht-bar.is-mov { cursor: grab; touch-action: none; }
.ht-bar.is-mov:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6) inset, 0 3px 8px rgba(16, 24, 40, .2); }
.ht-bar.is-drag { opacity: .45; cursor: grabbing; }
.ht-bar.is-cut-l { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ht-bar.is-cut-r { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ---------- Nueva reserva y ficha ---------- */
.ht-nuevo[hidden] { display: none; }
.ht-nuevo .form-grid { margin: 0; }
.ht-cotiza { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-ink); }
.ht-cotiza > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ht-cotiza b { font-size: 18px; }
.ht-cotiza p { margin: 4px 0 0; font-size: 12.5px; }
.ht-ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin: 0 0 16px; }
.ht-ficha > div { min-width: 0; }
.ht-ficha .span-2 { grid-column: span 2; }
.ht-ficha dt { font-size: 12px; color: var(--mute); margin-bottom: 2px; }
.ht-ficha dd { margin: 0; }
.ht-ficha .link { border: 0; background: none; padding: 0; cursor: pointer; font-size: 14px; }

/* ---------- Cuentas ---------- */
.ht-parte .card-head { align-items: center; }
.ht-parte-n { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ht-parte-n span { display: block; font-size: 12px; color: var(--mute); }
.ht-parte-n b { font-size: 17px; }
.ht-parte-vacia { display: flex; align-items: center; }
.ht-parte-vacia p { margin: 0; }
.ht-paga { height: 28px; font-size: 12.5px; }
.ht-paga.is-empresa { background: #E7EEFB; border-color: #BFD0F5; color: #1D4ED8; }
.ht-total td { background: #FAFBFC; }

/* ---------- Limpieza (pensada para el celular) ---------- */
.ht-limp-res { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ht-limp { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.ht-lc { background: var(--card); border: 1px solid var(--line); border-left: 5px solid #9CA3AF; border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow); }
.ht-lc.is-sucia { border-left-color: #E0573F; }
.ht-lc.is-limpiando { border-left-color: #E9A23B; }
.ht-lc.is-lista { border-left-color: #22A55A; }
.ht-lc.is-bloqueada { border-left-color: #4B5563; background: #F7F8FA; }
.ht-lc.is-urgente { box-shadow: 0 0 0 2px color-mix(in oklab, #E0573F 35%, white), var(--shadow); }
.ht-lc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ht-lc-num { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.ht-lc-tipo { font-size: 12.5px; color: var(--mute); }
.ht-lc-info { font-size: 13.5px; }
.ht-lc-quien { font-size: 12px; color: var(--mute); }
.ht-lc-acc { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ht-lc-btn { width: 100%; height: 46px; justify-content: center; font-size: 15px; }
.ht-lc-acc .btn-sm { align-self: flex-start; }
.ht-lc-prob { align-self: flex-start; border: 0; background: none; padding: 2px 0; cursor: pointer; color: var(--mute); font-size: 12.5px; }

/* ---------- Tarifas ---------- */
.ht-in { width: 110px; }
.ht-meses { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.ht-mes { border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 8px; background: var(--card); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; }
.ht-mes:disabled { cursor: default; }
.ht-mes b { text-transform: capitalize; }
.ht-mes span { font-size: 12px; font-weight: 600; }
.ht-mes.is-alta { background: #FDEDEA; border-color: #F5C6BC; color: #9A3412; }
.ht-mes.is-media { background: #FEF5E6; border-color: #F3D9B1; color: #92400E; }
.ht-mes.is-baja { background: #F1F5F9; border-color: #D9DEE5; color: #475569; }
.ht-mes.is-hoy { box-shadow: 0 0 0 2px var(--brand); }

@media (max-width: 860px) {
  .ht-grid { --lab: 84px; --cw: 46px; }
  .ht-rl { padding: 0 6px 0 10px; }
  .ht-rl span { display: none; }
  .ht-meses { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 520px) {
  .ht-limp { grid-template-columns: 1fr; }
  .ht-ficha { grid-template-columns: 1fr; }
  .ht-ficha .span-2 { grid-column: auto; }
  .ht-parte-n b { font-size: 15px; }
  .ht-meses { grid-template-columns: repeat(3, 1fr); }
  .ht-fila .ht-num { width: 36px; }
}

/* Filas de llegadas y salidas: el nombre usa todo el ancho y el botón no se achica. */
.ht-fila .list-main { flex: 1; }
.ht-fila .list-title .tag { margin-left: 6px; font-size: 11px; padding: 1px 7px; vertical-align: 1px; }
.ht-fila > .btn, .ht-fila > .tag { flex-shrink: 0; }

/* ---------- Reservas externas (Booking, Airbnb) y dobles reservas ---------- */
.ht-canal.is-airbnb { background: #FDE8EC; color: #B4233F; }
.ht-bar.is-ext { background: repeating-linear-gradient(135deg, #5B6B8C 0 8px, #6B7BA0 8px 16px); }
.ht-bar.is-ext-airbnb { background: repeating-linear-gradient(135deg, #D8465E 0 8px, #E2586E 8px 16px); }
.ht-bar.is-ext-booking { background: repeating-linear-gradient(135deg, #2F5FC4 0 8px, #3D6FD6 8px 16px); }
.ht-bar.is-doble { box-shadow: 0 0 0 2px #E0573F, 0 0 0 4px #fff, 0 3px 8px rgba(224, 87, 63, .45); z-index: 2; }
.ht-sw.is-ext { background: repeating-linear-gradient(135deg, #5B6B8C 0 4px, #8391B0 4px 8px); }
.ht-dobles { margin-bottom: 14px; }
.ht-modo { margin-right: 6px; }
.ht-grid.is-mes { --cw: 34px; }
.ht-grid.is-mes .ht-bar { padding: 0 5px; font-size: 11px; }
.ht-grid.is-mes .ht-bar span { display: none; }
.ht-grid.is-mes .ht-rd small { font-size: 9px; }
.ht-grid.is-mes .ht-rd b { font-size: 12px; }
.ht-honesto { margin-bottom: 14px; }
.ht-kpis3 { margin-bottom: 8px; }
.ht-link code { font-size: 12px; word-break: break-all; color: var(--mute); }
.ht-linkbox { width: 100%; font-family: ui-monospace, monospace; font-size: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }

/* ---------- Limpieza (mucamas) ---------- */
.ht-lc-tags { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ht-lc.is-revisada { border-left-color: #15803D; background: #F2FBF5; }
.ht-lc.is-porsalir { opacity: .82; border-left-style: dashed; }
.ht-lc-espera { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mute); }
.ht-lc-espera svg { width: 15px; height: 15px; }
.ht-lc-cron { font-size: 13px; font-weight: 600; color: #8A5A00; }
.ht-lc.is-lista .ht-lc-cron { color: var(--mute); font-weight: 500; }
.ht-lc-asig { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--mute); }
.ht-lc-asig svg { width: 14px; height: 14px; }
.ht-lc-asig.is-yo { color: var(--brand-ink); font-weight: 600; }
.ht-lc-sel { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mute); margin-top: 4px; }
.ht-lc-sel select { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; background: #fff; }
.ht-lc-mas { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.ht-lc-nov { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 8px 10px; background: #FFF6E5; border-radius: 8px; }
.ht-nov { font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ht-foto { border: 0; background: none; padding: 0; cursor: zoom-in; }
.ht-foto-mini { width: 38px; height: 38px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
.ht-foto-big { max-width: 100%; border-radius: 10px; }
.ht-urg { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r); background: #FDECE8; border: 1px solid #F3C2B8; margin-bottom: 14px; color: #8C2F1B; }
.ht-urg svg { width: 26px; height: 26px; flex: none; }
.ht-urg div { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.ht-tablero { margin-bottom: 14px; }
.ht-rep { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.is-bad.tag, .tag.is-bad { background: #FDECE8; color: #B3341C; }

/* ---------- Pedidos y asistente ---------- */
.ht-ped-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ht-ped-col h2 { font-size: 15px; margin: 0 0 10px; display: flex; gap: 8px; align-items: center; }
.ht-ped { background: var(--card); border: 1px solid var(--line); border-left: 4px solid #9CA3AF; border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow); }
.ht-ped.is-nuevo { border-left-color: #E0573F; }
.ht-ped.is-encurso { border-left-color: #E9A23B; }
.ht-ped.is-hecho { border-left-color: #22A55A; }
.ht-ped-top { display: flex; align-items: center; gap: 8px; }
.ht-ped-top .tag { margin-left: auto; }
.ht-ped p { margin: 6px 0 4px; font-size: 14px; }
.ht-ped small svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.ht-ped-nota { font-size: 12.5px; color: #8A5A00; background: #FFF6E5; padding: 6px 8px; border-radius: 6px; }
.ht-ped-acc { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.ht-ia-lista { margin: 0; padding: 0 18px 8px 36px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.ht-ia-form { margin-top: 14px; }
.ht-ia-foot { display: flex; gap: 12px; align-items: center; padding: 14px 18px; flex-wrap: wrap; }
.ht-ia-form .form-grid { padding: 4px 18px 0; }

@media (max-width: 860px) {
  .ht-ped-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  /* Celular de la mucama: botones grandes, una habitación por fila */
  .ht-lc { padding: 16px; }
  .ht-lc-num { font-size: 32px; }
  .ht-lc-btn { height: 58px; font-size: 17px; border-radius: 12px; }
  .ht-lc-acc .btn-sm { height: 42px; font-size: 14px; }
  .ht-limp-res { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .ht-limp-res .chip { flex: none; }
}

/* Habitaciones de un hotel en producción (Tarifas) */
.ht-habs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ht-hab { display: inline-flex; align-items: center; gap: 6px; }
.ht-hab-x { border: 0; background: transparent; color: var(--mute); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; }
.ht-hab-x:hover { color: #DC2626; }