/* ============================================================
   Mi Internet — Portal de Clientes
   Mobile-First CSS
   Colores: #00B73B (verde principal), #FFFFFF (blanco)
   ============================================================ */

:root {
    --color-primary:       #00B73B;
    --color-primary-dark:  #009830;
    --color-primary-light: #e6f9ec;
    --color-white:         #FFFFFF;
    --color-bg:            #F4F7F4;
    --color-text:          #212529;
    --color-muted:         #6c757d;
    --touch-target:        48px;
    --border-radius:       0.75rem;
    --shadow-card:         0 2px 8px rgba(0,0,0,0.08);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }

body {
    background-color: var(--color-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    color: var(--color-text);
    -webkit-tap-highlight-color: transparent;
}

/* ── Bootstrap overrides ── */
.bg-primary-brand         { background-color: var(--color-primary) !important; }
.text-primary-brand       { color: var(--color-primary) !important; }
.border-primary-brand     { border-color: var(--color-primary) !important; }

.btn-primary {
    background-color: var(--color-primary);
    border-color:     var(--color-primary);
    min-height:       var(--touch-target);
    font-weight:      600;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary-dark);
    border-color:     var(--color-primary-dark);
}
.btn-outline-primary {
    color:        var(--color-primary);
    border-color: var(--color-primary);
    min-height:   var(--touch-target);
}
.btn-outline-primary:hover {
    background-color: var(--color-primary);
    border-color:     var(--color-primary);
}
.btn              { min-height: var(--touch-target); border-radius: 0.5rem; }
.btn-sm           { min-height: 36px; }
a                 { color: var(--color-primary); }
a:hover           { color: var(--color-primary-dark); }

