/*
 * El panel: propietario y operador.
 *
 * Estuvo en una etiqueta <style> de templates/base.html.twig mientras eran
 * cuarenta líneas. Ya no lo son, y aquel fichero decía «el día que crezcan, se
 * mudan aquí». Este es el día.
 *
 * Lo carga app.js con `import './styles/app.css'`, así que llega por el mismo
 * importmap que Turbo y no hace falta enlazarlo en la plantilla.
 *
 * ## Móvil primero, y aquí sí es literal
 *
 * Al contrario que publico.css, que va de ancho a estrecho. El propietario
 * gestiona **de pie y desde el móvil** —es la razón por la que se descartó
 * EasyAdmin (§5.4)—, así que las reglas base son las del teléfono y el escritorio
 * es la excepción. En el móvil la navegación va abajo, donde llega el pulgar, y
 * ningún objeto pulsable baja de 44 px.
 *
 * ## Los colores
 *
 * La marca es la misma que la web pública: si el propietario ve dos productos
 * distintos, es que hay dos productos. Los tres naranjas están duplicados aquí a
 * propósito en lugar de en un fichero compartido: un `@import` de CSS no se
 * empaqueta, sería una petición más en la página que ve el huésped, y ese es el
 * sitio donde menos se puede pagar. **Si cambia el naranja, cambia en los dos.**
 *
 * Lo que este fichero añade son los colores de ESTADO —correcto, aviso, alerta—,
 * que la web pública no necesita y que aquí son la mitad de la información. El
 * naranja de marca queda reservado a la acción principal: si además marcara
 * estados, dejaría de señalar qué hay que pulsar.
 */

/*
 * `hidden` tiene que ganar SIEMPRE.
 *
 * El `display: none` que el navegador le da a `[hidden]` es una regla de su hoja
 * por defecto, y cualquier `display` de ESTA hoja la pisa por poco específica que
 * sea. Pasó de verdad: `reserva.js` esconde los dos campos de fecha nativos al
 * montar el calendario, pero `.campos { display: grid }` seguía mandando y en la
 * ficha salían las dos cosas, el calendario nuevo y las fechas viejas debajo.
 *
 * Es un `!important` de los que se ponen a propósito: `hidden` no es una
 * preferencia de estilo, es «esto no está».
 */
[hidden] { display: none !important; }


/* ── Tokens ─────────────────────────────────────────────────────────────────── */

/*
 * Las dos tipografías del panel, servidas desde aquí como en la web pública
 * (`publico.css`): los mismos ficheros de assets/fonts/, sin pedir nada a un
 * tercero. Faltaban: `--ui` y `--display` las nombraban pero nadie las cargaba,
 * así que el panel salía con la fuente de cada sistema —una en el iPhone, otra
 * en Android— hasta el 2026-09-30.
 */
@font-face {
    font-family: "Instrument Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/instrument-serif-400-9W389ra.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Variable: un solo fichero cubre de 400 a 700. */
@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/figtree-variable-Dj9csJy.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Las banderas del desplegable de país del teléfono (2026-10-08).

   Son emoji, y Windows no trae banderas: Chrome y Edge enseñaban «ES» en vez de
   🇪🇸. Esta fuente solo tiene banderas —el `unicode-range` son los indicadores
   regionales y las etiquetas de Escocia, Gales e Inglaterra—, así que el resto del
   texto sigue con la fuente de siempre. Servida desde aquí, como las demás. Solo se
   descarga en las páginas con un teléfono, que es la única regla que la usa.
   Twemoji, CC-BY 4.0: ver assets/fonts/README.md. */
@font-face {
    font-family: "Banderas";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/twemoji-country-flags-YyiVOC6.woff2") format('woff2');
    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067,
        U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
}

:root {
    --papel:        #F7F5F2;
    --superficie:   #FFFFFF;
    --superficie-2: #F1EDE8;
    --tinta:        #1E1A17;
    --tinta-2:      #4C443D;
    --suave:        #7C736B;
    --linea:        #E5DFD8;
    --linea-2:      #D5CDC3;

    /* Marca — los mismos tres que publico.css */
    --marca:        #F54927;
    --marca-fuerte: #BF3418;
    --sobre-marca:  #1B0D08;
    --tinte:        #FDEDE7;

    /* Estado. Ni uno es naranja: el naranja es «pulsa aquí». */
    --ok-fondo:     #E8F3EC;
    --ok-linea:     #BCDCC7;
    --ok-tinta:     #1F5B38;

    --aviso-fondo:  #FBF0D9;
    --aviso-linea:  #EBD5A3;
    --aviso-tinta:  #7A5210;

    --alerta-fondo: #FDECEA;
    --alerta-linea: #F4C4BA;
    --alerta-tinta: #8C2612;

    --plat-fondo:   #E9EBF7;
    --plat-tinta:   #333C7A;

    --sombra:       0 1px 2px rgba(30, 26, 23, .05), 0 6px 16px -10px rgba(30, 26, 23, .14);

    --r-s: 8px;
    --r-m: 12px;
    --r-l: 16px;

    --ui: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;

    /* Alto de la barra inferior, para que el contenido no quede debajo. */
    --tabs: 60px;

    /*
     * Los widgets NATIVOS —el calendario de un `date`, el reloj de un `time`, las
     * flechitas de un `number`, la barra de desplazamiento— los pinta el sistema,
     * no esta hoja. `color-scheme` es lo único que les dice en qué tema están: sin
     * él, en oscuro salía un calendario blanco y un icono negro sobre fondo negro.
     */
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --papel:        #14100D;
        --superficie:   #1E1815;
        --superficie-2: #261F1A;
        --tinta:        #F3EEE9;
        --tinta-2:      #CDC3BA;
        --suave:        #9C9188;
        --linea:        #312720;
        --linea-2:      #42352A;
        --marca:        #F54927;
        --marca-fuerte: #FF8566;
        --sobre-marca:  #1B0D08;
        --tinte:        #331A12;
        --ok-fondo:     #15281D;
        --ok-linea:     #24452F;
        --ok-tinta:     #86CFA3;
        --aviso-fondo:  #2E2413;
        --aviso-linea:  #4A3A1C;
        --aviso-tinta:  #E3BE72;
        --alerta-fondo: #331712;
        --alerta-linea: #54251B;
        --alerta-tinta: #FFA893;
        --plat-fondo:   #1E2038;
        --plat-tinta:   #A8B0E8;
        --sombra:       0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px -10px rgba(0, 0, 0, .7);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --papel:        #14100D;
    --superficie:   #1E1815;
    --superficie-2: #261F1A;
    --tinta:        #F3EEE9;
    --tinta-2:      #CDC3BA;
    --suave:        #9C9188;
    --linea:        #312720;
    --linea-2:      #42352A;
    --marca:        #F54927;
    --marca-fuerte: #FF8566;
    --sobre-marca:  #1B0D08;
    --tinte:        #331A12;
    --ok-fondo:     #15281D;
    --ok-linea:     #24452F;
    --ok-tinta:     #86CFA3;
    --aviso-fondo:  #2E2413;
    --aviso-linea:  #4A3A1C;
    --aviso-tinta:  #E3BE72;
    --alerta-fondo: #331712;
    --alerta-linea: #54251B;
    --alerta-tinta: #FFA893;
    --plat-fondo:   #1E2038;
    --plat-tinta:   #A8B0E8;
    --sombra:       0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px -10px rgba(0, 0, 0, .7);
}

/* ── Base ───────────────────────────────────────────────────────────────────── */

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

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--ui);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
img { max-width: 100%; }

a { color: var(--marca-fuerte); }

:focus-visible {
    outline: 2px solid var(--marca);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Barra superior ─────────────────────────────────────────────────────────── */

header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--superficie);
    border-bottom: 1px solid var(--linea);
}

