/* ============================================
   FF Resultados de busqueda — clon del booking, estilizado con marca WP
   ============================================ */

.ff-resultados {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px;
    color: var(--ff-navy, #0A2540);
}

.ff-resultados__loading,
.ff-resultados__empty {
    background: #fff;
    padding: 40px 20px;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(10, 37, 64, 0.08);
    font-weight: 600;
    color: var(--ff-gris-texto, #6a7285);
}

/* --- Bar resumen arriba --- */
.ff-resultados__resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 8px 24px rgba(10, 37, 64, 0.10);
    margin-bottom: 18px;
}

.ff-resultados__chip {
    flex: 1 1 150px;
    min-width: 140px;
    padding: 8px 12px;
    border-right: 1px solid #e4e7ef;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ff-resultados__chip:last-of-type { border-right: 0; }

.ff-resultados__chip-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ff-coral, #E0984C);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ff-resultados__chip-label svg { fill: currentColor; }

.ff-resultados__chip-value {
    font-weight: 700;
    font-size: 14px;
    color: var(--ff-navy, #0A2540);
}

.ff-resultados__chip-sub {
    font-size: 11px;
    color: var(--ff-gris-texto, #6a7285);
}

.ff-resultados__modificar {
    flex: 0 0 auto;
    align-self: center;
    background: var(--ff-coral, #E0984C);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 12px 22px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.ff-resultados__modificar:hover { background: #d58636; color: #fff; text-decoration: none; }

/* --- Cajetin arriba (modificar busqueda) --- */
.ff-resultados__cajon-wrap { margin-bottom: 20px; }

/* --- Tabs Ida / Vuelta --- */
.ff-resultados__tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    justify-content: flex-end;
}

.ff-resultados__tab {
    background: #fff;
    border: 3px solid transparent;
    border-radius: 14px;
    padding: 14px 22px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ff-navy, #0A2540);
    box-shadow: 0 4px 14px rgba(10, 37, 64, 0.08);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.ff-resultados__tab small {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ff-coral, #E0984C);
}

.ff-resultados__tab strong {
    font-size: 14px;
    font-weight: 700;
}

/* Tab activo (paso actual) — destacado claramente con borde naranja gordo
   y sombra coloreada para diferenciarlo del inactivo. Decision reunion 5-mayo:
   "metemos en naranja solido destacando donde estamos". */
.ff-resultados__tab--active {
    border-color: var(--ff-coral, #E0984C);
    box-shadow: 0 6px 22px rgba(224, 152, 76, 0.32);
    transform: translateY(-1px);
}
.ff-resultados__tab--active strong {
    color: var(--ff-coral, #E0984C);
}

/* --- Panel principal: titulo + filtros + listado --- */
.ff-resultados__panel {
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(10, 37, 64, 0.10);
}

.ff-resultados__title {
    font-size: 26px;
    color: var(--ff-coral, #E0984C);
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

.ff-resultados__title svg { fill: currentColor; }

/* Filtro franja horaria eliminado por coherencia con F3.3 del PDF (punto 17) */

/* --- Tarjetas de horario --- */
.ff-resultados__lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ff-resultados__card {
    position: relative;
    background: #fff;
    border: 1px solid #e4e7ef;
    border-radius: 12px;
    transition: all 0.18s;
    overflow: hidden;
}
.ff-resultados__card[hidden] { display: none !important; }
.ff-resultados__card:hover {
    border-color: var(--ff-coral, #E0984C);
    box-shadow: 0 8px 22px rgba(10, 37, 64, 0.10);
}
.ff-resultados__card--selected {
    border-color: var(--ff-coral, #E0984C) !important;
    box-shadow: 0 6px 20px rgba(224, 152, 76, 0.20) !important;
}

.ff-resultados__card-main {
    display: grid;
    grid-template-columns: minmax(200px, 1.6fr) minmax(80px, 0.8fr) minmax(150px, 1.3fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
}


/* Tarifas en fila horizontal compacta a la derecha */
.ff-resultados__tarifas-col {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: stretch;
}

.ff-resultados__tarifa {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: #fff;
    border: 1.5px solid #e4e7ef;
    border-radius: 8px;
    padding: 6px 10px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 68px;
    min-height: 50px;
    line-height: 1.15;
}
.ff-resultados__tarifa:hover {
    border-color: var(--ff-coral, #E0984C);
    background: #fff9f2;
    transform: translateY(-1px);
}

.ff-resultados__tarifa-nombre {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ff-gris-texto, #6a7285);
}
.ff-resultados__tarifa-precio {
    font-size: 14px;
    font-weight: 800;
    color: var(--ff-navy, #0A2540);
}

/* Tarifa destacada (la más barata) — fondo coral, ligeramente más visible */
.ff-resultados__tarifa--destacada {
    background: var(--ff-coral, #E0984C);
    border-color: var(--ff-coral, #E0984C);
}
.ff-resultados__tarifa--destacada .ff-resultados__tarifa-nombre {
    color: rgba(255, 255, 255, 0.9);
}
.ff-resultados__tarifa--destacada .ff-resultados__tarifa-precio {
    color: #fff;
    font-size: 15px;
}
.ff-resultados__tarifa--destacada:hover {
    background: #d58636;
    border-color: #d58636;
}

/* Estado activo (seleccionada): azul Faster con check flotante */
.ff-resultados__tarifa--active {
    background: #263C89 !important;
    border-color: #263C89 !important;
    transform: none !important;
}
.ff-resultados__tarifa--active .ff-resultados__tarifa-nombre,
.ff-resultados__tarifa--active .ff-resultados__tarifa-precio {
    color: #fff !important;
}
.ff-resultados__tarifa--active::after {
    content: '✓';
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #22a95c;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}

.ff-resultados__trayecto {
    display: flex;
    align-items: center;
    gap: 18px;
}

.ff-resultados__hora {
    font-size: 19px;
    font-weight: 700;
    color: var(--ff-navy, #0A2540);
    line-height: 1;
}

.ff-resultados__puerto {
    font-size: 10px;
    font-weight: 600;
    color: var(--ff-gris-texto, #6a7285);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 3px;
}

.ff-resultados__separador {
    flex: 1;
    height: 1px;
    background: repeating-linear-gradient(to right, #cbd1de 0 3px, transparent 3px 6px);
    position: relative;
    min-width: 40px;
}

.ff-resultados__duracion {
    text-align: center;
    font-size: 10px;
    color: var(--ff-gris-texto, #6a7285);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.ff-resultados__duracion strong {
    display: block;
    color: var(--ff-navy, #0A2540);
    font-size: 12px;
    margin-top: 2px;
}

.ff-resultados__barco { font-size: 12px; }
.ff-resultados__barco-icon { width: 32px; height: 32px; }

.ff-resultados__barco {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.ff-resultados__barco-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #eef1f7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ff-navy, #0A2540);
}

.ff-resultados__barco-icon svg { fill: currentColor; }

.ff-resultados__barco-info small {
    display: block;
    font-size: 10px;
    color: var(--ff-gris-texto, #6a7285);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.ff-resultados__barco-info strong { font-weight: 700; color: var(--ff-navy, #0A2540); }

.ff-resultados__reservar {
    background: var(--ff-coral, #E0984C);
    color: #fff;
    border: 0;
    border-radius: 12px;
    padding: 14px 18px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    min-width: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    transition: background 0.2s;
}
.ff-resultados__reservar:hover { background: #d58636; color: #fff; text-decoration: none; }

.ff-resultados__reservar small {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.ff-resultados__reservar strong {
    font-size: 16px;
    font-weight: 800;
}

/* ==================== Checkout bar (fija abajo) ==================== */
.ff-resultados__checkout {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: #263C89;
    color: #fff;
    box-shadow: 0 -10px 30px rgba(38, 60, 137, 0.28);
    /* + margen vertical para que respire (decision reunion 5-mayo) */
    padding: 22px 18px;
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}
.ff-resultados__checkout[hidden] { display: none; }

.ff-resultados__checkout-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.ff-resultados__checkout-text {
    font-size: 14px;
    flex: 1;
}
.ff-resultados__checkout-text strong { color: var(--ff-coral, #E0984C); }

.ff-resultados__checkout-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;  /* + gap entre legs ida/vuelta */
    flex: 1 1 320px;
    min-width: 0;
}

.ff-resultados__checkout-leg {
    font-size: 13px;
    line-height: 1.4;
}

.ff-resultados__checkout-leg-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    white-space: normal;
}

.ff-resultados__checkout-leg-barco {
    margin-top: 4px;
    padding-left: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
}
.ff-resultados__checkout-leg-barco small {
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    margin-right: 4px;
}
.ff-resultados__checkout-leg-barco strong {
    font-weight: 600;
    color: #fff;
}

/* Pill OPEN — para tarifas Flexi/Maxi (billete abierto) */
.ff-resultados__checkout-leg-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.ff-resultados__checkout-leg-pill--open {
    background: #fff;
    color: #263c89;
}

.ff-resultados__checkout-leg-label {
    display: inline-block;
    background: var(--ff-coral, #E0984C);
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 2px 8px;
    border-radius: 999px;
    margin-right: 8px;
}

.ff-resultados__checkout-leg strong {
    font-weight: 700;
    color: #fff;
    margin-right: 6px;
}

.ff-resultados__checkout-leg-meta {
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
}

.ff-resultados__checkout-leg-tarifa {
    display: inline-block;
    background: rgba(224, 152, 76, 0.25);
    color: var(--ff-coral, #E0984C);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    margin-right: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ff-resultados__checkout-total {
    text-align: right;
    line-height: 1.2;
    flex: 0 0 auto;
}
.ff-resultados__checkout-total-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ff-resultados__checkout-total-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--ff-coral, #E0984C);
}

.ff-resultados__checkout-cta {
    background: var(--ff-coral, #E0984C);
    color: #fff !important;
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}
.ff-resultados__checkout-cta:hover { background: #d58636; color: #fff; text-decoration: none; }

/* Espacio al final de la pagina para que la barra no tape resultados */
.ff-resultados { padding-bottom: 140px; }

/* ========= Responsive ========= */
@media (max-width: 820px) {
    .ff-resultados__resumen { padding: 10px; }
    .ff-resultados__chip {
        flex-basis: calc(50% - 5px);
        border-right: 0;
        border-bottom: 1px solid #e4e7ef;
        padding: 6px;
    }
    .ff-resultados__chip:nth-last-child(-n+2) { border-bottom: 0; }
    .ff-resultados__modificar { flex-basis: 100%; justify-content: center; }

    .ff-resultados__tabs { justify-content: stretch; }
    .ff-resultados__tab { flex: 1; justify-content: center; }

    .ff-resultados__panel { padding: 14px; }
    .ff-resultados__title { font-size: 20px; }

    .ff-resultados__card-main {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
    }
    .ff-resultados__trayecto { flex-direction: row; align-items: center; }
    .ff-resultados__separador { min-width: 30px; }

    .ff-resultados__tarifas-col {
        flex-direction: row;
        gap: 6px;
    }
    .ff-resultados__tarifa { flex: 1; min-width: 0; }

    .ff-resultados__checkout-inner { flex-direction: column; align-items: stretch; gap: 10px; }
    .ff-resultados__checkout-total { text-align: left; }
    .ff-resultados__checkout-cta { width: 100%; text-align: center; padding: 12px; }
    .ff-resultados { padding-bottom: 200px; }
}


/* ============================================
   Cabecera del panel: titulo + boton "Información tipo tarifa"
   ============================================ */
.ff-resultados__panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.ff-resultados__panel-header .ff-resultados__title {
    margin: 0;
}

.ff-resultados__info-tarifas-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--ff-navy, #263c89);
    border: 2px solid var(--ff-coral, #e0984c);
    border-radius: 999px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.ff-resultados__info-tarifas-btn svg {
    fill: var(--ff-coral, #e0984c);
    transition: fill 0.15s;
}
.ff-resultados__info-tarifas-btn:hover,
.ff-resultados__info-tarifas-btn:focus {
    background: var(--ff-coral, #e0984c);
    color: #fff;
    transform: translateY(-1px);
}
.ff-resultados__info-tarifas-btn:hover svg,
.ff-resultados__info-tarifas-btn:focus svg {
    fill: #fff;
}

/* ============================================
   Modal "Comparativa de tarifas"
   ============================================ */
.ff-modal-tarifas {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}
.ff-modal-tarifas[hidden] { display: none; }

.ff-modal-tarifas__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 37, 64, 0.55);
    backdrop-filter: blur(2px);
}

.ff-modal-tarifas__dialog {
    position: relative;
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 760px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 60px rgba(10, 37, 64, 0.35);
    animation: ff-modal-fadein 0.2s ease;
}
@keyframes ff-modal-fadein {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ff-modal-tarifas__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px;
    border-bottom: 1px solid #e6e8ef;
}
.ff-modal-tarifas__titulo {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--ff-navy, #263c89);
}
.ff-modal-tarifas__close {
    background: none;
    border: 0;
    cursor: pointer;
    color: #555a6b;
    padding: 6px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.ff-modal-tarifas__close:hover { background: #f3f3f3; }
.ff-modal-tarifas__close svg { fill: currentColor; }

.ff-modal-tarifas__body {
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden; /* en movil se sobreescribe a auto via media query */
}

.ff-modal-tarifas__tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.ff-modal-tarifas__tabla th,
.ff-modal-tarifas__tabla td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #eef0f5;
}
.ff-modal-tarifas__th-feature { width: 40%; }
.ff-modal-tarifas__th-tarifa {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--ff-navy, #263c89);
    background: #f7f8fb;
    width: 20%;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 8px;
    position: sticky;
    top: 0;
}
.ff-modal-tarifas__th-tarifa--destacada {
    background: var(--ff-coral, #e0984c);
    color: #fff;
}

.ff-modal-tarifas__grupo-titulo td {
    background: #fafbff;
    color: var(--ff-navy, #263c89);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding-top: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e6e8ef;
}

.ff-modal-tarifas__feature-label {
    color: #2d3142;
    font-weight: 500;
}
.ff-modal-tarifas__valor { text-align: center; }

.ff-modal-tarifas__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 13px;
}
.ff-modal-tarifas__check--si {
    background: rgba(46, 167, 95, 0.12);
    color: #2ea75f;
}
.ff-modal-tarifas__check--si svg { fill: #2ea75f; }
.ff-modal-tarifas__check--no {
    background: rgba(192, 38, 38, 0.10);
    color: #c02626;
}
.ff-modal-tarifas__check--no svg { fill: #c02626; }
.ff-modal-tarifas__check--valor {
    background: rgba(224, 152, 76, 0.15);
    color: var(--ff-coral, #c8843e);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    min-width: 0;
}

/* Modal responsive: en movil ocupa toda la pantalla */
@media (max-width: 640px) {
    .ff-modal-tarifas { padding: 0; }
    .ff-modal-tarifas__dialog {
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
        max-width: 100%;
    }
    .ff-modal-tarifas__header { padding: 16px 18px; }
    .ff-modal-tarifas__titulo { font-size: 17px; }
    .ff-modal-tarifas__tabla th,
    .ff-modal-tarifas__tabla td { padding: 10px 8px; font-size: 12px; }
    .ff-modal-tarifas__th-feature { width: 45%; }
    .ff-modal-tarifas__panel-header { flex-direction: column; align-items: flex-start; }
}


/* ============================================
   Tarifa NO disponible (Mini fuera de horario peak, etc.)
   Apariencia muy parecida a las otras tarifas: el cliente quiere
   que se vea casi igual y solo se entere de la no disponibilidad
   al hacer click (Decision usuario 6-mayo: "tiene que aparecer igual y
   es al seleccionar cuando tiene que salir lo de no disponible, o si
   quieres difuminar ligeramente el precio para que ya se tenga en cuenta").
   Solucion: mismo fondo blanco/borde, pero el precio aparece tachado
   atenuado. Click → toast con aviso, no selecciona.
   ============================================ */
.ff-resultados__tarifa--no-disponible {
    background: #fff;
    border-color: #e4e7ef;
    cursor: help;
}
.ff-resultados__tarifa--no-disponible:hover {
    border-color: #c8cdd9;
    background: #fff;
    transform: none;
}
.ff-resultados__tarifa-precio--atenuado {
    color: #b0b5c2 !important;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(176, 181, 194, 0.6);
}
.ff-resultados__tarifa--no-disponible .ff-resultados__tarifa-nombre {
    color: #9094a3;
}

/* Animacion "shake" al hacer click en tarifa no disponible */
@keyframes ff-tarifa-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-3px); }
    40%      { transform: translateX(3px); }
    60%      { transform: translateX(-2px); }
    80%      { transform: translateX(2px); }
}
.ff-resultados__tarifa--shake {
    animation: ff-tarifa-shake 0.4s ease-in-out;
}

/* ============================================
   Toast / aviso temporal
   Aparece arriba a la derecha cuando el usuario hace click en una
   tarifa no disponible. Se autocierra a los 3.5s.
   ============================================ */
.ff-resultados__toast {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    color: var(--ff-navy, #263c89);
    padding: 14px 18px;
    border-left: 4px solid var(--ff-coral, #e0984c);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(10, 37, 64, 0.20);
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 500;
    max-width: 380px;
    line-height: 1.4;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.ff-resultados__toast--visible {
    opacity: 1;
    transform: translateX(0);
}
.ff-resultados__toast svg {
    fill: var(--ff-coral, #e0984c);
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .ff-resultados__toast {
        top: 12px;
        left: 12px;
        right: 12px;
        max-width: none;
    }
}

/* ============================================
   Modal "Comparativa de tarifas" — TABLA comparativa con datos del API
   La estructura visual es tipo Excel: filas = caracteristicas (orden de la
   API), columnas = tarifas. Donde una tarifa no tiene esa caracteristica,
   se pinta "—". Todo el contenido viene 100% de la API (descripcion +
   listaAtributos) — el cliente edita en su admin y aparece sin redeploy.
   ============================================ */

/* Tinte coral suave en TODAS las celdas de la columna destacada (Flexi).
   Usamos box-shadow inset (no border) para que no anada 2px de ancho a
   la columna y provoque scroll horizontal en el modal. */
.ff-modal-tarifas__col--destacada {
    background: rgba(224, 152, 76, 0.06);
    box-shadow:
        inset  1px 0 0 rgba(224, 152, 76, 0.25),
        inset -1px 0 0 rgba(224, 152, 76, 0.25);
}

/* Fila "Resumen": muestra el HTML del campo `descripcion` (bullets en mayuscula).
   Se distingue del resto por ser la primera fila — fondo neutro en TODAS las
   celdas, que el tinte coral de la columna destacada NO la pise. */
.ff-modal-tarifas__fila-resumen td,
.ff-modal-tarifas__fila-resumen td.ff-modal-tarifas__col--destacada {
    padding: 14px 16px;
    background: #fafbff;
    border-left: 0;
    border-right: 0;
}
.ff-modal-tarifas__fila-resumen th {
    background: #fafbff;
    color: var(--ff-navy, #263c89);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 12px;
}
.ff-modal-tarifas__valor-resumen {
    text-align: left !important;
    line-height: 1.4;
    font-size: 12px;
    color: var(--ff-navy, #263c89);
    font-weight: 600;
}
.ff-modal-tarifas__valor-resumen p {
    margin: 0 0 4px;
}
.ff-modal-tarifas__valor-resumen p:last-child {
    margin-bottom: 0;
}
.ff-modal-tarifas__valor-resumen p:empty {
    display: none;
}

/* Celda de detalle: texto multi-linea, alineado a la izquierda para mejor lectura */
.ff-modal-tarifas__valor-detalle {
    text-align: left !important;
    line-height: 1.5;
    font-size: 13px;
    color: #444955;
    white-space: pre-line; /* respeta los \n del backend */
}

/* Celda vacia: el "—" centrado y atenuado */
.ff-modal-tarifas__valor-vacio {
    color: #c4c8d0;
    font-size: 18px;
    text-align: center !important;
}

/* Etiqueta de fila (primer columna): nombre de la caracteristica */
.ff-modal-tarifas__feature-label {
    color: var(--ff-navy, #263c89);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: #f7f8fb;
}

/* Header destacado (Flexi) con flag arriba */
.ff-modal-tarifas__th-tarifa--destacada {
    position: relative;
}
.ff-modal-tarifas__th-tarifa--destacada::before {
    content: '★';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ff-coral, #e0984c);
    color: #fff;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(224, 152, 76, 0.4);
}

/* Placeholder mientras carga la API */
.ff-modal-tarifas__placeholder {
    text-align: center;
    color: #8a8e98;
    padding: 60px 20px;
    margin: 0;
    font-style: italic;
}

/* Responsive: en movil scroll horizontal con primera columna sticky */
@media (max-width: 720px) {
    .ff-modal-tarifas__body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ff-modal-tarifas__tabla {
        min-width: 560px; /* fuerza scroll si pantalla < 560px */
    }
    .ff-modal-tarifas__feature-label {
        position: sticky;
        left: 0;
        z-index: 1;
    }
    .ff-modal-tarifas__valor-resumen,
    .ff-modal-tarifas__valor-detalle {
        font-size: 12px;
    }
}

/* ============================================
   Iconos Sí/No del modal comparativa de tarifas
   ============================================ */
.ff-modal-tarifas__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}
.ff-modal-tarifas__icono--si {
    background: rgba(46, 167, 95, 0.15);
}
.ff-modal-tarifas__icono--si svg {
    fill: #1e7740;
}
.ff-modal-tarifas__icono--no {
    background: rgba(192, 38, 38, 0.12);
}
.ff-modal-tarifas__icono--no svg {
    fill: #c02626;
}
/* En las celdas con icono, alinear al centro y quitar el text-align izquierda
   que aplicamos a __valor-detalle (que es para texto largo) */
.ff-modal-tarifas__valor-detalle:has(.ff-modal-tarifas__icono) {
    text-align: center !important;
}