/* ============================================================================
   traslado-web-idavuelta.css
   Transotel.Web / wwwroot / css /
   ----------------------------------------------------------------------------
   [IV-5b] Casilla de ida y vuelta, bloque de la vuelta y aviso de modo del
   calendario, todo del paso 3 del wizard publico (B2C).

   *** FICHERO NUEVO Y APARTE A PROPOSITO. ***
   Mismo criterio que traslado-web-franja.css, -servicios.css y -descuento.css:
   traslado-web.css tiene 2.155 lineas que ya funcionan en produccion y este
   bloque no necesita ninguna de ellas. Si la ida y vuelta se apagara, 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 (linea 15).
   *** NO SE USAN LAS --tw2-verde, --tw2-borde, --tw2-fondo-suave NI
   --tw2-texto-suave: NO EXISTEN. *** traslado-web-franja.css las escribe y
   funciona de milagro, tirando siempre del valor de reserva de cada var().
   Aqui se usan las que si estan declaradas, y aun asi cada una lleva su valor
   de reserva detras por si algun dia se cargara esta hoja sola.

   Colores de la aplicacion: #dfbb3e botones, #008572 fondos.
   Movil primero. El unico punto de ruptura es 640px, el mismo que el resto.
   ============================================================================ */


/* ════════════════════════════════════════════════════════════════════════════
   1 · AVISO DE MODO DEL CALENDARIO

   Sale por encima del calendario cuando esta eligiendo el dia de la VUELTA.
   *** TIENE QUE SER IMPOSIBLE DE PASAR POR ALTO: *** es el MISMO calendario en
   el que el cliente acaba de elegir la ida, asi que si no se ve el aviso,
   creera que esta cambiando la ida. De ahi el fondo oro y no un gris discreto.
   ════════════════════════════════════════════════════════════════════════════ */
