/* TARJETAS DE CIUDAD */

.ciudad-card {
    background: var(--color-bg-subtle, #f9fafb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* → FIX: evita que una tarjeta estrecha rompa su contenido */
    min-width: 0;
    overflow: hidden;
}

.ciudad-card .ciudad-nombre {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* → FIX: nombre largo no desborda la tarjeta */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ciudad-card .ciudad-hora {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text, #111827);
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.ciudad-card .ciudad-fecha {
    font-size: 0.75rem;
    color: var(--color-text-muted, #9ca3af);
}

.ciudad-card .ciudad-utc {
    font-size: 0.72rem;
    color: #2563eb;
    font-weight: 600;
}

/* Modo noche */
.ciudad-card.es-noche {
    background: #1e293b;
    border-color: #334155;
}

.ciudad-card.es-noche .ciudad-nombre {
    color: #94a3b8;
}

.ciudad-card.es-noche .ciudad-hora {
    color: #f1f5f9;
}

.ciudad-card.es-noche .ciudad-fecha {
    color: #64748b;
}


/* GRID DE CIUDADES (#ciudadesTicker) */

#ciudadesTicker {
    grid-template-columns: repeat(2, 1fr) !important;
}

@media (min-width: 480px) {
    #ciudadesTicker {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    }
}

@media (min-width: 640px) {
    #ciudadesTicker {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    }
}


/* BLOQUE HORA LOCAL (#horaLocalDisplay) */
#horaLocalDisplay {
    /* → FIX: columna en móvil para que "Zona horaria" no se corte */
    flex-direction: column !important;
    gap: 0.75rem !important;
    align-items: flex-start !important;
}

#horaLocalDisplay>div[style*="border-left"] {
    border-left: none !important;
    padding-left: 0 !important;
    /* Sustituimos por un separador superior más natural en columna */
    border-top: 2px solid var(--color-border, #e5e7eb);
    padding-top: 0.75rem;
}

@media (min-width: 480px) {
    #horaLocalDisplay {
        flex-direction: row !important;
        gap: 1.5rem !important;
        align-items: center !important;
    }

    #horaLocalDisplay>div[style*="border-left"] {
        border-top: none !important;
        padding-top: 0 !important;
        border-left: 2px solid var(--color-border, #e5e7eb) !important;
        padding-left: 1.5rem !important;
    }
}


/* HORA LOCAL GRANDE (#horaLocalHora) */
#horaLocalHora {
    /* → FIX: font-size fluido: 2rem mínimo, 3rem máximo */
    font-size: clamp(2rem, 8vw, 3rem) !important;
}


/* SELECTS (Ciudad / zona origen · destino) */
#ciudadOrigen,
#ciudadDestino {
    width: 100%;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.input-wrapper.select-wrapper {
    width: 100%;
    overflow: hidden;
}

/* TARJETAS DE CIUDAD — AJUSTE EN MÓVIL MUY PEQUEÑO */
@media (max-width: 359px) {
    .ciudad-card .ciudad-hora {
        font-size: 1.2rem;
    }

    .ciudad-card {
        padding: 0.6rem 0.75rem;
    }
}