/**
 * Estilos del bloque de reserva en el frontend.
 *
 * Continuidad visual con la landing autocaravanastrt.com:
 *   negro #0A0A0A · hueso #FAFAFA · rojo de acento #C81E1E
 *   titulares en Anton (mayúsculas, condensada) · cuerpo en Space Grotesk
 *   esquinas de 12px · espaciados generosos
 *
 * Las variables permiten al tema sobreescribir la paleta sin tocar este archivo.
 *
 * Las tipografías las sirve `fuentes.css` (dependencia declarada de esta hoja),
 * autoalojadas en assets/fonts/. Antes se daban por cargadas por el tema, y como
 * Astra no las sirve, el bloque caía a fuentes de sistema y no se parecía a la
 * landing.
 */

.trt-reservas {
    --trt-ink: #0a0a0a;
    --trt-ink-800: #1a1a1a;
    --trt-ink-600: #4b4b4b;
    --trt-ink-200: #e5e5e5;
    --trt-bone: #fafafa;
    --trt-brand: #c81e1e;
    --trt-brand-dark: #a81717;
    --trt-radio: 12px;

    /*
     * Fichas de la SUPERFICIE del panel.
     *
     * El bloque es oscuro y dentro lleva un panel claro. Los colores de ese panel
     * salen de aquí, en lugar de estar escritos a mano en cada regla, para que la
     * ficha del producto —que va en modo oscuro— pueda invertir el panel cambiando
     * seis valores en vez de reescribir media hoja.
     *
     * Los valores por defecto son exactamente los de antes: el bloque del shortcode
     * se ve igual que siempre.
     */
    --trt-sup: #fff;             /* fondo del panel, flechas y muestras */
    --trt-sup-texto: var(--trt-ink);
    --trt-sup-borde: var(--trt-ink-200);
    --trt-sup-apagado: #b9b9b9;  /* días ya pasados */
    --trt-sup-ocupado: #f6f6f6;  /* fondo de un día ocupado */
    --trt-sup-linea: #c9c9c9;    /* la tachadura diagonal */

    box-sizing: border-box;
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem);
    background: var(--trt-ink);
    color: var(--trt-bone);
    font-family: 'Space Grotesk', 'Space Grotesk Fallback', system-ui, -apple-system, sans-serif;
}

.trt-reservas *,
.trt-reservas *::before,
.trt-reservas *::after {
    box-sizing: inherit;
}

/* --- Cabecera --- */

.trt-reservas__head {
    max-width: 46rem;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.trt-eyebrow {
    display: inline-block;
    margin-bottom: .9rem;
    color: var(--trt-brand);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em;
}

.trt-titulo {
    margin: 0 0 1rem;
    font-family: 'Anton', 'Anton Fallback', 'Arial Narrow', Impact, sans-serif;
    font-weight: 400;
    font-size: clamp(1.9rem, 5vw, 3.1rem);
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: #fff;
}

.trt-lead {
    margin: 0;
    color: rgba(250, 250, 250, .72);
    font-size: 1.02rem;
    line-height: 1.65;
}

/* --- Rejilla --- */

.trt-reservas__grid {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
    max-width: 1080px;
    margin: 0 auto;
    grid-template-columns: 1fr;
}

@media (min-width: 860px) {
    .trt-reservas__grid {
        grid-template-columns: 1fr 1.15fr;
        align-items: start;
    }

    .trt-reservas__grid--simple {
        grid-template-columns: minmax(0, 620px);
        justify-content: center;
    }
}

/* --- Ficha del vehículo --- */

.trt-ficha {
    padding: 1.5rem;
    border: 1px solid rgba(250, 250, 250, .12);
    border-radius: var(--trt-radio);
    background: var(--trt-ink-800);
}

.trt-ficha__img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 1.25rem;
    border-radius: calc(var(--trt-radio) - 4px);
}

.trt-ficha__nombre {
    margin: 0 0 1rem;
    font-family: 'Anton', 'Anton Fallback', 'Arial Narrow', Impact, sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.15;
    text-transform: uppercase;
    color: #fff;
}

.trt-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.trt-badge {
    padding: .38rem .8rem;
    border: 1px solid rgba(250, 250, 250, .18);
    border-radius: 999px;
    font-size: .82rem;
    color: rgba(250, 250, 250, .82);
    white-space: nowrap;
}

.trt-badge--destacado {
    border-color: var(--trt-brand);
    background: var(--trt-brand);
    color: #fff;
    font-weight: 600;
}

