/* QRoomService — el portal del huésped (RS002). Para el teléfono: una columna, letra
   grande, botones del ancho del dedo. Todos los estilos del portal van aquí. */

:root {
    --rs-fondo: #f5f3ef;
    --rs-superficie: #ffffff;
    --rs-texto: #1f2328;
    --rs-tenue: #5c636a;
    --rs-marca: #1b2a41;
    --rs-marca-texto: #ffffff;
    --rs-acento: #b5651d;
    --rs-borde: #e2ded6;
    --rs-aviso-fondo: #fff4e5;
    --rs-aviso-borde: #f0b45a;
    --rs-radio: 12px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --rs-fondo: #14171c;
        --rs-superficie: #1e232a;
        --rs-texto: #eceff3;
        --rs-tenue: #a3abb5;
        --rs-marca: #0e1622;
        --rs-acento: #e39a52;
        --rs-borde: #2f363f;
        --rs-aviso-fondo: #3a2c16;
        --rs-aviso-borde: #8a6224;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--rs-fondo);
    color: var(--rs-texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.45;
}

/* ---- la barra */
.rs-barra {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top));
    background: var(--rs-marca);
    color: var(--rs-marca-texto);
}

.rs-barra-lugar {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rs-idioma {
    flex: none;
    color: var(--rs-marca-texto);
    font-size: 15px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- la página */
.rs-pagina {
    max-width: 640px;
    margin: 0 auto;
    padding: 16px 16px max(32px, env(safe-area-inset-bottom));
}

.rs-cabecera h1 { margin: 4px 0 0; font-size: 26px; }
.rs-saludo { margin: 2px 0 0; color: var(--rs-tenue); }

.rs-tarjeta {
    margin: 16px 0;
    padding: 18px 16px;
    background: var(--rs-superficie);
    border: 1px solid var(--rs-borde);
    border-radius: var(--rs-radio);
}

.rs-tarjeta h1, .rs-tarjeta h2 { margin-top: 0; font-size: 21px; }
.rs-centrada { text-align: center; margin-top: 15vh; }

.rs-mensaje {
    margin: 12px 0;
    padding: 12px 14px;
    border-left: 4px solid var(--rs-acento);
    background: var(--rs-superficie);
    border-radius: 0 var(--rs-radio) var(--rs-radio) 0;
}

.rs-aviso {
    margin: 12px 0;
    padding: 12px 14px;
    background: var(--rs-aviso-fondo);
    border: 1px solid var(--rs-aviso-borde);
    border-radius: var(--rs-radio);
}

.rs-nota { margin: 12px 0; color: var(--rs-tenue); }
.rs-tenue { color: var(--rs-tenue); }

/* ---- el formulario del apellido */
.rs-form { display: flex; flex-direction: column; gap: 8px; }
.rs-form label { font-weight: 600; }

.rs-form input {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    font: inherit;
    color: var(--rs-texto);
    background: var(--rs-fondo);
    border: 1px solid var(--rs-borde);
    border-radius: 10px;
}

.rs-form input:focus { outline: 3px solid var(--rs-acento); outline-offset: 1px; }

.rs-btn {
    min-height: 48px;
    padding: 10px 18px;
    font: inherit;
    font-weight: 600;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.rs-btn-principal { background: var(--rs-marca); color: var(--rs-marca-texto); }

.rs-btn-enlace {
    background: transparent;
    color: var(--rs-tenue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- la carta */
.rs-carta h2 { margin: 24px 0 4px; font-size: 22px; }

.rs-grupo {
    margin: 20px 0 8px;
    padding-bottom: 4px;
    font-size: 15px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rs-acento);
    border-bottom: 1px solid var(--rs-borde);
}

.rs-platos { list-style: none; margin: 0; padding: 0; }

.rs-plato {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--rs-borde);
}

.rs-plato:last-child { border-bottom: 0; }

.rs-foto {
    flex: none;
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--rs-borde);
}

.rs-plato-texto { flex: 1; min-width: 0; }

.rs-plato-linea {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.rs-plato-nombre { font-weight: 600; overflow-wrap: anywhere; }
.rs-precio { flex: none; font-variant-numeric: tabular-nums; }
.rs-descripcion { margin: 4px 0 0; color: var(--rs-tenue); font-size: 15px; }

.rs-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }

.rs-etiqueta {
    padding: 2px 8px;
    font-size: 13px;
    color: var(--rs-tenue);
    border: 1px solid var(--rs-borde);
    border-radius: 999px;
}

.rs-salir { margin-top: 24px; text-align: center; }