/* ============================================================
   🧺 RT MULTI-SERVICIO — Capa Step 1 (Fase 1 · Opción D)
   Reutiliza .rt-guest-trigger / .rt-guest-stepper / .rt-guest-btn-listo
   del selector de Huéspedes para verse igual. Todo lo propio va con
   prefijo rt-ms- y solo existe en la página de prueba.
   ============================================================ */

/* ---------- Campo en el formulario ---------- */
form.rt-ms-on[data-rt-modo="estadia"] #rt-ms-field{ display:none !important; }
form.rt-ms-on[data-rt-modo="dia"] #rt-ms-field{ display:flex !important; }

form.rt-ms-on[data-rt-modo="dia"] .rt-pax-clasico,
form.rt-ms-on[data-rt-modo="dia"] #rt-field-adolescentes{ display:none !important; }

/* "Servicio" se colapsa sin display:none: dentro vive #modal-precios.
   2026-11-04: el selector largo gana a la regla del flujo de edición del Nuevo Editor
   (".rt-form > #campo-dinamico.rt-field{flex:0 0 250px !important}"), que dejaba un
   hueco de 250 px entre Fecha y Servicios y descuadraba el formulario. */
form.rt-step1-form-anim.rt-ms-on[data-rt-modo="dia"] .rt-form > #campo-dinamico.rt-field,
form.rt-ms-on[data-rt-modo="dia"] #campo-dinamico{
    flex:0 0 0 !important; width:0 !important; min-width:0 !important; max-width:0 !important;
    padding:0 !important; margin:0 !important; border:0 !important; overflow:visible !important;
}
form.rt-ms-on[data-rt-modo="dia"] #campo-dinamico > :not(#modal-precios){ display:none !important; }