header a {
    color: var(--tinta-2);
    text-decoration: none;
    font-weight: 500;
}

header a:hover { color: var(--marca-fuerte); }

.marca {
    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: .01em;
    color: var(--tinta);
    white-space: nowrap;
}

.crece { flex: 1; }

/* En el móvil la navegación está abajo, así que la de arriba estorba: quedan la
   marca, el nombre y salir. */
header .solo-ancho { display: none; }

@media (min-width: 48rem) {
    header { gap: 20px; padding: 14px 24px; }
    header .solo-ancho { display: inline; }
}

/* ── Selector de tema ───────────────────────────────────────────────────────── */

/* Tres botones de un formulario, no un desplegable: un `select` necesitaría
   JavaScript para aplicarse al cambiar, o un botón de guardar al lado. */
.tema {
    display: flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--linea-2);
    border-radius: 99px;
    background: var(--papel);
}

.tema button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: transparent;
    color: var(--suave);
    cursor: pointer;
}

.tema button:hover { color: var(--tinta); }

.tema button[aria-pressed="true"] {
    background: var(--tinta);
    color: var(--papel);
}

.tema svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
}

/* El acceso al perfil desde la cabecera. En el móvil solo el icono. */
.perfil-enlace {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 10px;
    border-radius: var(--r-s);
    color: var(--tinta-2);
    text-decoration: none;
    font-size: .9375rem;
    font-weight: 500;
}

.perfil-enlace:hover { background: var(--superficie-2); color: var(--tinta); }

.perfil-enlace svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.7;
    fill: none;
}

/* ── Perfil ─────────────────────────────────────────────────────────────────── */

.perfil-foto {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.perfil-foto img,
.perfil-foto__hueco {
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: var(--superficie-2);
}

/* Redondo y no cuadrado: es un retrato, y la forma dice qué se espera ahí. */
.perfil-foto__hueco {
    display: grid;
    place-items: center;
    border: 1px dashed var(--linea-2);
    color: var(--suave);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.perfil-foto .campo { flex: 1; min-width: 0; }

/* ── Lienzo y menú lateral ──────────────────────────────────────────────────── */

.panel { display: block; }

main {
    max-width: 60rem;
    margin: 0 auto;
    padding: 16px 16px calc(var(--tabs) + 24px);
}

main > * + * { margin-top: 14px; }

/* El lateral no existe en el móvil: ahí las mismas secciones están abajo, donde
   llega el pulgar. Es la misma lista declarada una vez en la plantilla. */
.lateral { display: none; }

@media (min-width: 48rem) {
    .panel {
        display: grid;
        grid-template-columns: 14rem minmax(0, 1fr);
        align-items: start;
    }

    .lateral {
        display: flex;
        flex-direction: column;
        gap: 2px;
        position: sticky;
        top: 0;
        padding: 20px 12px;
    }

    .lateral a {
        display: flex;
        align-items: center;
        gap: 11px;
        min-height: 44px;
        padding: 10px 12px;
        border-radius: var(--r-s);
        color: var(--tinta-2);
        font-size: .9375rem;
        font-weight: 600;
        text-decoration: none;
    }

    .lateral a:hover { background: var(--superficie-2); color: var(--tinta); }

    /* La sección activa con franja y fondo, no solo color: en una lista de tres
       un cambio de tono se pierde en cuanto la pantalla tiene poco contraste. */
    .lateral a[aria-current="page"] {
        background: var(--tinte);
        color: var(--marca-fuerte);
        box-shadow: inset 3px 0 0 var(--marca);
    }

    .lateral svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        stroke: currentColor;
        stroke-width: 1.7;
        fill: none;
    }

    main { padding: 24px 24px 48px; margin: 0; }
}

h1 {
    margin-top: 6px;
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.9rem;
    letter-spacing: -.01em;
}

h2 {
    margin-top: 28px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--suave);
}

/* ── Barra inferior de navegación (solo móvil) ──────────────────────────────── */

.tabs {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: var(--superficie);
    border-top: 1px solid var(--linea-2);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tabs a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: var(--tabs);
    padding: 8px 4px;
    color: var(--suave);
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
}

.tabs a[aria-current="page"] { color: var(--marca-fuerte); }

.tabs svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.7;
    fill: none;
}

@media (min-width: 48rem) {
    .tabs { display: none; }
    main { padding-bottom: 48px; }
}

/* ── Suplantación ───────────────────────────────────────────────────────────── */

/* Imposible de pasar por alto a propósito: sin esto es fácil olvidar en qué
   cuenta se está y tocar los datos de un cliente creyendo que son los propios. */
.suplantando {
    padding: 12px 16px;
    background: var(--aviso-fondo);
    border-bottom: 2px solid var(--aviso-tinta);
    color: var(--aviso-tinta);
    font-size: .9375rem;
}

.suplantando strong { font-weight: 700; }
.suplantando a { color: inherit; font-weight: 600; }

/* ── Tarjetas y filas ───────────────────────────────────────────────────────── */

.tarjeta {
    padding: 16px;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--r-m);
}

.tarjeta > * + * { margin-top: 10px; }

.fila {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--linea);
}

/* Si no cabe en una línea, lo de la derecha baja a la siguiente. Sin esto, en
   el móvil «Actividad» se salía 120 px por la derecha: un identificador largo a
   la izquierda y el correo y la fecha empujando fuera (2026-10-04). */
.fila { flex-wrap: wrap; }
.fila > * { min-width: 0; overflow-wrap: anywhere; }

.fila:first-child { padding-top: 0; }
.fila:last-child { padding-bottom: 0; border-bottom: 0; }

.apagado { color: var(--suave); font-size: .9375rem; }

/* El correo para ejercer derechos, al pie de cada pantalla: presente, no protagonista. */
.privacidad { margin-top: 48px; font-size: .8125rem; }

/* Una lista de filas no necesita el relleno de una tarjeta arriba y abajo. */
.lista { padding-block: 4px; }

/* Pero la primera y la última fila no pueden quedar pegadas al borde: en el
   Resumen y en «Lo que falta» el texto rozaba la raya y las filas, que son
   enlaces, se quedaban en 34 px de alto para el dedo (2026-10-04). */
.lista > .fila:first-child { padding-top: 11px; }
.lista > .fila:last-child { padding-bottom: 11px; }

/* ── Resumen de «Hoy» ───────────────────────────────────────────────────────── */

/* Lo primero que se ve: tres cifras que contestan «¿tengo algo que hacer?». No
   son tarjetas con sombra: son un bloque partido, porque juntas son una sola
   respuesta. */
.resumen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--r-m);
    overflow: hidden;
}

.resumen > div {
    padding: 14px 12px;
    border-right: 1px solid var(--linea);
}

.resumen > div:last-child { border-right: 0; }

.resumen dt {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--suave);
}

.resumen dd {
    margin: 4px 0 0;
    /* Figtree y no la serifa de los títulos: en Instrument Serif el «1» se
       confunde con una «l», y aquí solo hay cifras. */
    font-family: var(--ui);
    font-weight: 600;
    font-size: 1.75rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Cero no es un número cualquiera: significa «nada que hacer». */
.resumen dd.cero { color: var(--suave); }
.resumen dd.urge { color: var(--marca-fuerte); }

/* ── Avisos de limpieza ─────────────────────────────────────────────────────── */

/* La tarea principal del panel, así que lleva franja: es lo único de la página
   que exige un acto del propietario. */
.aviso {
    border-left: 3px solid var(--marca);
}

.aviso pre {
    margin: 0;
    padding: 12px 14px;
    background: var(--superficie-2);
    border-radius: var(--r-s);
    color: var(--tinta-2);
    font: inherit;
    font-size: .9375rem;
    white-space: pre-wrap;
}

.acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.acciones form { display: contents; }

/* ── Botones ────────────────────────────────────────────────────────────────── */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 18px;
    border: 0;
    border-radius: var(--r-s);
    background: var(--marca);
    color: var(--sobre-marca);
    font: inherit;
    font-size: .9375rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: filter .12s ease;
}

