@charset "UTF-8";

/* =========================================================
   ContaPagos - Pagina de Planes y Precios (variante 2026 / azul)
   Estilos propios de preciosUsuarios-azul.php. Reutiliza las
   variables y clases compartidas de home-2026-azul.css
   (nav-2026, footer-2026, seccion-head, eyebrow, etc.).

   IMPORTANTE: estas reglas solo cambian apariencia. Los nombres
   de clase de abajo (plan-card, cart-item, notification, etc.)
   son generados por el <script> de la pagina: no se renombraron
   para no romper la logica del carrito.
   ========================================================= */

/* ---------- Encabezado de pagina (mini-hero) ---------- */

.page-header-2026 {
    position: relative;
    background: linear-gradient(135deg, #001f73 0%, #0032b9 55%, #142f8f 100%);
    overflow: hidden;
    padding: 72px 0 84px;
    text-align: center;
}

.page-header-2026 .wrap {
    position: relative;
    z-index: 1;
}

.page-header-2026 h1 {
    color: #fff;
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    margin: 1rem 0 .75rem;
}

.page-header-2026 p {
    color: #e3e9ff;
    font-size: 1.05rem;
    max-width: 600px;
    margin: 0 auto;
}

/* ---------- Icono flotante del carrito ---------- */

.cart-icon-container {
    position: fixed;
    top: 96px;
    right: 24px;
    z-index: 1040;
    cursor: pointer;
}

.cart-icon {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--violet));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: var(--shadow-lg);
    transition: transform .2s ease;
}

.cart-icon:hover {
    transform: translateY(-2px);
}

#contador {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--amber);
    color: #1e1b4b;
    font-size: .72rem;
    font-weight: 800;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

@media (max-width: 576px) {
    .cart-icon-container {
        top: 84px;
        right: 16px;
    }

    .cart-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}

/* ---------- Overlay + sidebar del carrito ---------- */

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 17, 32, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 1200;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

.cart-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 420px;
    max-width: 92vw;
    background: #fff;
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform .35s ease;
    z-index: 1300;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
}

.cart-sidebar.active {
    transform: translateX(0);
}

.cart-header {
    background: linear-gradient(135deg, var(--primary), var(--violet));
    color: #fff;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.cart-header h3 {
    margin: 0;
    font-size: 1.05rem;
    color: #fff;
    font-family: 'Sora', sans-serif;
    display: flex;
    align-items: center;
    gap: .55rem;
}

.close-cart {
    background: rgba(255, 255, 255, .18);
    border: 0;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.close-cart:hover {
    background: rgba(255, 255, 255, .3);
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.empty-cart-message {
    text-align: center;
    color: var(--text-muted);
    padding: 3rem 1rem;
}

.empty-cart-message i {
    font-size: 2.5rem;
    color: var(--border);
    margin-bottom: 1rem;
    display: block;
}

.empty-cart-message p {
    margin: 0 0 .3rem;
}

.cart-item {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: .85rem;
}

.cart-item.extra {
    border-left-color: var(--cyan);
}

.cart-item.folio {
    border-left-color: var(--amber);
}

.cart-item h5 {
    margin: 0 0 .6rem;
    font-size: .92rem;
    color: var(--ink);
}

.cart-item-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    font-size: .82rem;
    color: var(--text-muted);
}

.cart-item-subtotal {
    font-weight: 800;
    color: var(--ink);
}

.remove-item {
    background: none;
    border: 0;
    color: #ef4444;
    cursor: pointer;
    font-size: .9rem;
    padding: .3rem;
    flex-shrink: 0;
}

.remove-item:hover {
    color: #b91c1c;
}

.cart-footer {
    border-top: 1px solid var(--border);
    padding: 1.5rem;
    flex-shrink: 0;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: 800;
    font-size: 1.2rem;
    margin-bottom: 1.1rem;
    color: var(--ink);
    font-family: 'Sora', sans-serif;
}

.cart-actions {
    display: flex;
    gap: .75rem;
}

.btn2 {
    flex: 1;
    padding: .8rem 1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    transition: transform .2s ease, box-shadow .2s ease;
}

.btn2:hover {
    transform: translateY(-2px);
}

.btn2.btn-secondary {
    background: var(--surface-alt);
    color: var(--text);
    border-color: var(--border);
}

.btn2.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--cyan));
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 50, 185, .3);
}

/* ---------- Contenedores de secciones ---------- */

.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    align-items: start;
}

/* ---------- Tarjetas de plan ---------- */

.plan-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.plan-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.plan-card.disabled {
    opacity: .62;
}

.plan-card.disabled:hover {
    transform: none;
}

.plan-header {
    position: relative;
    background: linear-gradient(135deg, var(--primary), var(--cyan));
    color: #fff;
    padding: 1.75rem;
}

