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

   LOTE PAUTAS-2 — 24/09/2026. LA VENTANA SE REHACE ENTERA (seccion 2).
     Cabecera verde con insignia dorada, barra de lectura, cada pauta en su
     tarjeta con numero e icono (verde, o rojo/dorado segun data-tono) y la
     casilla en una tarjeta con tres estados: bloqueada, lista y marcada.
     La numeracion ya no depende de list-style: la pinta el JS en un circulo.
     La ficha del paso 3 (seccion 1) no cambia.

   LOTE PAUTAS-1 — 23/09/2026. Fichero NUEVO con dos piezas:
     1. La ficha del paso 3 (#tw-ficha): «Asi vera tu envio la agencia de
        transportes».
     2. La ventana de las pautas obligatorias (SweetAlert2, clases
        tw-pautas-*).

   Fichero APARTE, mismo criterio que franja, servicios, descuento, ida y
   vuelta y sabado: no toca ni una linea de traslado-web.css. Si se quitara,
   se quita su <link> y no queda ni una regla huerfana en la hoja grande.

   Colores de la web (regla 28): #008572 fondos y rellenos, #dfbb3e botones.
   Se usan las variables de traslado-web.css con su valor de reserva.
   Movil primero. El breakpoint esta en 640px, como en el resto del wizard.

   *** LA VENTANA LLEVA .swal2-container DELANTE A PROPOSITO. *** SweetAlert2
   mete su hoja de estilos al cargar, DESPUES de esta. Con la misma
   especificidad ganarian sus reglas; con el prefijo ganan estas.
   ════════════════════════════════════════════════════════════ */

/* ── [hidden] manda siempre (las reglas display lo pisarian) ─── */
.tw-ficha [hidden],
.tw-pautas [hidden] {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════
   1. LA FICHA DEL PASO 3
   ════════════════════════════════════════════════════════════ */
.tw-ficha {
    margin: 1.25rem 0 1rem;
    border: 1px solid var(--tw-teal, #008572);
    border-radius: var(--tw-radio, 10px);
    background: var(--tw-teal-suave, #e6f2f0);
    overflow: hidden;
}

.tw-ficha__titulo {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    padding: .7rem 1rem;
    background: linear-gradient(90deg, var(--tw-teal, #008572) 0%, var(--tw-teal-oscuro, #00655a) 100%);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.tw-ficha__titulo i {
    color: var(--tw-oro, #dfbb3e);
    flex-shrink: 0;
}

.tw-ficha__ayuda {
    margin: 0;
    padding: .75rem 1rem 0;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--tw-texto, #1f2937);
}

.tw-ficha__rejilla {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    padding: .75rem 1rem 1rem;
}

.tw-ficha__bloque {
    min-width: 0;
    padding: .7rem .85rem;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.tw-ficha__etq {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .35rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--tw-teal-oscuro, #00655a);
}

.tw-ficha__etq i {
    color: var(--tw-teal, #008572);
}

.tw-ficha__nombre {
    margin: 0 0 .25rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--tw-texto, #1f2937);
    overflow-wrap: anywhere;
}

.tw-ficha__dato {
    margin: 0 0 .2rem;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--tw-gris, #6b7280);
    overflow-wrap: anywhere;
}

.tw-ficha__lbl {
    font-weight: 600;
    color: var(--tw-texto, #1f2937);
}

.tw-ficha__lbl::after {
    content: ": ";
}

.tw-ficha__obs {
    min-height: 1.4em;
    margin: 0;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--tw-texto, #1f2937);
    overflow-wrap: anywhere;
}

/* Lo que todavia no se ha escrito: en gris y en cursiva */
.tw-ficha .tw-ficha__vacio {
    font-style: italic;
    font-weight: 400;
    color: var(--tw-gris, #6b7280);
}

.tw-ficha__aviso {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0 1rem 1rem;
    padding: .65rem .8rem;
    border: 1px solid var(--tw-oro, #dfbb3e);
    border-radius: 8px;
    background: var(--tw-oro-suave, #fdf6e3);
    font-size: .85rem;
    line-height: 1.45;
    color: var(--tw-texto, #1f2937);
}

.tw-ficha__aviso[hidden] {
    display: none !important;
}

.tw-ficha__aviso i {
    margin-top: .15rem;
    flex-shrink: 0;
    color: #a07c12;
}

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

    .tw-ficha__bloque--info {
        grid-column: 1 / -1;
    }
}

/* ════════════════════════════════════════════════════════════
   2. LA VENTANA DE LAS PAUTAS (SweetAlert2) — PAUTAS-2
   ════════════════════════════════════════════════════════════ */
.swal2-container .tw-pautas-popup {
    padding: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(11, 31, 58, .28);
}

.swal2-container .tw-pautas-popup__cuerpo {
    margin: 0;
    padding: 0;
    overflow: visible;
    text-align: left;
}

/* ── Cabecera ────────────────────────────────────────────────── */
.tw-pautas__cabecera {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.35rem 1.4rem 1.2rem;
    background:
        radial-gradient(circle at 95% -30%, rgba(223, 187, 62, .38) 0, rgba(223, 187, 62, 0) 48%),
        linear-gradient(135deg, var(--tw-teal, #008572) 0%, var(--tw-teal-oscuro, #00655a) 100%);
    color: #fff;
}

.tw-pautas__insignia {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tw-oro, #dfbb3e) 0%, #f0d472 100%);
    color: #0B1F3A;
    font-size: 1.45rem;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .18), 0 6px 16px rgba(0, 0, 0, .18);
}

.tw-pautas__cabecera-txt {
    min-width: 0;
}

.tw-pautas__titulo {
    margin: 0 0 .25rem;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
}

.tw-pautas__intro {
    margin: 0;
    font-size: .92rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .92);
}

/* ── Barra de lectura: se llena al bajar y nunca vuelve atras ── */
.tw-pautas__progreso {
    height: 5px;
    background: rgba(0, 133, 114, .15);
}

.tw-pautas__barra {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--tw-oro, #dfbb3e) 0%, #f0d472 100%);
    transform: scaleX(var(--tw-pautas-avance, 0));
    transform-origin: left center;
    transition: transform .2s ease-out;
}

.tw-pautas__barra.is-completa {
    background: linear-gradient(90deg, var(--tw-teal, #008572) 0%, #22a58f 100%);
}

/* ── La zona que se desplaza ─────────────────────────────────── */
.tw-pautas__zona {
    max-height: 50vh;
    overflow-y: auto;
    padding: 1rem 1.1rem;
    background: #f4f7f6;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--tw-teal, #008572) transparent;
}

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

.tw-pautas__lista {
    display: grid;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── Cada pauta, en su tarjeta ───────────────────────────────── */
.tw-pauta {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: start;
    gap: .75rem;
    margin: 0;
    padding: .8rem .9rem;
    border: 1px solid #e3e9e7;
    border-left: 4px solid var(--tw-teal, #008572);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(11, 31, 58, .05);
    animation: tw-pauta-entra .35s ease-out both;
    animation-delay: calc(var(--tw-pauta-i, 0) * 40ms);
}

.tw-pauta__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-top: .25rem;
    border-radius: 50%;
    background: var(--tw-oro, #dfbb3e);
    color: #0B1F3A;
    font-size: .8rem;
    font-weight: 800;
    line-height: 1;
}

.tw-pauta__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    background: var(--tw-teal-suave, #e6f2f0);
    color: var(--tw-teal, #008572);
    font-size: 1rem;
}

.tw-pauta__txt {
    align-self: center;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--tw-texto, #1f2937);
}

/* Lo que no puede viajar: en rojo */
.tw-pauta--prohibido {
    border-left-color: #d64545;
}

.tw-pauta--prohibido .tw-pauta__ico {
    background: #fdecec;
    color: #c03030;
}

/* Lo que obliga a hacer algo o cuesta dinero: en dorado */
.tw-pauta--aviso {
    border-left-color: var(--tw-oro, #dfbb3e);
}

.tw-pauta--aviso .tw-pauta__ico {
    background: var(--tw-oro-suave, #fdf6e3);
    color: #a07c12;
}

@keyframes tw-pauta-entra {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── La pista para bajar ─────────────────────────────────────── */
.tw-pautas__pista {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin: .7rem 1.1rem 0;
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
    color: var(--tw-teal-oscuro, #00655a);
}

.tw-pautas__pista i {
    color: var(--tw-teal, #008572);
    animation: tw-pautas-bota 1.4s ease-in-out infinite;
}

.tw-pautas__pista.is-llamada {
    animation: tw-pautas-llamada .6s ease;
}

@keyframes tw-pautas-bota {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
}

@keyframes tw-pautas-llamada {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-5px); }
    40%      { transform: translateX(5px); }
    60%      { transform: translateX(-3px); }
    80%      { transform: translateX(3px); }
}

/* ── La casilla, en su tarjeta: bloqueada, lista y marcada ───── */
.tw-pautas__check {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: .8rem 1.1rem 0;
    padding: .85rem 1rem;
    border: 2px dashed #cfd8d5;
    border-radius: 12px;
    background: #fff;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--tw-gris, #6b7280);
    cursor: not-allowed;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.tw-pautas__check input {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
    accent-color: var(--tw-teal, #008572);
    cursor: inherit;
}

.tw-pautas__check-txt {
    flex: 1 1 auto;
}

.tw-pautas__check-ico {
    flex-shrink: 0;
    font-size: 1.15rem;
    color: #9aa7a3;
}

.tw-pautas__check.is-activa {
    border-style: solid;
    border-color: var(--tw-teal, #008572);
    color: var(--tw-texto, #1f2937);
    cursor: pointer;
    animation: tw-pautas-latido 1.2s ease-out 1;
}

.tw-pautas__check.is-activa .tw-pautas__check-ico {
    color: var(--tw-teal, #008572);
}

.tw-pautas__check.is-marcada {
    background: var(--tw-teal-suave, #e6f2f0);
    box-shadow: 0 0 0 3px rgba(0, 133, 114, .12);
}

@keyframes tw-pautas-latido {
    0%   { box-shadow: 0 0 0 0 rgba(0, 133, 114, .45); }
    100% { box-shadow: 0 0 0 12px rgba(0, 133, 114, 0); }
}

/* ── Botones ─────────────────────────────────────────────────── */
.swal2-container .tw-pautas-popup__acciones {
    box-sizing: border-box;
    gap: .6rem;
    width: 100%;
    margin: 0;
    padding: 1rem 1.1rem 1.2rem;
}

.swal2-container .tw-pautas-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin: 0;
    padding: .65rem 1.4rem;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s ease, opacity .15s ease, background-color .15s ease, transform .15s ease;
}

/* SweetAlert2 les pone display en linea al ensenarlos, asi que el hueco
   entre el icono y el texto va en el icono y no con gap. */
.swal2-container .tw-pautas-btn i {
    margin-right: .5rem;
}

.swal2-container .tw-pautas-btn--ok {
    border-color: var(--tw-oro, #dfbb3e);
    background: linear-gradient(135deg, var(--tw-oro, #dfbb3e) 0%, #f0d472 100%);
    color: #0B1F3A;
    box-shadow: 0 4px 12px rgba(223, 187, 62, .35);
}

.swal2-container .tw-pautas-btn--ok:hover:not(:disabled) {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.swal2-container .tw-pautas-btn--ok:disabled {
    opacity: .45;
    box-shadow: none;
    cursor: not-allowed;
}

.swal2-container .tw-pautas-btn--volver {
    border-color: var(--tw-teal, #008572);
    background: #fff;
    color: var(--tw-teal, #008572);
}

.swal2-container .tw-pautas-btn--volver:hover {
    background: var(--tw-teal-suave, #e6f2f0);
}

.swal2-container .tw-pautas-btn:focus-visible {
    outline: 3px solid rgba(0, 133, 114, .35);
    outline-offset: 2px;
}

/* ── Sin animaciones si el sistema lo pide ───────────────────── */
@media (prefers-reduced-motion: reduce) {
    .tw-pauta,
    .tw-pautas__pista i,
    .tw-pautas__pista.is-llamada,
    .tw-pautas__check.is-activa {
        animation: none;
    }

    .tw-pautas__barra,
    .swal2-container .tw-pautas-btn {
        transition: none;
    }
}

/* ── Movil: cabecera mas baja, tarjetas compactas y botones a lo ancho ── */
@media (max-width: 639px) {
    .tw-pautas__cabecera {
        gap: .75rem;
        padding: 1rem;
    }

    .tw-pautas__insignia {
        width: 2.6rem;
        height: 2.6rem;
        font-size: 1.1rem;
        box-shadow: 0 0 0 4px rgba(255, 255, 255, .18);
    }

    .tw-pautas__titulo {
        font-size: 1.1rem;
    }

    .tw-pautas__intro {
        font-size: .85rem;
    }

    .tw-pautas__zona {
        max-height: 44vh;
        padding: .75rem;
    }

    .tw-pauta {
        gap: .55rem;
        padding: .7rem .75rem;
    }

    .tw-pauta__num {
        width: 1.5rem;
        height: 1.5rem;
        margin-top: .2rem;
        font-size: .72rem;
    }

    .tw-pauta__ico {
        width: 1.9rem;
        height: 1.9rem;
        font-size: .9rem;
    }

    .tw-pauta__txt {
        font-size: .86rem;
    }

    .tw-pautas__pista,
    .tw-pautas__check {
        margin-right: .75rem;
        margin-left: .75rem;
    }

    .swal2-container .tw-pautas-popup__acciones {
        padding: .9rem .75rem 1rem;
    }

    /* Con reverseButtons el DOM es Volver, Continuar: al reves, Continuar
       queda arriba, que es donde va el pulgar. */
    .swal2-container .tw-pautas-popup__acciones {
        flex-direction: column-reverse;
    }

    .swal2-container .tw-pautas-btn {
        width: 100%;
    }
}