.boton:hover { filter: brightness(1.06); color: var(--sobre-marca); }
.boton:active { transform: translateY(1px); }

/* Secundario. Era gris plano; ahora es un botón con contorno, que se distingue
   del principal sin parecer desactivado. */
.boton.gris {
    background: var(--superficie);
    border: 1px solid var(--linea-2);
    color: var(--tinta-2);
    font-weight: 600;
}

.boton.gris:hover { background: var(--superficie-2); color: var(--tinta); filter: none; }

/* ── Distintivos de estado ──────────────────────────────────────────────────── */

.marca-plataforma,
.marca-alerta,
.marca-ok {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}

.marca-plataforma { background: var(--plat-fondo); color: var(--plat-tinta); }
.marca-alerta { background: var(--aviso-fondo); color: var(--aviso-tinta); }
.marca-ok { background: var(--ok-fondo); color: var(--ok-tinta); }

/* ── Mensajes ───────────────────────────────────────────────────────────────── */

.ok, .error {
    padding: 12px 14px;
    border-radius: var(--r-s);
    font-size: .9375rem;
}

.ok {
    background: var(--ok-fondo);
    border: 1px solid var(--ok-linea);
    color: var(--ok-tinta);
}

.error {
    background: var(--alerta-fondo);
    border: 1px solid var(--alerta-linea);
    color: var(--alerta-tinta);
}

/* ── Tablas ─────────────────────────────────────────────────────────────────── */

/* En el móvil una tabla de cinco columnas no cabe, y encogerla la hace ilegible.
   Se desmonta en fichas: cada `td` lleva su etiqueta en `data-col` y se pinta
   delante. Sigue siendo una <table> de verdad para quien use lector de pantalla. */
table { width: 100%; border-collapse: collapse; }

thead { display: none; }

tbody tr {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--linea);
}

tbody tr:last-child { border-bottom: 0; }

tbody td {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 3px 0;
    border: 0;
    font-size: .9375rem;
}

tbody td::before {
    content: attr(data-col);
    color: var(--suave);
    font-size: .8125rem;
}

tbody td:empty { display: none; }

@media (min-width: 48rem) {
    thead { display: table-header-group; }

    tbody tr { display: table-row; padding: 0; }

    tbody td {
        display: table-cell;
        padding: 10px 12px 10px 0;
        border-bottom: 1px solid var(--linea);
    }

    tbody td::before { content: none; }

    th {
        padding: 0 12px 8px 0;
        border-bottom: 1px solid var(--linea-2);
        color: var(--suave);
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        text-align: left;
    }
}

/* ── Formularios ────────────────────────────────────────────────────────────── */

label {
    display: block;
    margin-bottom: 5px;
    color: var(--suave);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.campo + .campo { margin-top: 14px; }

/*
 * Todos los campos se ven igual, y por eso el selector va por EXCLUSIÓN.
 *
 * Estaba escrito al revés —una lista de `input[type=...]`— y se quedaba corto en
 * cuanto aparecía un tipo nuevo: el teléfono, el aforo, las horas, las fechas y
 * las URL de los calendarios salían con la apariencia por defecto del navegador,
 * con otra tipografía, otro tamaño y otro borde que el nombre o la tarifa, que sí
 * estaban en la lista. Enumerar lo que se estiliza obliga a acordarse; enumerar
 * lo que NO, que son cuatro cosas que no cambian, no.
 *
 * Fuera quedan los que deben conservar su aspecto nativo: casillas, radios y los
 * botones, que ya tienen su propio `.boton`.
 */
input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=reset], [type=hidden]),
select,
textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--linea-2);
    border-radius: var(--r-s);
    background: var(--papel);
    color: var(--tinta);
    font: inherit;
    font-size: .9375rem;
}

/* Las cifras en columna se leen mejor con el dígito de ancho fijo: precios,
   aforo, noches. En un campo de texto libre no aporta nada, pero tampoco molesta. */
input[type=number],
input[type=tel],
input[type=date],
input[type=time] {
    font-variant-numeric: tabular-nums;
}

input[type=file] { padding: 9px 12px; }

/*
 * Fecha y hora, que son los que se salían.
 *
 * `min-width: 0` porque su mínimo por defecto no es cero, y `appearance: none`
 * porque en iOS el control nativo se dimensiona por su contenido e ignora el
 * `width: 100%`. El selector nativo se conserva: lo abre
 * `::-webkit-calendar-picker-indicator`, que es un elemento aparte y no se ve
 * afectado.
 */
input[type=date],
input[type=time] {
    min-width: 0;
    max-width: 100%;
    appearance: none;
    -webkit-appearance: none;
}

/* La casilla sí es cuadrada y pequeña: forzarla a 44 px la convertiría en un
   bloque raro. El área pulsable la da la etiqueta que la envuelve. */
