/**
 * /es/precios/css/style.css
 * Estilos específicos para la página de Precios y Tarifas LogiHub
 */

/* Animación suave de entrada de secciones */
.tab-content {
    animation: lh-fade-in 0.25s ease-out;
}

@keyframes lh-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Botones de tabs: estado activo / hover */
.tab-btn {
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
    white-space: nowrap;
}

.tab-btn.active {
    background-color: #ea580c;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(234, 88, 12, 0.25);
    transform: translateY(-1px);
}

.tab-btn:not(.active):hover {
    background-color: #ffffff;
    color: #0f172a;
}

/* Loader centrado */
#prices-loader .rounded-full {
    border-color: #e5e7eb;
    border-top-color: #ea580c;
    border-bottom-color: #ea580c;
}

/* Cards de países */
.country-card {
    position: relative;
    cursor: pointer;
}

.country-card:focus-visible {
    outline: 2px solid #ea580c;
    outline-offset: 2px;
}

/* Estado visual cuando se selecciona un país para el simulador */
.country-card.is-selected {
    border-color: #ea580c !important;
    background-color: #fff7ed !important;
    box-shadow: 0 0 0 1px rgba(234, 88, 12, 0.25);
}

/* Input de búsqueda de países */
#search-country::placeholder {
    color: #9ca3af;
}

/* Ajustes de los resultados de simuladores */
#result-national,
#result-national-error,
#result-international,
#result-international-error {
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

#result-national.show,
#result-national-error.show,
#result-international.show,
#result-international-error.show {
    opacity: 1;
    transform: translateY(0);
}

#result-national.hidden,
#result-national-error.hidden,
#result-international.hidden,
#result-international-error.hidden {
    opacity: 0;
    transform: translateY(4px);
}

/* Pequeños ajustes tipográficos */
#nac-detalle,
#intl-detalle {
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 767px) {
    .tab-btn {
        flex: 1 1 auto;
        text-align: center;
        font-size: 0.75rem;
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    #intl-search-wrapper {
        width: 100%;
    }
}

/* Scroll suave para barra de tabs si lo necesitas */
@media (max-width: 480px) {
    .tab-btn-container-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tab-btn-container-scroll::-webkit-scrollbar {
        height: 4px;
    }

    .tab-btn-container-scroll::-webkit-scrollbar-thumb {
        background-color: rgba(148, 163, 184, 0.7);
        border-radius: 999px;
    }
}