/* ═══════════════════════════════════════════════════════════════════════════
   traslado-web-feria.css — Banda de feria encima del buscador
   Ubicacion: Transotel.Web/wwwroot/css/traslado-web-feria.css

   LOTE FITUR&MWC · Fichero NUEVO.

   Solo se carga cuando la banda se pinta (la enlaza _BandaFeria.cshtml).
   PREFIJO .twf- EN TODO: no puede tocar ni una regla del buscador, que usa
   .tw-. Nada de posiciones fijas ni de alturas: la banda empuja el
   contenido hacia abajo y ya, sin tapar ningun campo en ningun movil.
   ═══════════════════════════════════════════════════════════════════════════ */

.twf-banda {
    --twf-verde:     #008572;
    --twf-verde-osc: #00544a;
    --twf-oro:       #dfbb3e;

    margin: 0 0 1.25rem;
    padding: 1rem 1.15rem;
    border-radius: 14px;
    background: linear-gradient(150deg, var(--twf-verde-osc) 0%, var(--twf-verde) 100%);
    color: #fff;
    border-left: 5px solid var(--twf-oro);
}

.twf-banda__cuerpo {
    display: grid;
    grid-template-columns: 1fr;
    gap: .85rem;
    align-items: center;
}

.twf-banda__principal {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
}

.twf-banda__icono {
    font-size: 1.5rem;
    color: var(--twf-oro);
    margin-top: .15rem;
    flex: none;
}

.twf-banda__titulo {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.3;
}

.twf-banda__datos {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .9rem;
    margin: .25rem 0 0;
    font-size: .9rem;
    color: rgba(255, 255, 255, .88);
}

.twf-banda__avisos {
    display: grid;
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .92rem;
}

.twf-banda__avisos li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
}

.twf-banda__avisos i {
    color: var(--twf-oro);
    margin-top: .2rem;
    flex: none;
}

.twf-banda__volver {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    justify-self: start;
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.twf-banda__volver:hover,
.twf-banda__volver:focus-visible { color: var(--twf-oro); }

.twf-banda__volver:focus-visible {
    outline: 3px solid var(--twf-oro);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Escritorio: tres columnas en una sola fila. */
@media (min-width: 992px) {
    .twf-banda__cuerpo {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) auto;
        gap: 1.4rem;
    }

    .twf-banda__volver { justify-self: end; white-space: nowrap; }
}

@media print {
    .twf-banda { background: none !important; color: #000 !important; border: 1px solid #999; }
    .twf-banda__volver { display: none !important; }
}