.casilla {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 0;
    color: var(--tinta-2);
    font-size: .9375rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.casilla input { width: 20px; height: 20px; min-height: 0; accent-color: var(--marca); }

/* ── Pantalla del alojamiento ───────────────────────────────────────────────── */

/* La publicación: estado a la izquierda, acción a la derecha. En el móvil se
   apila, con el botón a lo ancho, porque es el objeto que se viene a pulsar. */
.publicacion {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.publicacion .boton { width: 100%; }

@media (min-width: 34rem) {
    .publicacion {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .publicacion .boton { width: auto; }
}

/*
 * La dirección, con anchos fijados por campo.
 *
 * Aquí no vale `auto-fit`: la calle y el portal necesitan sitio y el código
 * postal no, y dejando que la rejilla reparta por igual, «Código postal» acaba
 * tan ancho como «Calle y número». Cuatro columnas y cada campo dice cuántas
 * ocupa.
 *
 * Tres escalones y no dos: en una tableta, cuatro columnas dejan campos de 120 px
 * —más estrechos que su propio contenido— y uno de apilar todo desaprovecha el
 * ancho. En medio van de dos en dos.
 */
.rejilla-direccion {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.rejilla-direccion > * { min-width: 0; }
.rejilla-direccion .campo + .campo { margin-top: 0; }

/* La etiqueta del portal lleva su aviso al lado, que es donde se lee. */
.rejilla-direccion label {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px;
}

@media (min-width: 34rem) {
    .rejilla-direccion { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .campo--mitad { grid-column: span 2; }
}

@media (min-width: 48rem) {
    .rejilla-direccion { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .campo--mitad { grid-column: span 2; }
    .campo--cuarto { grid-column: span 1; }
}

/* Campos en dos columnas donde quepan. `auto-fit` y no un número fijo: en el
   móvil se apilan solos y no hay que declarar el caso estrecho dos veces. */
.rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.rejilla + .rejilla { margin-top: 14px; }

/* El espacio entre campos lo da el `gap` de la rejilla. Sin esto, los de una fila
   partida cobrarían además el `margin-top` de `.campo + .campo` y quedarían al
   doble de separación que los de la primera fila. */
.rejilla .campo + .campo { margin-top: 0; }

/*
 * `min-width: 0` en los hijos de una rejilla.
 *
 * Por defecto son `min-width: auto`, que significa «nunca más estrecho que mi
 * contenido». Un `<input type="time">` o `type="date"` trae un ancho intrínseco
 * grande —el navegador reserva sitio para hh:mm y para dd/mm/aaaa más su icono—
 * así que la columna se estiraba por encima del contenedor y el campo se salía de
 * la pantalla en el móvil. Es el desbordamiento clásico de CSS grid, y se ve solo
 * cuando la pantalla es más estrecha que ese ancho intrínseco.
 */
.rejilla > *,
.filtros > * { min-width: 0; }

/* Lo que un textarea necesita ADEMÁS de lo que ya comparte con los demás campos. */
textarea {
    min-height: 120px;
    line-height: 1.55;
    resize: vertical;
}

/* La letra pequeña de un campo: por qué importa, o qué pasa si se deja vacío.
   Va debajo y no en el `placeholder`, que desaparece al escribir justo cuando
   más falta hace. */
.ayuda {
    margin-top: 6px;
    color: var(--suave);
    font-size: .8125rem;
    line-height: 1.5;
}

form .rejilla + .ayuda,
form .campo + .ayuda { margin-top: 8px; }

form .acciones { margin-top: 18px; }

/* ── Filtros ────────────────────────────────────────────────────────────────── */

/* Va en GET, así que el resultado vive en la URL y se puede compartir y recargar.
   Los campos se apilan en el móvil y caben en una fila en cuanto hay sitio. */
.filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    align-items: end;
    padding: 16px;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--r-m);
}

.filtros .campo + .campo { margin-top: 0; }

/* La letra pequeña ocupa la fila entera: explica el conjunto, no un campo. */
.filtros .ayuda { grid-column: 1 / -1; margin-top: 0; }

/*
 * La fila de botones ocupa el ancho entero.
 *
 * Sin esto caía en una celda más de la rejilla —`auto-fit` con `minmax(150px,
 * 1fr)`, que en un móvil son dos columnas de unos 160 px— y los dos botones no
 * cabían juntos, así que «Quitar filtros» se iba debajo de «Filtrar». Ocupando
 * la fila completa caben de sobra uno al lado del otro.
 */
.filtros__acciones {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Se reparten el ancho en el móvil: dos objetivos grandes y sin hueco muerto. */
.filtros__acciones .boton { flex: 1 1 auto; }

/*
 * En el móvil el filtro va plegado.
 *
 * Con una casilla oculta y su etiqueta, no con JavaScript ni con <details>: la
 * casilla funciona igual sin JavaScript, y <details> no se puede forzar a
 * «abierto» desde CSS en los navegadores que ya usan `::details-content`, que es
 * justo lo que haría falta para dejarlo desplegado en escritorio.
 *
 * Si hay un filtro puesto, la plantilla marca la casilla: llegar a una lista
 * filtrada sin ver por qué sería peor que el espacio que ocupa.
 */
.conmutador-filtros {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.abrir-filtros {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 18px;
    border: 1px solid var(--linea-2);
    border-radius: var(--r-s);
    background: var(--superficie);
    color: var(--tinta-2);
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
}

.abrir-filtros svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
}

.conmutador-filtros:focus-visible + .abrir-filtros {
    outline: 2px solid var(--marca);
    outline-offset: 2px;
}

.filtros { display: none; }
.conmutador-filtros:checked ~ .filtros { display: grid; }

@media (min-width: 48rem) {
    /* En escritorio sobra el conmutador: hay sitio para el filtro entero. */
    .abrir-filtros { display: none; }
    .filtros { display: grid; }
}

@media (min-width: 40rem) {
    .filtros__acciones .boton { flex: 0 0 auto; }
}

/* ── Propiedades ────────────────────────────────────────────────────────────── */

.propiedades {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 46rem) {
    .propiedades { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
}

.prop {
    display: flex;
    flex-direction: column;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--r-m);
    overflow: hidden;
}

.prop__foto {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    background: var(--superficie-2);
}

.prop__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* La imagen por defecto ocupa el mismo hueco que una foto, así que las tarjetas
   no bailan de altura según quién tenga fotos y quién no. */
.prop__vacia {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* En oscuro se atenúa: el SVG lleva su propio fondo claro —no puede saber en qué
   tema está la página— y a pantalla completa de noche sería un foco. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .prop__vacia { filter: brightness(.62) saturate(.9); }
}

:root[data-theme="dark"] .prop__vacia { filter: brightness(.62) saturate(.9); }

.prop__estado {
    position: absolute;
    top: 10px;
    left: 10px;
}

/*
 * La segunda etiqueta, debajo de la primera.
 *
 * `.prop__estado` está posicionada en absoluto, así que dos en la misma
 * esquina se pintan una encima de otra: «Sin publicar» taparía «Sin
 * verificar», que es justo el aviso nuevo. Se baja el alto de la primera —12px
 * de texto más 2+2 de relleno, unos 21— más un hueco de 6.
 */
.prop__estado--segundo {
    top: 37px;
}

.prop__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 16px;
}

.prop__nombre {
    margin: 0;
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.35rem;
    letter-spacing: -.005em;
    text-transform: none;
    color: var(--tinta);
}

.prop .acciones { margin-top: 4px; }

.prop .boton { min-height: 40px; padding: 8px 14px; font-size: .875rem; }

/* ── Botón de icono y confirmación ──────────────────────────────────────────── */

/* Para acciones que se reconocen por su forma y no necesitan rótulo. Lleva
   `aria-label`, así que un lector de pantalla sí lo nombra. */
.boton-icono {
    align-self: start;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-s);
    background: transparent;
    color: var(--suave);
    cursor: pointer;
}

/* En rojo solo al apuntarlo: en reposo, una papelera roja por foto convierte la
   pantalla en una fila de advertencias. */
.boton-icono:hover {
    background: var(--alerta-fondo);
    border-color: var(--alerta-linea);
    color: var(--alerta-tinta);
}

.boton-icono svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    stroke-width: 1.7;
    fill: none;
}

.dialogo {
    width: min(26rem, calc(100vw - 32px));
    padding: 22px;
    border: 1px solid var(--linea-2);
    border-radius: var(--r-m);
    background: var(--superficie);
    color: var(--tinta);
    box-shadow: var(--sombra);
}

.dialogo::backdrop { background: rgba(20, 16, 13, .55); }

.dialogo__titulo {
    margin-bottom: 8px;
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.4rem;
    letter-spacing: -.005em;
    text-transform: none;
    color: var(--tinta);
}

.dialogo__texto {
    margin-bottom: 18px;
    color: var(--tinta-2);
    font-size: .9375rem;
    line-height: 1.55;
}

/* El de confirmar, en rojo: el naranja de marca significa «la acción principal»,
   y borrar no debe parecerlo. */
.dialogo .boton {
    background: var(--alerta-tinta);
    color: #FFFFFF;
}

.dialogo .boton.gris {
    background: var(--superficie);
    color: var(--tinta-2);
}

/* ── Ordenar fotos ──────────────────────────────────────────────────────────── */

.orden {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.orden__fila {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--r-m);
}

/* El asa, no la tarjeta entera: sin ella, en el móvil el dedo no podría
   desplazar la página al pasar por encima de la lista. */
.orden__asa {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--r-s);
    background: transparent;
    color: var(--suave);
    cursor: grab;
    touch-action: none;
}

.orden__asa:active { cursor: grabbing; }

.orden__asa svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
}

.orden__fila img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--r-s);
    background: var(--superficie-2);
    /* Sin esto, arrastrar la miniatura dispara el arrastre nativo de imágenes del
       navegador y la biblioteca deja de recibir los eventos. */
    pointer-events: none;
    user-select: none;
}

