/* ==========================================================================
   HOTELERÍA DE MASCOTAS — CSS del módulo
   --------------------------------------------------------------------------
   Replica EL MISMO estándar visual de Hospitalización (pantallas modernas
   configTratamiento.css + nuevoIngresoHospital.css): paddings, radios,
   sombras, tipografías, layout grid/flex. Cambia SOLO la paleta de colores
   a una gama CÁLIDA (ámbar/arena) para diferenciarse del azul clínico.

   Convención:
   - Prefijo propio "ho-" en todas las clases (NO reutiliza lp-/ni-).
   - Variables de color scopeadas al contenedor raíz .hotel-layout y a los
     ids de cada pantalla. Las clases ho- consumen esas variables.

   Iconografía disponible en el sistema: Material Design Icons v2.8.94 +
   Font Awesome 5 (fas fa-*). No se inventa iconografía nueva.
   ========================================================================== */

/* ===========================================================================
   PALETA CÁLIDA (retocar aquí para ajustar toda la identidad del módulo)
   ===========================================================================
   --ho-primary        : acento ámbar/bronce cálido (botones, focos, links)
   --ho-primary-dark   : hover del acento
   --ho-primary-soft   : fondo suave del acento (badges/píldoras claras)
   --ho-primary-borde  : borde suave derivado del acento
   --ho-header         : barra de cabecera (degradado cálido sobrio)
   --ho-header-solido  : color sólido equivalente al header (fallback)
   --ho-bg             : fondo general de la pantalla (arena muy claro)
   --ho-card-bg        : fondo de cards/divs (crema)
   --ho-borde          : borde cálido neutro
   --ho-texto          : texto principal (marrón-grisáceo oscuro cálido)
   --ho-texto-suave    : texto secundario (gris cálido)
   --ho-success        : estado activo (verde sobrio)
   --ho-danger         : estado peligro/inactivo (rojo)
   --ho-muted-icon     : iconos atenuados
   --ho-radio          : radio estándar de cards
   --ho-sombra         : sombra estándar de cards
   =========================================================================== */
.hotel-layout,
#pantallaHotelEspacios,
#pantallaHotelReservas,
#pantallaHotelHospedados,
#pantallaHotelHistorial,
#pantallaHotelAgenda,
#pantallaHotelTablero,
#pantallaHotelKpi {
  --ho-primary: #b07a2e;
  --ho-primary-dark: #8f601f;
  --ho-primary-soft: #f6ecd9;
  --ho-primary-borde: #e3cda3;
  --ho-header: linear-gradient(135deg, #6e4a23 0%, #8a5e2b 55%, #a8742f 100%);
  --ho-header-solido: #7a5326;
  --ho-bg: #faf5ec;
  --ho-card-bg: #fdf9f3;
  --ho-borde: #e9ddc8;
  --ho-texto: #4a3f33;
  --ho-texto-suave: #8a7d6b;
  --ho-success: #2f8a55;
  --ho-success-dark: #246b42;
  --ho-success-soft: #e2f1e7;
  --ho-danger: #c0392b;
  --ho-danger-soft: #fbeae8;
  --ho-warning: #c98a1e;
  --ho-muted-icon: #b8a685;
  --ho-radio: 10px;
  --ho-sombra: 0 2px 6px rgba(74, 63, 51, 0.1);
}

/* Fondo general del wrapper de cada pantalla */
.hotel-layout,
#pantallaHotelEspacios,
#pantallaHotelReservas,
#pantallaHotelHospedados,
#pantallaHotelHistorial,
#pantallaHotelAgenda,
#pantallaHotelTablero,
#pantallaHotelKpi {
  /*background: var(--ho-bg); comentado, se ve mejor así en pantalla*/
  min-height: 100%;
  color: var(--ho-texto);
}

/* ===========================================================================
   HEADER DE PANTALLA  (estructura de .lp-header-*)
   =========================================================================== */
.ho-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: var(--ho-header-solido);
  background: var(--ho-header);
  color: #fff;
  border-radius: var(--ho-radio);
  margin: 10px 14px 0;
  box-shadow: 0 2px 6px rgba(74, 63, 51, 0.14);
}

.ho-header-titulo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ho-header-titulo > i {
  font-size: 22px;
  color: #ffd9a0;
}

.ho-header-h5 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #fff;
}

.ho-header-sub {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
}

.ho-header-sub > .ho-contador {
  color: #ffe2ad;
  font-weight: 700;
}

/* ===========================================================================
   TOOLBAR  (estructura de .lp-toolbar)
   =========================================================================== */
.ho-toolbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 12px 14px 0;
  background: var(--ho-card-bg);
  border: 1px solid var(--ho-borde);
  border-radius: var(--ho-radio);
  box-shadow: 0 1px 3px rgba(74, 63, 51, 0.06);
  flex-wrap: wrap;
}

/* ── Pestañas de configuración (Espacios / Horario del hotel) ────────────────── */
.ho-conf-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 12px 14px 0;
}

.ho-conf-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ho-card-bg);
  color: var(--ho-muted, #8a7c6a);
  border: 1px solid var(--ho-borde);
  border-radius: var(--ho-radio);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ho-conf-tab > i {
  font-size: 13px;
}

.ho-conf-tab:hover {
  color: var(--ho-texto);
  border-color: var(--ho-primary-borde);
}

.ho-conf-tab.activo {
  background: var(--ho-primary);
  color: #fff;
  border-color: var(--ho-primary);
}

.ho-conf-panel[hidden] {
  display: none;
}

/* Botón base */
.ho-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.18s,
    color 0.18s,
    border-color 0.18s,
    transform 0.18s;
}

.ho-btn > i {
  font-size: 14px;
}

.ho-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Primario (acento ámbar) */
.ho-btn-primario {
  background: var(--ho-primary);
  color: #fff;
  border-color: var(--ho-primary);
}

.ho-btn-primario:hover {
  background: var(--ho-primary-dark);
  border-color: var(--ho-primary-dark);
  transform: translateY(-1px);
}

/* Secundario / outline */
.ho-btn-secundario {
  background: var(--ho-card-bg);
  color: var(--ho-primary);
  border-color: var(--ho-primary);
}

.ho-btn-secundario:hover {
  background: var(--ho-primary);
  color: #fff;
  transform: translateY(-1px);
}

/* Peligro */
.ho-btn-peligro {
  background: var(--ho-danger);
  color: #fff;
  border-color: var(--ho-danger);
}

.ho-btn-peligro:hover {
  background: #a3271b;
  border-color: #a3271b;
}

/* Botón suave neutro (ej. refrescar) — se alinea a la derecha por defecto */
.ho-btn-neutro {
  background: #fff;
  color: var(--ho-texto-suave);
  border: 1px solid var(--ho-borde);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  transition:
    background 0.18s,
    color 0.18s,
    border-color 0.18s;
  margin-left: auto;
}

.ho-btn-neutro:hover {
  background: var(--ho-primary-soft);
  color: var(--ho-primary);
  border-color: var(--ho-primary);
}

/* Botón cuadrado solo-ícono */
.ho-btn-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: #fff;
  color: var(--ho-texto-suave);
  border: 1px solid var(--ho-borde);
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}

.ho-btn-icono > i {
  font-size: 13px;
}

.ho-btn-icono:hover {
  background: var(--ho-primary-soft);
  color: var(--ho-primary);
  border-color: var(--ho-primary);
}