/* wc_price() envuelve el importe en <span class="woocommerce-Price-amount"> */
.trt-badge .woocommerce-Price-amount {
    color: inherit;
    font-weight: inherit;
}

.trt-ficha__nota {
    margin: 0 0 1.1rem;
    color: rgba(250, 250, 250, .6);
    font-size: .86rem;
    line-height: 1.55;
}

.trt-ficha__enlace {
    color: var(--trt-bone);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--trt-brand);
    text-underline-offset: 3px;
}

.trt-ficha__enlace:hover {
    color: #fff;
    text-decoration-color: #fff;
}

/* --- Panel de reserva --- */

.trt-panel {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--trt-radio);
    background: var(--trt-sup);
    color: var(--trt-sup-texto);
}

.trt-preparacion__titulo {
    margin: 0 0 .85rem;
    font-family: 'Anton', 'Anton Fallback', 'Arial Narrow', Impact, sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.15;
    text-transform: uppercase;
}

.trt-preparacion p {
    margin: 0 0 1.5rem;
    color: var(--trt-ink-600);
    line-height: 1.65;
}

.trt-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.trt-btn {
    display: inline-block;
    padding: .85rem 1.5rem;
    border-radius: var(--trt-radio);
    font-size: .95rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.trt-btn:hover {
    transform: translateY(-2px);
}

.trt-btn--primario {
    background: var(--trt-brand);
    color: #fff;
}

.trt-btn--primario:hover {
    background: var(--trt-brand-dark);
    color: #fff;
}

.trt-btn--secundario {
    border: 1px solid var(--trt-ink-200);
    background: transparent;
    color: var(--trt-ink);
}

.trt-btn--secundario:hover {
    border-color: var(--trt-ink);
    color: var(--trt-ink);
}

.trt-requisitos {
    margin: 0;
    padding: 1.1rem 0 0;
    border-top: 1px solid var(--trt-ink-200);
    list-style: none;
    color: var(--trt-ink-600);
    font-size: .88rem;
}

.trt-requisitos li {
    position: relative;
    padding-left: 1.1rem;
    margin-bottom: .45rem;
}

.trt-requisitos li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--trt-brand);
}

/* --- Calendario --- */

.trt-cal__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.trt-cal__pista {
    flex: 1;
    margin: 0;
    text-align: center;
    font-size: .9rem;
    font-weight: 600;
    color: var(--trt-ink-600);
}

.trt-cal__flecha {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--trt-sup-borde);
    border-radius: 8px;
    background: var(--trt-sup);
    color: var(--trt-sup-texto);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.trt-cal__flecha:hover {
    border-color: var(--trt-ink);
}

/*
 * El calendario se mide contra SU CONTENEDOR, no contra el viewport.
 *
 * Con una media query de 620px los dos meses se desbordaban en la ficha del
 * producto: ahí el bloque vive en una columna de unos 590px aunque la pantalla
 * sea de 1280, así que la consulta daba «cabe» y el segundo mes salía cortado.
 * Con el shortcode a ancho completo no se notaba.
 */
.trt-calendario {
    container-type: inline-size;
}

