/**
 * WowStore - Mobile Premium Experience
 * ======================================
 * CSS global que mejora TODAS las vistas del sistema en móvil.
 * Cargado ÚLTIMO para override definitivo.
 *
 * Incluye:
 *   - Smooth scrolling & touch optimizations
 *   - Cards universales cuando data-label está presente
 *   - Grids responsive (news, testimonials)
 *   - Cart mobile UX (botón eliminar visible)
 *   - Modals premium touch-friendly
 *   - SweetAlert2 mobile polish
 *   - Animaciones suaves
 *   - Safe area insets (notch)
 */

/* =========================================================
   GLOBAL MOBILE FOUNDATIONS
   ========================================================= */
@media (max-width: 991.98px) {

    /* --- Smooth touch scrolling everywhere --- */
    * {
        -webkit-tap-highlight-color: transparent;
    }

    html, body {
        overflow-x: hidden !important;
        scroll-behavior: smooth;
    }

    /* --- Main content full-width --- */
    .main-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 0 80px 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .main-container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* --- Page titles compact --- */
    h2 {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
        padding: 0 0.75rem;
    }

    /* --- Table card universal --- */
    .table-card {
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        overflow: hidden !important;
    }

    .table-header {
        border-radius: 0 !important;
        padding: 0.7rem 0.85rem !important;
    }

    .table-header h5 {
        font-size: 0.9rem !important;
    }

    /* --- Ocultar filtros desktop --- */
    .filter-row {
        display: none !important;
    }

    /* --- Stat chips compact --- */
    .stat-chip {
        font-size: 0.65rem !important;
        padding: 0.2rem 0.4rem !important;
        border-radius: 6px !important;
    }

    .header-stats-row {
        gap: 0.35rem !important;
        flex-wrap: wrap !important;
    }

    /* --- Pagination mobile-friendly --- */
    .pagination-container {
        flex-direction: column !important;
        gap: 0.4rem !important;
        padding: 0.5rem 0.75rem !important;
        background: #fff !important;
    }

    .pagination-info {
        font-size: 0.72rem !important;
        text-align: center !important;
        color: #64748b !important;
    }

    .pagination-controls {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.35rem !important;
    }

    .pagination-buttons .btn,
    .pagination-buttons button {
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 0.3rem 0.5rem !important;
        font-size: 0.75rem !important;
        border-radius: 8px !important;
    }

    .per-page-select {
        font-size: 0.75rem !important;
        padding: 0.3rem 0.5rem !important;
        border-radius: 8px !important;
        min-height: 36px !important;
    }

    /* ========================================
       CART - MOBILE UX
       ======================================== */

    /* Botón eliminar SIEMPRE visible en touch (no hay hover) */
    .cart-item .btn-remove-item {
        opacity: 1 !important;
    }

    /* ========================================
       GRIDS RESPONSIVE - NEWS & TESTIMONIALS
       ======================================== */
    .news-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 0.75rem !important;
    }

    .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 0.75rem !important;
    }

    /* ========================================
       MODALS - PREMIUM MOBILE TOUCH
       ======================================== */

    /* Bootstrap modals */
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }

    .modal-content {
        border-radius: 20px !important;
        max-height: calc(100dvh - 1rem) !important;
        overflow: hidden !important;
    }

    .modal-body {
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain;
    }

    .modal-footer {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .modal-footer .btn {
        flex: 1 !important;
        min-width: 120px !important;
        min-height: 44px !important;
        border-radius: 10px !important;
    }

    /* SweetAlert2 - polish universal */
    .swal2-container {
        padding: 0.75rem !important;
        padding-bottom: calc(70px + 0.75rem) !important;
        align-items: center !important;
    }

    .swal2-popup {
        max-width: 92vw !important;
        max-height: calc(100dvh - 6rem) !important;
        max-height: calc(100vh - 6rem) !important;
        border-radius: 20px !important;
        font-size: 0.9rem !important;
    }

    .swal2-popup .swal2-html-container {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .swal2-title {
        font-size: 1.15rem !important;
    }

    .swal2-html-container {
        font-size: 0.85rem !important;
    }

    .swal2-actions {
        gap: 0.5rem !important;
    }

    .swal2-actions button {
        min-height: 44px !important;
        border-radius: 10px !important;
        font-size: 0.85rem !important;
        padding: 0.5rem 1.2rem !important;
    }

    /* ========================================
       SUPPORT FLOAT - CONSISTENT POSITIONING
       ======================================== */
    .support-status-float {
        bottom: 90px !important;
        right: 0.75rem !important;
        padding: 0.35rem 0.6rem !important;
        font-size: 0.65rem !important;
        border-radius: 20px !important;
        z-index: 999 !important;
    }

    /* ========================================
       BALANCE CARD (WALLET) - MOBILE
       ======================================== */
    .balance-card {
        border-radius: 16px !important;
        margin: 0 0.5rem 0.5rem !important;
    }

    /* ========================================
       ANIMATIONS - SMOOTH ENTRANCE
       ======================================== */
    .table-card,
    .news-card,
    .testimonial-card,
    .platform-card,
    .contact-card,
    .info-card,
    .cart-item,
    .balance-card {
        animation: mobileSlideUp 0.3s ease-out;
    }

    @keyframes mobileSlideUp {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }
}

/* =========================================================
   MÓVIL PEQUEÑO (≤ 575.98px)
   ========================================================= */
@media (max-width: 575.98px) {

    .table-header {
        padding: 0.6rem 0.7rem !important;
    }

    .table-header h5 {
        font-size: 0.82rem !important;
        gap: 0.35rem !important;
    }

    .stat-chip {
        font-size: 0.58rem !important;
        padding: 0.15rem 0.35rem !important;
    }

    /* Pagination aún más compacta */
    .pagination-container {
        padding: 0.4rem 0.5rem !important;
    }

    .pagination-buttons .btn,
    .pagination-buttons button {
        min-width: 32px !important;
        min-height: 32px !important;
        font-size: 0.68rem !important;
    }

    /* SweetAlert más compacto */
    .swal2-container {
        padding: 0.5rem !important;
        padding-bottom: calc(70px + 0.5rem) !important;
    }

    .swal2-popup {
        max-width: 95vw !important;
        max-height: calc(100dvh - 5.5rem) !important;
        max-height: calc(100vh - 5.5rem) !important;
        padding: 0.75rem !important;
    }

    .swal2-title {
        font-size: 1.05rem !important;
    }

    /* Cards universal */
    .news-card,
    .testimonial-card,
    .contact-card {
        border-radius: 14px !important;
    }

    /* Hero sections compact */
    .news-hero h1,
    .contact-hero h1 {
        font-size: 1.3rem !important;
    }

    .news-hero p,
    .contact-hero p {
        font-size: 0.8rem !important;
    }
}


/* =========================================================
   ORDERS.PHP - TABLA → CARDS PREMIUM
   ========================================================= */
@media (max-width: 991.98px) {

    /* Override: no usar table-responsive scroll en tablas convertidas a cards */
    .data-table[id="ordersTable"],
    .data-table[id="orderItemsTable"] {
        min-width: 0 !important;
    }

    /* Quitar overflow en wrappers de tablas convertidas a cards */
    .table-responsive:has(#ordersTable),
    .table-responsive:has(#orderItemsTable) {
        overflow: visible !important;
    }

    /* Ocultar thead solo en tablas convertidas a cards */
    .data-table[id="ordersTable"] thead,
    .data-table[id="orderItemsTable"] thead {
        display: none !important;
    }

    /* Notificaciones: tabla completamente oculta, se usan cards propias */
    .data-table[id="notificationsTable"] {
        display: none !important;
    }

    /* === ORDERS - Card Layout Premium === */
    .main-container .data-table[id="ordersTable"] {
        display: block !important;
        border: none !important;
        background: transparent !important;
        min-width: 0 !important;
    }

    .main-container .data-table[id="ordersTable"] tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.6rem !important;
        padding: 0.6rem !important;
    }

    .main-container .data-table[id="ordersTable"] tbody tr {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto auto !important;
        background: #fff !important;
        border-radius: 14px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03) !important;
        overflow: hidden !important;
        padding: 0 !important;
        border: none !important;
        transition: box-shadow 0.2s ease !important;
    }

    .main-container .data-table[id="ordersTable"] tbody tr:active {
        box-shadow: 0 1px 4px rgba(0,0,0,0.1), 0 0 0 1px rgba(102,126,234,0.15) !important;
    }

    .main-container .data-table[id="ordersTable"] tbody td {
        display: flex !important;
        flex-direction: column !important;
        padding: 0.45rem 0.7rem !important;
        border: none !important;
        font-size: 0.8rem !important;
        min-width: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        text-align: left !important;
        justify-content: center !important;
    }

    .main-container .data-table[id="ordersTable"] tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #94a3b8;
        font-size: 0.56rem;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        margin-bottom: 0.15rem;
        line-height: 1;
    }

    /* ── Nº Pedido - HEADER de la card ── */
    .main-container .data-table[id="ordersTable"] td[data-label="Pedido"] {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        background: linear-gradient(135deg, #667eea08, #764ba210) !important;
        border-bottom: 1px solid #e8ecf1 !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0.55rem 0.7rem !important;
    }

    .main-container .data-table[id="ordersTable"] td[data-label="Pedido"]::before {
        display: none !important;
    }

    .main-container .data-table[id="ordersTable"] td[data-label="Pedido"] .order-number-badge {
        font-size: 0.78rem !important;
        padding: 0.25rem 0.5rem !important;
        border-radius: 8px !important;
        background: rgba(102, 126, 234, 0.12) !important;
    }

    .main-container .data-table[id="ordersTable"] td[data-label="Pedido"] .order-type-badge {
        font-size: 0.58rem !important;
        padding: 0.15rem 0.4rem !important;
        border-radius: 6px !important;
    }

    /* ── Fecha ── */
    .main-container .data-table[id="ordersTable"] td[data-label="Fecha"] {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .main-container .data-table[id="ordersTable"] td[data-label="Fecha"] .order-date {
        font-size: 0.72rem !important;
        color: #475569 !important;
    }

    /* ── Cuentas ── */
    .main-container .data-table[id="ordersTable"] td[data-label="Cuentas"] {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .main-container .data-table[id="ordersTable"] td[data-label="Cuentas"] .items-count {
        width: fit-content !important;
        font-size: 0.72rem !important;
        padding: 0.1rem 0.4rem !important;
        min-width: 22px !important;
        height: 22px !important;
    }

    /* ── Total ── */
    .main-container .data-table[id="ordersTable"] td[data-label="Total"] {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .main-container .data-table[id="ordersTable"] td[data-label="Total"] .order-total {
        font-size: 0.85rem !important;
        color: #10b981 !important;
    }

    /* ── Método ── */
    .main-container .data-table[id="ordersTable"] td[data-label="Método"] {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    /* ── Estado ── */
    .main-container .data-table[id="ordersTable"] td[data-label="Estado"] {
        grid-column: 1 !important;
        grid-row: 4 !important;
        padding-bottom: 0.5rem !important;
    }

    .main-container .data-table[id="ordersTable"] td[data-label="Estado"] .status-badge {
        width: fit-content !important;
        font-size: 0.62rem !important;
        padding: 0.2rem 0.5rem !important;
        border-radius: 20px !important;
    }

    /* ── Acciones - FOOTER de la card ── */
    .main-container .data-table[id="ordersTable"] td[data-label="Acciones"] {
        grid-column: 2 !important;
        grid-row: 4 !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding-bottom: 0.5rem !important;
    }

    .main-container .data-table[id="ordersTable"] td[data-label="Acciones"]::before {
        display: none !important;
    }

    .main-container .data-table[id="ordersTable"] td[data-label="Acciones"] .action-buttons {
        flex-direction: row !important;
        gap: 0.35rem !important;
    }

    .main-container .data-table[id="ordersTable"] td[data-label="Acciones"] .btn-action {
        min-height: 32px !important;
        min-width: 32px !important;
        border-radius: 8px !important;
        font-size: 0.7rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.3rem 0.6rem !important;
    }

    /* ── Empty/loading rows ── */
    .main-container .data-table[id="ordersTable"] tr.empty-row,
    .main-container .data-table[id="ordersTable"] tr.loading-row {
        display: block !important;
        grid-template-columns: none !important;
        border-radius: 14px !important;
    }

    .main-container .data-table[id="ordersTable"] .empty-row td,
    .main-container .data-table[id="ordersTable"] .loading-row td {
        display: block !important;
    }

    .main-container .data-table[id="ordersTable"] .empty-row td::before,
    .main-container .data-table[id="ordersTable"] .loading-row td::before {
        display: none !important;
    }

    /* ── Orders: Header premium ── */
    .table-card .table-header {
        border-radius: 14px 14px 0 0 !important;
    }

    .table-card .table-header h5 {
        font-size: 1rem !important;
    }

    /* ── Orders: Paginación compacta ── */
    .table-card .pagination-container {
        padding: 0.6rem !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        border-radius: 0 0 14px 14px !important;
    }

    .table-card .pagination-info {
        font-size: 0.7rem !important;
        color: #94a3b8 !important;
        text-align: center !important;
    }

    .table-card .pagination-controls {
        width: 100% !important;
        justify-content: center !important;
    }

    .table-card .pagination-buttons {
        display: flex !important;
        gap: 0.2rem !important;
    }

    .table-card .page-btn {
        min-width: 32px !important;
        min-height: 32px !important;
        font-size: 0.72rem !important;
        border-radius: 8px !important;
        padding: 0.2rem !important;
    }

    .table-card .per-page-select {
        min-height: 32px !important;
        font-size: 0.72rem !important;
        border-radius: 8px !important;
        padding: 0.2rem 0.4rem !important;
    }

    /* ── Orders: Empty state premium ── */
    .main-container .data-table[id="ordersTable"] .empty-state {
        padding: 2rem 1.5rem !important;
        border-radius: 14px !important;
    }

    .main-container .data-table[id="ordersTable"] .empty-state-icon {
        width: 56px !important;
        height: 56px !important;
    }

    .main-container .data-table[id="ordersTable"] .empty-state h3 {
        font-size: 0.95rem !important;
    }

    .main-container .data-table[id="ordersTable"] .empty-state p {
        font-size: 0.78rem !important;
    }

    .main-container .data-table[id="ordersTable"] .btn-shop {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.78rem !important;
        border-radius: 10px !important;
    }

    /* === NOTIFICATIONS ===
     * La tabla de notificaciones ahora usa cards propias en notification/index.php.
     * La tabla se oculta completamente arriba con:
     * .data-table[id="notificationsTable"] { display: none !important; }
     */

    /* === ORDER DETAIL - Adaptive layout === */
    .order-header {
        flex-direction: column !important;
        text-align: center !important;
        gap: 0.5rem !important;
        padding: 1rem !important;
    }

    .order-header .btn-back {
        align-self: flex-start !important;
    }

    .order-header .order-price {
        font-size: 1.3rem !important;
    }

    /* Info cards → stack vertical */
    .order-detail-stats .row {
        gap: 0.5rem !important;
    }

    .info-card {
        border-radius: 12px !important;
        padding: 0.75rem !important;
    }

    /* Order detail table → cards */
    .data-table[id="orderItemsTable"] {
        display: block !important;
        min-width: 0 !important;
    }

    .data-table[id="orderItemsTable"] thead {
        display: none !important;
    }

    .data-table[id="orderItemsTable"] tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        padding: 0.5rem !important;
    }

    .data-table[id="orderItemsTable"] tbody tr {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        background: #fff !important;
        border-radius: 12px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
        overflow: hidden !important;
        padding: 0 !important;
        border: none !important;
    }

    .data-table[id="orderItemsTable"] tbody td {
        display: flex !important;
        flex-direction: column !important;
        padding: 0.35rem 0.6rem !important;
        border: none !important;
        font-size: 0.78rem !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .data-table[id="orderItemsTable"] tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #94a3b8;
        font-size: 0.55rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 0.1rem;
    }

    /* Platform header */
    .data-table[id="orderItemsTable"] td[data-label="Plataforma"],
    .data-table[id="orderItemsTable"] td:first-child {
        grid-column: 1 / -1 !important;
        background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
        border-bottom: 1px solid #e8ecf1 !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    /* Email full width */
    .data-table[id="orderItemsTable"] td[data-label="Email"] {
        grid-column: 1 / -1 !important;
    }

    .data-table[id="orderItemsTable"] td[data-label="Email"] .email-text {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }

    /* Password full width */
    .data-table[id="orderItemsTable"] td[data-label="Contraseña"] {
        grid-column: 1 / -1 !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    /* Copy button - full footer */
    .data-table[id="orderItemsTable"] td[data-label="Copiar"],
    .data-table[id="orderItemsTable"] td:last-child {
        grid-column: 1 / -1 !important;
        background: #f8fafb !important;
        border-top: 1px solid #edf0f3 !important;
    }

    .data-table[id="orderItemsTable"] td:last-child .btn-action,
    .data-table[id="orderItemsTable"] td:last-child .btn-copy-row {
        width: auto !important;
        height: auto !important;
        min-height: 34px !important;
    }

    /* Copy all button */
    .btn-copy-all {
        width: 100% !important;
        border-radius: 10px !important;
        min-height: 40px !important;
        font-size: 0.8rem !important;
    }

    /* Empty/loading rows - disable grid */
    .data-table[id="orderItemsTable"] tr.empty-row {
        display: block !important;
    }

    .data-table[id="orderItemsTable"] .empty-row td {
        display: block !important;
    }

    .data-table[id="orderItemsTable"] .empty-row td::before {
        display: none !important;
    }
}

/* Orders small screen adjustments */
@media (max-width: 575.98px) {
    .main-container .data-table[id="ordersTable"] tbody td {
        font-size: 0.72rem !important;
        padding: 0.3rem 0.5rem !important;
    }

    .main-container .data-table[id="ordersTable"] tbody td::before {
        font-size: 0.5rem !important;
    }

    .main-container .data-table[id="notificationsTable"] tbody td {
        font-size: 0.72rem !important;
        padding: 0.3rem 0.5rem !important;
    }

    .order-header {
        padding: 0.75rem !important;
    }

    .data-table[id="orderItemsTable"] tbody td {
        font-size: 0.72rem !important;
        padding: 0.3rem 0.5rem !important;
    }
}

/* =========================================================
   ORDERS CARDS - EXTRA COMPACTO (≤ 575px)
   ========================================================= */
@media (max-width: 575.98px) {
    .main-container .data-table[id="ordersTable"] tbody {
        gap: 0.5rem !important;
        padding: 0.4rem !important;
    }

    .main-container .data-table[id="ordersTable"] tbody tr {
        border-radius: 12px !important;
    }

    .main-container .data-table[id="ordersTable"] tbody td {
        padding: 0.35rem 0.55rem !important;
        font-size: 0.75rem !important;
    }

    .main-container .data-table[id="ordersTable"] tbody td::before {
        font-size: 0.52rem !important;
    }

    .main-container .data-table[id="ordersTable"] td[data-label="Pedido"] {
        padding: 0.45rem 0.55rem !important;
    }

    .main-container .data-table[id="ordersTable"] td[data-label="Pedido"] .order-number-badge {
        font-size: 0.72rem !important;
    }

    .table-card .pagination-buttons .page-btn {
        min-width: 28px !important;
        min-height: 28px !important;
        font-size: 0.65rem !important;
    }
}


/* =========================================================
   REPLACEMENTS - EXTRA POLISH (575.98px missing)
   ========================================================= */
@media (max-width: 575.98px) {
    /* Las reglas de 991px ya están en replacements.php inline,
       aquí solo polimos el breakpoint pequeño que faltaba */
    .main-container .data-table[id="replacementsTable"] tbody td {
        font-size: 0.72rem !important;
        padding: 0.3rem 0.5rem !important;
    }

    .main-container .data-table[id="replacementsTable"] tbody td::before {
        font-size: 0.5rem !important;
    }

    .main-container .data-table[id="replacementsTable"] tbody tr {
        border-radius: 10px !important;
    }
}


/* =========================================================
   MY REPORTS - CHAT MODAL PREMIUM MOBILE
   ========================================================= */
@media (max-width: 991.98px) {

    /* Chat modal - app-like experience */
    .chat-modal .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        max-height: 100% !important;
        height: 100% !important;
    }

    .chat-modal .modal-content {
        border-radius: 0 !important;
        height: 100% !important;
        max-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .chat-modal .modal-header {
        flex-shrink: 0 !important;
        padding: 0.75rem 1rem !important;
        border-radius: 0 !important;
    }

    .chat-modal .report-info-header {
        padding: 0.5rem 0.75rem !important;
        flex-shrink: 0 !important;
    }

    .chat-modal .chat-messages-container {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        padding: 0.75rem !important;
    }

    .chat-modal .message-bubble {
        max-width: 85% !important;
        border-radius: 16px !important;
        padding: 0.6rem 0.8rem !important;
        font-size: 0.82rem !important;
    }

    .chat-modal .message-bubble.user-message {
        border-bottom-right-radius: 4px !important;
    }

    .chat-modal .message-bubble.admin-message {
        border-bottom-left-radius: 4px !important;
    }

    .chat-modal .chat-input-container {
        flex-shrink: 0 !important;
        padding: 0.5rem 0.75rem !important;
        border-top: 1px solid #e2e8f0 !important;
        background: #fff !important;
        /* Safe area for bottom nav/notch */
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    .chat-modal .input-row {
        gap: 0.5rem !important;
    }

    .chat-modal .input-wrapper textarea {
        min-height: 40px !important;
        max-height: 100px !important;
        font-size: 0.85rem !important;
        border-radius: 20px !important;
        padding: 0.5rem 0.75rem !important;
    }

    .chat-modal .btn-send {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
    }

    .chat-modal .btn-attach {
        width: 36px !important;
        height: 36px !important;
    }

    /* Image preview bar */
    .chat-modal .image-preview-bar {
        padding: 0.4rem 0.5rem !important;
    }

    .chat-modal .image-preview-bar img {
        width: 48px !important;
        height: 48px !important;
        border-radius: 8px !important;
    }

    /* Lightbox fullscreen */
    .lightbox {
        z-index: 10600 !important;
    }

    .lightbox img {
        max-width: 95vw !important;
        max-height: 85vh !important;
        border-radius: 12px !important;
    }
}

/* =========================================================
   CONTACT PAGE - MOBILE POLISH
   ========================================================= */
@media (max-width: 991.98px) {
    .contact-hero {
        padding: 1.5rem 1rem !important;
        text-align: center !important;
    }

    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        padding: 0 0.75rem !important;
    }

    .info-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    .contact-card {
        border-radius: 14px !important;
    }

    .contact-form .btn[type="submit"] {
        width: 100% !important;
        min-height: 48px !important;
        border-radius: 12px !important;
        font-size: 0.9rem !important;
    }
}


/* =========================================================
   PAYMENT PENDING - MOBILE
   ========================================================= */
@media (max-width: 991.98px) {
    .payment-pending-container {
        margin: 70px auto 100px !important;
        padding: 0 0.75rem !important;
    }

    .pending-card {
        border-radius: 16px !important;
    }
}

@media (max-width: 575.98px) {
    .payment-pending-container {
        margin: 65px auto 90px !important;
        padding: 0 0.5rem !important;
    }
}


/* =========================================================
   SUCCESS PAGE - EXTRA POLISH
   ========================================================= */
@media (max-width: 575.98px) {
    .success-page .cred-text {
        max-width: none !important;
        font-size: 0.7rem !important;
        word-break: break-all !important;
    }
}


/* =========================================================
   NEWS ARTICLE MODAL - FULLSCREEN MOBILE
   ========================================================= */
@media (max-width: 575.98px) {
    .article-modal .modal-dialog {
        margin: 0.4rem !important;
        max-width: calc(100% - 0.8rem) !important;
    }

    .article-modal .modal-content {
        border-radius: 16px !important;
        max-height: calc(100dvh - 0.8rem) !important;
    }

    .article-modal .modal-body {
        padding: 0.75rem !important;
        font-size: 0.85rem !important;
        line-height: 1.7 !important;
    }
}


/* =========================================================
   WALLET MODALS - DEPOSIT & WITHDRAW
   ========================================================= */
@media (max-width: 575.98px) {
    .deposit-option {
        padding: 0.6rem !important;
        border-radius: 10px !important;
    }

    .deposit-option i {
        font-size: 1.1rem !important;
    }

    .withdraw-info-box {
        padding: 0.6rem !important;
        border-radius: 10px !important;
        font-size: 0.78rem !important;
    }

    /* Quick amount buttons */
    .quick-amount-btn {
        min-height: 40px !important;
        font-size: 0.78rem !important;
        border-radius: 8px !important;
    }
}


/* =========================================================
   SWAL-WIDE (Garantía & Renovación masiva) - MOBILE FIT
   ========================================================= */
@media (max-width: 991.98px) {
    .swal2-popup.swal-wide {
        max-width: min(420px, 92vw) !important;
        max-height: calc(100dvh - 6rem) !important;
        max-height: calc(100vh - 6rem) !important;
        border-radius: 18px !important;
        margin: 0 auto !important;
    }

    .swal2-popup.swal-wide .swal2-title {
        font-size: 1.05rem !important;
        padding: 0.8rem 1rem 0.4rem !important;
    }

    .swal2-popup.swal-wide .swal2-html-container {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 0.8rem !important;
        font-size: 0.82rem !important;
    }

    .swal2-popup.swal-wide .swal2-actions {
        padding: 0.6rem 0.8rem 0.8rem !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
    }

    .swal2-popup.swal-wide .swal2-actions button {
        min-height: 40px !important;
        font-size: 0.8rem !important;
        border-radius: 10px !important;
        padding: 0.5rem 1rem !important;
    }
}

@media (max-width: 575.98px) {
    .swal2-popup.swal-wide {
        max-width: 95vw !important;
        max-height: calc(100dvh - 5.5rem) !important;
        max-height: calc(100vh - 5.5rem) !important;
        border-radius: 14px !important;
    }

    .swal2-popup.swal-wide .swal2-title {
        font-size: 0.95rem !important;
        padding: 0.7rem 0.8rem 0.3rem !important;
    }

    .swal2-popup.swal-wide .swal2-html-container {
        padding: 0 0.7rem !important;
        font-size: 0.78rem !important;
    }

    .swal2-popup.swal-wide .swal2-html-container p {
        font-size: 0.78rem !important;
        margin-bottom: 0.4rem !important;
    }

    .swal2-popup.swal-wide .swal2-html-container div[style*="padding"] {
        padding: 0.6rem !important;
        margin: 0.5rem 0 !important;
    }

    .swal2-popup.swal-wide .swal2-actions {
        padding: 0.4rem 0.7rem 0.7rem !important;
    }

    .swal2-popup.swal-wide .swal2-actions button {
        flex: 1 !important;
        min-width: 0 !important;
    }
}


/* =========================================================
   SWAL2 RENEWAL MODALS - NUCLEAR MOBILE FIT
   Solución agresiva: el modal NUNCA sale del viewport.
   ========================================================= */

/* --- FUERA de media query: aplica siempre --- */
.swal2-popup.renewal-modal-popup {
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100dvh - 2rem) !important;
    max-height: calc(100vh - 2rem) !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
}

.swal2-popup.renewal-modal-popup .swal2-title {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.swal2-popup.renewal-modal-popup .swal2-html-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: none !important;
}

.swal2-popup.renewal-modal-popup .swal2-actions {
    flex-shrink: 0 !important;
    padding: 0.6rem 1rem 0.8rem !important;
    margin: 0 !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    background: #fff !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
}

/* Container: centrado perfecto (sin padding extra en desktop) */
.swal2-container:has(.renewal-modal-popup) {
    padding: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Fallback para navegadores sin :has() */
.swal2-container.swal2-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (max-width: 991.98px) {

    /* Agregar padding-bottom para nav bar en mobile */
    .swal2-container:has(.renewal-modal-popup) {
        padding-bottom: calc(70px + 0.75rem) !important;
    }

    .swal2-popup.renewal-modal-popup {
        max-width: calc(100vw - 2rem) !important;
        max-height: calc(100dvh - 6rem) !important;
        max-height: calc(100vh - 6rem) !important;
        border-radius: 18px !important;
        margin: 0 auto !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Header: ultra compacto */
    .swal2-popup.renewal-modal-popup .renewal-header {
        padding: 1rem 1rem 0.8rem !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Decoraciones del header: reducir para ganar espacio */
    .swal2-popup.renewal-modal-popup .renewal-header-circle {
        bottom: -70px !important;
        height: 70px !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-header-decoration {
        width: 140px !important;
        height: 140px !important;
        opacity: 0.15 !important;
    }

    /* Icono: mucho más pequeño */
    .swal2-popup.renewal-modal-popup .renewal-icon-wrapper {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.2rem !important;
        margin-bottom: 0.4rem !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-title {
        font-size: 1rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-subtitle {
        font-size: 0.75rem !important;
        margin-top: 0.15rem !important;
    }

    /* Body: padding reducido */
    .swal2-popup.renewal-modal-popup .renewal-body {
        padding: 0.6rem 0.8rem 0.3rem !important;
    }

    /* Info card: más compacta */
    .swal2-popup.renewal-modal-popup .renewal-info-card {
        padding: 0.5rem 0.6rem !important;
        margin-bottom: 0.5rem !important;
        border-radius: 8px !important;
        gap: 0.5rem !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-info-card .info-icon {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        font-size: 0.75rem !important;
        border-radius: 6px !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-info-card .info-text {
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
    }

    /* Specs: compactas */
    .swal2-popup.renewal-modal-popup .renewal-specs {
        gap: 0.35rem !important;
        margin-bottom: 0.5rem !important;
    }

    .swal2-popup.renewal-modal-popup .spec-box {
        padding: 0.4rem 0.5rem !important;
        border-radius: 8px !important;
        gap: 0.3rem !important;
    }

    .swal2-popup.renewal-modal-popup .spec-icon-mini {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        font-size: 0.65rem !important;
        border-radius: 6px !important;
    }

    .swal2-popup.renewal-modal-popup .spec-label {
        font-size: 0.55rem !important;
    }

    .swal2-popup.renewal-modal-popup .spec-value {
        font-size: 0.72rem !important;
    }

    /* Notice */
    .swal2-popup.renewal-modal-popup .renewal-notice {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.68rem !important;
        margin-bottom: 0.4rem !important;
        border-radius: 6px !important;
        line-height: 1.3 !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-time-notice {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.68rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Price card */
    .swal2-popup.renewal-modal-popup .renewal-price-card {
        padding: 0.5rem 0.6rem !important;
        margin-bottom: 0.5rem !important;
        border-radius: 8px !important;
    }

    .swal2-popup.renewal-modal-popup .price-label {
        font-size: 0.7rem !important;
    }

    .swal2-popup.renewal-modal-popup .price-value {
        font-size: 0.75rem !important;
    }

    .swal2-popup.renewal-modal-popup .price-value.highlight {
        font-size: 0.9rem !important;
    }

    /* Wallet */
    .swal2-popup.renewal-modal-popup .renewal-wallet {
        padding: 0.5rem !important;
        gap: 0.4rem !important;
        margin-bottom: 0.5rem !important;
        border-radius: 8px !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-wallet .wallet-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        font-size: 0.85rem !important;
        border-radius: 8px !important;
    }

    .swal2-popup.renewal-modal-popup .wallet-balance {
        font-size: 0.82rem !important;
    }

    /* Botones de acción */
    .swal2-popup.renewal-modal-popup .swal2-actions {
        padding: 0.5rem 0.8rem 0.7rem !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-btn-primary,
    .swal2-popup.renewal-modal-popup .renewal-btn-success,
    .swal2-popup.renewal-modal-popup .renewal-btn-manual,
    .swal2-popup.renewal-modal-popup .renewal-btn-crypto,
    .swal2-popup.renewal-modal-popup .renewal-btn-hybrid,
    .swal2-popup.renewal-modal-popup .renewal-btn-cancel {
        padding: 0.55rem 0.8rem !important;
        font-size: 0.78rem !important;
        border-radius: 8px !important;
        min-height: 38px !important;
    }

    /* Payment method options inside renewal-modal-popup */
    .swal2-popup.renewal-modal-popup .renewal-pm-option {
        padding: 0.5rem 0.6rem !important;
        border-radius: 10px !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-pm-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.85rem !important;
        border-radius: 8px !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-pm-icon svg {
        width: 14px !important;
        height: 14px !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-pm-check {
        width: 18px !important;
        height: 18px !important;
        font-size: 0.55rem !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-pm-name {
        font-size: 0.78rem !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-pm-desc {
        font-size: 0.65rem !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-pm-balance {
        font-size: 0.65rem !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-pm-label {
        font-size: 0.65rem !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-pm-badge {
        font-size: 0.5rem !important;
        padding: 0.12rem 0.4rem !important;
        top: -6px !important;
        right: 8px !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-providers-mini {
        gap: 0.2rem !important;
        margin-top: 0.2rem !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-provider-tag {
        font-size: 0.5rem !important;
        padding: 0.08rem 0.3rem !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-hybrid-breakdown {
        gap: 0.25rem !important;
        margin-top: 0.2rem !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-hybrid-part {
        font-size: 0.6rem !important;
        padding: 0.1rem 0.35rem !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-hybrid-part svg {
        width: 8px !important;
        height: 8px !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-hybrid-plus {
        font-size: 0.6rem !important;
    }

    /* Manual info banner */
    .swal2-popup.renewal-modal-popup .manual-info-banner {
        padding: 0.5rem !important;
        gap: 0.4rem !important;
        border-radius: 8px !important;
        margin-bottom: 0.5rem !important;
    }

    .swal2-popup.renewal-modal-popup .manual-info-banner .banner-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        font-size: 0.8rem !important;
    }

    .swal2-popup.renewal-modal-popup .manual-info-banner .banner-text strong {
        font-size: 0.72rem !important;
    }

    .swal2-popup.renewal-modal-popup .manual-info-banner .banner-text span {
        font-size: 0.65rem !important;
    }

    /* Badges */
    .swal2-popup.renewal-modal-popup .manual-platform-badge {
        font-size: 0.68rem !important;
        padding: 0.2rem 0.6rem !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-badge {
        font-size: 0.62rem !important;
        padding: 0.15rem 0.5rem !important;
    }

    /* Loading popup */
    .renewal-loading-popup {
        max-width: 220px !important;
        border-radius: 14px !important;
    }

    .renewal-loading {
        padding: 1.2rem !important;
    }

    .renewal-loading .spinner {
        width: 36px !important;
        height: 36px !important;
    }

    .renewal-loading p {
        font-size: 0.75rem !important;
    }

    /* 3-col specs */
    .swal2-popup.renewal-modal-popup .renewal-specs.three-cols {
        grid-template-columns: 1fr auto 1fr !important;
    }

    .swal2-popup.renewal-modal-popup .spec-box.arrow-box {
        font-size: 0.8rem !important;
        padding: 0.2rem !important;
    }
}

/* --- Pantallas MUY pequeñas --- */
@media (max-width: 575.98px) {
    .swal2-popup.renewal-modal-popup {
        max-width: calc(100vw - 0.75rem) !important;
        max-height: calc(100dvh - 5.5rem) !important;
        max-height: calc(100vh - 5.5rem) !important;
        border-radius: 14px !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-header {
        padding: 0.8rem 0.8rem 0.6rem !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-icon-wrapper {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
        margin-bottom: 0.3rem !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-title {
        font-size: 0.9rem !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-body {
        padding: 0.5rem 0.7rem 0.2rem !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-specs {
        grid-template-columns: 1fr !important;
        gap: 0.3rem !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-specs.three-cols {
        grid-template-columns: 1fr !important;
    }

    .swal2-popup.renewal-modal-popup .spec-box.arrow-box {
        display: none !important;
    }

    .swal2-popup.renewal-modal-popup .swal2-actions {
        padding: 0.4rem 0.7rem 0.6rem !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-btn-primary,
    .swal2-popup.renewal-modal-popup .renewal-btn-success,
    .swal2-popup.renewal-modal-popup .renewal-btn-manual,
    .swal2-popup.renewal-modal-popup .renewal-btn-crypto,
    .swal2-popup.renewal-modal-popup .renewal-btn-hybrid,
    .swal2-popup.renewal-modal-popup .renewal-btn-cancel {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Header decoration: aún más pequeña o invisible */
    .swal2-popup.renewal-modal-popup .renewal-header-decoration {
        width: 100px !important;
        height: 100px !important;
        opacity: 0.1 !important;
    }
}

/* --- Pantallas muy cortas en altura (landscape / phones cortos) --- */
@media (max-height: 650px) {
    .swal2-popup.renewal-modal-popup {
        max-height: calc(100dvh - 4rem) !important;
        max-height: calc(100vh - 4rem) !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-header {
        padding: 0.6rem 0.8rem 0.5rem !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-icon-wrapper {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.9rem !important;
        margin-bottom: 0.2rem !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-title {
        font-size: 0.85rem !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-body {
        padding: 0.4rem 0.6rem 0.2rem !important;
    }

    .swal2-popup.renewal-modal-popup .renewal-header-circle,
    .swal2-popup.renewal-modal-popup .renewal-header-decoration {
        display: none !important;
    }
}


/* =========================================================
   RENEWAL BULK MODAL - MOBILE FIT
   ========================================================= */

/* Always-centered container */
.swal2-container:has(.renewal-bulk-popup) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.75rem !important;
}

/* Base responsive: the popup never overflows */
.swal2-popup.renewal-bulk-popup {
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100dvh - 3rem) !important;
    max-height: calc(100vh - 3rem) !important;
    margin: 0 auto !important;
}

.swal2-popup.renewal-bulk-popup .swal2-html-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    max-height: none !important;
}

@media (max-width: 991.98px) {
    .swal2-container:has(.renewal-bulk-popup) {
        padding-bottom: calc(70px + 0.75rem) !important;
    }

    .swal2-popup.renewal-bulk-popup {
        max-width: min(380px, calc(100vw - 2rem)) !important;
        max-height: calc(100dvh - 6rem) !important;
        max-height: calc(100vh - 6rem) !important;
        border-radius: 18px !important;
    }

    .renewal-bulk-header {
        padding: 1.15rem 1rem 1rem !important;
    }

    .renewal-bulk-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.1rem !important;
        border-radius: 13px !important;
        margin-bottom: 0.4rem !important;
    }

    .renewal-bulk-title {
        font-size: 1rem !important;
    }

    .renewal-bulk-subtitle {
        font-size: 0.78rem !important;
    }

    .renewal-bulk-body {
        padding: 0.8rem 0.9rem 0.3rem !important;
    }

    .renewal-pm-option {
        padding: 0.55rem 0.7rem !important;
        border-radius: 10px !important;
    }

    .renewal-pm-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.9rem !important;
        border-radius: 9px !important;
    }

    .renewal-pm-icon svg {
        width: 15px !important;
        height: 15px !important;
    }

    .renewal-pm-name {
        font-size: 0.8rem !important;
    }

    .renewal-pm-desc {
        font-size: 0.68rem !important;
    }

    .renewal-pm-balance {
        font-size: 0.68rem !important;
    }

    .renewal-pm-label {
        font-size: 0.65rem !important;
    }

    .renewal-pm-badge {
        font-size: 0.5rem !important;
        padding: 0.12rem 0.4rem !important;
        top: -6px !important;
        right: 8px !important;
    }

    .renewal-providers-mini {
        gap: 0.2rem !important;
    }

    .renewal-provider-tag {
        font-size: 0.52rem !important;
        padding: 0.1rem 0.3rem !important;
    }

    .renewal-hybrid-breakdown {
        gap: 0.25rem !important;
    }

    .renewal-hybrid-part {
        font-size: 0.62rem !important;
        padding: 0.1rem 0.38rem !important;
    }

    .renewal-hybrid-part svg {
        width: 9px !important;
        height: 9px !important;
    }

    .renewal-hybrid-plus {
        font-size: 0.62rem !important;
    }

    .swal2-popup.renewal-bulk-popup .renewal-bulk-actions {
        padding: 0 0.9rem 0.9rem !important;
    }

    .swal2-popup.renewal-bulk-popup .renewal-bulk-actions button {
        min-height: 40px !important;
        font-size: 0.82rem !important;
        border-radius: 10px !important;
    }
}

@media (max-width: 575.98px) {
    .swal2-popup.renewal-bulk-popup {
        max-width: 95vw !important;
        max-height: calc(100dvh - 5.5rem) !important;
        max-height: calc(100vh - 5.5rem) !important;
        border-radius: 14px !important;
    }

    .renewal-bulk-header {
        padding: 1rem 0.8rem 0.8rem !important;
    }

    .renewal-bulk-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
        margin-bottom: 0.35rem !important;
    }

    .renewal-bulk-title {
        font-size: 0.92rem !important;
    }

    .renewal-bulk-body {
        padding: 0.7rem 0.8rem 0.2rem !important;
    }

    .renewal-summary-chip {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.55rem !important;
    }

    .renewal-bulk-total {
        padding: 0.6rem 0.7rem !important;
        font-size: 0.82rem !important;
    }

    .renewal-bulk-total strong {
        font-size: 1.05rem !important;
    }

    .renewal-pm-option {
        padding: 0.5rem 0.6rem !important;
        border-radius: 10px !important;
    }

    .renewal-pm-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.85rem !important;
    }

    .renewal-pm-icon svg {
        width: 14px !important;
        height: 14px !important;
    }

    .renewal-pm-name {
        font-size: 0.75rem !important;
    }

    .renewal-pm-desc {
        font-size: 0.64rem !important;
    }

    .renewal-pm-balance {
        font-size: 0.64rem !important;
    }

    .renewal-pm-check {
        width: 18px !important;
        height: 18px !important;
        font-size: 0.5rem !important;
    }

    .renewal-pm-badge {
        font-size: 0.48rem !important;
        top: -5px !important;
    }

    .renewal-provider-tag {
        font-size: 0.48rem !important;
        padding: 0.08rem 0.25rem !important;
    }

    .renewal-hybrid-part {
        font-size: 0.58rem !important;
        padding: 0.08rem 0.3rem !important;
    }

    .renewal-hybrid-part svg {
        width: 8px !important;
        height: 8px !important;
    }

    .swal2-popup.renewal-bulk-popup .renewal-bulk-actions button {
        flex: 1 !important;
        min-width: 0 !important;
    }
}


/* =========================================================
   GLOBAL SWAL2 OVERFLOW SAFETY NET
   Garantiza que NINGÚN popup de SweetAlert se salga del viewport.
   Aplica a todos los modales presentes y futuros.
   ========================================================= */

/* Centrado del container siempre */
.swal2-container.swal2-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Popup: nunca más ancho/alto que la pantalla */
.swal2-popup {
    max-width: calc(100vw - 1.5rem) !important;
    max-height: calc(100dvh - 3rem) !important;
    max-height: calc(100vh - 3rem) !important;
    margin: 0 auto !important;
}

/* html-container scrollable si el contenido es mucho */
.swal2-popup .swal2-html-container {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 991.98px) {
    .swal2-container.swal2-center {
        padding-bottom: calc(70px + 0.75rem) !important;
    }
    
    .swal2-popup {
        max-width: calc(100vw - 2rem) !important;
        max-height: calc(100dvh - 6rem) !important;
        max-height: calc(100vh - 6rem) !important;
    }
}

@media (max-width: 575.98px) {
    .swal2-popup {
        max-width: 95vw !important;
        max-height: calc(100dvh - 5.5rem) !important;
        max-height: calc(100vh - 5.5rem) !important;
    }
}


/* =========================================================
   SAFE AREA INSETS (notch / home indicator)
   ========================================================= */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 991.98px) {
        .main-content {
            padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
        }
    }
}