.orden__datos {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.orden__numero {
    font-size: .9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* El hueco que deja la fila mientras se arrastra. */
.orden__hueco {
    opacity: .35;
    background: var(--tinte);
    border-style: dashed;
    border-color: var(--marca);
}

.orden__cogida { box-shadow: var(--sombra); }

/* ── «Antes de reservar» ────────────────────────────────────────────────────── */

/*
 * Una fila de la lista que se arrastra, pero con campos dentro en vez de una
 * miniatura. El asa se alinea arriba y no al centro: centrada en una fila de
 * 180 px de alto queda flotando en mitad de la nada y no se lee como asa.
 */
.orden__fila--alta { align-items: flex-start; }

.orden__fila--alta .orden__asa { margin-top: 2px; }

.aviso__campos {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* El `gap` ya separa; sin esto los campos cobrarían además el margen de
   `.campo + .campo` y quedarían al doble de distancia. */
.aviso__campos .campo + .campo { margin-top: 0; }

.aviso__campos textarea { min-height: 0; }

/* ── Barra de guardar ───────────────────────────────────────────────────────── */

/* Pegada abajo mientras se repasa una lista larga. `sticky` y no `fixed`: así se
   queda dentro del flujo y no tapa el final del contenido. */
.guardar-barra {
    position: sticky;
    bottom: calc(var(--tabs) + 8px);
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding: 12px;
    background: var(--superficie);
    border: 1px solid var(--linea-2);
    border-radius: var(--r-m);
    box-shadow: var(--sombra);
}

.guardar-barra .boton { flex: 1 1 auto; }

@media (min-width: 48rem) {
    .guardar-barra { bottom: 12px; }
    .guardar-barra .boton { flex: 0 0 auto; }
}

/* ── Calendarios ────────────────────────────────────────────────────────────── */

/* Una dirección de exportación: el campo y el botón de copiar. El campo es un
   <input readonly> y no un <code>, porque un input se selecciona entero de un
   toque y funciona igual si el portapapeles falla. */
.url + .url { margin-top: 12px; }

.url label {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.url__aviso {
    color: var(--ok-tinta);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.url__fila {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

/* Monoespaciada: un token de 43 caracteres se compara carácter a carácter, y con
   proporcional la l y la I son la misma. `text-overflow` no vale aquí —hay que
   poder ver el final— así que se desplaza dentro del campo. */
.url__fila input {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
    font-size: .8125rem;
}

.url__fila .boton { flex-shrink: 0; min-height: 44px; }

@media (max-width: 30rem) {
    .url__fila { flex-direction: column; }
    .url__fila .boton { width: 100%; }
}

/* Un calendario conectado. Separado por filete y no en tarjeta propia: son
   hermanos dentro de la unidad, no objetos independientes. */
.feed + .feed {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--linea);
}

.feed > * + * { margin-top: 10px; }

/* ── Fotos ──────────────────────────────────────────────────────────────────── */

.fotos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 40rem) {
    .fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.foto {
    display: grid;
    /* Miniatura, datos y la papelera. La tercera columna es `auto` para que el
       icono ocupe lo suyo y ni un píxel más. La primera creció de 96 a 110 px
       para que «Baja calidad» quepa debajo sin partirse en tres líneas. */
    grid-template-columns: 110px minmax(0, 1fr) auto;
    gap: 14px;
    padding: 12px;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--r-m);
}

.foto__miniatura {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.foto__miniatura img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: var(--r-s);
    background: var(--superficie-2);
}

/* Las medidas, discretas: es un dato de comprobación, no un titular. */
.foto__medidas {
    color: var(--suave);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.foto__cuerpo > * + * { margin-top: 8px; }

/* Un rótulo con su letra pequeña al lado. Lo usan la ficha de cada foto y la
   cabecera de cada aviso de limpieza, que son el mismo objeto visual. */
.rotulo {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-size: .9375rem;
    font-weight: 600;
}

.rotulo .meta { color: var(--suave); font-size: .8125rem; font-weight: 400; }

.foto select,
.foto input[type=text] { min-height: 40px; font-size: .875rem; }

.foto .boton { min-height: 40px; padding: 8px 14px; font-size: .875rem; }

/* El botón de guardar, separado de los campos que guarda. */
.foto form .acciones { margin-top: 10px; }

.ultima-entrada {
    margin-bottom: 18px;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

/* ── Título con el selector de tema al lado ─────────────────────────────────── */

/*
 * El tema es un ajuste que se toca de pasada, así que va arriba y no al final de
 * la pantalla. En el móvil el selector baja bajo el título en vez de apretarse
 * contra él: tres botones de 40 px y un `<h1>` no caben en 360 px.
 */
.titulo-con-tema {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.titulo-con-tema h1 { margin: 0; }

/* ── Códigos de respaldo ────────────────────────────────────────────────────── */

/*
 * Se enseñan una sola vez y se copian a mano. Todo aquí está al servicio de eso:
 * monoespaciada para que un 8 y una B no se parezcan, grandes, y en rejilla para
 * que se puedan ir tachando sin perder el sitio.
 */
.codigos {
    list-style: none;
    margin: 12px 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.codigos li {
    padding: 10px 12px;
    border: 1px solid var(--linea-2);
    border-radius: var(--r-s);
    background: var(--superficie-2);
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 1rem;
    letter-spacing: .06em;
    text-align: center;
    /* Se seleccionan de un doble clic entero, sin arrastrar. */
    user-select: all;
}

/* La clave TOTP en texto, para quien no puede usar la cámara. */
code {
    display: inline-block;
    padding: 6px 10px;
    border: 1px solid var(--linea-2);
    border-radius: var(--r-s);
    background: var(--superficie-2);
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: .9375rem;
    letter-spacing: .08em;
    user-select: all;
    word-break: break-all;
}

/* ── Verificación (ALTCHA) ──────────────────────────────────────────────────── */

altcha-widget {
    display: block;
    margin: 14px 0 0;
    --altcha-color-base: transparent;
    --altcha-color-border: transparent;
    --altcha-color-text: var(--suave);
    --altcha-color-border-focus: var(--marca);
    --altcha-border-width: 0;
    --altcha-max-width: 100%;
    font-size: .8125rem;
}

/* ── Entrar ─────────────────────────────────────────────────────────────────── */

.entrar {
    max-width: 24rem;
    margin: 8vh auto 0;
}

.entrar h1 {
    margin-bottom: 4px;
    font-size: 2.4rem;
    text-align: center;
}

.entrar .apagado { display: block; margin-bottom: 20px; text-align: center; }

.entrar .boton { width: 100%; margin-top: 18px; }

/* ── Atributos ──────────────────────────────────────────────────────────────── */

/*
 * Las casillas del propietario: qué tiene el alojamiento.
 *
 * Es un `<fieldset>` y no un `<div>` porque las casillas son una pregunta con
 * varias respuestas, y la `<legend>` es lo que un lector de pantalla anuncia al
 * entrar en cualquiera de ellas. Con divs, cada casilla se leería suelta.
 *
 * El navegador le pone borde y sangrado propios; se quitan aquí para que el
 * bloque se parezca al resto del formulario.
 */
.atributos {
    margin: 18px 0 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.atributos legend {
    padding: 0;
    margin-bottom: 10px;
    color: var(--tinta-2);
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* `auto-fill` y no `auto-fit`: con tres atributos, `auto-fit` los estira a media
   pantalla cada uno y la fila parece rota. */
.atributos__lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 2px 14px;
}

.atributos__opcion { min-width: 0; }

.atributos__icono {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: var(--suave);
}

.atributos__icono svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.6;
}

/* Marcado, el icono se enciende: confirma la elección sin añadir nada al lado. */
.atributos__opcion:has(input:checked) { color: var(--tinta); }
.atributos__opcion:has(input:checked) .atributos__icono { color: var(--marca-fuerte); }

/* ── Catálogo de atributos (operador) ───────────────────────────────────────── */

.catalogo {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.catalogo__fila {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 6px 14px;
    padding: 14px;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--r-m);
}

/* Apagado: la fila sigue ahí y sigue siendo editable, pero se retira del primer
   plano. Sin `opacity`, que también apagaría el texto de los campos. */
.catalogo__fila--baja {
    background: var(--superficie-2);
    border-style: dashed;
}

.catalogo__icono {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-s);
    background: var(--tinte);
    color: var(--marca-fuerte);
}

.catalogo__fila--baja .catalogo__icono {
    background: var(--superficie);
    color: var(--suave);
}

.catalogo__icono svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.6;
}

.catalogo__campos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    min-width: 0;
}

.catalogo__campos > * { min-width: 0; }
.catalogo__campos .campo + .campo { margin-top: 0; }

/* El estado cuelga bajo los campos en el móvil, saltando la columna del icono:
   sangrarlo 58 px lo alinearía con el nombre, pero en una pantalla de 360 px eso
   es un sexto del ancho tirado. */
.catalogo__estado {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
}

.catalogo__slug {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: .75rem;
}

@media (min-width: 42rem) {
    /* Icono · campos · estado, en una línea. El estado en `auto` para que los
       campos se queden con todo lo que sobre. */
    .catalogo__fila {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
    }

    .catalogo__campos { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 5.5rem; }

    .catalogo__estado {
        grid-column: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/*
 * La lista de preguntas sin responder del panel (AD-24).
 *
 * Lista y no tabla: es una sola columna de texto con su fecha al lado, y una
 * tabla de una columna es una tabla que no hace nada.
 */
.sin-responder { margin: 0; padding: 0; list-style: none; }

.sin-responder li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--linea);
}

.sin-responder li:last-child { border-bottom: 0; }
.sin-responder__texto { flex: 1 1 260px; }

/*
 * El botón de borrar de verdad.
 *
 * Rojo y no gris: es el único sitio del panel donde un clic destruye datos que
 * no vuelven, y tiene que verse distinto de «Guardar» y de «Cancelar», que están
 * al lado. Llega después de escribir el nombre a mano, así que el color no es la
 * única defensa — es el aviso, no la cerradura.
 *
 * Reutiliza las variables de alerta que ya tiene el tema —las mismas de `.error`—
 * y no un rojo nuevo: así el modo oscuro ya está resuelto, con su propio par de
 * fondo y tinta, en vez de un rojo fijo que allí deslumbra.
 *
 * Contorno y no relleno: el relleno es del botón principal, que en esta pantalla
 * no existe. Un botón rojo macizo pesa más que el enlace de cancelar que tiene al
 * lado, y la salida fácil de una pantalla de borrado no debe pesar menos.
 */
.boton.peligro {
    background: var(--alerta-fondo);
    border: 1px solid var(--alerta-linea);
    color: var(--alerta-tinta);
    font-weight: 700;
}

.boton.peligro:hover {
    background: var(--alerta-linea);
    color: var(--alerta-tinta);
    filter: none;
}

/* ── Actividad ─────────────────────────────────────────────────────────────── */

/* El detalle de un cambio: campo, antes y después. Es una tabla pequeña y fija
   de tres columnas, así que NO se desmonta en fichas como las demás: en una
   línea se lee mejor «precio: 90 → 110» que tres renglones con etiqueta. */
table.cambios { margin: 0 0 12px; font-size: .875rem; }
table.cambios tr,
table.cambios tbody tr { display: table-row; padding: 0; border: 0; }
table.cambios th,
table.cambios td,
table.cambios tbody td {
    display: table-cell;
    padding: 2px 10px 2px 0;
    border: 0;
    font-size: .875rem;
    text-align: left;
    font-weight: normal;
    word-break: break-word;
}
table.cambios tbody td::before { content: none; }
table.cambios th { color: var(--suave); white-space: nowrap; }

/* ── Aspecto de la web ─────────────────────────────────────────────────────── */

.temas { margin: 0 0 16px; padding: 0; border: 0; }
.temas legend { margin-bottom: 8px; font-weight: 600; }

.tema-opcion {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--linea);
    border-radius: 10px;
    cursor: pointer;
}

.tema-opcion + .tema-opcion { margin-top: 8px; }
.tema-opcion:has(:checked) { border-color: currentColor; }
.tema-opcion input { margin-top: 4px; }
.tema-opcion .ayuda { display: block; margin-top: 2px; }

/* Tres franjas con los colores del tema, en el orden en que se ven en la web:
   secundario, principal y apoyo. */
.tema-opcion__muestra {
    display: flex;
    flex: none;
    width: 54px;
    height: 36px;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid var(--linea);
}

.tema-opcion__muestra span { flex: 1; }

.colores input[type="color"] {
    width: 100%;
    height: 44px;
    padding: 2px;
    border: 1px solid var(--linea);
    border-radius: 8px;
    background: none;
    cursor: pointer;
}

/*
 * El hilo de una conversación con el asistente (AD-26).
 *
 * El huésped a la izquierda y lo que sale del alojamiento —asistente o
 * persona— a la derecha, como en cualquier mensajería: es lo que se lee sin
 * pensar. El asistente se distingue de una persona por el tinte, porque quien
 * contesta tiene que ver de un vistazo qué respondió la máquina.
 */
.hilo { display: flex; flex-direction: column; gap: 10px; }

.mensaje {
    max-width: 85%;
    padding: 10px 12px;
    border: 1px solid var(--linea);
    border-radius: var(--r-m);
    background: var(--superficie);
    overflow-wrap: anywhere;
}

.mensaje__quien { display: block; font-size: 12px; color: var(--suave); margin-bottom: 4px; }
.mensaje--huesped { align-self: flex-start; }
.mensaje--asistente { align-self: flex-end; background: var(--plat-fondo); color: var(--plat-tinta); border-color: transparent; }
.mensaje--persona { align-self: flex-end; background: var(--ok-fondo); color: var(--ok-tinta); border-color: var(--ok-linea); }
.mensaje--escalado { border-color: var(--aviso-linea); box-shadow: inset 3px 0 0 var(--aviso-linea); }

/* ── Ficha de la reserva ────────────────────────────────────────────────────── */

/*
 * La cabecera es la respuesta a «¿cuándo llegan y cuántos?», que es a lo que se
 * entra casi siempre, y casi siempre desde el móvil (2026-09-29). Las dos fechas
 * en grande y lado a lado; debajo, noches, huéspedes y mascota.
 */
.estancia {
    padding: 18px 16px;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--r-l);
    box-shadow: var(--sombra);
}

.estancia__donde { margin: 0; font-family: var(--ui); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }

.estancia__marcas { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }

.estancia__fechas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}

.estancia__fechas > div { display: flex; flex-direction: column; gap: 2px; }

.estancia__fechas strong {
    /* Figtree con cifras de ancho fijo: en la serifa de los títulos el «1» se
       lee como una «l», y «10/10» es justo lo que se viene a mirar. */
    font-family: var(--ui);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    /* Sin partir: «dom 20/09» en dos líneas no se lee de un vistazo. */
    font-size: clamp(1.3rem, 6.6vw, 1.65rem);
    white-space: nowrap;
    font-weight: 400;
    line-height: 1.05;
}

.estancia__fechas .apagado { font-size: .8125rem; }

.estancia__rotulo {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--suave);
}

.estancia__datos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 16px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--linea);
    list-style: none;
}