.trt-cal__meses {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

/* Los hijos de un grid no se encogen por debajo de su contenido si no se les
   dice: sin esto, una rejilla de 7 días fuerza el desbordamiento. */
.trt-cal__meses > * {
    min-width: 0;
}

/*
 * Aquí había dos reglas —una `@container` y su respaldo `@media`— que ponían los
 * meses en dos columnas a partir de 600px de contenedor. Se han retirado porque
 * desde la v0.9.5 el calendario pinta UN solo mes: eran código muerto.
 *
 * `container-type: inline-size` se conserva arriba: no cuesta nada y deja la puerta
 * abierta a volver a dos meses si algún día el bloque vive a ancho completo.
 */

.trt-mes__nombre {
    margin-bottom: .6rem;
    font-weight: 600;
    font-size: .95rem;
    text-align: center;
    text-transform: capitalize;
}

/*
 * OJO con el `minmax(0, 1fr)`: no es cosmético, arregla un fallo real.
 *
 * `1fr` es azúcar de `minmax(auto, 1fr)`, y ese `auto` impide que la columna se
 * encoja por debajo del contenido mínimo de lo que lleva dentro. Los días son
 * `<button>`, que arrastran el relleno propio del navegador, así que las siete
 * columnas sumaban más que el contenedor y **la séptima se salía y quedaba
 * recortada**: en agosto de 2026 desaparecían de la vista el 2, el 9, el 16, el 23
 * y el 30.
 *
 * Y como la cabecera son `<span>` sin ese relleno, esa sí repartía siete columnas
 * iguales dentro del ancho disponible — de modo que las etiquetas L M X J V S D
 * quedaban desalineadas respecto a los días. Un mismo fallo con dos síntomas.
 *
 * El `min-width: 0` de `.trt-cal__meses > *` no llega aquí: solo alcanza a los
 * hijos DIRECTOS, y estas rejillas son nietas.
 */
.trt-semana,
.trt-dias {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.trt-semana__dia {
    padding: .3rem 0;
    text-align: center;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--trt-ink-600);
}

.trt-dia {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* `padding: 0` y `min-width: 0` a propósito: el relleno propio que los
       navegadores dan a los botones es justo lo que ensanchaba las columnas. */
    padding: 0;
    min-width: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font: inherit;
    font-size: .85rem;
    line-height: 1;
    color: var(--trt-ink);
    cursor: pointer;
}

.trt-dia--vacio {
    cursor: default;
}

.trt-dia--libre:hover {
    background: var(--trt-ink-200);
}

.trt-dia--pasado,
.trt-dia--ocupado {
    color: var(--trt-sup-apagado);
    cursor: not-allowed;
}

/* Los días ocupados llevan una tachadura, no solo un color: el color por sí
   solo no es accesible para quien no lo distingue. */
.trt-dia--ocupado {
    position: relative;
    background: var(--trt-sup-ocupado);
}

.trt-dia--ocupado::after {
    content: '';
    position: absolute;
    left: 18%;
    right: 18%;
    top: 50%;
    height: 1px;
    background: var(--trt-sup-linea);
    transform: rotate(-20deg);
}

.trt-dia--intermedio {
    background: rgba(200, 30, 30, .1);
    border-radius: 0;
}

.trt-dia--entrada,
.trt-dia--salida {
    background: var(--trt-brand);
    color: #fff;
    font-weight: 700;
}

.trt-dia--entrada {
    border-radius: 7px 0 0 7px;
}

.trt-dia--salida {
    border-radius: 0 7px 7px 0;
}

.trt-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .8rem;
    color: var(--trt-ink-600);
}

.trt-leyenda li {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.trt-muestra {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.trt-muestra--libre {
    border: 1px solid var(--trt-sup-borde);
    background: var(--trt-sup);
}

/*
 * La muestra de «ocupado» lleva la MISMA tachadura diagonal que los días
 * ocupados del calendario. Antes solo se diferenciaba por un fondo #f6f6f6
 * frente a blanco: a 12px las dos muestras eran indistinguibles y la leyenda no
 * explicaba nada. Con la diagonal, la leyenda describe de verdad lo que se ve
 * en la rejilla, y no depende del color — que es la razón por la que los días
 * se tachan en lugar de solo teñirse.
 */
.trt-muestra--ocupado {
    border: 1px solid var(--trt-sup-linea);
    background:
        linear-gradient(
            to top right,
            transparent calc(50% - 1px),
            #9a9a9a calc(50% - 1px),
            #9a9a9a calc(50% + 1px),
            transparent calc(50% + 1px)
        ),
        #f6f6f6;
}

/* --- Resumen del presupuesto --- */

.trt-resumen__caja {
    margin-top: 1.5rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--trt-ink-200);
}

.trt-resumen__fechas {
    display: grid;
    gap: .75rem;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 1rem;
}

.trt-resumen__fechas span {
    display: block;
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--trt-brand);
}

.trt-resumen__fechas strong {
    display: block;
    font-size: 1rem;
}

.trt-resumen__fechas em {
    font-size: .8rem;
    font-style: normal;
    color: var(--trt-ink-600);
}

.trt-resumen__noches {
    margin: 0 0 1rem;
    font-size: .88rem;
    color: var(--trt-ink-600);
}

.trt-resumen__importes {
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.trt-resumen__importes li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--trt-ink-200);
    font-size: .92rem;
}

.trt-resumen__importes li:last-child {
    border-bottom: 0;
}

/* Base e IVA: desglose secundario, más discreto que el total */
.trt-resumen__desglose {
    color: var(--trt-ink-600);
    font-size: .84rem;
}

.trt-resumen__senal strong {
    color: var(--trt-brand);
    font-size: 1.1rem;
}

