/* ════════════════════════════════════════════════════════════
   traslado-web-servicios.css — Transotel
   Fichero real: wwwroot/css/traslado-web-servicios.css

   LOTE EXPRESS E4c · las tres opciones de entrega del paso 2 del wizard
   publico (B2C): S-12, S-13:30 y S-10.

   FICHERO NUEVO Y APARTE. No se toca traslado-web.css, que son 2.048 lineas
   ya en produccion, ni traslado-web-franja.css. Aqui no se redefine ninguna
   clase existente: TODO lleva el prefijo tw-srv-, que no aparece en ninguna
   otra hoja del proyecto.

   Se apoya en las variables --tw2- que ya declara traslado-web.css. Si esta
   hoja se cargara sola, los colores caerian en los valores de reserva que
   lleva cada var() y seguiria siendo legible.

   MOVIL PRIMERO, con el MISMO breakpoint unico de 640px que usa el resto del
   wizard. Por debajo, una tarjeta por linea. Por encima, tantas como quepan
   sin bajar de 190px, asi que con dos o con tres se reparten solas.
   ════════════════════════════════════════════════════════════ */

/* ── Titulo del grupo ─────────────────────────────────────── */
.tw-srv-titulo {
    margin: .25rem 0 .7rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--tw2-texto, #111827);
}

/* ── La rejilla ───────────────────────────────────────────── */
.tw-servicios {
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem;
    margin: 0 0 1rem;
}

/* ── La tarjeta ───────────────────────────────────────────────
   Es un <button>, no un <div>: llega el foco solo, funciona con el teclado y
   los lectores de pantalla lo anuncian como lo que es. Por eso hay que anular
   los estilos que trae el navegador. */
.tw-srv {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;

    width: 100%;
    margin: 0;
    padding: .85rem .9rem;

    font: inherit;
    text-align: left;
    color: var(--tw2-texto, #111827);

    background: #fff;
    border: 2px solid #e3e8f0;
    border-radius: var(--tw2-radio, 12px);
    cursor: pointer;

    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.tw-srv:hover {
    border-color: var(--tw2-navy-light, #1e4070);
}

/* El foco NO se quita: es lo unico que ve quien navega con el tabulador. */
.tw-srv:focus-visible {
    outline: 3px solid var(--tw2-oro, #dfbb3e);
    outline-offset: 2px;
}

/* ── La elegida ───────────────────────────────────────────────
   *** NO SE DISTINGUE SOLO POR EL COLOR. *** Ademas del borde y la sombra
   lleva la marca de verificado y el texto de .tw-srv__estado, que cambia. Un
   cliente daltonico tiene que poder saber cual ha elegido. */
.tw-srv--on {
    border-color: var(--tw2-navy, #0B1F3A);
    background: var(--tw2-humo, #f5f7fb);
    box-shadow: var(--tw2-sombra, 0 2px 20px rgba(11, 31, 58, .08));
}

.tw-srv--on::after {
    content: "\f058";               /* fa-circle-check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;

    position: absolute;
    top: .6rem;
    right: .7rem;

    font-size: 1.05rem;
    color: var(--tw2-navy, #0B1F3A);
}

/* ── Cabecera: icono y nombre ─────────────────────────────── */
.tw-srv__cab {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding-right: 1.6rem;          /* hueco para la marca de verificado */
}

.tw-srv__cab i {
    font-size: .95rem;
    color: var(--tw2-navy, #0B1F3A);
}

.tw-srv--on .tw-srv__cab i {
    color: var(--tw2-oro, #dfbb3e);
}

.tw-srv__nombre {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 700;
}

/* ── Etiqueta de la mas barata ────────────────────────────── */
.tw-srv__eti {
    display: inline-block;
    padding: .1rem .5rem;

    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;

    color: #4a3a05;
    background: var(--tw2-oro-claro, #f0d472);
    border-radius: 999px;
}

/* ── Que significa la opcion ──────────────────────────────── */
.tw-srv__des {
    font-size: .84rem;
    line-height: 1.4;
    color: var(--tw2-texto-mid, #4b5563);
}

/* ── La hora limite de los express ────────────────────────── */
.tw-srv__hora {
    display: inline-flex;
    align-items: center;
    gap: .35rem;

    font-size: .84rem;
    font-weight: 600;
    color: var(--tw2-navy-mid, #152d55);
}

.tw-srv__hora i {
    font-size: .8rem;
}

/* ── El precio ────────────────────────────────────────────── */
.tw-srv__precio {
    margin-top: .15rem;
    font-size: 1.22rem;
    line-height: 1.1;
    font-weight: 800;
    color: var(--tw2-navy, #0B1F3A);
}

/* ── El estado, para quien no ve el color ─────────────────── */
.tw-srv__estado {
    font-size: .76rem;
    font-weight: 600;
    color: var(--tw2-texto-mid, #4b5563);
}

.tw-srv--on .tw-srv__estado {
    color: var(--tw2-navy, #0B1F3A);
}

/* ════════════════════════════════════════════════════════════
   A PARTIR DE 640 px
   El mismo breakpoint unico del resto del wizard.
   auto-fit con minimo de 190px: con dos opciones salen dos columnas y con
   tres, tres. Si un dia hubiera cuatro servicios, bajan solas a dos filas sin
   tocar esta hoja.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 640px) {
    .tw-servicios {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: .7rem;
    }

    .tw-srv {
        padding: 1rem;
    }

    .tw-srv:hover {
        transform: translateY(-2px);
    }
}

/* Quien pide menos animacion, no la tiene. */
@media (prefers-reduced-motion: reduce) {
    .tw-srv {
        transition: none;
    }

    .tw-srv:hover {
        transform: none;
    }
}