/* Botón de acción con texto (toolbar): p. ej. "Visor de rutinas" */
.ho-btn-accion {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  background: #fff;
  color: var(--ho-primary-dark);
  border: 1px solid var(--ho-primary-borde);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.ho-btn-accion > i {
  font-size: 13px;
}
.ho-btn-accion:hover {
  background: var(--ho-primary-soft);
  color: var(--ho-primary);
  border-color: var(--ho-primary);
}

.ho-btn-icono.ho-icono-peligro:hover {
  background: var(--ho-danger-soft);
  color: var(--ho-danger);
  border-color: var(--ho-danger);
}

/* Variante de peligro del botón con texto: p. ej. "Quitar" una tarifa DayCare.
   Se distingue en reposo (no solo en hover) por ser una acción destructiva. */
.ho-btn-accion.ho-icono-peligro {
  color: var(--ho-danger);
  border-color: var(--ho-danger);
}
.ho-btn-accion.ho-icono-peligro:hover {
  background: var(--ho-danger-soft);
  color: var(--ho-danger);
  border-color: var(--ho-danger);
}

.ho-btn-icono.ho-icono-ok:hover {
  background: var(--ho-success-soft);
  color: var(--ho-success);
  border-color: var(--ho-success);
}

/* Toggle de estado: color en REPOSO para que refleje el estado actual
   (activo = verde "encendido"; inactivo = gris atenuado "apagado"). */
.ho-btn-icono.ho-icono-ok {
  color: var(--ho-success);
}
.ho-btn-icono.ho-icono-off {
  color: var(--ho-texto-suave);
}
.ho-btn-icono.ho-icono-off:hover {
  background: var(--ho-success-soft);
  color: var(--ho-success);
  border-color: var(--ho-success);
}

/* ===========================================================================
   Dropdown de acciones por fila (patrón lp-btn-acciones de hospitalizado,
   recoloreado al cálido del hotel). Usado en Finalizados (historial).
   =========================================================================== */
.hotel-layout .ho-card-acciones-wrap {
  position: relative;
  display: inline-block;
}

.hotel-layout .ho-btn-acciones {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--ho-borde);
  background: #fff;
  color: var(--ho-texto-suave, #6c757d);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.hotel-layout .ho-btn-acciones:hover,
.hotel-layout .ho-btn-acciones[aria-expanded="true"] {
  background: var(--ho-primary-soft);
  color: var(--ho-primary-dark);
  border-color: var(--ho-primary-borde);
}

.hotel-layout .ho-acciones-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 210px;
  background: #fff;
  border: 1px solid var(--ho-borde);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(74, 63, 51, 0.18);
  padding: 4px 0;
  z-index: 100;
  display: none;
}

.hotel-layout .ho-acciones-menu.abierto {
  display: block;
}

.hotel-layout .ho-accion-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: none;
  border: none;
  padding: 8px 14px;
  font-size: 12.5px;
  color: #4a3f33;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}

.hotel-layout .ho-accion-item:hover {
  background: #f6ecd9;
  color: #4a3f33;
}

.hotel-layout .ho-accion-item > i {
  width: 16px;
  font-size: 12px;
  color: #b07a2e;
}

/* Ítem "Cobrar" (destacado en verde de éxito) */
.hotel-layout .ho-accion-item.ho-accion-ok > i {
  color: var(--ho-success);
}
.hotel-layout .ho-accion-item.ho-accion-ok:hover {
  background: var(--ho-success-soft);
  color: var(--ho-success-dark);
}

.hotel-layout .ho-acciones-sep {
  border-top: 1px solid var(--ho-borde);
  margin: 4px 0;
}

/* ===========================================================================
   BUSCADOR  (estructura de .lp-buscador-*)
   =========================================================================== */
.ho-buscador-wrap {
  position: relative;
  flex: 1 1 240px;
  max-width: 360px;
  min-width: 200px;
}

.ho-buscador-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--ho-texto-suave);
  font-size: 13px;
  pointer-events: none;
}

.ho-buscador {
  width: 100%;
  border: 1px solid var(--ho-borde);
  border-radius: 8px;
  padding: 8px 12px 8px 34px;
  font-size: 13px;
  background: #fff;
  color: var(--ho-texto);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.ho-buscador:focus {
  outline: none;
  border-color: var(--ho-primary);
  box-shadow: 0 0 0 3px rgba(176, 122, 46, 0.16);
}

/* ===========================================================================
   RANGO DE FECHAS  (toolbar de Historial)
   =========================================================================== */
.ho-rango-fechas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.ho-rango-label {
  font-size: 12px;
  color: var(--ho-texto-suave);
  font-weight: 600;
  margin: 0;
}

.ho-input-fecha {
  border: 1px solid var(--ho-borde);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  background: #fff;
  color: var(--ho-texto);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.ho-input-fecha:focus {
  outline: none;
  border-color: var(--ho-primary);
  box-shadow: 0 0 0 3px rgba(176, 122, 46, 0.16);
}

/* ===========================================================================
   TABLA  (estructura de .lp-tabla-*)
   =========================================================================== */
.ho-tabla-wrap {
  background: var(--ho-card-bg);
  border: 1px solid var(--ho-borde);
  border-radius: var(--ho-radio);
  margin: 12px 14px;
  box-shadow: 0 1px 3px rgba(74, 63, 51, 0.06);
}

.ho-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--ho-card-bg);
}

.ho-tabla thead {
  color: #fff;
}

.ho-tabla thead th {
  padding: 10px 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
  text-align: left;
  border-bottom: 2px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  background: var(--ho-header-solido);
  position: sticky;
  top: 60px; /* bajo la toolbar sticky */
  z-index: 10;
}

.ho-tabla thead th:first-child {
  border-top-left-radius: 9px;
}

.ho-tabla thead th:last-child {
  border-top-right-radius: 9px;
}

.ho-tabla tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ho-borde);
  vertical-align: top;
  color: var(--ho-texto);
}

/* Zebra opcional (cálida) */
.ho-tabla tbody tr:nth-child(even) td {
  background: #fbf4e8;
}

.ho-tabla tbody tr:hover td {
  background: var(--ho-primary-soft);
}

.ho-tabla tbody tr:last-child td {
  border-bottom: none;
}

/* Columna de acciones: SIEMPRE primera, angosta y centrada */
.ho-col-acciones {
  width: 56px;
  text-align: center;
}

/* Columna de monto (Historial): alineada a la derecha, resaltada */
.ho-col-total {
  text-align: right;
  font-weight: 700;
  color: var(--ho-texto);
  white-space: nowrap;
}

/* ===========================================================================
   ESTADO VACÍO  (estructura de .lp-vacio-*)
   =========================================================================== */
.ho-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 20px;
  background: var(--ho-card-bg);
  border: 1px dashed var(--ho-borde);
  border-radius: var(--ho-radio);
  text-align: center;
  color: var(--ho-texto-suave);
}

.ho-vacio-icon {
  font-size: 56px;
  color: var(--ho-primary-borde);
  margin-bottom: 12px;
}

.ho-vacio-titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--ho-texto);
  margin: 0 0 4px;
}

.ho-vacio-texto {
  font-size: 13px;
  color: var(--ho-texto-suave);
  margin: 0;
}

/* ===========================================================================
   SPINNER  (estructura de .ct-spinner-wrap)
   =========================================================================== */
.ho-spinner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  gap: 10px;
  color: var(--ho-texto-suave);
  font-size: 14px;
}

.ho-spinner-wrap i.fa-spin {
  color: var(--ho-primary);
  font-size: 18px;
}

/* ===========================================================================
   CARD / FORMULARIO  (estructura de .ni-card / .ni-campo / .ni-*)
   =========================================================================== */
.ho-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
  padding: 12px 14px 28px;
}

.ho-card {
  background: var(--ho-card-bg);
  border: 1px solid var(--ho-borde);
  border-radius: var(--ho-radio);
  box-shadow: var(--ho-sombra);
  padding: 18px;
}

.ho-card-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ho-texto);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ho-bg);
}

.ho-card-titulo i {
  color: var(--ho-primary);
}

.ho-campo {
  margin-bottom: 16px;
}