/* --- Reservar de verdad: formulario que añade las fechas al carrito --- */

.trt-reservar {
    margin: 1.25rem 0 0;
}

.trt-resumen__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    width: 100%;
    border: 0;
    padding: 1rem 1.5rem;
    font-family: inherit;
    font-size: 1rem;
    letter-spacing: .02em;
    cursor: pointer;
}

/* El importe va dentro del botón: quien lo pulsa sabe exactamente qué se le va
   a cobrar ahora, que con cobro de señal no es el total del alquiler. */
.trt-btn__importe {
    padding: .2rem .6rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .22);
    font-size: .95rem;
    font-weight: 700;
    white-space: nowrap;
}

.trt-resumen__aviso {
    margin: .9rem 0 0;
    font-size: .8rem;
    line-height: 1.55;
    color: var(--trt-ink-600);
}

/* WhatsApp deja de ser la vía de reserva y queda como canal de dudas. */
.trt-resumen__dudas {
    margin: .75rem 0 0;
    font-size: .82rem;
    line-height: 1.55;
    color: var(--trt-ink-600);
}

.trt-resumen__dudas a {
    color: var(--trt-brand);
    font-weight: 600;
}

/* Aclaración bajo el nombre de la línea en el carrito y el checkout. */
.trt-linea-senal small {
    color: #6b7280;
    font-size: .8em;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.trt-limpiar {
    display: inline-block;
    margin-top: .9rem;
    padding: .55rem 1rem;
    font-size: .85rem;
    cursor: pointer;
}

.trt-error {
    margin: 1rem 0 0;
    padding: .8rem 1rem;
    border-left: 3px solid var(--trt-brand);
    border-radius: 4px;
    background: #fff4f4;
    font-size: .9rem;
    line-height: 1.55;
}

/* --- Estados de carga y avisos --- */

.trt-cargando {
    margin: 0;
    color: var(--trt-ink-600);
    font-size: .92rem;
}

.trt-aviso-config {
    padding: 1rem 1.2rem;
    border-left: 3px solid #c81e1e;
    border-radius: 4px;
    background: #fff4f4;
    color: #1a1a1a;
    font-size: .9rem;
}

/* Aviso que se pinta en la ficha del producto mientras el motor no está listo */
.trt-aviso-fase {
    padding: 1rem 1.2rem;
    margin: 1rem 0;
    border-left: 3px solid #c81e1e;
    border-radius: 4px;
    background: #fafafa;
    font-size: .95rem;
}

@media (prefers-reduced-motion: reduce) {
    .trt-btn,
    .trt-btn:hover {
        transition: none;
        transform: none;
    }
}

/*
|--------------------------------------------------------------------------
| Selector de vehículos (Fase 5)
|--------------------------------------------------------------------------
| Se pinta en la portada del subdominio cuando hay más de un vehículo. Repite
| las variables en lugar de heredarlas de .trt-reservas porque es un bloque
| independiente: puede aparecer solo, sin el calendario en la misma página.
*/

.trt-vehiculos {
    --trt-ink: #0a0a0a;
    --trt-ink-600: #4b4b4b;
    --trt-ink-200: #e5e5e5;
    --trt-bone: #fafafa;
    --trt-brand: #c81e1e;
    --trt-radio: 12px;

    box-sizing: border-box;
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem);
    background: var(--trt-bone);
    color: var(--trt-ink);
    font-family: 'Space Grotesk', 'Space Grotesk Fallback', system-ui, -apple-system, sans-serif;
}

.trt-vehiculos *,
.trt-vehiculos *::before,
.trt-vehiculos *::after {
    box-sizing: inherit;
}

.trt-vehiculos__titulo {
    margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
    max-width: 46rem;
    text-align: center;
    font-family: 'Anton', 'Anton Fallback', system-ui, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    line-height: 1.1;
}

.trt-vehiculos__titulo::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3px;
    margin: .9rem auto 0;
    background: var(--trt-brand);
}

.trt-vehiculos__lista {
    display: grid;
    /* auto-fit + minmax: con dos vehículos son dos columnas y con uno ocuparía
       todo el ancho, sin media queries. */
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
    max-width: 62rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.trt-vehiculos__item {
    margin: 0;
}

.trt-vehiculos__enlace {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--trt-ink-200);
    border-radius: var(--trt-radio);
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}

.trt-vehiculos__enlace:hover,
.trt-vehiculos__enlace:focus-visible {
    border-color: var(--trt-brand);
    transform: translateY(-2px);
}