/* ── Navbar ── */
.navbar.bg-white.border-bottom { border-bottom-width: 3px !important; }
.logo-nav  { object-fit: contain; }
.portal-label {
    font-weight: 700;
    font-size:   0.8rem;
    color:       var(--color-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Bottom nav ── */
.bottom-nav {
    box-shadow: 0 -2px 8px rgba(0,0,0,0.10);
    z-index: 1030;
    height: 62px;
}
.bottom-nav-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-decoration: none;
    color:          var(--color-muted);
    font-size:      0.68rem;
    gap:            2px;
    padding:        5px 10px;
    border-radius:  0.5rem;
    transition:     color 0.15s;
    min-width:      52px;
}
.bottom-nav-item i          { font-size: 1.3rem; line-height: 1; }
.bottom-nav-item.active,
.bottom-nav-item:hover      { color: var(--color-primary); }
.pb-nav                     { padding-bottom: 70px; }

/* ── Login / Activar ── */
.login-body { background: linear-gradient(135deg, #e6f9ec 0%, #d4f5e9 50%, #f4f7f4 100%); }

.login-wrapper {
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         1rem;
}
.login-card {
    background:    #fff;
    border-radius: 1rem;
    box-shadow:    0 8px 32px rgba(0,183,59,0.12), 0 2px 8px rgba(0,0,0,0.06);
    padding:       2rem 1.75rem;
    width:         100%;
    max-width:     400px;
}
.login-logo {
    display:    block;
    margin:     0 auto 1.25rem;
    max-height: 52px;
    max-width:  180px;
    object-fit: contain;
}

/* Indicador de pasos (activar.php) */
.step-pill {
    font-size:    0.72rem;
    font-weight:  600;
    padding:      4px 12px;
    border-radius: 20px;
    background:   #e9ecef;
    color:        var(--color-muted);
    transition:   all 0.2s;
}
.step-pill.active {
    background: var(--color-primary-light);
    color:      var(--color-primary);
}

/* ── Cards del portal ── */
.portal-card {
    background:    #fff;
    border-radius: var(--border-radius);
    box-shadow:    var(--shadow-card);
    padding:       1.25rem;
    margin-bottom: 1rem;
    border-left:   4px solid var(--color-primary);
    transition:    box-shadow 0.15s;
}
.portal-card:hover     { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.portal-card .card-icon {
    font-size:   2rem;
    color:       var(--color-primary);
    line-height: 1;
}

/* Servicio card */
.servicio-card {
    background:    #fff;
    border-radius: var(--border-radius);
    box-shadow:    var(--shadow-card);
    padding:       1.1rem 1rem;
    margin-bottom: 0.75rem;
    border-left:   4px solid var(--color-primary);
    cursor:        pointer;
    transition:    box-shadow 0.15s, border-color 0.15s;
    text-decoration: none;
    display:       block;
    color:         var(--color-text);
}
.servicio-card:hover   { box-shadow: 0 4px 16px rgba(0,0,0,0.12); color: var(--color-text); }
.servicio-card.suspendido { border-left-color: #dc3545; }
.servicio-card.inactivo   { border-left-color: #adb5bd; }
.servicio-card.moroso     { border-left-color: #ffc107; }

.servicio-plan {
    font-weight: 700;
    font-size:   1rem;
    margin-bottom: 2px;
}
.servicio-meta {
    font-size: 0.82rem;
    color:     var(--color-muted);
}

/* Menú de acciones del servicio */
.accion-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   0.75rem;
    margin-top:            0.5rem;
}
.accion-btn {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    background:      #fff;
    border:          2px solid var(--color-primary-light);
    border-radius:   var(--border-radius);
    padding:         1.1rem 0.5rem;
    text-decoration: none;
    color:           var(--color-text);
    font-size:       0.82rem;
    font-weight:     600;
    transition:      border-color 0.15s, box-shadow 0.15s, background 0.15s;
    min-height:      90px;
}
.accion-btn i       { font-size: 1.75rem; color: var(--color-primary); }
.accion-btn:hover   {
    border-color:    var(--color-primary);
    box-shadow:      0 2px 12px rgba(0,183,59,0.15);
    background:      var(--color-primary-light);
    color:           var(--color-text);
}
.accion-btn.pagar   { border-color: var(--color-primary); background: var(--color-primary-light); }
.accion-btn.pagar i { color: var(--color-primary-dark); }

/* ── Página de estado / diagnóstico ── */
.diagnostico-item {
    display:        flex;
    align-items:    center;
    gap:            0.75rem;
    padding:        0.75rem 0;
    border-bottom:  1px solid #f0f0f0;
}
.diagnostico-item:last-child { border-bottom: none; }
.diagnostico-icon {
    font-size:    1.4rem;
    width:        36px;
    text-align:   center;
    flex-shrink:  0;
}
.diagnostico-label  { font-size: 0.82rem; color: var(--color-muted); line-height: 1.2; }
.diagnostico-value  { font-weight: 700; font-size: 1rem; }

/* Indicador de estado online/offline */
.estado-dot {
    display:       inline-block;
    width:         10px;
    height:        10px;
    border-radius: 50%;
    margin-right:  6px;
    vertical-align: middle;
}
.estado-dot.online      { background: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,183,59,0.2); }
.estado-dot.offline     { background: #adb5bd; }
.estado-dot.suspendido  { background: #dc3545; box-shadow: 0 0 0 3px rgba(220,53,69,0.2); }

/* ── Tabla de boletas / historial ── */
.tabla-responsive-card {
    background:    #fff;
    border-radius: var(--border-radius);
    box-shadow:    var(--shadow-card);
    overflow:      hidden;
}
.tabla-responsive-card table { margin-bottom: 0; }
.tabla-responsive-card thead { background: var(--color-primary-light); }
.tabla-responsive-card thead th {
    font-size:  0.8rem;
    font-weight: 700;
    color:      var(--color-primary-dark);
    border:     none;
    padding:    0.75rem 1rem;
}
.tabla-responsive-card tbody td {
    font-size:  0.87rem;
    padding:    0.75rem 1rem;
    vertical-align: middle;
}

/* ── Formulario de soporte ── */
.soporte-tipo-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   0.5rem;
    margin-bottom:         1rem;
}
.soporte-tipo-btn {
    border:        2px solid #dee2e6;
    border-radius: 0.5rem;
    padding:       0.75rem 0.5rem;
    text-align:    center;
    cursor:        pointer;
    transition:    border-color 0.15s, background 0.15s;
    font-size:     0.82rem;
    font-weight:   600;
    background:    #fff;
}
.soporte-tipo-btn i        { display: block; font-size: 1.5rem; margin-bottom: 4px; color: var(--color-primary); }
.soporte-tipo-btn.selected {
    border-color: var(--color-primary);
    background:   var(--color-primary-light);
}
input[type="radio"].soporte-tipo-radio { display: none; }

/* ── Pago monto ── */
.monto-pendiente-card {
    background:    linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color:         #fff;
    border-radius: var(--border-radius);
    padding:       1.5rem;
    text-align:    center;
    margin-bottom: 1rem;
}
.monto-pendiente-card .monto-label { font-size: 0.9rem; opacity: 0.85; }
.monto-pendiente-card .monto-valor { font-size: 2.2rem; font-weight: 800; line-height: 1.1; }
.monto-pendiente-card .monto-desc  { font-size: 0.78rem; opacity: 0.75; margin-top: 4px; }

/* ── WiFi form ── */
.wifi-card {
    background:    #fff;
    border-radius: var(--border-radius);
    box-shadow:    var(--shadow-card);
    padding:       1.5rem;
}
.wifi-card .wifi-icon {
    font-size:   3rem;
    color:       var(--color-primary);
    text-align:  center;
    display:     block;
    margin-bottom: 1rem;
}

/* ── Inputs táctiles ── */
.form-control,
.form-select {
    min-height:    var(--touch-target);
    border-radius: 0.5rem;
    font-size:     1rem;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow:   0 0 0 0.2rem rgba(0, 183, 59, 0.2);
}
.input-group-text {
    background:    var(--color-primary-light);
    border-color:  #ced4da;
    color:         var(--color-primary-dark);
}

/* ── Sección título ── */
.section-title {
    font-size:     1.1rem;
    font-weight:   800;
    color:         var(--color-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary-light);
}

/* ── Badge de deuda ── */
.badge-deuda {
    background:    #dc3545;
    color:         #fff;
    border-radius: 20px;
    padding:       2px 10px;
    font-size:     0.72rem;
    font-weight:   700;
}

/* ── Responsive desktop ── */
@media (min-width: 768px) {
    .accion-grid { grid-template-columns: repeat(3, 1fr); }
    .soporte-tipo-grid { grid-template-columns: repeat(3, 1fr); }
    .login-card { padding: 2.5rem 2.5rem; }
}

@media (min-width: 992px) {
    .accion-grid { grid-template-columns: repeat(4, 1fr); }
    .bottom-nav  { display: none !important; }
    .pb-nav      { padding-bottom: 1rem; }
    /* Sidebar en desktop */
    .portal-layout    { display: flex; gap: 1.5rem; }
    .portal-sidebar   { width: 240px; flex-shrink: 0; }
    .portal-content   { flex: 1; min-width: 0; }
}

/* ============================================================
   Mejoras de escritorio — estilo profesional
   ============================================================ */

/* ── Sidebar: bloque de usuario ── */
.sidebar-user-block {
    display:       flex;
    align-items:   center;
    gap:           0.65rem;
    padding:       0.75rem 0.85rem;
    border-radius: 0.6rem;
    background:    var(--color-bg);
    margin-bottom: 0.25rem;
}
.sidebar-avatar {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      var(--color-primary-light);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-primary);
    font-size:       1.05rem;
    flex-shrink:     0;
}
.sidebar-name {
    font-weight:   700;
    font-size:     0.82rem;
    color:         var(--color-text);
    line-height:   1.2;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    max-width:     155px;
}
.sidebar-rut {
    font-size: 0.7rem;
    color:     var(--color-muted);
}

/* ── Sidebar: separador ── */
.sidebar-divider {
    height:     1px;
    background: #f0f0f0;
    margin:     0.4rem 0.4rem;
}

/* ── Sidebar: label de sección ── */
.sidebar-section-label {
    display:        block;
    font-size:      0.65rem;
    font-weight:    700;
    color:          #bdc3c7;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding:        0.75rem 0.85rem 0.2rem;
}

/* ── Sidebar: ítems de navegación ── */
.sidebar-nav-item {
    display:         flex;
    align-items:     center;
    gap:             0.65rem;
    padding:         0.6rem 0.85rem;
    border-radius:   0.5rem;
    color:           var(--color-muted);
    text-decoration: none;
    font-weight:     600;
    font-size:       0.875rem;
    transition:      background 0.15s, color 0.15s;
    white-space:     nowrap;
}
.sidebar-nav-item i {
    font-size:   1.05rem;
    width:       20px;
    text-align:  center;
    flex-shrink: 0;
}
.sidebar-nav-item:hover {
    background: var(--color-primary-light);
    color:      var(--color-primary);
}
.sidebar-nav-item.active {
    background:  var(--color-primary-light);
    color:       var(--color-primary);
    font-weight: 700;
}
.sidebar-nav-item.danger     { color: #c0392b; }
.sidebar-nav-item.danger:hover {
    background: #fef2f2;
    color:      #dc3545;
}

/* ── Greeting card (dashboard) ── */
.dashboard-greeting {
    background:    #fff;
    border-radius: var(--border-radius);
    box-shadow:    var(--shadow-card);
    padding:       1rem 1.25rem;
    margin-bottom: 1.25rem;
}

/* ── Chevron en tarjetas de servicio (solo desktop) ── */
.servicio-chevron { display: none; }

/* ── Desktop: mejoras específicas (≥ 992px) ── */
@media (min-width: 992px) {

    /* Layout centrado con max-width */
    .portal-layout {
        max-width:    1260px;
        margin-left:  auto;
        margin-right: auto;
        padding:      1.75rem 2rem 0.5rem;
        align-items:  flex-start;
    }
    /* El portal-layout maneja el espacio; ajustamos pb-nav en desktop */
    main.pb-nav { padding-bottom: 2rem; }

    /* Sidebar como card flotante */
    .portal-sidebar {
        background:    #fff;
        border-radius: var(--border-radius);
        box-shadow:    var(--shadow-card);
        padding:       0.75rem;
        position:      sticky;
        top:           1.5rem;
    }

    /* Greeting: variante desktop con gradiente */
    .dashboard-greeting {
        padding:       1.75rem 2rem;
        background:    linear-gradient(120deg, #f0fdf4 0%, #fff 65%);
        border:        1px solid #d4edd9;
        margin-bottom: 1.75rem;
    }
    .dashboard-greeting h2 { font-size: 1.65rem !important; }

    /* Tarjetas de servicio — más polish en desktop */
    .servicio-card   { padding: 1.4rem 1.5rem; }
    .servicio-card:hover {
        transform:  translateY(-2px);
        box-shadow: 0 6px 22px rgba(0,0,0,0.10);
    }
    .servicio-plan   { font-size: 1.1rem; }
    .servicio-meta   { font-size: 0.85rem; margin-top: 4px; }

    /* Chevron visible en desktop */
    .servicio-chevron {
        display:     flex;
        align-items: center;
        font-size:   1.2rem;
        color:       #dee2e6;
        transition:  color 0.15s, transform 0.15s;
        flex-shrink: 0;
        margin-left: 0.5rem;
    }
    .servicio-card:hover .servicio-chevron {
        color:     var(--color-primary);
        transform: translateX(3px);
    }

    /* Botones de acción — más grandes en desktop */
    .accion-btn {
        padding:    1.5rem 0.75rem;
        min-height: 120px;
        font-size:  0.9rem;
    }
    .accion-btn i    { font-size: 2rem; }
    .accion-btn:hover { transform: translateY(-2px); }

    /* Section title */
    .section-title {
        font-size:     1.2rem;
        margin-bottom: 1.5rem;
    }

    /* Múltiples servicios: grid de 2 columnas */
    .servicios-lista {
        display:               grid;
        grid-template-columns: repeat(2, 1fr);
        gap:                   1rem;
        align-items:           start;
    }
}

@media (min-width: 1400px) {
    .portal-layout { padding: 2rem 3rem; }
}

/* ============================================================
   Página de pago — estado de servicio y opciones
   ============================================================ */

/* ── Card de estado de expiración ── */
.pago-estado-card {
    background:    #fff;
    border-radius: var(--border-radius);
    box-shadow:    var(--shadow-card);
    padding:       1.5rem;
    margin-bottom: 1.25rem;
    display:       flex;
    align-items:   center;
    gap:           1.25rem;
    border-left:   4px solid var(--color-primary);
}
.pago-estado-card.vencido   { border-left-color: #dc3545; }
.pago-estado-card.por-vencer { border-left-color: #ffc107; }

.pago-estado-icon {
    font-size:   2.5rem;
    line-height: 1;
    flex-shrink: 0;
}
.pago-estado-card.vencido    .pago-estado-icon { color: #dc3545; }
.pago-estado-card.por-vencer .pago-estado-icon { color: #e8a000; }
.pago-estado-card.al-dia     .pago-estado-icon { color: var(--color-primary); }

.pago-dias-num {
    font-size:   2.2rem;
    font-weight: 800;
    line-height: 1;
    color:       var(--color-primary);
}
.pago-estado-card.vencido    .pago-dias-num  { color: #dc3545; }
.pago-estado-card.por-vencer .pago-dias-num  { color: #e8a000; }

.pago-dias-label {
    font-size:   0.72rem;
    color:       var(--color-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pago-estado-titulo {
    font-weight: 700;
    font-size:   1rem;
    margin-bottom: 2px;
}
.pago-estado-subtitulo {
    font-size: 0.83rem;
    color:     var(--color-muted);
}

/* ── Grid de opciones de pago (desktop: 2 columnas) ── */
.pago-opciones-grid {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    margin-bottom:  1.25rem;
}

/* ── Tarjeta de selección de servicio (pago multi-servicio) ── */
.servicio-pago-card {
    display:         block;
    width:           100%;
    background:      #fff;
    border-radius:   var(--border-radius);
    box-shadow:      var(--shadow-card);
    padding:         1rem 1.1rem;
    margin-bottom:   0.65rem;
    border:          1px solid #e9ecef;
    border-left:     4px solid var(--color-primary);
    cursor:          pointer;
    transition:      border-color 0.15s, box-shadow 0.15s;
    color:           var(--color-text);
    user-select:     none;
}
.servicio-pago-card:hover {
    border-color:    var(--color-primary);
    box-shadow:      0 4px 16px rgba(0,183,59,0.10);
}
.servicio-pago-card:has(.srv-check:checked) {
    border-color:    var(--color-primary);
    box-shadow:      0 2px 10px rgba(0,183,59,0.12);
}
.servicio-pago-card.border-danger {
    border-left-color: #dc3545;
}
.servicio-pago-card.border-danger:hover,
.servicio-pago-card.border-danger:has(.srv-check:checked) {
    border-color:    #dc3545;
}
.servicio-pago-card.border-warning {
    border-left-color: #ffc107;
}
.servicio-pago-card.border-warning:hover,
.servicio-pago-card.border-warning:has(.srv-check:checked) {
    border-color:    #ffc107;
}
.servicio-pago-card .monto-servicio {
    font-size:   1.15rem;
    font-weight: 700;
    white-space: nowrap;
    color:       var(--color-text);
}
.servicio-pago-card .monto-label {
    font-size: 0.7rem;
    color:     var(--color-muted);
}

/* ── Tarjeta de opción de pago ── */
.pago-opcion-card {
    background:    #fff;
    border-radius: var(--border-radius);
    box-shadow:    var(--shadow-card);
    padding:       1.5rem;
    border:        2px solid transparent;
    transition:    border-color 0.15s, box-shadow 0.15s;
    position:      relative;
    overflow:      hidden;
}
.pago-opcion-card:hover {
    border-color: var(--color-primary-light);
    box-shadow:   0 4px 16px rgba(0,183,59,0.10);
}
.pago-opcion-card.destacada {
    border-color: var(--color-primary);
    background:   linear-gradient(135deg, #f9fffe 0%, #fff 100%);
}
.pago-opcion-card.destacada:hover {
    box-shadow: 0 4px 20px rgba(0,183,59,0.18);
}

.pago-opcion-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    font-size:     0.68rem;
    font-weight:   700;
    padding:       3px 10px;
    border-radius: 20px;
    background:    var(--color-primary);
    color:         #fff;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pago-opcion-badge.badge-next {
    background: #6c757d;
}

.pago-opcion-titulo {
    font-size:   1.05rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}
.pago-opcion-titulo i { color: var(--color-primary); font-size: 1.2rem; }

.pago-opcion-desc {
    font-size:     0.83rem;
    color:         var(--color-muted);
    margin-bottom: 1.25rem;
    line-height:   1.5;
}

.pago-opcion-beneficios {
    list-style:    none;
    padding:       0;
    margin:        0 0 1.25rem;
    display:       flex;
    flex-direction: column;
    gap:           6px;
}
.pago-opcion-beneficios li {
    display:   flex;
    align-items: flex-start;
    gap:       6px;
    font-size: 0.82rem;
    color:     var(--color-text);
}
.pago-opcion-beneficios li i {
    color:      var(--color-primary);
    font-size:  0.9rem;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Desktop: opciones lado a lado ── */
@media (min-width: 768px) {
    .pago-opciones-grid {
        flex-direction: row;
        align-items:    stretch;
    }
    .pago-opcion-card { flex: 1; }
    .pago-estado-card { padding: 1.75rem; }
}

/* ── Selector de tabs de pago (Pagar / Pago automático) ── */
.pago-tab-selector {
    display:        grid;
    grid-template-columns: 1fr 1fr;
    gap:            0.75rem;
}

.pago-tab-btn {
    display:        flex;
    align-items:    center;
    gap:            0.85rem;
    width:          100%;
    background:     #fff;
    border:         2px solid #e2e8e2;
    border-radius:  var(--border-radius);
    padding:        1rem 1.1rem;
    cursor:         pointer;
    text-align:     left;
    transition:     border-color 0.15s, box-shadow 0.15s, background 0.15s;
    box-shadow:     var(--shadow-card);
    color:          var(--color-text);
}
.pago-tab-btn:hover {
    border-color:   #0d6efd;
    background:     #eff4ff;
    box-shadow:     0 4px 16px rgba(13,110,253,0.13);
}
.pago-tab-btn.active {
    border-color:   #0d6efd;
    background:     #eff4ff;
    box-shadow:     0 4px 18px rgba(13,110,253,0.18);
}
.pago-tab-icon {
    font-size:      1.8rem;
    color:          #ccc;
    flex-shrink:    0;
    transition:     color 0.15s;
    line-height:    1;
}
.pago-tab-btn.active  .pago-tab-icon,
.pago-tab-btn:hover   .pago-tab-icon { color: #0d6efd; }

.pago-tab-titulo {
    font-weight:    700;
    font-size:      0.92rem;
    line-height:    1.2;
    margin-bottom:  2px;
}
.pago-tab-desc {
    font-size:      0.72rem;
    color:          var(--color-muted);
    line-height:    1.3;
}
.pago-tab-btn.active .pago-tab-desc { color: #0a58ca; }

/* Mobile: icono más pequeño, texto compacto */
@media (max-width: 480px) {
    .pago-tab-selector { gap: 0.5rem; }
    .pago-tab-btn      { padding: 0.75rem 0.75rem; gap: 0.6rem; }
    .pago-tab-icon     { font-size: 1.4rem; }
    .pago-tab-titulo   { font-size: 0.82rem; }
    .pago-tab-desc     { display: none; }
}