.estancia__datos .apagado { font-size: .875rem; }

/* Con mascota se ve sin leer: hay que avisar a la limpieza y cobrar el suplemento. */
.estancia__mascota { font-weight: 600; color: var(--aviso-tinta); }

.marca-estado,
.marca-pago {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: .75rem;
    font-weight: 600;
    background: var(--superficie-2);
    color: var(--tinta-2);
}

.marca-pago--sin_pagar { background: var(--alerta-fondo); color: var(--alerta-tinta); }
.marca-pago--senal_pagada { background: var(--aviso-fondo); color: var(--aviso-tinta); }
.marca-pago--pagado { background: var(--ok-fondo); color: var(--ok-tinta); }

.contacto__nombre { margin: 0; font-size: 1.125rem; font-weight: 600; }

/* Tres botones grandes, del ancho del dedo: se pulsan de pie. */
.contacto__botones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 8px;
}

.contacto__boton {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 64px;
    padding: 10px 6px;
    border: 1px solid var(--linea-2);
    border-radius: var(--r-m);
    color: var(--tinta);
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
}

.contacto__boton:active { background: var(--superficie-2); }
.contacto__boton svg { width: 24px; height: 24px; }

.fila--total { font-size: 1.0625rem; }

.desglose summary {
    cursor: pointer;
    color: var(--tinta-2);
    font-size: .9375rem;
    padding: 6px 0;
}