.ho-campo--last {
  margin-bottom: 0;
}

.ho-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  color: var(--ho-texto-suave);
  margin-bottom: 6px;
}

.ho-input,
.ho-select,
.ho-textarea {
  width: 100%;
  border: 1px solid var(--ho-borde);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ho-texto);
  background: #fff;
  margin-bottom: 12px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

/* En la fila del horario los inputs van alineados con el botón: sin margen inferior */
.hotel-layout .ho-horario-form .ho-input {
  margin-bottom: 0;
}

.ho-input:focus,
.ho-select:focus,
.ho-textarea:focus {
  outline: none;
  border-color: var(--ho-primary);
  box-shadow: 0 0 0 3px rgba(176, 122, 46, 0.16);
}

.ho-select:disabled,
.ho-input:disabled {
  background: #f3ede2;
  color: var(--ho-texto-suave);
  cursor: not-allowed;
}

/* Input de monto con prefijo de moneda ($) dentro de un .input-group de Bootstrap
   (ej. modal Nuevo/Editar DayCare). Sin esto el .ho-input mantiene su width:100%,
   sus 4 esquinas redondeadas y su margin-bottom, y se desborda del grupo chocando
   contra el prefijo. Aquí se iguala el prefijo a la altura/borde del .ho-input, se
   unen sin doble borde y el margen inferior pasa al grupo para conservar la
   separación con los demás campos de la grilla. */
.hotel-layout .ho-form-campo .input-group {
  display: flex;
  align-items: stretch;
  margin-bottom: 12px;
}
.hotel-layout .ho-form-campo .input-group .input-group-text {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ho-texto-suave);
  background: #f3ede2;
  border: 1px solid var(--ho-borde);
  border-right: none;
  border-radius: 8px 0 0 8px;
}
.hotel-layout .ho-form-campo .input-group .ho-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin-bottom: 0;
  border-radius: 0 8px 8px 0;
}
.hotel-layout .ho-form-campo .input-group .ho-input:focus {
  position: relative;
  z-index: 1;
}
/* Variante SUFIJO: el .input-group-text va DESPUÉS del input (ej. el "%" del campo
   Impuesto). Las reglas de arriba están escritas para el prefijo ($), así que sin esto
   el sufijo sale con las esquinas redondeadas del lado equivocado y sin borde propio,
   pegado al input. Se seleccionan por posición real, no por una clase extra. */
.hotel-layout .ho-form-campo .input-group .ho-input:first-child {
  border-radius: 8px 0 0 8px;
}
.hotel-layout .ho-form-campo .input-group .ho-input + .input-group-text {
  border-left: none;
  border-right: 1px solid var(--ho-borde);
  border-radius: 0 8px 8px 0;
}

.ho-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.4;
}

/* ===========================================================================
   Estilo LOCAL de SweetAlert2 para el módulo Hotel (popup cálido).
   Se monta en <body>; se aplica vía customClass desde los JS (config/visor).
   =========================================================================== */
.ho-swal-popup {
  border-radius: 14px !important;
  border-top: 4px solid #b07a2e;
  font-family: inherit;
}

.ho-swal-popup .swal2-title {
  color: #4a3f33 !important;
}

.ho-swal-popup .swal2-html-container,
.ho-swal-popup .swal2-content {
  color: #6b5d4a;
}

.ho-swal-popup .swal2-input-label {
  padding: 0 1.5em;
  color: #6b5d4a;
}

.ho-swal-confirm.swal2-styled {
  background-color: #b07a2e !important;
  border: 1px solid #b07a2e !important;
  box-shadow: none !important;
  font-weight: 700;
}

.ho-swal-confirm.swal2-styled:hover {
  background-color: #8f601f !important;
  border-color: #8f601f !important;
}

.ho-swal-cancel.swal2-styled {
  background-color: transparent !important;
  color: #8a7d6b !important;
  border: 1px solid #e3cda3 !important;
  box-shadow: none !important;
  font-weight: 600;
}

.ho-swal-cancel.swal2-styled:hover {
  background-color: #f6ecd9 !important;
  color: #4a3f33 !important;
  border-color: #b07a2e !important;
}

/* Botón "deny" (2ª acción, ej. "cobrar después"): color del estado CHECKOUT/pendiente */
.ho-swal-deny.swal2-styled {
  background-color: #fbf0d8 !important;
  color: #8a5e16 !important;
  border: 1px solid #ecd6a3 !important;
  box-shadow: none !important;
  font-weight: 700;
}

.ho-swal-deny.swal2-styled:hover {
  background-color: #f2e2bf !important;
  border-color: #d9bd7f !important;
}

/* Transiciones de apertura/cierre de los DIÁLOGOS de hotel. El :not(.swal2-toast)
   deja intactos los toasts (conservan su deslizamiento nativo de SweetAlert2). */
