/* ============================================================================
   traslado-web-sabado.css
   Transotel.Web / wwwroot / css /
   ----------------------------------------------------------------------------
   [SAB-1] Bloque "sabado o lunes" del paso 3 del wizard publico (B2C), en la
   ida (#tw-sab-ida) y en la vuelta (#tw-sab-vuelta). 22/09/2026.

   Sale SOLO cuando la entrega cae en sabado con recargo. El cliente elige
   entre el siguiente dia laborable (sin suplemento, marcado de salida) y el
   sabado (con suplemento).

   *** FICHERO NUEVO Y APARTE A PROPOSITO. *** Mismo criterio que
   traslado-web-franja.css, -servicios.css, -descuento.css e -idavuelta.css:
   traslado-web.css ya funciona en produccion y este bloque no necesita ni una
   de sus reglas. Si se quitara la funcion, se quita el <link> del
   @section HeadExtra y no queda ni una regla huerfana.

   ── DE DONDE SALEN LOS COLORES ──────────────────────────────────────────────
   De las variables --tw- que declara el :root de traslado-web.css, las MISMAS
   que usa traslado-web-idavuelta.css. Cada una lleva su valor de reserva
   detras por si esta hoja se cargara sola.
   Colores de la aplicacion: #dfbb3e botones, #008572 fondos.

   Movil primero. El unico punto de ruptura es 640px, el mismo que el resto.
   ============================================================================ */


/* ════════════════════════════════════════════════════════════════════════════
   1 · LA CAJA

   Fondo oro suave, como el aviso de modo del calendario: es una pregunta que
   cambia el precio y no puede pasar desapercibida.
   ════════════════════════════════════════════════════════════════════════════ */
.tw-sab {
    margin-top: 1rem;
    padding: .9rem;
    border: 2px solid var(--tw-oro, #dfbb3e);
    border-radius: var(--tw-radio, 10px);
    background: var(--tw-oro-suave, #fdf6e3);
}

/* hidden gana siempre. Acotado a este bloque para no tocar el resto. */
.tw-sab[hidden] {
    display: none !important;
}

/* En la vuelta va dentro del cuerpo de la ida y vuelta, entre la franja y el
   desglose: solo necesita separarse de lo de arriba. */
.tw-iv__sab {
    margin-top: 1rem;
}


/* ── 1.1 La pregunta ─────────────────────────────────────────────────────── */
.tw-sab__pregunta {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0 0 .75rem;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tw-texto, #1f2937);
}

.tw-sab__pregunta i {
    margin-top: .15rem;
    color: var(--tw-teal, #008572);
}


/* ════════════════════════════════════════════════════════════════════════════
   2 · LAS DOS OPCIONES

   Una debajo de otra en movil y lado a lado desde 640px. Toda la tarjeta es
   el boton: en una pantalla pequena el dedo tiene que acertar sin buscar.
   ════════════════════════════════════════════════════════════════════════════ */
.tw-sab__opciones {
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem;
}

@media (min-width: 640px) {
    .tw-sab__opciones {
        grid-template-columns: 1fr 1fr;
    }
}

.tw-sab__op {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    width: 100%;
    min-height: 3.5rem;
    margin: 0;
    padding: .75rem 2.5rem .75rem 2.6rem;
    border: 2px solid var(--tw-gris-claro, #e5e7eb);
    border-radius: var(--tw-radio, 10px);
    background: #fff;
    font: inherit;
    text-align: left;
    color: var(--tw-texto, #1f2937);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.tw-sab__op > i {
    position: absolute;
    top: .85rem;
    left: .9rem;
    font-size: 1.05rem;
    color: var(--tw-gris, #6b7280);
}

.tw-sab__op-tit {
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
}

.tw-sab__op-sub {
    font-size: .82rem;
    line-height: 1.35;
    color: var(--tw-gris, #6b7280);
}

/* El importe del sabado lo pone el JS. Hasta que llega, no deja hueco. */
.tw-sab__op-sub:empty {
    display: none;
}

.tw-sab__op:hover {
    border-color: var(--tw-teal, #008572);
}

/* Foco SIEMPRE visible al tabular. */
.tw-sab__op:focus-visible {
    outline: 3px solid var(--tw-oro, #dfbb3e);
    outline-offset: 2px;
}


/* ── 2.1 La opcion elegida ─────────────────────────────────────────────────
   Borde y fondo teal, y una marca redonda arriba a la derecha. La marca va
   con un caracter y no con un icono: si la hoja de iconos no cargara, la
   eleccion se seguiria viendo. */
.tw-sab__op.is-activa {
    border-color: var(--tw-teal, #008572);
    background: var(--tw-teal-suave, #e6f2f0);
}

.tw-sab__op.is-activa > i,
.tw-sab__op.is-activa .tw-sab__op-tit {
    color: var(--tw-teal, #008572);
}

.tw-sab__op.is-activa::after {
    content: "\2713";
    position: absolute;
    top: .6rem;
    right: .7rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: var(--tw-teal, #008572);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.3rem;
    text-align: center;
}


/* ════════════════════════════════════════════════════════════════════════════
   3 · ACCESIBILIDAD
   ════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .tw-sab__op {
        transition: none;
    }
}

@media (prefers-contrast: more) {
    .tw-sab,
    .tw-sab__op {
        border-width: 3px;
    }
}