/* ui-comun.css — Viaje Informado
 * Piezas de interfaz realmente compartidas entre Favoritos, Perfil, Cuenta
 * y Reseñas: botones, header de sección con icono, y empty state genérico.
 * Se carga ANTES del CSS propio de cada página para que esta pueda hacer
 * overrides puntuales sin !important. No es un design-system: solo lo que
 * hoy está duplicado en 4 archivos distintos con los mismos valores.
 */

:root {
    --vi-ui-card-radius: 16px;
    --vi-ui-border-soft: #DFE7F3;
}

/* --- Botones ------------------------------------------------------------ */

.vi-btn-primary,
.vi-btn-secondary,
.vi-btn-ghost-icon,
.vi-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    min-height: 44px;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.vi-btn-primary {
    padding: 10px 22px;
    border-radius: 8px;
    background: #007FFF;
    color: #ffffff;
    border: 1px solid #002D89;
}

.vi-btn-primary:hover {
    background: #002D89;
    color: #ffffff;
}

.vi-btn-secondary {
    padding: 9px 20px;
    border-radius: 8px;
    background: #ffffff;
    color: #002D89;
    border: 1px solid var(--vi-ui-border-soft);
    font-weight: 600;
}

.vi-btn-secondary:hover {
    border-color: #007FFF;
    color: #007FFF;
}

.vi-btn-danger {
    padding: 9px 20px;
    border-radius: 8px;
    background: #dc2626;
    color: #ffffff;
    border: 1px solid #dc2626;
}

.vi-btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

.vi-btn-ghost-icon {
    width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 50%;
    background: #EEF3FB;
    color: #007FFF;
    border: 1px solid transparent;
    font-size: 1rem;
    padding: 0;
}

.vi-btn-ghost-icon:hover {
    background: #DFE7F3;
    color: #002D89;
}

.vi-btn-primary:focus-visible,
.vi-btn-secondary:focus-visible,
.vi-btn-ghost-icon:focus-visible {
    outline: 2px solid #007FFF;
    outline-offset: 2px;
}

.vi-btn-danger:focus-visible {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}

.vi-btn-primary:disabled,
.vi-btn-secondary:disabled,
.vi-btn-ghost-icon:disabled,
.vi-btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .vi-btn-primary,
    .vi-btn-secondary,
    .vi-btn-ghost-icon,
    .vi-btn-danger {
        transition: none;
    }
}

/* --- Header de sección con icono ----------------------------------------- */

.vi-section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.vi-section-heading__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #EEF3FB;
    color: #007FFF;
    font-size: 1.05rem;
}

.vi-section-heading__title {
    margin: 0;
}

/* --- Empty state genérico -------------------------------------------------- */

.vi-empty-state {
    text-align: center;
    max-width: 460px;
    margin: 0 auto;
    padding: 56px 24px;
    border: 1px solid var(--vi-ui-border-soft);
    border-radius: var(--vi-ui-card-radius);
    background: #ffffff;
}

.vi-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #EEF3FB;
    color: #007FFF;
    font-size: 1.8rem;
    margin: 0 auto 20px;
}

.vi-empty-state__title {
    font-family: "Playfair Display", serif;
    font-size: 1.3rem;
    color: #182033;
    margin: 0 0 8px;
}

.vi-empty-state__text {
    color: #61708C;
    margin: 0 0 24px;
}

.vi-empty-state__actions {
    display: flex;
    justify-content: center;
}

@media (max-width: 576px) {
    .vi-empty-state {
        padding: 40px 20px;
    }
}