@keyframes hoSwalIn {
  0%   { opacity: 0; transform: translateY(16px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hoSwalOut {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(10px) scale(0.97); }
}
.ho-swal-popup.swal2-show:not(.swal2-toast) {
  animation: hoSwalIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ho-swal-popup.swal2-hide:not(.swal2-toast) {
  animation: hoSwalOut 0.2s ease-in forwards;
}

/* Toast breve arriba-derecha (hoToast): guarda-directo de los toggles de config.
   Acento cálido de hotel al costado, sin el marco completo del diálogo. */
.ho-swal-toast.swal2-toast {
  border-inline-start: 4px solid #b07a2e;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(74, 63, 51, 0.16);
}
.ho-swal-toast.swal2-toast .swal2-title {
  color: #4a3f33;
  font-size: 14px;
  font-weight: 600;
}
.ho-swal-toast.swal2-toast .swal2-timer-progress-bar {
  background: rgba(176, 122, 46, 0.4);
}

/* Editores Quill de la Ficha de estadía (modal de reserva) */
.ho-quill {
  background: #fff;
  border-radius: 8px;
}

.ho-quill .ql-toolbar.ql-snow {
  border: 1px solid var(--ho-borde);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: var(--ho-bg);
}

.ho-quill .ql-container.ql-snow {
  border: 1px solid var(--ho-borde);
  border-radius: 0 0 8px 8px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ho-texto);
}

.ho-quill .ql-editor {
  min-height: 80px;
}

.ho-quill .ql-editor.ql-blank::before {
  color: var(--ho-texto-suave);
  font-style: normal;
}

/* ===========================================================================
   BADGES / PÍLDORAS
   =========================================================================== */
.ho-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border: 1px solid var(--ho-primary-borde);
  background: var(--ho-primary-soft);
  color: var(--ho-primary-dark);
  white-space: nowrap;
}

.ho-badge.ho-badge-activo {
  background: var(--ho-success-soft);
  color: var(--ho-success-dark);
  border-color: #bfe0cb;
}

.ho-badge.ho-badge-inactivo {
  background: #ece7df;
  color: #6f655a;
  border-color: #d8cfc1;
}

/* Separación entre badges apilados en la celda de Estado (ej. estado de la reserva
   + píldora "DayCare"): sin esto quedan pegados uno al otro. Aplica en tabla y en
   el modo tarjeta responsive. */
.hotel-layout td[data-label="Estado"] .ho-badge,
.hotel-layout td[data-label="Estado"] .ho-badge-estado {
  margin: 2px 5px 2px 0;
}

/* Celda de Tamaño(s): un espacio puede admitir varios, cada uno es un badge que
   envuelve a la siguiente línea; el margen inferior evita que queden pegados
   verticalmente al ajustarse. */
.hotel-layout td[data-label="Tamaño"] .ho-badge,
.hotel-layout td[data-label="Espacios que lo admiten"] .ho-badge {
  margin: 2px 5px 5px 0;
}

/* Duración de la jornada DayCare: texto atenuado junto al rango en la tabla y
   chip informativo dentro del modal Nuevo/Editar DayCare. */
.ho-dc-dur {
  color: var(--ho-texto-suave, #8a7d6b);
  font-size: 12px;
  white-space: nowrap;
}
.ho-dc-dur-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ho-primary-soft, #f6ecd9);
  border: 1px solid var(--ho-primary-borde, #e6d3ad);
  color: var(--ho-primary-dark, #8f601f);
  font-size: 13px;
  font-weight: 600;
}
.ho-dc-dur-chip[hidden] {
  display: none;
}
.ho-dc-dur-chip i {
  color: var(--ho-primary, #b07a2e);
}

/* Subtexto de ayuda/resumen del modal de reserva (hint del DayCare, resumen del
   DayCare elegido, "buscando disponibilidad…", etc.). Sin estilo heredaba el
   tamaño del texto normal y se veía demasiado grande. */
.hotel-layout .ho-sub {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ho-texto-suave, #8a7d6b);
}
.hotel-layout .ho-sub i {
  color: var(--ho-muted-icon, #b8a685);
}
.hotel-layout #hoResDaycareResumen {
  margin-top: 8px;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: var(--ho-primary-soft, #f6ecd9);
  border: 1px solid var(--ho-primary-borde, #e6d3ad);
  border-radius: 8px;
}
.hotel-layout #hoResDaycareResumen .ho-sub {
  margin-top: 2px;
}
.hotel-layout #hoResDaycareResumen ul {
  font-size: 12.5px;
}

/* ===========================================================================
   ACCIONES DE FILA  (botones de icono en la celda de acciones)
   =========================================================================== */
.ho-acciones-fila {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ===========================================================================
   RESPONSIVO  (las cards colapsan a 1 columna en móvil, igual al estándar)
   =========================================================================== */
@media (max-width: 575.98px) {
  .ho-grid {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .ho-toolbar {
    gap: 8px;
    padding: 10px;
  }

  .ho-btn-neutro {
    margin-left: 0;
  }

  .ho-buscador-wrap {
    max-width: 100%;
    flex: 1 1 100%;
  }

  .ho-header-bar {
    margin: 8px 10px 0;
    padding: 10px 12px;
  }

  .ho-card {
    padding: 14px;
  }
}

@media (min-width: 992px) {
  .ho-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1400px) {
  .ho-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1800px) {
  .ho-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Tabla responsiva: ocultar/compactar como en el estándar */
@media (max-width: 767px) {
  .ho-tabla-wrap {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  .ho-tabla,
  .ho-tabla tbody,
  .ho-tabla tr,
  .ho-tabla td {
    display: block;
    width: 100%;
  }

  .ho-tabla thead {
    display: none;
  }

  .ho-tabla tbody tr {
    position: relative;
    background: var(--ho-card-bg);
    border: 1px solid var(--ho-borde);
    border-radius: var(--ho-radio);
    margin-bottom: 12px;
    padding: 12px;
    box-shadow: 0 1px 2px rgba(74, 63, 51, 0.06);
  }

  .ho-tabla tbody tr:nth-child(even) td,
  .ho-tabla tbody tr:hover td {
    background: transparent;
  }

  .ho-tabla tbody td {
    padding: 6px 0;
    border-bottom: none;
  }

  .ho-tabla tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ho-texto-suave);
    margin-bottom: 2px;
  }

  /* La celda de acciones flota arriba a la derecha de la mini-card */
  .ho-tabla td.ho-col-acciones {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0;
    width: auto;
    text-align: right;
  }

  .ho-tabla td.ho-col-acciones::before {
    display: none;
  }
}

/* ===========================================================================
   ░░░  PANTALLA DE RESERVAS — bloque añadido  ░░░
   Modal propio (NO SweetAlert) + buscador de paciente + tarjeta seleccionada +
   panel inline nuevo paciente + opciones de disponibilidad + chips de filtro.
   Espeja la ESTRUCTURA de nuevoIngresoHospital.css (ni-*) y de los chips de
   configTratamiento.css (.lp-chip), con prefijo "ho-" y la paleta cálida ya
   definida arriba (vars --ho-*). Todo vive bajo el scope .hotel-layout para
   heredar las variables del módulo.
   =========================================================================== */

/* Utilitaria de visibilidad por JS */
.ho-oculto {
  display: none !important;
}

/* El SweetAlert2 debe quedar SOBRE el modal propio (.ho-modal, z-index 4000) y
   sus overlays. Sin esto, los Swal lanzados con el modal abierto quedan detrás.
   (En pantallas con paneles fullscreen de rutinas, configRutina/visorRutinas.css
   lo elevan aún más a 10100 al cargarse después.) */
.swal2-container {
  z-index: 5000 !important;
}

/* ===========================================================================
   MODAL PROPIO  (overlay centrado, responsive)  — análogo a .ni-overlay
   El overlay se oculta con [hidden] o con la clase .ho-oculto; visible si no.
   =========================================================================== */
.hotel-layout .ho-modal {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(46, 33, 18, 0.55);
  overflow-y: auto;
}

.hotel-layout .ho-modal[hidden] {
  display: none;
}

/* Transiciones de apertura/cierre del modal de hotel — mismo lenguaje visual que
   los diálogos Swal (fade del fondo + pop del cuadro). La entrada es CSS puro (se
   dispara al quitarse [hidden]); la salida usa la clase .ho-modal--cerrando que
   agrega el JS antes de ocultar, esperando el fin de la animación. */
@keyframes hoModalBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes hoModalBackdropOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes hoModalDialogIn {
  0% { opacity: 0; transform: translateY(16px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hoModalDialogOut {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(10px) scale(0.97); }
}
.hotel-layout .ho-modal:not([hidden]) {
  animation: hoModalBackdropIn 0.22s ease;
}
.hotel-layout .ho-modal:not([hidden]) .ho-modal-dialog {
  animation: hoModalDialogIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hotel-layout .ho-modal.ho-modal--cerrando {
  animation: hoModalBackdropOut 0.2s ease forwards;
}
.hotel-layout .ho-modal.ho-modal--cerrando .ho-modal-dialog {
  animation: hoModalDialogOut 0.2s ease-in forwards;
}

.hotel-layout .ho-modal-dialog {
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--ho-card-bg);
  border: 1px solid var(--ho-borde);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(46, 33, 18, 0.35);
  overflow: hidden;
}

.hotel-layout .ho-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--ho-header-solido);
  background: var(--ho-header);
  color: #fff;
  flex-shrink: 0;
}

.hotel-layout .ho-modal-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #fff;
}

.hotel-layout .ho-modal-titulo > i {
  font-size: 18px;
  color: #ffd9a0;
}

.hotel-layout .ho-modal-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 20px;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
  border-radius: 6px;
  transition:
    background 0.15s,
    color 0.15s;
}

.hotel-layout .ho-modal-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.hotel-layout .ho-modal-body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1 1 auto;
}

.hotel-layout .ho-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--ho-borde);
  background: #fbf6ed;
  flex-shrink: 0;
}

/* Casilla "Registrar el check-in ahora" del modal de nueva reserva. Va a la
   izquierda del footer (margin-right:auto) para separarla de Cancelar/Guardar:
   es una opción de la acción, no un tercer botón. */
.hotel-layout .ho-checkin-ya {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 auto 0 0;
  padding: 6px 10px;
  border: 1px solid var(--ho-borde);
  border-radius: var(--ho-radio);
  background: var(--ho-card-bg);
  font-size: 13px;
  color: var(--ho-texto);
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
/* `display:flex` en la clase gana sobre el display:none del user-agent para
   [hidden], así que hay que declararlo (mismo patrón que .ho-modal[hidden]).
   Sin esto, la casilla seguiría viéndose al editar una reserva. */
.hotel-layout .ho-checkin-ya[hidden] {
  display: none;
}
.hotel-layout .ho-checkin-ya:hover {
  border-color: var(--ho-primary);
}
.hotel-layout .ho-checkin-ya input[type="checkbox"] {
  margin: 2px 0 0;
  accent-color: var(--ho-primary);
  cursor: pointer;
}
.hotel-layout .ho-checkin-ya i {
  color: var(--ho-primary);
}
.hotel-layout .ho-checkin-ya small {
  display: block;
  font-size: 11px;
  color: var(--ho-texto-suave);
}

/* En pantallas chicas el footer se apila: la casilla ocupa el ancho completo
   sobre los botones, que quedan alineados a la derecha. */
@media (max-width: 600px) {
  .hotel-layout .ho-modal-footer {
    flex-wrap: wrap;
  }
  .hotel-layout .ho-checkin-ya {
    flex: 1 0 100%;
    margin: 0 0 4px;
  }
}

/* ===========================================================================
   SECCIONES / PASOS dentro del modal  — análogo a .ni-card-titulo + .ni-step
   =========================================================================== */
.hotel-layout .ho-seccion {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ho-borde);
}

.hotel-layout .ho-seccion:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.hotel-layout .ho-seccion-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ho-texto);
  margin-bottom: 14px;
}

