/* «Mi reserva» en la portada. Abajo a la izquierda: la derecha es del chat de Tawk,
   y taparlo con otro botón fijo es la forma más rápida de que nadie use ninguno de los dos.
   Todo cuelga de .mr-*, sin tocar una sola clase de las seis webs. */

/* «Ver mis reservas», en la barra fija de arriba.
   Va al lado del botón del menú para que se vea igual en el ordenador y en el teléfono, sin
   desplegar nada. Discreto: un borde y el color del hotel, no un botón que compita con
   «Reservar», que es el que tiene que llamar la atención.
   Solo aparece cuando este navegador ya tiene una reserva guardada. */
.mr-arriba {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 0 4px 0 auto;                      /* pegado a la derecha, antes del menú */
    padding: 7px 13px;
    border: 1px solid color-mix(in srgb, var(--mr, #0d3226) 35%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--mr, #0d3226) 8%, transparent);
    color: var(--mr, #0d3226);
    font: 600 .74rem/1 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.mr-arriba:hover { background: color-mix(in srgb, var(--mr, #0d3226) 16%, transparent); }
.mr-arriba svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* Navegadores sin «color-mix»: el color plano del hotel, que siempre se ve. */
@supports not (color: color-mix(in srgb, #000 10%, transparent)) {
    .mr-arriba { background: transparent; border-color: currentColor; }
}

/* En pantallas estrechas manda el espacio: el nombre del hotel y el botón del menú van
   primero. Se queda el icono, que ya se entiende, y el rótulo vuelve en cuanto hay sitio. */
@media (max-width: 420px) {
    .mr-arriba { padding: 7px 9px; gap: 0; }
    .mr-arriba span { display: none; }
}

.mr-pill {
    position: fixed;
    left: max(14px, env(safe-area-inset-left));
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 2147483000;                       /* por debajo del chat, por encima de la página */
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 16px 10px 12px;
    border: 0; border-radius: 999px;
    background: var(--mr, #0d3226); color: #fff;
    font: 600 .78rem/1.15 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .55);
    cursor: pointer;
    /* Entra sola unos milisegundos después: si apareciera de golpe con la portada, se lee como un anuncio. */
    opacity: 0; transform: translateY(14px);
    transition: opacity .35s ease, transform .35s ease, box-shadow .2s ease;
}
.mr-pill--dentro { opacity: 1; transform: none; }
.mr-pill:hover { box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .65); }
.mr-pill__ico { display: flex; width: 22px; height: 22px; flex: 0 0 auto; }
.mr-pill__ico svg { width: 100%; height: 100%; }
.mr-pill__tx { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; }
.mr-pill__tx b { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .68rem; }
.mr-pill__tx small { font-weight: 500; opacity: .82; font-size: .68rem; letter-spacing: .04em; }

@media (max-width: 480px) {
    /* En el teléfono la franja de abajo ya está muy pedida: la pastilla se encoge a su icono
       y su código, que es lo único que el huésped necesita reconocer. */
    .mr-pill { padding: 9px 13px 9px 10px; bottom: calc(78px + env(safe-area-inset-bottom)); }
    .mr-pill__tx b { font-size: .62rem; }
}

.mr-fondo {
    position: fixed; inset: 0; z-index: 2147483100;
    background: rgba(10, 15, 13, .55); backdrop-filter: blur(3px);
    display: flex; align-items: flex-end; justify-content: center;
    font: 400 15px/1.55 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.mr-hoja {
    position: relative; width: 100%; max-width: 480px; max-height: 92dvh; overflow: auto;
    background: #fff; color: #1f2937; border-radius: 20px 20px 0 0;
    padding: 26px 22px calc(24px + env(safe-area-inset-bottom));
    box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .5);
}
@media (min-width: 640px) { .mr-fondo { align-items: center; } .mr-hoja { border-radius: 18px; } }

.mr-x {
    position: absolute; right: 12px; top: 10px; width: 34px; height: 34px;
    border: 0; border-radius: 50%; background: #f1f5f9; color: #475569;
    font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.mr-titulo { margin: 4px 0 12px; font: 600 1.35rem/1.2 Georgia, 'Times New Roman', serif; color: #0f172a; }
.mr-sub { margin: 0 0 14px; font-size: .86rem; color: #475569; }
.mr-otra { margin: 18px 0 10px; font: 600 .62rem/1.3 inherit; letter-spacing: .18em; text-transform: uppercase; color: #94a3b8; }

.mr-mia {
    border: 1px solid #e5e7eb; border-left: 3px solid var(--mr, #0d3226);
    border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px;
}
.mr-mia small { font: 600 .6rem/1.3 inherit; letter-spacing: .16em; text-transform: uppercase; color: #94a3b8; }
.mr-mia b { font: 600 1.05rem/1.2 inherit; color: #0f172a; letter-spacing: .04em; }
.mr-mia span { font-size: .82rem; color: #475569; }

.mr-btn {
    display: flex; align-items: center; justify-content: center; margin-top: 10px;
    padding: 12px 16px; border: 1px solid var(--mr, #0d3226); border-radius: 11px;
    background: transparent; color: var(--mr, #0d3226); cursor: pointer; text-decoration: none;
    font: 600 .75rem/1 inherit; letter-spacing: .1em; text-transform: uppercase;
}
.mr-btn--lleno { background: var(--mr, #0d3226); color: #fff; margin-top: 16px; width: 100%; }

.mr-form { display: flex; flex-direction: column; }
.mr-form label { font: 600 .6rem/1.3 inherit; letter-spacing: .16em; text-transform: uppercase; color: #94a3b8; margin: 10px 0 5px; }
.mr-form input {
    padding: 12px 13px; border: 1px solid #cbd5e1; border-radius: 11px;
    font: 400 .92rem/1.4 inherit; color: #0f172a; background: #fff;
}
.mr-form input:focus { outline: 2px solid var(--mr, #0d3226); outline-offset: 1px; border-color: var(--mr, #0d3226); }
.mr-aviso { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #f1f5f9; color: #475569; font-size: .84rem; }

.mr-lista { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mr-lista a {
    display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
    border: 1px solid #e5e7eb; border-radius: 12px; text-decoration: none; color: inherit;
}
.mr-lista a:hover { border-color: var(--mr, #0d3226); }
.mr-lista b { font-weight: 600; color: #0f172a; letter-spacing: .04em; }
.mr-lista span { font-size: .8rem; color: #475569; }

@media (prefers-reduced-motion: reduce) {
    .mr-pill { transition: none; opacity: 1; transform: none; }
}


/* ---------------------------------------------------------------- dentro de la barra de abajo
   Donde el hotel ya tiene su barra fija, «Mi reserva» entra como una opción más. Flotando
   encima acababa tapando el botón de reservar, que es lo último que conviene tapar.
   La barra estaba repartida en cinco columnas: con la nueva son seis, y los rótulos encogen
   lo justo para que «Habitaciones» siga cabiendo. */
.mr-dock-host { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.mr-dock-host > * > span:last-child,
.mr-dock-host > * { letter-spacing: 0 !important; }
/* El rótulo más largo manda: «Habitaciones» son doce letras en una columna de 63 px en un
   teléfono de 390. Se escala con el ancho de la pantalla en vez de fijar un tamaño, y así
   ni se corta en el móvil estrecho ni se queda diminuto en el ancho. */
.mr-dock-host > * span:last-child {
    font-size: clamp(8.4px, 2.15vw, 11px) !important;
    white-space: nowrap; overflow: visible; text-overflow: clip;
}
.mr-dock-host > * { padding-left: 1px !important; padding-right: 1px !important; }
.mr-dock svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- «Mi reserva» en el centro
   Cuando el hotel tiene su botón destacado, «Mi reserva» se queda con él y ocupa el centro;
   el de reservar pasa al final como una opción más. Las columnas siguen siendo cinco, así que
   aquí no se toca la rejilla: solo el rótulo, que ahora dice «Nueva reserva» y es una letra
   más largo que el más largo de antes. */
.mr-dock-centro > * span:last-child {
    font-size: clamp(8.4px, 2.3vw, 11px) !important;
    letter-spacing: 0 !important;
    white-space: nowrap; overflow: visible; text-overflow: clip;
}
.mr-dock-centro > * { padding-left: 1px !important; padding-right: 1px !important; }
/* El icono del centro lo dibuja el hotel dentro de su círculo: hereda su tamaño y no se toca.
   Los de los lados sí, para que el nuevo se vea igual que sus vecinos. */
.mr-dock-centro .mobile-dock__reserve-icon svg { width: 26px; height: 26px; }

/* ---------------------------------------------------------------- dentro del menú de arriba
   En el ordenador va donde se miran las cosas de la web. Hereda la clase del enlace vecino,
   así que el estilo es el del hotel; aquí solo se asegura que se comporte como enlace. */
/* En dos palabras y con el resto del menú en una sola, «Mis reservas» se partía en dos
   líneas y descuadraba la fila. */
.mr-menu { cursor: pointer; white-space: nowrap; }