/* =============================================
   ESTILOS "MIS PAQUETES" - HOUSE-IN (my_package.php del tema padre)
   Diseño PREMIUM consistente con package_v2 - VERSIÓN ULTRA-FUERTE
   Archivo: css/my-packages-styles.css
   ============================================= */

/* Grid bonito en desktop */
.listivo-app .listivo-panel-section .listivo-panel-packages,
.listivo-panel-packages {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 40px !important;
    margin: 40px 0 !important;
    padding: 0 20px !important;
    width: 100% !important;
}

/* Tarjeta individual - fuerza máxima */
.listivo-app .listivo-panel-section .listivo-panel-packages .listivo-panel-package,
.listivo-panel-package {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 36px 28px !important;
    box-shadow: 0 8px 30px rgba(31, 37, 92, 0.08) !important;
    transition: all 0.4s ease !important;
    border: 2px solid #d4dbe8 !important;
    cursor: pointer !important;
}

.listivo-app .listivo-panel-section .listivo-panel-packages .listivo-panel-package:hover,
.listivo-panel-package:hover {
    transform: translateY(-12px) !important;
    box-shadow: 0 20px 40px rgba(31, 37, 92, 0.15) !important;
    border-color: #a8b5d1 !important;
}

.listivo-app .listivo-panel-section .listivo-panel-packages .listivo-panel-package--active,
.listivo-panel-package--active {
    border-color: #1F255C !important;
    box-shadow: 0 12px 40px rgba(31, 37, 92, 0.18) !important;
}

/* Nombre del paquete */
.listivo-app .listivo-panel-section .listivo-panel-packages .listivo-panel-package__name,
.listivo-panel-package__name {
    font-size: 23px !important;
    font-weight: 700 !important;
    color: #1F255C !important;
    text-align: center !important;
    margin: 0 0 16px 0 !important;
}

/* Precio o "Gratis" */
.listivo-app .listivo-panel-section .listivo-panel-packages .listivo-panel-package__price,
.listivo-panel-package__price {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1F255C !important;
    text-align: center !important;
    margin: 0 0 24px 0 !important;
}

/* Botón que Vue agrega */
.listivo-app .listivo-panel-section .listivo-panel-packages .listivo-panel-package__button .listivo-simple-button,
.listivo-panel-package__button .listivo-simple-button {
    background: #1F255C !important;
    color: white !important;
    padding: 16px 40px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(31, 37, 92, 0.2) !important;
    min-width: 240px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
}

.listivo-app .listivo-panel-section .listivo-panel-packages .listivo-panel-package__button .listivo-simple-button:hover,
.listivo-panel-package__button .listivo-simple-button:hover {
    background: #171d4d !important;
    transform: translateY(-3px) !important;
}

/* Botón seleccionado (verde) */
.listivo-app .listivo-panel-section .listivo-panel-packages .listivo-panel-package__button .listivo-simple-button--disabled,
.listivo-panel-package__button .listivo-simple-button--disabled {
    background: #10b981 !important;
    cursor: default !important;
}

/* Icono del check */
.listivo-app .listivo-panel-section .listivo-panel-packages .listivo-panel-package__button .listivo-simple-button__icon svg,
.listivo-panel-package__button .listivo-simple-button__icon svg {
    width: 22px !important;
    height: 22px !important;
    margin-right: 8px !important;
}

/* Características */
.listivo-app .listivo-panel-section .listivo-panel-packages .listivo-panel-package__value,
.listivo-panel-package__value {
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
    font-size: 16px !important;
}

.listivo-app .listivo-panel-section .listivo-panel-packages .listivo-panel-package__value > div:first-child,
.listivo-panel-package__value > div:first-child {
    color: #64748b !important;
    font-weight: 500 !important;
}

.listivo-app .listivo-panel-section .listivo-panel-packages .listivo-panel-package__value > div:last-child,
.listivo-panel-package__value > div:last-child {
    font-weight: 700 !important;
    color: #1F255C !important;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .listivo-app .listivo-panel-section .listivo-panel-packages,
    .listivo-panel-packages {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        padding: 0 16px !important;
    }

    .listivo-app .listivo-panel-section .listivo-panel-packages .listivo-panel-package,
    .listivo-panel-package {
        padding: 32px 20px !important;
    }

    .listivo-app .listivo-panel-section .listivo-panel-packages .listivo-panel-package__name,
    .listivo-panel-package__name {
        font-size: 21px !important;
    }

    .listivo-app .listivo-panel-section .listivo-panel-packages .listivo-panel-package__button .listivo-simple-button,
    .listivo-panel-package__button .listivo-simple-button {
        padding: 16px !important;
        width: 100% !important;
        min-width: auto !important;
    }
}