.hotel-layout .ho-seccion-titulo > i {
  color: var(--ho-primary);
}

.hotel-layout .ho-step {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ho-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

/* Fila de 2 campos lado a lado (colapsa a columna en móvil) */
.hotel-layout .ho-fila {
  display: flex;
  gap: 14px;
}

.hotel-layout .ho-fila > * {
  flex: 1 1 0;
  min-width: 0;
}

/* ===========================================================================
   BUSCADOR DE PACIENTE + RESULTADOS  — espejo de .ni-buscador / .ni-resultados
   =========================================================================== */
.hotel-layout .ho-buscador-paciente {
  position: relative;
}

.hotel-layout .ho-input-icono {
  position: relative;
  /* El margen inferior de espaciado se mueve del .ho-input al contenedor: así la
     caja del contenedor coincide con la del input y el ícono (top:50%) centra
     verticalmente sobre el input, no sobre input+margen. */
  margin-bottom: 12px;
}

.hotel-layout .ho-input-icono > i {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--ho-primary);
  font-size: 13px;
  pointer-events: none;
}

.hotel-layout .ho-input-icono .ho-input {
  padding-left: 34px;
  margin-bottom: 0;
}

.hotel-layout .ho-resultados {
  position: absolute;
  z-index: 4050;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--ho-borde);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 15px 35px rgba(46, 33, 18, 0.16);
  max-height: 300px;
  overflow-y: auto;
  display: none;
}

.hotel-layout .ho-resultados.visible {
  display: block;
}

.hotel-layout .ho-resultado-item {
  padding: 11px 16px;
  border-bottom: 1px solid var(--ho-borde);
  cursor: pointer;
  transition:
    background 0.15s,
    padding-left 0.15s;
  color: var(--ho-texto);
}

.hotel-layout .ho-resultado-item:last-child {
  border-bottom: none;
}

.hotel-layout .ho-resultado-item:hover,
.hotel-layout .ho-resultado-item.activo {
  background: var(--ho-primary-soft);
  padding-left: 20px;
}

/* Fila resaltada al navegar con ↓/↑ desde #hoResBuscarPaciente.
   Va MÁS marcada que :hover a propósito: mientras se navega con el teclado el
   puntero suele quedar encima de otra fila, y con el mismo estilo se verían dos
   filas "activas" y no se sabría cuál toma el Enter. La barra lateral es el
   distintivo que el hover no tiene. */
.hotel-layout .ho-resultado-item.ho-nav-activo {
  background: var(--ho-primary-soft);
  padding-left: 20px;
  box-shadow: inset 3px 0 0 0 var(--ho-primary);
}

.hotel-layout .ho-resultado-item.ho-nav-activo .ho-resultado-item-nombre {
  color: var(--ho-primary);
}

.hotel-layout .ho-resultado-item-nombre {
  font-weight: 600;
  color: var(--ho-texto);
  display: block;
  line-height: 1.25;
}

.hotel-layout .ho-resultado-item-sub {
  font-size: 12px;
  color: var(--ho-texto-suave);
  display: block;
  margin-top: 2px;
}

.hotel-layout .ho-resultado-vacio {
  padding: 18px;
  text-align: center;
  color: var(--ho-texto-suave);
  font-size: 13px;
}

/* ===========================================================================
   TARJETA DE PACIENTE SELECCIONADO  — espejo de .ni-selected
   =========================================================================== */
.hotel-layout .ho-selected {
  display: none;
  margin-top: 14px;
  padding: 16px;
  background: var(--ho-card-bg);
  border: 1px solid var(--ho-borde);
  border-left: 3px solid var(--ho-primary);
  border-radius: var(--ho-radio);
  box-shadow: var(--ho-sombra);
  justify-content: space-between;
  align-items: flex-start;
}

.hotel-layout .ho-selected.activo {
  display: flex;
}

.hotel-layout .ho-selected-info {
  display: flex;
  gap: 14px;
}

.hotel-layout .ho-selected-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ho-primary-soft);
  box-shadow: var(--ho-sombra);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ho-primary);
  font-size: 22px;
  flex-shrink: 0;
}

.hotel-layout .ho-selected-mascota {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ho-primary-dark);
  text-transform: capitalize;
}

.hotel-layout .ho-selected-tutor {
  margin: 2px 0 6px;
  font-size: 13px;
  color: var(--ho-texto-suave);
}

.hotel-layout .ho-selected-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ho-primary);
  font-size: 20px;
  line-height: 1;
  padding: 0;
}

.hotel-layout .ho-selected-close:hover {
  color: var(--ho-primary-dark);
}

/* Variantes suaves de badge para la tarjeta seleccionada (reusan .ho-badge) */
.hotel-layout .ho-badge.ho-badge-rut {
  background: var(--ho-primary);
  color: #fff;
  border-color: var(--ho-primary);
}

.hotel-layout .ho-badge.ho-badge-ficha {
  background: var(--ho-bg);
  color: var(--ho-primary-dark);
  border-color: var(--ho-borde);
}

/* ===========================================================================
   PANEL INLINE "NUEVO PACIENTE / NUEVO TUTOR"  — espejo de .ni-panel-mascota
   Usa .ho-grid / .ho-campo existentes para los inputs.
   =========================================================================== */
.hotel-layout .ho-panel-nuevo {
  display: none;
  margin-top: 14px;
  padding: 14px;
  background: var(--ho-card-bg);
  border: 1px solid var(--ho-borde);
  border-radius: var(--ho-radio);
  box-shadow: var(--ho-sombra);
}

.hotel-layout .ho-panel-nuevo.activo {
  display: block;
}

.hotel-layout .ho-panel-nuevo-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.hotel-layout .ho-panel-nuevo-titulo {
  font-weight: 700;
  color: var(--ho-primary);
}

.hotel-layout .ho-panel-close {
  background: none;
  border: none;
  color: var(--ho-texto-suave);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}

.hotel-layout .ho-panel-close:hover {
  color: var(--ho-texto);
}

/* El panel inline puede contener el form bootstrap (generarFormularioNuevaMascota);
   se iguala su .form-control al estilo .ho-input cálido. */
.hotel-layout .ho-panel-nuevo .form-control,
.hotel-layout .ho-panel-nuevo .form-control-sm,
.hotel-layout .ho-panel-nuevo select.form-control {
  height: auto;
  width: 100%;
  border: 1px solid var(--ho-borde);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--ho-texto);
  background-color: #fff;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.hotel-layout .ho-panel-nuevo .form-control:focus,