.rt-ms-trigger{ font-family:inherit; text-align:left; }
.rt-guest-summary.rt-ms-ph{ color:#8a97a3; }
.rt-ms-trigger.rt-ms-trigger-error{ border-color:#d9534f !important; box-shadow:0 0 0 3px rgba(217,83,79,.15) !important; }

/* ---------- Contenedor (modal desktop / sheet móvil) ---------- */
.rt-ms-mask{
    position:fixed; inset:0; z-index:2147483646; display:none;
    background:rgba(10,30,50,.55);
    align-items:center; justify-content:center; padding:20px;
    touch-action:auto;
}
.rt-ms-mask.open{ display:flex; }
.rt-ms-box{
    position:relative; background:#fff; display:flex; flex-direction:column; overflow:hidden;
    color:#2c3e50; box-sizing:border-box;
}
.rt-ms-box *, .rt-ms-box *::before, .rt-ms-box *::after{ box-sizing:border-box; }
.rt-ms-modal{
    width:100%; max-width:1180px; max-height:88vh; border-radius:18px;
    box-shadow:0 24px 70px rgba(0,0,0,.32); animation:rtMsScale .22s ease-out;
}
@keyframes rtMsScale{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:scale(1); } }

/* Cabecera */
.rt-ms-head{ flex-shrink:0; padding:14px 22px; border-bottom:1px solid #e4e0d8; background:#fff; }
.rt-ms-head-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rt-ms-head-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.rt-ms-head h3{ margin:0; font-size:19px; font-weight:700; color:#2c3e50; line-height:1.2; }
.rt-ms-head-txt span{ font-size:13px; color:#6b7785; }
.rt-ms-x{ flex-shrink:0; width:44px; height:44px; border:none; background:transparent; font-size:26px; line-height:1; color:#6b7785; cursor:pointer; border-radius:10px; }
.rt-ms-x:hover{ background:#f2f4f6; color:#2c3e50; }
.rt-ms-handle{ display:block; width:40px; height:5px; border-radius:3px; background:#d3d9de; margin:0 auto 8px; }

/* Avisos */
.rt-ms-avisos{ flex-shrink:0; padding:12px 22px 0; }
.rt-ms-aviso{ display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:8px; font-size:13px; line-height:1.4; }
.rt-ms-aviso + .rt-ms-aviso{ margin-top:8px; }
.rt-ms-aviso-grupo{ background:#fff6e6; border:1px solid #f0d9a8; color:#6b4508; }
.rt-ms-aviso-error{ background:#fdecea; border:1px solid #f3c2bd; color:#8a2424; font-weight:600; }
.rt-ms-contactos{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:4px; }
.rt-ms-contactos a{ color:#6b4508; font-weight:600; text-decoration:none; }
.rt-ms-contactos a:hover{ text-decoration:underline; }

/* Desktop: categorías en una sola fila */
.rt-ms-cats{
    flex:1 1 auto; min-height:0; overflow:auto; padding:18px 22px; background:#f7fafc;
    display:grid; gap:16px; align-content:start;
}
/* Contadores bajo el servicio marcado (desktop y móvil) */
.rt-ms-inline{ margin:-3px 0 0; padding:4px 10px 6px; background:#f1f7fc; border:1px solid #dce9f4; border-top:none; border-radius:0 0 9px 9px; }
.rt-ms-inline .rt-guest-pax-row{ padding:6px 0; }
.rt-ms-inline .rt-guest-pax-sub{ display:none; }
.rt-ms-editar-inline{
    display:block; width:100%; min-height:36px; margin-top:-3px; padding:0 10px;
    background:#f1f7fc; border:1px solid #dce9f4; border-top:none; border-radius:0 0 9px 9px;
    font-family:inherit; font-size:12.5px; font-weight:600; color:#0073aa; text-align:left; cursor:pointer;
}
.rt-ms-item.rt-ms-sel{ position:relative; }

/* Categorías e ítems */
.rt-ms-cat-t{ margin:0 0 8px; padding:6px 10px; border-radius:7px; color:#fff; font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; }
.rt-ms-itemwrap{ margin-bottom:7px; }
.rt-ms-item{
    display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:8px 11px;
    background:#fff; border:1px solid #e3ebf1; border-left:3px solid var(--rt-ms-c, #b9d4e6); border-radius:9px;
    font-family:inherit; font-size:13.5px; line-height:1.3; color:#2a3640; text-align:left; cursor:pointer;
}
.rt-ms-item:hover{ background:#f0f8fd; border-color:#0073aa; border-left-color:var(--rt-ms-c, #0073aa); }
.rt-ms-ck{ flex-shrink:0; width:20px; height:20px; border-radius:5px; border:1.5px solid #b9c3cc; background:#fff; display:flex; align-items:center; justify-content:center; }
.rt-ms-item.rt-ms-sel{ background:#e9f3fa; border-color:#0073aa; }
.rt-ms-item.rt-ms-sel .rt-ms-ck{ background:#0073aa; border-color:#0073aa; }
.rt-ms-item-t{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.rt-ms-item-n{ font-weight:500; }
.rt-ms-item.rt-ms-sel .rt-ms-item-n{ font-weight:700; }
.rt-ms-item small{ font-size:11px; font-weight:600; color:#8a97a3; }
.rt-ms-item .rt-ms-item-p{ color:#4a6741; }
.rt-ms-item.rt-ms-off{ background:#f4f6f8; color:#9aa6b0; cursor:not-allowed; border-left-color:#cfd6dc; }
.rt-ms-item.rt-ms-off .rt-ms-item-n{ text-decoration:line-through; }
.rt-ms-item.rt-ms-off:hover{ background:#f4f6f8; border-color:#e3ebf1; border-left-color:#cfd6dc; }
.rt-ms-item.rt-ms-malo{ border-color:#d9534f; background:#fdf3f2; }
.rt-ms-item.rt-ms-malo small{ color:#b32d2e; }
.rt-ms-badge{ flex-shrink:0; font-size:10.5px; font-weight:700; color:#0073aa; background:#fff; border:1px solid #b9d4e6; border-radius:999px; padding:2px 8px; }
.rt-ms-vacio{ color:#8a97a3; font-size:14px; text-align:center; padding:16px 0; }

/* Contadores dentro del panel */
.rt-ms-cont .rt-guest-pax-row{ padding:7px 0; }

/* Pie */
.rt-ms-foot{
    flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:12px 22px; border-top:1px solid #e4e0d8; background:#f9fbfd;
}
.rt-ms-foot-t{ font-size:14px; color:#4a5864; }
.rt-ms-foot-t b{ color:#2c3e50; }
.rt-ms-listo{ min-height:44px; padding:0 26px !important; }

/* ---------- Móvil: bottom sheet ---------- */
@media(max-width:768px){
    #rt-ms-field{ flex:1 1 100% !important; max-width:100% !important; width:100% !important; }
    .rt-ms-mask{ align-items:flex-end; padding:0; }
    .rt-ms-sheet{
        width:100%; max-width:520px; height:92vh; max-height:92vh; border-radius:18px 18px 0 0;
        animation:rtMsUp .22s ease-out; padding-bottom:env(safe-area-inset-bottom, 0px);
    }
    @keyframes rtMsUp{ from{ transform:translateY(24px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
    .rt-ms-head{ padding:8px 16px 10px; }
    .rt-ms-head h3{ font-size:18px; }
    .rt-ms-body{
        padding-top:12px !important;
        flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain; touch-action:pan-y; padding:0 16px 16px;
    }
    .rt-ms-avisos{ padding:0 0 12px; }
    .rt-ms-cats{ display:block; padding:0; background:transparent; overflow:visible; }
    .rt-ms-cat{ margin-bottom:14px; }
    .rt-ms-item{ min-height:50px; font-size:15px; }
    .rt-ms-ck{ width:22px; height:22px; }
    .rt-ms-inline{ padding:4px 12px 6px 36px; }
    .rt-ms-inline .rt-guest-pax-sub{ display:block; }
    .rt-ms-editar-inline{ min-height:40px; padding:0 12px 0 36px; font-size:13px; }
    .rt-ms-foot{ padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Flujo mensaje → precios: el modal de servicios queda atenuado ---------- */
.rt-ms-mask.rt-ms-atenuado{ background:rgba(10,30,50,.72); }
.rt-ms-mask.rt-ms-atenuado .rt-ms-box{
    /* Sin blur: el filtro sobre un modal grande hace lenta la aparición de los
       modales de encima (repintado en GPU). Solo se oscurece. */
    opacity:.55; pointer-events:none; user-select:none;
}
/* Mensaje y precios aparecen al instante (sin fundido) mientras dura el flujo.
   script.js usa fadeIn de jQuery (opacity en línea): !important lo anula. */
body.rt-ms-en-flujo #modal-precios{ opacity:1 !important; }
body.rt-ms-en-flujo .rt-mje-box{ animation:none !important; }
/* El modal de precios (llevado a <body> durante el flujo) queda sobre el de servicios. */
body.rt-ms-en-flujo #modal-precios{ z-index:2147483647 !important; }

/* ---------- Precio bajo cada tipo de persona ---------- */
.rt-ms-precio{ font-size:11.5px; line-height:1.35; color:#4a6741; margin-top:1px; }
.rt-ms-precio b{ font-weight:700; }
.rt-ms-precio.rt-ms-precio-0{ color:#8a97a3; }
.rt-ms-subtotal{
    display:flex; justify-content:space-between; align-items:baseline;
    margin-top:4px; padding-top:7px; border-top:1px dashed #cfdbe6;
    font-size:13px; color:#2c3e50;
}
.rt-ms-subtotal b{ color:#4a6741; font-size:14px; }
.rt-ms-foot .rt-ms-total{ color:#4a6741; }
.rt-ms-precio.rt-ms-precio-err{ color:#b32d2e; font-weight:600; }

/* ---------- Ítem en dos zonas: check (marca) + nombre (abre personas) ---------- */
.rt-ms-item{ padding:0 !important; gap:0 !important; align-items:stretch !important; cursor:default; }
.rt-ms-ckbtn, .rt-ms-lblbtn{
    border:none; background:transparent; font:inherit; color:inherit; text-align:left; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
/* Área táctil del check más grande que el cuadrito (44px mínimo, 52 en móvil). */
.rt-ms-ckbtn{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 4px 0 8px; border-radius:9px 0 0 9px; }
.rt-ms-ckbtn:hover .rt-ms-ck{ border-color:#0073aa; }
.rt-ms-ckbtn:focus-visible, .rt-ms-lblbtn:focus-visible{ outline:2px solid #0073aa; outline-offset:-2px; }
.rt-ms-lblbtn{ flex:1 1 auto; display:flex; align-items:center; gap:8px; min-width:0; min-height:44px; padding:8px 11px 8px 4px; }
.rt-ms-item.rt-ms-off .rt-ms-ckbtn, .rt-ms-item.rt-ms-off .rt-ms-lblbtn{ cursor:not-allowed; }
@media(max-width:768px){
    .rt-ms-ckbtn{ min-width:52px; min-height:50px; padding-left:10px; }
    .rt-ms-lblbtn{ min-height:50px; }
}

/* ---------- Acordeón de personas: aparece con despliegue vertical ---------- */
.rt-ms-inline.rt-ms-anim{ overflow:hidden; animation:rtMsAcordeon 1.8s cubic-bezier(.25,.8,.3,1); transform-origin:top center; }
@keyframes rtMsAcordeon{
    0%{ max-height:0; opacity:0; padding-top:0; padding-bottom:0; }
    35%{ opacity:.6; }
    100%{ max-height:420px; opacity:1; }
}
@media (prefers-reduced-motion: reduce){ .rt-ms-inline.rt-ms-anim{ animation:none; } }

/* ---------- LISTO desactivado mientras haya algo pendiente ---------- */
.rt-ms-listo.rt-ms-listo-off,
.rt-ms-listo.rt-ms-listo-off:hover{
    background:#c9cfc6 !important; color:#f4f6f3 !important; box-shadow:none !important;
    transform:none !important; cursor:not-allowed;
}

/* Servicio sin personas: pequeña sacudida al tocar fuera de él */
.rt-ms-item.rt-ms-sacudir{ animation:rtMsSacudir .4s; }
@keyframes rtMsSacudir{ 0%,100%{ transform:none; } 20%,60%{ transform:translateX(-5px); } 40%,80%{ transform:translateX(5px); } }
@media (prefers-reduced-motion: reduce){ .rt-ms-item.rt-ms-sacudir{ animation:none; } }

/* Aviso "Selecciona al menos 1 persona" + Quitar, bajo el nombre del servicio.
   Grid (no flex-wrap): el check y el nombre siguen en una fila y el aviso va
   debajo del nombre, con "Quitar" en la misma línea. */
.rt-ms-item{ display:grid !important; grid-template-columns:auto minmax(0,1fr); }
.rt-ms-falta{
    grid-column:2; display:flex; align-items:center; flex-wrap:nowrap; gap:8px;
    margin-top:-8px; padding:0 11px 6px 4px;
    font-size:11.5px; font-weight:600; line-height:1.3; color:#b32d2e;
}
.rt-ms-falta span{ white-space:nowrap; }
.rt-ms-quitar{
    flex-shrink:0; min-height:28px; padding:0 2px; border:none; background:none; cursor:pointer;
    font:inherit; font-weight:700; color:#8a2424; text-decoration:underline; text-underline-offset:2px;
}
.rt-ms-quitar:hover{ color:#5e1414; }
@media(max-width:768px){
    .rt-ms-falta{ font-size:12px; }
    .rt-ms-quitar{ min-height:36px; padding:0 6px; }
}

/* Contador más angosto: nunca pasa de 2 dígitos */
.rt-ms-cont .rt-guest-stepper button{ width:27px; height:30px; font-size:16px; padding:0 !important; min-width:0 !important; }
.rt-ms-cont .rt-guest-val{ padding:0 2px; }
.rt-ms-cont .rt-guest-val{ min-width:20px; font-size:14px; }
@media(max-width:768px){
    .rt-ms-cont .rt-guest-stepper button{ width:36px; height:36px; font-size:19px; }
    .rt-ms-cont .rt-guest-val{ min-width:22px; font-size:15px; }
}

/* Nombre del servicio: cada parte ("Cena Buffet", "(Promoción 1)") no se corta */
.rt-ms-nw{ white-space:nowrap; }

/* Fila en rojo más baja: nombre y aviso juntos, sin espacios extra */
.rt-ms-item.rt-ms-con-falta .rt-ms-ckbtn{ grid-row:1 / span 2; min-height:0; }
.rt-ms-item.rt-ms-con-falta .rt-ms-lblbtn{ min-height:0; padding-top:7px; padding-bottom:1px; }
.rt-ms-item.rt-ms-con-falta .rt-ms-falta{ margin-top:0; padding-bottom:7px; }
.rt-ms-item.rt-ms-con-falta .rt-ms-quitar{ min-height:0; line-height:1.3; padding:0 2px; }
@media(max-width:768px){
    .rt-ms-item.rt-ms-con-falta .rt-ms-quitar{ min-height:28px; padding:0 6px; }
    .rt-ms-item.rt-ms-con-falta .rt-ms-falta{ padding-bottom:4px; }
}

/* Infantes: un tramo por línea */
.rt-ms-precio-inf div{ white-space:nowrap; }

/* Rango de edad junto al tipo de persona */
.rt-ms-edad{ font-size:11px; font-weight:400; color:#8a8680; white-space:nowrap; margin-left:1px; }
.rt-ms-cont .rt-guest-pax-main{ flex:1 1 auto; min-width:0; padding-right:4px; }
.rt-ms-cont .rt-guest-pax-label{ white-space:normal; }
/* Tipo de persona en negrita (la edad entre paréntesis sigue normal) */
.rt-ms-cont .rt-guest-pax-label{ font-weight:700; }
.rt-ms-cont .rt-guest-pax-label .rt-ms-edad{ font-weight:400; }

/* Aviso bajo el campo al borrar la selección por cambio de fecha */
.rt-ms-aviso-fecha{ margin-top:5px; font-size:12px; font-weight:600; line-height:1.3; color:#8a5a10; }
.rt-ms-aviso-fecha[hidden]{ display:none; }

/* Total (recuadro verde) alineado a la izquierda en Por el día */
form.rt-ms-on[data-rt-modo="dia"] #rt-total-general{
    text-align:left !important; justify-content:flex-start !important; padding-left:16px !important;
}

/* ---------- Cabecera con color (igual que el selector de servicios clásico) ---------- */
.rt-ms-head{ background:linear-gradient(135deg,#0073aa 0%,#005a87 100%); border-bottom:none; }
.rt-ms-head h3{ color:#fff; }
.rt-ms-head-txt span{ color:#dbeafe; }
.rt-ms-x{ color:#fff; background:rgba(255,255,255,.16); width:40px; height:40px; border-radius:50%; font-size:24px; }
.rt-ms-x:hover{ background:rgba(255,255,255,.3); color:#fff; }
.rt-ms-x:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.rt-ms-handle{ background:rgba(255,255,255,.55); }

/* ---------- Pie con un tono muy sutil ---------- */
.rt-ms-foot{ background:#f7f4ee; border-top:1px solid #e8e2d6; }

/* Móvil: el modal cabe en el área visible (cabecera y pie siempre a la vista).
   Respaldo CSS con dvh; el JS ajusta el alto exacto al abrir y al cambiar el visor. */
@media(max-width:768px){
    .rt-ms-mask{ bottom:auto; height:100vh; height:100dvh; }
    .rt-ms-sheet{ height:94vh; max-height:94vh; height:94dvh; max-height:94dvh; }
    .rt-ms-head{ padding:8px 14px 10px; }
    .rt-ms-head h3{ font-size:17px; }
    .rt-ms-head-txt span{ font-size:12.5px; }
    .rt-ms-x{ width:36px; height:36px; font-size:22px; }
}

/* Móvil: el modal no toca los bordes (se nota que es un modal) y el pie en 2 líneas */
@media(max-width:768px){
    .rt-ms-mask{ padding:0 10px 10px; }
    .rt-ms-sheet{ width:100%; border-radius:18px; box-shadow:0 10px 40px rgba(0,0,0,.35); }
    .rt-ms-foot{ border-radius:0 0 18px 18px; }
    .rt-ms-foot-total{ display:block; margin-top:2px; }
    .rt-ms-foot-sep{ display:none; }
}

/* 2026-11-04 · Edición con el flujo (Nuevo Editor): la barra de progreso queda fija
   arriba, encima de todo, y define --rt-edit-barra-h. El JS marca la máscara con
   .rt-ms-con-barra solo cuando esa barra existe: el modal se ubica debajo de ella y
   usa todo el alto disponible. Sin la barra (reserva normal) todo queda igual. */
.rt-ms-mask.rt-ms-con-barra{ padding:calc(var(--rt-edit-barra-h, 0px) + 12px) 20px 12px; box-sizing:border-box; }
.rt-ms-mask.rt-ms-con-barra .rt-ms-modal{ max-height:calc(100vh - var(--rt-edit-barra-h, 0px) - 24px); height:calc(100vh - var(--rt-edit-barra-h, 0px) - 24px); }
@media(max-width:768px){
    .rt-ms-mask.rt-ms-con-barra{ padding:var(--rt-edit-barra-h, 0px) 10px 10px; }
    .rt-ms-mask.rt-ms-con-barra .rt-ms-modal{ height:auto; }
}

/* 2026-11-05 · Pie: resumen a la derecha, junto al botón LISTO pero con espacio.
   En móvil sigue en 2 líneas (servicios · personas / Total), alineado a la derecha. */
.rt-ms-foot{ justify-content:flex-end !important; gap:32px !important; }
.rt-ms-foot-t{ flex:0 1 auto !important; margin-left:auto !important; text-align:right !important; }
.rt-ms-foot .rt-ms-listo{ margin-left:0 !important; flex-shrink:0; }
@media(max-width:768px){
    .rt-ms-foot{ gap:16px !important; }
}

/* 2026-11-05 · Once Panimávida en móvil: centrada (no anclada abajo), con margen a
   los lados y dentro del alto visible. El JS fija el alto exacto al abrir. */
@media(max-width:768px){
    .rt-once-ov{ align-items:center !important; justify-content:center !important; padding:12px !important; bottom:auto !important; height:100vh; height:100dvh; }
    .rt-once-box{ max-height:calc(100vh - 24px) !important; max-height:calc(100dvh - 24px) !important; border-radius:16px !important; }
}