.tw-cal-modo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 .75rem;
    padding: .7rem .9rem;
    border: 2px solid var(--tw-oro, #dfbb3e);
    border-radius: var(--tw-radio, 10px);
    background: var(--tw-oro-suave, #fdf6e3);
    font-size: .9rem;
    line-height: 1.35;
    color: var(--tw-texto, #1f2937);
}

.tw-cal-modo > i {
    color: var(--tw-teal, #008572);
    font-size: 1.05rem;
}

.tw-cal-modo__txt {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
}

/* Boton de texto, no de accion principal: cancelar no es lo que queremos que
   pulse, pero tiene que estar a mano. */
.tw-cal-modo__volver {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .6rem;
    border: 1px solid var(--tw-gris-claro, #e5e7eb);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: .82rem;
    color: var(--tw-gris, #6b7280);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

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

.tw-cal-modo__volver:focus-visible {
    outline: 3px solid var(--tw-oro, #dfbb3e);
    outline-offset: 2px;
}


/* ════════════════════════════════════════════════════════════════════════════
   2 · EL BLOQUE ENTERO
   ════════════════════════════════════════════════════════════════════════════ */
.tw-iv {
    margin-top: 1.25rem;
    border: 2px solid var(--tw-teal, #008572);
    border-radius: var(--tw-radio, 10px);
    background: #fff;
    overflow: hidden;
}


/* ── 2.1 La casilla ──────────────────────────────────────────────────────────
   Es la puerta de entrada de todo el modulo, asi que se pinta como una oferta
   y no como un ajuste: fondo teal suave y toda la fila clicable.
   El <label> envuelve al <input>, asi que pulsar en cualquier parte marca. */
.tw-iv__check {
    position: relative;   /* ancla del .tw-iv__check-inp, que va absoluto */
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem;
    background: var(--tw-teal-suave, #e6f2f0);
    cursor: pointer;
}

/* El input nativo no se oculta con display:none ni con visibility:hidden: eso
   lo saca del orden de tabulacion y del arbol de accesibilidad. Se deja
   presente y transparente encima de su propia cara dibujada. */
.tw-iv__check-inp {
    position: absolute;
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.tw-iv__check-cara {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: .1rem;
    border: 2px solid var(--tw-teal, #008572);
    border-radius: 5px;
    background: #fff;
    color: transparent;
    font-size: .72rem;
    transition: background .15s ease, color .15s ease;
}

.tw-iv__check-inp:checked ~ .tw-iv__check-cara {
    background: var(--tw-teal, #008572);
    color: #fff;
}

/* Foco SIEMPRE visible: el input real es transparente, asi que el anillo lo
   tiene que llevar la cara dibujada o no se ve nada al tabular. */
.tw-iv__check-inp:focus-visible ~ .tw-iv__check-cara {
    outline: 3px solid var(--tw-oro, #dfbb3e);
    outline-offset: 2px;
}

.tw-iv__check-txt {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.tw-iv__check-tit {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--tw-teal, #008572);
}

.tw-iv__check-tit i {
    color: var(--tw-oro, #dfbb3e);
}

.tw-iv__check-sub {
    font-size: .84rem;
    line-height: 1.4;
    color: var(--tw-gris, #6b7280);
}

/* Con porcentaje 0 el JS deja el gancho vacio. Sin esto quedaria un hueco. */
.tw-iv__check-sub:empty {
    display: none;
}


/* ── 2.2 El cuerpo ─────────────────────────────────────────────────────────── */
.tw-iv__cuerpo {
    padding: 1rem;
    border-top: 1px solid var(--tw-gris-claro, #e5e7eb);
}

.tw-iv__ruta {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0 0 1rem;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--tw-gris, #6b7280);
}

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


/* ── 2.3 La fecha ─────────────────────────────────────────────────────────
   En movil cae a dos filas y el boton ocupa el ancho: en una pantalla de 360
   no caben el texto y el boton en la misma linea sin que uno de los dos quede
   ilegible. */
.tw-iv__fecha {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
    padding: .85rem .9rem;
    border: 1px solid var(--tw-gris-claro, #e5e7eb);
    border-radius: var(--tw-radio, 10px);
    background: #fafbfc;
}

.tw-iv__fecha-dato {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.tw-iv__fecha-lbl {
    font-size: .8rem;
    color: var(--tw-gris, #6b7280);
}

.tw-iv__fecha-val {
    font-size: .98rem;
    color: var(--tw-texto, #1f2937);
    overflow-wrap: anywhere;
}

.tw-iv__fecha-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
}

@media (min-width: 640px) {
    .tw-iv__fecha {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .tw-iv__fecha-btn {
        width: auto;
        flex: 0 0 auto;
    }
}


/* ── 2.4 La franja de la vuelta ────────────────────────────────────────────
   Hereda TODO de traslado-web-franja.css: las clases .tw-franja__* son las
   mismas y solo cambian los ids. Aqui solo se matiza la caja de fuera para que
   no parezca un bloque suelto dentro de otro bloque. */
.tw-iv__franja {
    margin-top: 1rem;
    background: #fff;
}


/* ── 2.5 El desglose ───────────────────────────────────────────────────────
   Reutiliza .tw-elegido y .tw-elegido__linea de traslado-web.css: es el MISMO
   desglose que el de la ida, y que se vean iguales no es estetica, es que el
   cliente entienda que esta leyendo lo mismo dos veces. */
.tw-iv__precio {
    margin-top: 1rem;
}

/* La rebaja en verde y con su signo delante: el JS ya manda el importe en
   negativo, aqui solo se le da color. */
.tw-iv__linea--dto strong {
    color: var(--tw-verde, #15803d);
}

.tw-iv__linea--total {
    margin-top: .35rem;
    padding-top: .55rem;
    border-top: 1px solid var(--tw-gris-claro, #e5e7eb);
    font-weight: 700;
}


/* ── 2.6 El total de las dos patas ─────────────────────────────────────────
   Es el importe que se va a cobrar en Redsys, de una sola vez. Se separa del
   desglose de la vuelta a proposito: son dos numeros distintos y juntos se
   confunden. */
.tw-iv__pareja {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1rem;
    padding: .85rem .9rem;
    border-radius: var(--tw-radio, 10px);
    background: var(--tw-teal, #008572);
    color: #fff;
}

.tw-iv__pareja span {
    font-size: .9rem;
}

.tw-iv__pareja strong {
    font-size: 1.15rem;
    white-space: nowrap;
}


/* ── 2.6-bis La nota de la base imponible (D21) ────────────────────────────
   Las tres primeras lineas del desglose son base y el total lleva impuestos.
   Sin esta nota, el cliente ve dos "Suplemento entrega en sabado" con importes
   distintos -9,99 en la ida, que es PVP, y 8,26 en la vuelta, que es base- y
   no tiene forma de saber por que. */
.tw-iv__nota {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin-top: .5rem;
    font-size: .78rem;
    line-height: 1.4;
    color: var(--tw-gris, #6b7280);
}

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


/* ── 2.8 La recogida de la vuelta en el resumen del paso 4 ─────────────────
   Hereda .tw-resumen__fecha de traslado-web.css y solo se le pone la etiqueta
   delante. En movil cae a dos lineas sola. */
.tw-r4-iv {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem;
    margin-top: .35rem;
    padding-top: .35rem;
    border-top: 1px dashed var(--tw-gris-claro, #e5e7eb);
}

.tw-r4-iv__lbl {
    /* [IV-6a] .tw-resumen__fecha lleva text-transform: capitalize y la fecha
       lo hereda desde siempre. En la ETIQUETA canta: salia "Recogida De La
       Vuelta". Se corta aqui y solo aqui; la fecha se queda como estaba en la
       ida, que ya iba asi antes de este modulo. */
    text-transform: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    font-weight: 400;
    color: var(--tw-teal, #008572);
}

.tw-r4-iv__lbl::before {
    content: "\21BA";           /* flecha de vuelta, sin depender del icono */
    font-size: .95rem;
}

/* hidden gana: .tw-r4-iv es display:flex, igual que el bloque del descuento.
   Acotada al elemento, para no tocar el resto del wizard. */
.tw-r4-iv[hidden] { display: none !important; }


/* ── 2.7 Mensajes ──────────────────────────────────────────────────────────
   .tw-resultado y sus modificadores ya viven en traslado-web.css.

   *** ESTA CAJA ES HERMANA DE #tw-iv-cuerpo, NO HIJA SUYA. *** Los avisos que
   apagan la casilla se escriben justo despues de ocultar el cuerpo, asi que
   dentro no se verian nunca. Por eso lleva margen por los cuatro lados: no
   hereda el padding del cuerpo. */
#tw-iv-msg {
    margin: 1rem;
}


/* ════════════════════════════════════════════════════════════════════════════
   2.9 · EL CALENDARIO CON LAS DOS FECHAS PUESTAS

   .tw-dia y .tw-dia--elegido ya viven en traslado-web.css y NO se tocan: aqui
   solo se anaden dos modificadores nuevos. Si se quitara el <link> de esta
   hoja, el calendario vuelve a pintar los dos extremos igual que un dia
   elegido cualquiera y no se rompe nada.
   ════════════════════════════════════════════════════════════════════════════ */

/* Los dias entre la ida y la vuelta. Rayado diagonal muy suave: tiene que
   leerse como "esto es el intervalo", no como "esto se puede pulsar". No se
   toca el cursor ni el disabled: un domingo de por medio sigue estando
   apagado. */
.tw-dia--rango {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(0, 133, 114, .10) 0,
        rgba(0, 133, 114, .10) 3px,
        transparent            3px,
        transparent            7px);
}

/* El extremo de la vuelta. Barra dorada abajo para distinguirlo del de la
   ida sin cambiarle el color de fondo: los dos tienen que seguir leyendose
   como "elegido". */
.tw-dia--vuelta {
    position: relative;
}

.tw-dia--vuelta::after {
    content: "";
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: 3px;
    height: 3px;
    border-radius: 2px;
    background: var(--tw-oro, #dfbb3e);
}


/* ════════════════════════════════════════════════════════════════════════════
   3 · ACCESIBILIDAD
   ════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .tw-iv__check-cara,
    .tw-cal-modo__volver {
        transition: none;
    }
}

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

    .tw-iv__check-cara {
        border-width: 3px;
    }
}