.hotel-layout .ho-panel-nuevo .form-control-sm:focus,
.hotel-layout .ho-panel-nuevo select.form-control:focus {
  outline: none;
  border-color: var(--ho-primary);
  box-shadow: 0 0 0 3px rgba(176, 122, 46, 0.16);
}

.hotel-layout .ho-panel-nuevo label.small {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ho-texto-suave);
}

/* ===========================================================================
   OPCIONES DE ESPACIO DISPONIBLE  (resultado de la consulta de disponibilidad)
   =========================================================================== */
.hotel-layout .ho-espacios-disp {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.hotel-layout .ho-espacio-opcion {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid var(--ho-borde);
  border-radius: var(--ho-radio);
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s,
    transform 0.15s;
}

.hotel-layout .ho-espacio-opcion:hover {
  border-color: var(--ho-primary-borde);
  background: var(--ho-primary-soft);
  transform: translateY(-1px);
}

.hotel-layout .ho-espacio-opcion.ho-sel {
  border-color: var(--ho-primary);
  background: var(--ho-primary-soft);
  box-shadow: 0 0 0 3px rgba(176, 122, 46, 0.16);
}

.hotel-layout .ho-espacio-opcion-nombre {
  font-size: 14px;
  font-weight: 700;
  color: var(--ho-texto);
}

.hotel-layout .ho-espacio-opcion-tam {
  font-size: 12px;
  color: var(--ho-texto-suave);
}

.hotel-layout .ho-espacio-cupo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin-top: 2px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  background: var(--ho-success-soft);
  color: var(--ho-success-dark);
  border: 1px solid #bfe0cb;
}

/* Precio por noche del espacio en la tarjeta de disponibilidad. */
.hotel-layout .ho-espacio-precio {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ho-primary-dark, #8f601f);
}

.hotel-layout .ho-disp-vacio {
  padding: 24px 16px;
  text-align: center;
  background: var(--ho-bg);
  border: 2px dashed var(--ho-borde);
  border-radius: var(--ho-radio);
  color: var(--ho-texto-suave);
  font-size: 13px;
}

.hotel-layout .ho-disp-vacio > i {
  display: block;
  font-size: 30px;
  color: var(--ho-primary-borde);
  margin-bottom: 8px;
}

/* ===========================================================================
   CHIPS DE FILTRO POR ESTADO  — espejo de .lp-chip de configTratamiento.css
   + BADGES DE ESTADO para la tabla de reservas.
   Estados: RESERVADA · EN_ESTADIA · CHECKOUT · PAGADA · CANCELADA
   =========================================================================== */
.hotel-layout .ho-filtros {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.hotel-layout .ho-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: var(--ho-texto-suave);
  border: 1px solid var(--ho-borde);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
  user-select: none;
}

.hotel-layout .ho-chip > i {
  font-size: 11px;
}

.hotel-layout .ho-chip:hover {
  background: var(--ho-primary-soft);
  color: var(--ho-primary-dark);
  border-color: var(--ho-primary-borde);
}

.hotel-layout .ho-chip.activo {
  background: var(--ho-primary);
  color: #fff;
  border-color: var(--ho-primary);
}

.hotel-layout .ho-chip.activo.ho-chip-RESERVADA {
  background: #b07a2e;
  border-color: #b07a2e;
}

.hotel-layout .ho-chip.activo.ho-chip-EN_ESTADIA {
  background: #2f8a55;
  border-color: #2f8a55;
}

.hotel-layout .ho-chip.activo.ho-chip-CHECKOUT {
  background: #c98a1e;
  border-color: #c98a1e;
}

.hotel-layout .ho-chip.activo.ho-chip-PAGADA {
  background: #246b42;
  border-color: #246b42;
}

.hotel-layout .ho-chip.activo.ho-chip-CANCELADA {
  background: #c0392b;
  border-color: #c0392b;
}

/* Badge de estado para cada fila de la tabla (mismos colores que los chips,
   en versión suave/píldora) */
.hotel-layout .ho-badge-estado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.hotel-layout .ho-badge-estado.ho-estado-RESERVADA {
  background: var(--ho-primary-soft);
  color: var(--ho-primary-dark);
  border-color: var(--ho-primary-borde);
}

.hotel-layout .ho-badge-estado.ho-estado-EN_ESTADIA {
  background: var(--ho-success-soft);
  color: var(--ho-success-dark);
  border-color: #bfe0cb;
}

.hotel-layout .ho-badge-estado.ho-estado-CHECKOUT {
  background: #fbf0d8;
  color: #8a5e16;
  border-color: #ecd6a3;
}

.hotel-layout .ho-badge-estado.ho-estado-PAGADA {
  background: #d9efe1;
  color: #1c5333;
  border-color: #aed8bf;
}

.hotel-layout .ho-badge-estado.ho-estado-CANCELADA {
  background: var(--ho-danger-soft);
  color: var(--ho-danger);
  border-color: #f1c6c1;
}

/* ===========================================================================
   RESPONSIVO del bloque de RESERVAS
   =========================================================================== */
@media (max-width: 575.98px) {
  .hotel-layout .ho-modal {
    padding: 0;
  }

  .hotel-layout .ho-modal-dialog {
    max-width: 100%;
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
  }

  .hotel-layout .ho-fila {
    flex-direction: column;
    gap: 0;
  }

  .hotel-layout .ho-espacios-disp {
    grid-template-columns: 1fr;
  }

  .hotel-layout .ho-filtros {
    width: 100%;
  }
}

/* ===========================================================================
   ░░░  PANTALLA EN HOTEL — Fase 3: GESTIÓN DE ESTADÍA  ░░░
   Panel/modal de cargos de la estadía (prestaciones + insumos), resumen del
   paciente, totales y sub-panel inline de "Agregar".
   Reutiliza las clases de modal ya existentes (.ho-modal/.ho-modal-dialog/
   .ho-modal-header/.ho-modal-body/.ho-modal-footer/.ho-oculto) y el buscador
   (.ho-buscador-paciente/.ho-input-icono/.ho-resultados/.ho-resultado-item).
   Solo agrega lo propio del panel de estadía, con prefijo "ho-" y la paleta
   cálida (vars --ho-*), bajo el scope .hotel-layout.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1) Dialog más ancho — combina con .ho-modal-dialog
   --------------------------------------------------------------------------- */
.hotel-layout .ho-modal-dialog.ho-modal-dialog-ancho {
  max-width: 920px;
}

/* ---------------------------------------------------------------------------
   2) Encabezado resumen de la estadía
   --------------------------------------------------------------------------- */
.hotel-layout .ho-estadia-resumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  padding: 14px 16px;
  margin-bottom: 18px;
  background: var(--ho-card-bg);
  border: 1px solid var(--ho-borde);
  border-left: 3px solid var(--ho-primary);
  border-radius: var(--ho-radio);
  box-shadow: var(--ho-sombra);
}

.hotel-layout .ho-estadia-dato {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hotel-layout .ho-estadia-dato-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  color: var(--ho-texto-suave);
}

.hotel-layout .ho-estadia-dato-valor {
  font-size: 14px;
  font-weight: 700;
  color: var(--ho-texto);
}

/* Píldora destacada "N noches / M días" con acento cálido */
.hotel-layout .ho-estadia-noches {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  align-self: center;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 999px;
  background: var(--ho-primary);
  color: #fff;
  border: 1px solid var(--ho-primary);
  white-space: nowrap;
  box-shadow: var(--ho-sombra);
}

.hotel-layout .ho-estadia-noches > i {
  font-size: 13px;
  color: #ffe2ad;
}

/* ---------------------------------------------------------------------------
   3) Bloques de cargos (Prestaciones / Insumos)
   --------------------------------------------------------------------------- */