.plan-header.recomendado::before {
    content: "Más popular";
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--amber);
    color: #1e1b4b;
    font-size: .68rem;
    font-weight: 800;
    padding: .3rem .7rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.plan-header h3 {
    margin: 0 0 .3rem;
    font-size: 1.15rem;
    color: #fff;
}

.plan-header .subtitle {
    font-size: .82rem;
    color: rgba(255, 255, 255, .85);
    min-height: 1.1em;
}

.plan-price {
    margin-top: 1.1rem;
    display: flex;
    align-items: baseline;
    gap: .4rem;
}

.price-amount {
    font-family: 'Sora', sans-serif;
    font-size: 1.85rem;
    font-weight: 800;
}

.price-period {
    font-size: .78rem;
    color: rgba(255, 255, 255, .85);
}

.plan-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.plan-features {
    max-height: 260px;
    overflow-y: auto;
    margin-bottom: 1.25rem;
    padding-right: .4rem;
}

.feature-item {
    font-size: .84rem;
    color: var(--text);
    padding: .4rem 0;
    border-bottom: 1px dashed var(--border);
    line-height: 1.4;
}

.feature-item:last-child {
    border-bottom: 0;
}

.feature-item strong {
    display: block;
    margin-top: .5rem;
    font-size: .78rem;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.plan-actions {
    margin-top: auto;
}

.btn-plan {
    width: 100%;
    border: 0;
    border-radius: 999px;
    padding: .8rem 1rem;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: transform .2s ease, box-shadow .2s ease;
}

.btn-plan:hover:not(:disabled) {
    transform: translateY(-2px);
}

.btn-plan-primary {
    background: linear-gradient(135deg, var(--primary), var(--cyan));
    color: #fff;
    box-shadow: 0 10px 22px rgba(0, 50, 185, .3);
}

.btn-plan-primary:disabled {
    background: var(--accent);
    color: #fff;
    cursor: default;
    box-shadow: none;
}

.btn-plan-secondary {
    background: var(--surface-alt);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Tarjetas de modulos en modo "solo consulta": no se agregan al carrito,
   el boton lleva a Contactanos (ver MODULOS_SOLO_CONSULTA). */
.btn-plan-contacto {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    text-decoration: none;
}

.btn-plan-contacto:hover {
    background: var(--primary);
    color: #fff;
}

/* Selector +/- que aparece en el paquete RFC ya agregado al carrito, para
   sumar usuarios adicionales sin salir de la pagina (ver cambiarUsuariosPaqueteRFC). */
.plan-stepper {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

.plan-stepper-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--accent);
}

.plan-stepper-control {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .4rem .6rem;
}

.plan-stepper-control .stepper-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--cyan));
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease;
}

.plan-stepper-control .stepper-btn:hover {
    transform: scale(1.08);
}

.plan-stepper-control .stepper-cantidad {
    min-width: 1.5rem;
    text-align: center;
    font-weight: 800;
    font-size: 1rem;
    color: var(--ink);
}

.plan-stepper-hint {
    font-size: .72rem;
    color: var(--text-muted);
    text-align: center;
}

/* Nota de "usuario extra" propia de cada tarjeta (antes vivia junta con las
   de los otros 2 paquetes en .notas-paquetes-card). Se encadena con
   .plan-body a proposito: esta tarjeta vive dentro de .page-header-2026
   (hero azul), cuya regla ".page-header-2026 p" (color claro) tiene mas
   especificidad que una sola clase y de lo contrario le ganaria. */