/* El foco se marca aparte del hover: quien navega con teclado necesita verlo
   sin depender del color del borde. */
.trt-vehiculos__enlace:focus-visible {
    outline: 3px solid var(--trt-brand);
    outline-offset: 2px;
}

.trt-vehiculos__foto {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--trt-ink-200);
}

.trt-vehiculos__imagen {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.trt-vehiculos__cuerpo {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: 1.15rem 1.25rem 1.35rem;
}

.trt-vehiculos__nombre {
    font-family: 'Anton', 'Anton Fallback', system-ui, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .01em;
    font-size: 1.1rem;
    line-height: 1.2;
}

.trt-vehiculos__precio {
    font-size: .95rem;
    color: var(--trt-ink-600);
}

.trt-vehiculos__cta {
    margin-top: .35rem;
    font-size: .9rem;
    font-weight: 700;
    color: var(--trt-brand);
}

.trt-vehiculos__enlace:hover .trt-vehiculos__cta::after,
.trt-vehiculos__enlace:focus-visible .trt-vehiculos__cta::after {
    content: ' \2192';
}

@media (prefers-reduced-motion: reduce) {
    .trt-vehiculos__enlace {
        transition: none;
    }

    .trt-vehiculos__enlace:hover,
    .trt-vehiculos__enlace:focus-visible {
        transform: none;
    }
}

/*
|--------------------------------------------------------------------------
| Extras del alquiler (Fase 5)
|--------------------------------------------------------------------------
| Van dentro de .trt-resumen__caja, así que heredan sus variables. Con máximo
| 1 unidad el control es una casilla y con más, un desplegable de cantidad.
*/

.trt-extras {
    margin: 0 0 1.25rem 0;
    padding: 1.1rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.trt-extras__titulo {
    margin: 0 0 .2rem 0;
    font-family: 'Anton', 'Anton Fallback', system-ui, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: .95rem;
}

.trt-extras__ayuda {
    margin: 0 0 .85rem 0;
    font-size: .8rem;
    opacity: .72;
}

.trt-extras__lista {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .5rem;
}

.trt-extras__item {
    margin: 0;
}

/* La etiqueta es la superficie de clic: así toda la fila responde, no solo el
   cuadradito de la casilla. */
.trt-extras__etiqueta {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: .2rem .75rem;
    padding: .6rem .75rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.trt-extras__etiqueta:hover {
    border-color: rgba(255, 255, 255, .34);
    background: rgba(255, 255, 255, .04);
}

.trt-extras__etiqueta--casilla {
    grid-template-columns: auto 1fr auto;
}

.trt-extras__etiqueta--casilla input[type="checkbox"] {
    grid-row: 1 / 2;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--trt-brand);
    cursor: pointer;
}

/* Foco visible en el contenedor cuando la casilla lo recibe: el recuadro nativo
   sobre un control de 17px es difícil de ver sobre fondo oscuro. */
.trt-extras__etiqueta:focus-within {
    outline: 2px solid var(--trt-brand);
    outline-offset: 2px;
}

.trt-extras__nombre {
    font-weight: 700;
    font-size: .92rem;
}

.trt-extras__precio {
    justify-self: end;
    font-size: .85rem;
    white-space: nowrap;
    opacity: .82;
}

.trt-extras__desc {
    grid-column: 1 / -1;
    font-size: .78rem;
    opacity: .66;
}

.trt-extras__etiqueta--casilla .trt-extras__desc {
    grid-column: 2 / -1;
}

/* El item con desplegable coloca la etiqueta y el select en dos columnas. */
.trt-extras__item:has(.trt-extras__cantidad) {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .6rem;
}

.trt-extras__cantidad {
    padding: .45rem .5rem;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 8px;
    background: var(--trt-ink-800, #1a1a1a);
    color: inherit;
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
}

.trt-extras__cantidad:focus-visible {
    outline: 2px solid var(--trt-brand);
    outline-offset: 2px;
}

/* Mientras el servidor recalcula, el resumen sigue en pantalla pero atenuado:
   así se ve que la cifra va a cambiar sin que desaparezca el selector. */
[data-trt-resumen][aria-busy="true"] {
    opacity: .6;
    transition: opacity .12s ease;
}

@media (prefers-reduced-motion: reduce) {
    .trt-extras__etiqueta,
    [data-trt-resumen][aria-busy="true"] {
        transition: none;
    }
}