.hotel-layout .ho-cargos-bloque {
  margin-bottom: 20px;
  background: var(--ho-card-bg);
  border: 1px solid var(--ho-borde);
  border-radius: var(--ho-radio);
  box-shadow: var(--ho-sombra);
  overflow: hidden;
}

.hotel-layout .ho-cargos-bloque:last-child {
  margin-bottom: 0;
}

.hotel-layout .ho-cargos-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ho-texto);
  background: var(--ho-bg);
  border-bottom: 1px solid var(--ho-borde);
}

.hotel-layout .ho-cargos-titulo > i {
  color: var(--ho-primary);
  font-size: 14px;
}

/* Empuja el botón "Agregar" a la derecha del título */
.hotel-layout .ho-cargos-titulo-accion {
  margin-left: auto;
}

/* Tabla compacta de cargos — look de .ho-tabla pero más densa.
   Clase propia para NO pisar .ho-tabla. */
.hotel-layout .ho-cargos-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  background: var(--ho-card-bg);
}

.hotel-layout .ho-cargos-tabla thead th {
  padding: 7px 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
  text-align: left;
  color: var(--ho-texto-suave);
  background: #fbf4e8;
  border-bottom: 1px solid var(--ho-borde);
  white-space: nowrap;
}

.hotel-layout .ho-cargos-tabla thead th.ho-cargos-col-num {
  text-align: right;
}

.hotel-layout .ho-cargos-tabla thead th.ho-cargos-col-accion {
  width: 44px;
  text-align: center;
}

.hotel-layout .ho-cargos-tabla tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--ho-borde);
  vertical-align: middle;
  color: var(--ho-texto);
}

.hotel-layout .ho-cargos-tabla tbody tr:last-child td {
  border-bottom: none;
}

.hotel-layout .ho-cargos-tabla tbody tr:hover td {
  background: var(--ho-primary-soft);
}

.hotel-layout .ho-cargos-tabla td.ho-cargos-col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hotel-layout .ho-cargos-tabla td.ho-cargos-col-accion {
  text-align: center;
}

.hotel-layout .ho-cargos-tabla .ho-cargos-nombre {
  font-weight: 600;
  color: var(--ho-texto);
}

/* Estado vacío del bloque */
.hotel-layout .ho-cargos-vacio {
  padding: 18px 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ho-texto-suave);
  font-style: italic;
}

/* Total del bloque (alineado a la derecha, negrita) */
.hotel-layout .ho-cargos-total {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 10px 16px;
  background: #fbf4e8;
  border-top: 1px solid var(--ho-borde);
  font-size: 13px;
  font-weight: 700;
  color: var(--ho-texto);
}

.hotel-layout .ho-cargos-total-valor {
  font-variant-numeric: tabular-nums;
  color: var(--ho-primary-dark);
}

/* ---------------------------------------------------------------------------
   4) Total general de la estadía
   --------------------------------------------------------------------------- */
.hotel-layout .ho-estadia-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding: 16px 20px;
  background: var(--ho-primary-soft);
  border: 1px solid var(--ho-primary-borde);
  border-radius: var(--ho-radio);
}

.hotel-layout .ho-estadia-total-label {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ho-primary-dark);
}

.hotel-layout .ho-estadia-total-valor {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--ho-primary-dark);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   5) Sub-panel inline de "Agregar" (buscar prestación/insumo + cantidad)
   Reutiliza .ho-buscador-paciente / .ho-input-icono / .ho-resultados /
   .ho-resultado-item ya definidos arriba.
   --------------------------------------------------------------------------- */
.hotel-layout .ho-agregar-panel {
  display: none;
  margin: 0 16px 14px;
  padding: 14px;
  background: var(--ho-bg);
  border: 1px dashed var(--ho-primary-borde);
  border-radius: var(--ho-radio);
}

.hotel-layout .ho-agregar-panel.activo {
  display: block;
}

/* Fila: item seleccionado + input cantidad + botón confirmar */
.hotel-layout .ho-agregar-fila {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.hotel-layout .ho-agregar-fila > .ho-agregar-fila-item {
  flex: 1 1 200px;
  min-width: 0;
}

.hotel-layout .ho-agregar-fila-item-nombre {
  font-size: 13px;
  font-weight: 700;
  color: var(--ho-texto);
}

.hotel-layout .ho-agregar-fila-item-sub {
  font-size: 12px;
  color: var(--ho-texto-suave);
}

/* Input numérico angosto para la cantidad — combina con .ho-input */
.hotel-layout .ho-cantidad-input {
  width: 90px;
  flex: 0 0 90px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   6) Tags de tipo de insumo (pildoritas suaves opcionales)
   --------------------------------------------------------------------------- */
.hotel-layout .ho-tag-multidosis,
.hotel-layout .ho-tag-medicamento {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  border: 1px solid transparent;
  vertical-align: middle;
}

.hotel-layout .ho-tag-multidosis {
  background: #fbf0d8;
  color: #8a5e16;
  border-color: #ecd6a3;
}

.hotel-layout .ho-tag-medicamento {
  background: var(--ho-success-soft);
  color: var(--ho-success-dark);
  border-color: #bfe0cb;
}

/* ---------------------------------------------------------------------------
   RESPONSIVO del bloque GESTIÓN DE ESTADÍA
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  /* El dialog ancho cae a ancho completo (la regla base de .ho-modal-dialog
     ya lo lleva a 100%; reforzamos por especificidad de la variante). */
  .hotel-layout .ho-modal-dialog.ho-modal-dialog-ancho {
    max-width: 100%;
  }

  .hotel-layout .ho-estadia-resumen {
    gap: 10px 16px;
  }

  .hotel-layout .ho-estadia-noches {
    margin-left: 0;
  }

  .hotel-layout .ho-estadia-total {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .hotel-layout .ho-cantidad-input {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* Tablas de cargos colapsan con data-label (mismo patrón que .ho-tabla) */
@media (max-width: 767px) {
  .hotel-layout .ho-cargos-tabla,
  .hotel-layout .ho-cargos-tabla tbody,
  .hotel-layout .ho-cargos-tabla tr,
  .hotel-layout .ho-cargos-tabla td {
    display: block;
    width: 100%;
  }

  .hotel-layout .ho-cargos-tabla thead {
    display: none;
  }

  .hotel-layout .ho-cargos-tabla tbody tr {
    position: relative;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ho-borde);
  }

  .hotel-layout .ho-cargos-tabla tbody tr:hover td {
    background: transparent;
  }

  .hotel-layout .ho-cargos-tabla tbody td {
    padding: 4px 0;
    border-bottom: none;
    text-align: left;
  }

  .hotel-layout .ho-cargos-tabla td.ho-cargos-col-num {
    text-align: left;
  }

  .hotel-layout .ho-cargos-tabla tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ho-texto-suave);
    margin-bottom: 2px;
  }

  /* La celda de acción (quitar) flota arriba a la derecha de la mini-fila */
  .hotel-layout .ho-cargos-tabla td.ho-cargos-col-accion {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 0;
    width: auto;
    text-align: right;
  }

  .hotel-layout .ho-cargos-tabla td.ho-cargos-col-accion::before {
    display: none;
  }
}

/* ── Horario operativo del hotel (pantalla Espacios de Hotel) ─────────────── */
.hotel-layout .ho-horario-card {
  margin: 12px 14px 14px;
  padding: 16px 18px;
}
.hotel-layout .ho-horario-titulo {
  font-size: 14px;
  font-weight: 700;
  color: var(--ho-primary-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hotel-layout .ho-horario-ayuda {
  font-size: 12px;
  color: var(--ho-texto-suave);
  margin: 6px 0 12px;
}

/* Nota de ayuda bajo un campo del formulario (ej. explicación del "Orden") */
.ho-swal-popup .ho-form-ayuda,
.hotel-layout .ho-form-ayuda {
  display: block;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ho-texto-suave);
  margin-top: 5px;
}

/* Formulario del espacio en rejilla horizontal (Tamaño | Capacidad lado a lado;
   Nombre / Descripción / Orden a lo ancho). Solo se usa en la modal de espacios. */
.hotel-layout .ho-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
  align-items: start;
}