.desglose .lista { margin-top: 6px; }

.pago form { margin: 0; }

.enlace-peligro {
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--alerta-tinta);
    font: inherit;
    font-size: .875rem;
    text-decoration: underline;
    cursor: pointer;
}

.pagos__saldo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px;
    border-radius: var(--r-s);
    background: var(--superficie-2);
}

.pagos__saldo > div { display: flex; flex-direction: column; gap: 2px; }
.pagos__saldo strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.pagos__saldo .urge { color: var(--marca-fuerte); }

.pagos__nuevo > summary { list-style: none; width: 100%; }
.pagos__nuevo > summary::-webkit-details-marker { display: none; }
.pagos__nuevo[open] > summary { display: none; }
.pagos__formulario { margin-top: 4px; }

.pagos__vence { display: flex; align-items: end; gap: 8px; }
.pagos__vence .campo { flex: 1; }

/* ── Agenda de la limpiadora ────────────────────────────────────────────────── */

/* Se abre desde WhatsApp, en el móvil y con las manos ocupadas: letra grande,
   una tarjeta por limpieza y un solo botón que ocupa todo el ancho. */
.agenda__titulo { font-size: 1.75rem; }

.limpieza { margin-top: 12px; }
.limpieza p { margin: 0; }
.limpieza__cuando { font-size: 1.125rem; }
.limpieza__huespedes { font-size: 1.0625rem; }

.limpieza__nota {
    padding: 10px 12px;
    border-radius: var(--r-s);
    background: var(--aviso-fondo);
    color: var(--aviso-tinta);
}

.limpieza__nota span {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.limpieza__boton { width: 100%; min-height: 52px; font-size: 1.0625rem; }
.limpieza--lista { border-color: var(--ok-linea); }
.limpieza__hecho { color: var(--ok-tinta); font-weight: 600; }

.estancia__lista {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--r-s);
    background: var(--aviso-fondo);
    color: var(--aviso-tinta);
}

.estancia__lista--si { background: var(--ok-fondo); color: var(--ok-tinta); }
.estancia__lista form { margin: 0; flex-shrink: 0; }
.estancia__lista .apagado { color: inherit; opacity: .8; font-size: .875rem; }
.boton--pequeno { min-height: 36px; padding: 6px 12px; font-size: .875rem; }

/* ── Chat en vivo: presencia y resumen en la ficha ──────────────────────────── */

.presencia { font-size: .8125rem; color: var(--suave); }

/* «En el chat ahora»: el único momento en que contestar llega al instante. */
.presencia--si { color: var(--ok-tinta); font-weight: 600; }
.presencia--si::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: currentColor;
}

.chat-resumen__estado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.chat-resumen__mensaje {
    padding: 8px 12px;
    border-left: 3px solid var(--linea-2);
    overflow-wrap: anywhere;
}
.chat-resumen__mensaje .apagado { display: block; font-size: .75rem; }
.chat-resumen .boton { width: 100%; }

/* ── Listado de reservas ────────────────────────────────────────────────────── */

/* Una tarjeta por reserva, pulsable entera: se toca de pie y con el pulgar. */
.reservas { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.reserva-tarjeta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--r-m);
    color: var(--tinta);
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.reserva-tarjeta:hover { border-color: var(--linea-2); }
.reserva-tarjeta:active { background: var(--superficie-2); }

.reserva-tarjeta__fechas {
    font-weight: 600;
    font-size: 1.125rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.reserva-tarjeta__datos { color: var(--tinta-2); font-size: .9375rem; }
.reserva-tarjeta__marcas { display: flex; flex-wrap: wrap; gap: 6px; }

/* Para lectores de pantalla: presente en el texto, invisible en pantalla. */
.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Una fila que es un enlace: se pulsa entera y no parece un enlace subrayado. */
.fila--enlace { color: inherit; text-decoration: none; }
.fila--enlace > span:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fila--enlace:hover > span:first-child { color: var(--marca-fuerte); }
.fila--enlace:active { background: var(--superficie-2); }

/* El «no hay nada» de una lista: `.lista` recorta el relleno vertical pensando en
   filas, y un párrafo suelto se quedaba pegado al borde. */
.lista > p.apagado { margin: 0; padding-block: 12px; }

/* ── Alojamiento: cabecera y pestañas ───────────────────────────────────────── */

/*
 * Cada sección del alojamiento es su propia página (2026-09-30), y estas
 * pestañas van de una a otra. Una fila que se desliza con el dedo cuando no cabe
 * —ocho pestañas no caben en un móvil—, igual en todos los tamaños.
 */
.alojamiento-cabecera__volver { margin: 0 0 4px; font-size: .875rem; }
.alojamiento-cabecera__volver a { color: var(--suave); text-decoration: none; }
.alojamiento-cabecera h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.alojamiento-cabecera h1 .marca-ok,
.alojamiento-cabecera h1 .marca-alerta { font-family: var(--ui); }

.pestanas {
    display: flex;
    gap: 4px;
    margin: 0 -16px 20px;
    padding: 0 16px;
    overflow-x: auto;
    border-bottom: 1px solid var(--linea);
    scrollbar-width: none;
}

/* Que se note que sigue: el lado por el que quedan pestañas se desvanece. Lo
   decide `pestanas_controller.js` según el desplazamiento real; antes el
   degradado iba fijo en el móvil y no existía en escritorio, donde en 1366 px
   «Limpieza» salía cortada sin aviso (2026-10-04). */
.pestanas--despues { mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.pestanas--antes { mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); }
.pestanas--antes.pestanas--despues {
    mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

.pestanas::-webkit-scrollbar { display: none; }

.pestanas a {
    flex-shrink: 0;
    padding: 10px 12px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--tinta-2);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.pestanas a:hover { color: var(--tinta); }

.pestanas a[aria-current="page"] {
    color: var(--marca-fuerte);
    border-bottom-color: var(--marca);
}

@media (min-width: 900px) {
    .pestanas { margin-inline: 0; padding-inline: 0; }
    /* Once pestañas caben en el ancho del panel con un poco menos de aire. */
    .pestanas a { padding-inline: 9px; }
}

/* Quién cobra cada plataforma: su nombre y debajo dos opciones del mismo ancho. */
.cobro { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; }
.cobro__plataforma { grid-column: 1 / -1; padding: 0; font-weight: 600; }
.cobro__opcion {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--linea-2);
    border-radius: var(--r-s);
    cursor: pointer;
}
.cobro__opcion:has(input:checked) { border-color: var(--marca); background: var(--tinte); }

/* Completar los datos del huésped: plegado cuando ya están. */
.huesped-editar summary { cursor: pointer; color: var(--tinta-2); font-weight: 600; padding: 4px 0; }
.huesped-editar form { margin-top: 10px; }

/* ── Teléfono con país ──────────────────────────────────────────────────────── */

/* El desplegable de país, estrecho, y el número al lado ocupando el resto.
   Cerrado se ve «🇪🇸 +34 Esp…»: la bandera y el prefijo, que es lo que importa. */
.telefono { display: flex; flex-wrap: wrap; gap: 8px; }
.telefono select { flex: 0 0 7.5rem; min-width: 0; font-family: "Banderas", var(--ui); }
/* Menos de 7rem para el número no sirve: mejor que baje a su propia línea. */
.telefono input { flex: 1 1 7rem; min-width: 0; }

/* Un campo que no se puede usar todavía: se ve, apagado, y dice por qué. */
.campo--desactivado label, .campo--desactivado input { opacity: .55; }
.cobro[disabled] .cobro__opcion { opacity: .5; cursor: not-allowed; }
.cobro__motivo { grid-column: 1 / -1; margin: 0; }
.explicacion p { margin: 0; }
/* Un campo que sigue a un texto de ayuda necesita el mismo aire que tras otro campo. */
.ayuda + .campo,
.apagado + .campo { margin-top: 14px; }

/* Las normas de mascotas solo con «Admite mascotas» marcado: `:has()`, sin
   JavaScript. Sin soporte de `:has()` se ven siempre, que no rompe nada. */
.mascotas-normas { margin-top: 14px; }
@supports selector(:has(*)) {
    .atributos:not(:has(.atributos__opcion--mascotas input:checked)) .mascotas-normas { display: none; }
}

/* Añadir unidad: un botón «+» bajo las tarjetas. */
.anadir-unidad { margin-top: 20px; }
.anadir-unidad .boton { width: 100%; }
.anadir-unidad span { font-size: 1.25rem; line-height: 1; margin-right: 6px; }

/* La unidad recién añadida, marcada al llegar a ella. */
h2:target + .tarjeta { border-color: var(--marca); box-shadow: 0 0 0 3px var(--tinte); }

/* Una acción al otro extremo de la fila: borrar, lejos de guardar. */
.acciones__derecha { margin-left: auto; }
.boton svg { width: 18px; height: 18px; flex-shrink: 0; }
.boton svg + span { margin-left: 6px; }

/* ── Ayuda del dominio ──────────────────────────────────────────────────────── */

/* «ⓘ Cómo configuro mi dominio»: un enlace, no un botón de formulario. */
.enlace-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--marca-fuerte);
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
}