.plan-body .plan-adicional {
    margin: 1rem 0 0;
    padding-top: .85rem;
    border-top: 1px dashed var(--border);
    font-size: .8rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.plan-body .plan-adicional i {
    color: var(--amber);
    margin-right: .3rem;
}

.plan-body .plan-adicional strong {
    color: var(--ink);
}

/* Nota de renovacion de folios, tambien propia de cada tarjeta (antes vivia
   junta en la tarjeta compartida .notas-paquetes-card, ya retirada). */
.plan-body .plan-nota {
    margin: .5rem 0 0;
    font-size: .74rem;
    font-style: italic;
    line-height: 1.4;
    color: var(--text-muted);
}

.plan-body .plan-nota i {
    color: var(--amber);
    margin-right: .3rem;
}

.requisito-plan {
    font-size: .76rem;
    color: var(--text-muted);
    margin-top: .65rem;
    text-align: center;
    line-height: 1.4;
}

/* ---------- Tarjeta de productos adicionales (extras) ---------- */

.extras-card {
    grid-column: 1 / -1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.extras-header {
    background: var(--surface-alt);
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid var(--border);
}

.extras-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.extras-body {
    padding: 1.5rem 1.75rem;
}

.extras-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.extra-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .9rem 1.1rem;
}

.extra-info {
    min-width: 0;
}

.extra-name {
    font-size: .85rem;
    color: var(--text);
    font-weight: 600;
    line-height: 1.35;
}

.extra-type {
    font-size: .72rem;
    color: var(--text-muted);
}

.extra-price {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
    font-size: .85rem;
    color: var(--ink);
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-extra {
    border: 0;
    background: var(--primary);
    color: #fff;
    border-radius: 999px;
    padding: .4rem .8rem;
    cursor: pointer;
    font-size: .72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.btn-extra:disabled {
    background: var(--border);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* ---------- Tarjetas de folios ---------- */

.folio-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease;
}

.folio-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.folio-header {
    background: linear-gradient(135deg, var(--violet), var(--primary));
    color: #fff;
    padding: 1.5rem;
}

.folio-header h3 {
    margin: 0 0 .25rem;
    color: #fff;
    font-size: 1.1rem;
}

.folio-header .subtitle {
    font-size: .8rem;
    color: rgba(255, 255, 255, .85);
}

.folio-price {
    margin-top: .75rem;
    display: flex;
    align-items: baseline;
    gap: .4rem;
}

.folio-body {
    padding: 1.25rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.folio-details {
    font-size: .82rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.folio-actions {
    margin-top: auto;
}

.btn-folio {
    width: 100%;
    border: 0;
    border-radius: 999px;
    padding: .7rem 1rem;
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
    background: linear-gradient(135deg, var(--violet), var(--primary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: transform .2s ease;
}

.btn-folio:hover:not(:disabled) {
    transform: translateY(-2px);
}

.btn-folio:disabled {
    background: var(--accent);
    cursor: default;
}

/* ---------- Notificaciones flotantes (toast) ---------- */

.notification {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: .65rem;
    background: #fff;
    border-radius: var(--radius-sm);
    padding: .9rem 1.25rem;
    box-shadow: var(--shadow-lg);
    font-size: .88rem;
    font-weight: 600;
    color: var(--text);
    border-left: 4px solid var(--accent);
    animation: notifSlideIn .3s ease;
    max-width: calc(100vw - 48px);
}

.notification.success {
    border-left-color: var(--accent);
}

.notification.success i {
    color: var(--accent);
}

.notification.error {
    border-left-color: #ef4444;
}

.notification.error i {
    color: #ef4444;
}

.notification.warning {
    border-left-color: var(--amber);
}

.notification.warning i {
    color: var(--amber);
}

.notification.info {
    border-left-color: var(--cyan);
}

.notification.info i {
    color: var(--cyan);
}

@keyframes notifSlideIn {
    from {
        transform: translateX(30px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@media (max-width: 576px) {
    .notification {
        left: 16px;
        right: 16px;
        top: 16px;
        max-width: none;
    }
}

/* ---------- Notas de los paquetes por RFC (las tarjetas de arriba
   reutilizan .plan-card / .plan-header / .plan-price / .modulo-beneficios,
   ya definidas arriba y en home-2026-azul.css) ---------- */

/* Selectores encadenados con .notas-paquetes-card a proposito: esta
   tarjeta ahora vive dentro de .page-header-2026 (hero azul), que trae
   text-align:center y reglas propias para sus "p" (color claro,
   max-width, margin:auto). Encadenar el selector le da mas especificidad
   para que la tarjeta se vea igual sin importar en que seccion la
   pongan despues. */

.notas-paquetes-card {
    text-align: left;
    margin-top: 1.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem;
    box-shadow: var(--shadow-md);
}

.notas-paquetes-card h4 {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1.1rem;
    font-family: 'Sora', sans-serif;
    font-size: .95rem;
    color: var(--ink);
    text-align: left;
}

.notas-paquetes-card h4 i {
    color: var(--primary);
}

.notas-paquetes-card .notas-paquetes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    text-align: left;
}

.notas-paquetes-card .notas-paquetes li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: .88rem;
    color: var(--text-muted);
    line-height: 1.5;
    text-align: left;
}

.notas-paquetes-card .notas-paquetes li i {
    color: var(--accent);
    margin-top: .2rem;
    flex-shrink: 0;
    font-size: .8rem;
}

.notas-paquetes-card .notas-paquetes li span {
    text-align: left;
}

.notas-paquetes-card .notas-paquetes li strong {
    color: var(--ink);
}

.notas-paquetes-card .nota-italica {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 1rem 0 0;
    padding-top: .9rem;
    border-top: 1px dashed var(--border);
    font-style: italic;
    font-size: .82rem;
    color: var(--text-muted);
    text-align: left;
    max-width: none;
}

.notas-paquetes-card .nota-italica i {
    color: var(--amber);
    margin-top: .15rem;
    flex-shrink: 0;
}

/* Cuando la nota es el unico contenido de la tarjeta (ya no hay lista de
   adicionales arriba, ahora cada uno vive en su propia tarjeta de plan)
   se quita la linea/espaciado que la separaba de esa lista. */
.notas-paquetes-card .nota-italica:only-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}