.hotel-layout .ho-form-grid .ho-form-campo {
  min-width: 0;
}

.hotel-layout .ho-form-campo--full {
  grid-column: 1 / -1;
}

@media (max-width: 520px) {
  .hotel-layout .ho-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Sección extra del formulario de espacio: switch web + galería ──────────── */
.hotel-layout .ho-form-extra {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px dashed var(--ho-borde);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hotel-layout .ho-label-nota {
  font-weight: 500;
  color: var(--ho-texto-suave);
  font-size: 11px;
}

/* Switch (checkbox estilizado como toggle) */
.hotel-layout .ho-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.hotel-layout .ho-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.hotel-layout .ho-switch-slider {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--ho-borde);
  transition: background 0.2s;
}

.hotel-layout .ho-switch-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s;
}

.hotel-layout .ho-switch input:checked + .ho-switch-slider {
  background: var(--ho-primary);
}

.hotel-layout .ho-switch input:checked + .ho-switch-slider::before {
  transform: translateX(18px);
}

.hotel-layout .ho-switch input:focus-visible + .ho-switch-slider {
  box-shadow: 0 0 0 3px rgba(176, 122, 46, 0.25);
}

.hotel-layout .ho-switch-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ho-texto);
}

/* Galería de fotos (máx 3) */
.hotel-layout .ho-galeria {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 8px;
  min-height: 40px;
  align-items: center;
}

.hotel-layout .ho-galeria-item {
  position: relative;
  margin: 0;
  width: 92px;
  height: 92px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--ho-borde);
  background: #f3ede2;
}

.hotel-layout .ho-galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hotel-layout .ho-galeria-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(180, 40, 40, 0.85);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.hotel-layout .ho-galeria-del:hover {
  background: #a11d1d;
}

.hotel-layout .ho-galeria-vacia,
.hotel-layout .ho-galeria-cargando {
  font-size: 12px;
  color: var(--ho-texto-suave);
}

.hotel-layout .ho-galeria-btn {
  align-self: flex-start;
}

.hotel-layout .ho-galeria-msg {
  font-size: 12px;
  color: var(--ho-texto-suave);
  margin-top: 4px;
  min-height: 16px;
}

.hotel-layout .ho-galeria-msg-error {
  color: #b42828;
}
.hotel-layout .ho-horario-form {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.hotel-layout .ho-horario-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hotel-layout .ho-horario-campo .ho-input {
  width: 130px;
}

/* Buscador de espacios: un poco más ancho SOLO en esta pantalla (la regla
   general .ho-buscador-wrap la comparten Reservas, En Hotel e Historial). */
#pantallaHotelEspacios .ho-buscador-wrap {
  max-width: 480px;
}

/* ── Tamaños admitidos de mascota ─────────────────────────────────────────── */
/* Chip del tamaño en la tabla de espacios y en el selector de reserva. */
.ho-badge-tamano {
  background: var(--ho-primary-soft);
  color: var(--ho-primary-dark);
  border: 1px solid var(--ho-primary-borde);
}

/* Multiselección de tamaños en el modal de crear/editar espacio. */
.ho-tam-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 2px;
}
.ho-tam-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--ho-borde);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ho-texto);
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.ho-tam-check:hover {
  border-color: var(--ho-primary);
}
/* El navegador no permite estilar el label por el estado del hijo sin :has(),
   así que se marca el propio checkbox con el color del módulo. */
.ho-tam-check input[type="checkbox"] {
  margin: 0;
  accent-color: var(--ho-primary);
  cursor: pointer;
}
/* Tamaño ya desactivado que este espacio conserva asignado: se muestra para
   poder quitarlo a propósito, pero atenuado. */
.ho-tam-check--inactivo {
  background: #f7f3ec;
  color: var(--ho-texto-suave);
}
.ho-tam-check--inactivo small {
  font-size: 11px;
  opacity: 0.85;
}

/* ── Calendario de rango tipo "booking" (modal de reserva) ───────────────── */
.hotel-layout .ho-cal {
  border: 1px solid var(--ho-borde);
  border-radius: var(--ho-radio);
  background: var(--ho-card-bg);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.hotel-layout .ho-cal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.hotel-layout .ho-cal-nav {
  border: 1px solid var(--ho-borde);
  background: #fff;
  color: var(--ho-primary-dark);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.hotel-layout .ho-cal-nav:hover {
  background: var(--ho-primary-soft);
  border-color: var(--ho-primary);
}
.hotel-layout .ho-cal-titulos {
  flex: 1;
  display: flex;
  justify-content: space-around;
  gap: 8px;
}
.hotel-layout .ho-cal-tit {
  font-weight: 700;
  font-size: 14px;
  color: var(--ho-texto);
  text-align: center;
}
.hotel-layout .ho-cal-meses {
  display: flex;
  gap: 22px;
}
.hotel-layout .ho-cal-grid {
  flex: 1;
  min-width: 0;
}
.hotel-layout .ho-cal-dows,
.hotel-layout .ho-cal-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.hotel-layout .ho-cal-dow {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--ho-texto-suave);
  text-transform: uppercase;
  padding-bottom: 6px;
}
.hotel-layout .ho-cal-dia {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--ho-texto);
  font-size: 13px;
  cursor: pointer;
  border-radius: 8px;
  transition:
    background 0.12s,
    color 0.12s;
}
.hotel-layout .ho-cal-dia:not(.ho-cal-pasado):not(.ho-cal-vacio):hover {
  background: var(--ho-primary-soft);
}
.hotel-layout .ho-cal-vacio {
  cursor: default;
}
.hotel-layout .ho-cal-pasado {
  color: #cdbfa6;
  cursor: not-allowed;
  pointer-events: none;
}
.hotel-layout .ho-cal-hoy {
  box-shadow: inset 0 0 0 1.5px var(--ho-primary-borde);
}
/* Días intermedios del rango (banda) */
.hotel-layout .ho-cal-dia.ho-cal-rango {
  background: var(--ho-primary-soft);
  color: var(--ho-primary-dark);
  border-radius: 4px;
}
/* Extremos seleccionados */
.hotel-layout .ho-cal-dia.ho-cal-ent,
.hotel-layout .ho-cal-dia.ho-cal-sal {
  background: var(--ho-primary);
  color: #fff;
  font-weight: 700;
}
/* Guardería: entrada y salida el mismo día */
.hotel-layout .ho-cal-dia.ho-cal-guarderia {
  background: var(--ho-primary-dark);
  color: #fff;
  box-shadow: inset 0 0 0 2px var(--ho-warning);
}
/* Previsualización de salida al pasar el mouse */
.hotel-layout .ho-cal-dia.ho-cal-sal-prev {
  background: var(--ho-primary-soft);
  color: var(--ho-primary-dark);
  outline: 1.5px dashed var(--ho-primary);
  outline-offset: -2px;
}
.hotel-layout .ho-cal-leyenda {
  margin-top: 10px;
  font-size: 11px;
  color: var(--ho-texto-suave);
  text-align: center;
}
.hotel-layout .ho-cal-leyenda > i {
  color: var(--ho-primary);
  margin-right: 4px;
}

/* Móvil: un solo mes visible */
@media (max-width: 620px) {
  .hotel-layout .ho-cal-grid--2 {
    display: none;
  }
  .hotel-layout .ho-cal-tit--2 {
    display: none;
  }
}