.enlace-info svg { width: 20px; height: 20px; }
.enlace-info:hover { text-decoration: underline; }

/* La guía es más larga que una confirmación: más ancha y con scroll propio. */
.dialogo--guia { width: min(36rem, calc(100vw - 24px)); max-height: calc(100dvh - 48px); overflow-y: auto; }
.dialogo--guia > * + * { margin-top: 12px; }
.dialogo--guia h2 { margin-top: 0; font-size: 1.25rem; letter-spacing: 0; text-transform: none; color: var(--tinta); }

.guia-pasos { margin: 0; padding-left: 1.3em; }
.guia-pasos > li + li { margin-top: 12px; }
.guia-pasos .ayuda { margin: 6px 0 0; }

/* Los registros, como los enseña cualquier panel de DNS: tipo, nombre y valor. */
.tabla-dns {
    display: grid;
    margin-top: 8px;
    border: 1px solid var(--linea);
    border-radius: var(--r-s);
    overflow: hidden;
}

.tabla-dns > div {
    display: grid;
    grid-template-columns: 3.2rem 3.4rem 1fr;
    gap: 8px;
    padding: 8px 10px;
    border-top: 1px solid var(--linea);
    font-size: .9375rem;
}

.tabla-dns > div:first-child { border-top: 0; }
.tabla-dns__cabecera { background: var(--superficie-2); font-size: .75rem !important; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.tabla-dns code { overflow-wrap: anywhere; }

/* En la guía, el código es texto a copiar, no un bloque: sin caja gruesa, y las
   IP enteras en su celda en vez de partidas a la mitad. */
.dialogo--guia code {
    padding: 1px 5px;
    border: 0;
    border-radius: 4px;
    background: var(--superficie-2);
    font-size: .875rem;
    white-space: nowrap;
}
.tabla-dns code.ipv6 { white-space: normal; word-break: break-all; }
.tabla-dns > div > span:last-child { min-width: 0; }
.dialogo--guia h2:focus { outline: none; }

/* Dos columnas en pantalla ancha, una en el móvil: para formularios cortos cuyos
   campos no caben de cuatro en cuatro (el teléfono lleva además su país). */
.rejilla-2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
.rejilla-2 > * { min-width: 0; }
.rejilla-2 .campo + .campo { margin-top: 0; }
/* Un campo que necesita la fila entera aunque vaya en la rejilla: el NRA, de 60 y tantos caracteres. */
.rejilla-2 > .campo--entero { grid-column: 1 / -1; }
@media (min-width: 40rem) {
    .rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Con sitio, el país entero en el desplegable («🇪🇸 +34 España»); estrecho,
   la bandera y el prefijo, que es lo que importa.

   Por el ancho del CAMPO y no de la pantalla: en la tableta el teléfono va en
   media columna, la pantalla pasaba de 40rem y el desplegable ancho dejaba al
   número en 40 px (2026-10-04). */
.telefono { container-type: inline-size; }

@container (min-width: 22rem) {
    .telefono select { flex-basis: 10.5rem; }
}


/* ── Textos legales (2026-10-01) ─────────────────────────────────────────── */

.legal { max-width: 46rem; line-height: 1.6; }
.legal h2 { margin-top: 2em; }
.legal-tabla { width: 100%; border-collapse: collapse; margin-block: 1em; font-size: .9375rem; }
.legal-tabla th, .legal-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
/* En el móvil, la tabla se desplaza dentro de su caja y no arrastra la página. */
@media (max-width: 640px) { .legal-tabla { display: block; overflow-x: auto; } }
/* Un dato que el titular no ha rellenado: que se vea que falta. */
.legal-pendiente { background: #fde68a; color: #713f12; padding: 0 3px; border-radius: 3px; }

/* ── Registro de viajeros (2026-10-09) ───────────────────────────────────── */

.lista-simple { list-style: none; margin: 10px 0; padding: 0; }
.lista-simple li {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    padding: 8px 0; border-bottom: 1px solid var(--linea);
}
.lista-simple li:last-child { border-bottom: 0; }
.en-linea { display: inline; margin: 0; }
.boton.pequeno { min-height: 32px; padding: 4px 10px; font-size: .8125rem; }
.tarjeta h3 { margin: 18px 0 6px; font-size: .9375rem; }
.tarjeta h3:first-child { margin-top: 0; }

/* El lector del documento del parte de viajeros (`assets/lector_documento.js`). */
.escaner {
    margin: 0 0 16px; padding: 14px 16px;
    border: 1px dashed var(--linea, #ccc); border-radius: 10px;
}
.escaner p { margin: 0 0 10px; }
.escaner label.boton { cursor: pointer; display: inline-block; }
.escaner [data-registro-estado]:empty { display: none; }

/* Lo enviado a SES (`admin/ses_envio.html.twig`) y su ficha. */
pre.xml {
    margin: 0; padding: 12px; overflow-x: auto; max-height: 70vh;
    background: var(--superficie-2); border-radius: 8px;
    font-size: 0.8rem; line-height: 1.45; white-space: pre;
}
dl.datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
dl.datos dt { color: var(--tinta-2); }
dl.datos dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { dl.datos { grid-template-columns: 1fr; } dl.datos dd { margin-bottom: 6px; } }

/* Los filtros de «Reg. Viajeros» (`admin/registro_viajeros.html.twig`). */
.filtros-viajeros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.filtros-viajeros .campo, .filtros-viajeros .acciones { margin: 0; }