@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');


/* 
=================================================
	Theme Name: WebSuscripciones	
	Version: 1.0.0
=================================================
*/

/* ==========================================
   1. Variables
   ========================================== */

:root {
    --primary: #24337C;
    --gris: #8E8E8E;
    --border: #DEE2E6;
    --success: #198754;
    --background: #E9EBF2;
    --margin: 30px;
    --text: #475569
}



/* ==========================================
   2. Fuentes
   ========================================== */

/*fuente Rubik*/



/* ==========================================
   3. Generales
   ========================================== */

body {
    font-family: "Rubik", sans-serif !important;
    background-color: #fff;
    font-size: 16px;
    line-height: 1.4;
    color: var(--text);
    font-weight: 400;
    /*margin: 3%;*/
}

::selection {
    background: var(--primary); /* Color de fondo deseado (ejemplo: azul) */
    color: white; /* Color del texto seleccionado (ejemplo: blanco) */
}

h1,
h2,
h3,
h4,
h5,
h6,
b,
strong {
    font-weight: 500
}

a:hover {
    text-decoration: none
}

a,
.btn-link,
.text-primary {
    color: var(--primary) !important
}

.btn-link:focus {
    border-color: transparent !important
}

iframe,
embed {
    border: 0
}

.alignfull {
    margin-left: calc(-100vw / 2 + 100% / 2) !important;
    margin-right: calc(-100vw / 2 + 100% / 2) !important;
    max-width: 100vw !important;
    flex-basis: auto !important
}

.text-bg-primary {
    background-color: var(--primary) !important
}

.alert {
    font-size: 13px
}

.margin-bottom {
    margin-bottom: var(--margin) !important
}

.margin-top {
    margin-top: var(--margin) !important
}

img {
    max-width: 100%;
    height: auto
}

small {
    font-size: 12px
}


/* ==========================================
   4. Formularios
   ========================================== */
h3.subtitulo {
    font-size: 19px;
    color: var(--primary);
    margin-bottom: var(--margin)
}

h5.subtitulo {
    font-size: 19px;
    color: var(--primary);
    margin-bottom: var(--margin)
}

label {
    display: block;
    font-size: 12px;
    margin-bottom: 4px !important;
    text-transform: uppercase
}

textarea {
    height: 230px !important
}

.form-control,
.btn,
.form-select {
    height: 50px;
    align-items: center;
}

.btn-sm {
    height: 32px
}

input:focus,
textarea:focus,
button:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--primary) !important
}

button,
input[type="submit"],
.btn {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    gap: 8px;
    padding-left: 15px;
    padding-right: 15px;
    justify-content: center
}

    button i,
    input[type="submit"] i,
    .btn i {
        font-size: 24px
    }

.btn-outline-primary,
.btn-outline-primary:disabled {
    color: var(--primary);
    border-color: var(--primary)
}

    .btn-outline-primary:hover,
    .btn-outline-primary:active,
    .btn-outline-primary:focus-visible {
        background-color: var(--primary) !important;
        border-color: var(--primary) !important
    }

.btn-primary,
.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
    background-color: var(--primary);
    border-color: var(--primary);
    opacity: 1 !important;
}

.btn-primary:hover{
    background-color: var(--primary);
    border-color: var(--primary);
}

a.btn-outline-primary,
a.btn-outline-primary:visited {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}

    a.btn-outline-primary:hover,
    a.btn-outline-primary:focus {
        color: #fff !important;
        background-color: var(--primary) !important;
        border-color: var(--primary) !important;
    }

input:focus,
input:focus-visible,
button:focus,
button:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
    outline: none !important;
    box-shadow: none !important
}

.form-control:focus {
    border-color: var(--primary)
}

input::placeholder {
    color: #8E8E8E !important
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary)
}

input[type="radio"]:focus,
input[type="checkbox"]:focus {
    border-bottom-width: 1px
}

.card {
    border-color: #DEE2E6
}

.card .card-body {
    padding: 30px
}



/* ==========================================
   5. HEADER
   ========================================== */

header {
    padding: 15px 0;
    margin-bottom: var(--margin);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05)
}

#header figure {
    margin: 0;
}

header img.logotipo {
    max-width: 430px
}

ul.navbar-nav > li.nav-item {
    padding: 8px 0;
    border-bottom: 1px solid #ccc
}

    ul.navbar-nav > li.nav-item i {
        margin-right: 5px
    }

    ul.navbar-nav > li.nav-item > .dropdown-menu {
        border: 0;
        padding-top: 0
    }



/* ==========================================
   6. FOOTER
   ========================================== */

footer {
    background-color: #E9EBF2;
    color: #000;
    padding: 50px 15px;
    border-top: 10px solid var(--primary)
}

    footer p,
    footer ul {
        font-size: 14px;
        margin-bottom: 0
    }

    footer h3 {
        font-size: 14px;
        font-weight: 600
    }

    footer .container--logotipo-footer {
        padding-bottom: 50px;
        margin-bottom: 50px;
        border-bottom: 1px solid var(--primary)
    }

    footer figure {
        margin-bottom: 0
    }

    footer img.logotipo-footer {
        max-width: 360px;
        height: auto
    }

    footer p {
        margin-bottom: 15px
    }

    footer a {
        color: var(--primary);
        text-decoration: none
    }

    footer p a.featured {
        font-size: 27px;
        font-weight: 400;
        color: var(--primary)
    }

    footer ul li {
        margin-bottom: 10px
    }

        footer ul li a {
            color: #000
        }

    footer a:hover {
        text-decoration: underline
    }

    footer .btn {
        display: inline-flex
    }

        footer .btn:hover {
            text-decoration: none
        }



/* ==========================================
   7. BREADCRUMBS
   ========================================== */

ul.breadcrumbs {
    position: relative;
    z-index: 50;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    margin: 0 !important;
    gap: 10px;
    list-style: none !important
}

    ul.breadcrumbs li {
        font-size: 14px
    }

        ul.breadcrumbs li a {
            color: var(--primary)
        }



/* ==========================================
   8. HOME PAGE
   ========================================== */


section.productos-portada {
    margin-bottom: 50px
}

h1.titulo-portada {
    font-family: Georgia, "Rubik", sans-serif !important;
    font-size: 36px;
    font-weight: bold
}

.txtGeorgia {
    font-family: Georgia !important;
}


.bajada-portada {
    font-size: 18px;
    margin-bottom: var(--margin);
    color: var(--text)
}

.nav-pills.tabs-detalle-producto {
    position: relative;
    font-size: 16px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch
}

    .nav-pills.tabs-detalle-producto:after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: #F4F4F4;
        z-index: -1
    }

    .nav-pills.tabs-detalle-producto .nav-link {
        background-color: transparent !important;
        border-bottom: 1px solid #F4F4F4;
        border-radius: 0;
        padding: 12px 30px;
        color: #64748B;
        white-space: nowrap;
        text-transform: none;
        margin-top: 1px
    }

        .nav-pills.tabs-detalle-producto .nav-link:hover {
            border-bottom-color: var(--primary);
            border-bottom-width: 2px;
            color: var(--primary);
            margin-top: 0
        }

        .nav-pills.tabs-detalle-producto .nav-link.active {
            border-bottom-color: var(--primary);
            border-bottom-width: 2px;
            color: var(--primary);
            font-weight: 500;
            margin-top: 0
        }

.tab-pane ul li,
ul.lista-detalle-producto li {
    margin-bottom: 15px
}


.card-plan {
    transition: transform 0.25s ease, box-shadow 0.25s ease
}

.card-plan:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,.05);
}

.card-plan a {
    height: 100%;
    text-decoration: none
}

.top-info-card {
    margin-bottom: 25px
}

.badge-plan {
    display: inline-block;
    background-color: #F0F6FF;
    border: 1px solid #DBEAFE;
    border-radius: 5px;
    padding: 2px 10px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 20px
}

.card-plan figure {
    margin-bottom: 20px
}

.card-plan h3 {
    margin-bottom: 5px;
    font-family: "Rubik", sans-serif !important;
    font-size: 23px;
    color: var(--primary)
}

.despliegue-producto .productos-portada .card-plan p {
    margin: 0;
    color: #64748B;
}

.bottom-info-card {
    border-top: 1px solid var(--border);
    padding-top: 20px;
    margin-top: auto
}

.despliegue-producto .productos-portada .card-plan p.valor-plan {
    font-size: 24px;
    margin-bottom: 15px
}

.card-plan p.valor-plan strong {
    color: #0F172A
}


/* ==========================================
   9. DESPLIEGUE PÁGINA
   ========================================== */

.despliegue-producto {
    margin-bottom: 100px
}

h1.titulo-pagina {
    font-size: 32px;
    color: var(--primary);
    margin-bottom: var(--margin)
}

    h1.titulo-pagina span {
        display: block;
        font-size: 19px
    }

h3.subtitulo {
    font-size: 19px;
    color: var(--primary);
    margin-bottom: var(--margin)
}

.despliegue-producto p {
    margin-bottom: var(--margin)
}

table.table {
    margin-bottom: var(--margin)
}

.table thead th {
    color: var(--primary)
}

.table-group-divider {
    border-top-color: var(--primary)
}

table.table thead tr,
table.table thead th {
    border: 0;
    font-weight: 500
}

table.table td {
    border-left: 0;
    border-right: 0;
    vertical-align: middle
}

label.form-check-label {
    font-size: 16px;
    display: initial;
    text-transform: none
}

/*MENÚ*/
li.nav-item.dropdown.zona-suscriptores .dropdown-item {
    cursor: pointer !important;
}

.link-forma-pago {
    display: flex;
    align-items: center;
    gap: 6px; /* separación entre icono y texto */
}

.lb-linkButton-Menu,
.lb-linkButton-Menu:hover,
.lb-linkButton-Menu:focus,
.lb-linkButton-Menu:active,
.lb-linkButton-Menu:visited {
    color: #333 !important;
    background: transparent !important;
    text-decoration: none !important;
}


#offcanvasNavbar.offcanvas-start {
    transform: translateX(-100%) !important;
    transition: transform .3s ease-in-out !important;
}

    #offcanvasNavbar.offcanvas-start.show,
    #offcanvasNavbar.offcanvas-start.showing {
        transform: translateX(0) !important;
    }

    #offcanvasNavbar.offcanvas-start.hiding {
        transform: translateX(-100%) !important;
    }
/*Fin Menu*/


/*Footer*/
footer {
    clear: both;
}
/*Fin Footer*/

/*CONTENIDO CENTRAL.*/
section.imagen-principal {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 50px;
}

.imagen-principal img {
    width: 100%;
    display: block;
}

/* Margen lateral para los 3 botones del header en móvil */
body.home-portada #HeaderContainer .d-grid {
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: 14px; /* separa "Pagar documentos" de la imagen */
}

.productos-portada .card figure {
    margin: 0 0 12px;
}

.productos-portada .card .img-logo-plan {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: auto;
    height: auto;
}

.texto-justificado {
    text-align: justify;
    text-justify: inter-word;
}
/*FIN CONTENIDO CENTRAL.*/



/*AGENCIAS*/

.tabla-agencias .titulo-seccion {
    color: var(--primary);
    font-size: 56px;
    font-weight: 700;
    line-height: 1.1;
}

.tabla-agencias .subtitulo {
    font-size: 46px;
    color: #111;
    line-height: 1.25;
}

.tabla-agencias table thead th {
    color: var(--primary);
    font-weight: 700;
    font-size: 46px;
    border-bottom: 3px solid var(--primary);
    padding-top: 14px;
    padding-bottom: 14px;
}

.tabla-agencias table tbody td {
    font-size: 44px;
    color: #111;
    padding-top: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #ddd;
}

@media (max-width: 991px) {
    .tabla-agencias .titulo-seccion {
        font-size: 40px;
    }

    .tabla-agencias .subtitulo {
        font-size: 30px;
    }

    .tabla-agencias table thead th,
    .tabla-agencias table tbody td {
        font-size: 26px;
    }
}

@media (max-width: 576px) {
    .tabla-agencias .titulo-seccion {
        font-size: 32px;
    }

    .tabla-agencias .subtitulo {
        font-size: 22px;
    }

    .tabla-agencias table thead th,
    .tabla-agencias table tbody td {
        font-size: 18px;
    }
}

.ddl-outline-primary {
    border: 1px solid #24337C; /* mismo azul */
    color: #24337C;
    background-color: #fff;
}

    .ddl-outline-primary:hover {
        border-color: #24337C;
    }

    .ddl-outline-primary:focus {
        border-color: #24337C;
        box-shadow: 0 0 0 0.2rem rgba(36, 51, 124, 0.25);
        outline: none;
    }

.ddl-outline-primary {
    background-image: url("data:image/svg+xml,%3Csvg fill='%2324337C' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.25 7.5l4.75 4.75L14.75 7.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px;
}

/*FIN AGENCIAS*/

/*DESCRIPCION DEL PLAN.*/
.plan-descripcion {
    color: #1b1b1b;
    font-size: 14px;
}

    .plan-descripcion p {
        margin: 0 0 10px;
        line-height: 1.45;
    }

        .plan-descripcion p:empty {
            display: none;
        }

    .plan-descripcion br + br {
        display: none;
    }

    .plan-descripcion ul,
    .plan-descripcion ol {
        margin: 0 0 10px 18px;
        padding: 0;
    }

    .plan-descripcion li {
        margin: 0 0 6px;
        line-height: 1.4;
    }

    /* Normaliza texto heredado de Word */
    .plan-descripcion span,
    .plan-descripcion font {
        color: inherit !important;
        font-family: "Rubik", sans-serif !important;
        font-size: inherit !important;
    }

    .plan-descripcion a {
        color: #0d6efd;
        text-decoration: underline;
    }

.form-select.mi-select:disabled {
    opacity: 1;
    background-color: #e9ecef;
    color: #6c757d;
}

/* Fuerza radio + texto en la misma línea */
.rb-facturacion input[type="radio"] {
    float: none !important;
    display: inline-block !important;
    vertical-align: middle;
    margin-right: 6px;
    margin-bottom: 4px !important;
}

.rb-facturacion label {
    display: inline !important;
    vertical-align: middle;
    margin: 0;
}

.rb-facturacionOculta input[type="radio"] {
    display: none;
    float: none !important;
    vertical-align: middle;
    margin-right: 6px;
}

/* Por si el span contenedor del asp:RadioButton lo pone en bloque */
.rb-facturacion {
    display: inline-flex !important;
    align-items: center;
    white-space: nowrap;
}

td .rb-facturacion,
td .rb-facturacion label {
    font-size: inherit !important;
}


/*radiobutton cambiodomicilio*/
.rb-periodo {
    display: inline-flex !important;
    align-items: center;
    gap: 22px;
    white-space: nowrap;
}

    .rb-periodo input[type="radio"] {
        float: none !important;
        display: inline-block !important;
        vertical-align: middle;
        margin-right: 6px;
        margin-bottom: 2px !important;
        accent-color: #0d6efd;
    }

    .rb-periodo label {
        display: inline !important;
        vertical-align: middle;
        margin: 0 14px 0 0 !important;
        font: inherit !important;
        color: inherit !important;
        cursor: pointer;
    }

    .rb-periodo span {
        display: inline-flex !important;
        align-items: center;
    }

    .label-form .rb-periodo,
    .rb-periodo.label-form {
        font: inherit !important;
        color: inherit !important;
    }



/*CSS PARA DETALLE DE LOS PLANES, ESTOS VIENEN DESDE LA BBDD*/
/* Contenedor del HTML que viene desde BD (Word/Mso) */
.plan-descripcion {
    color: #333;
    font-family: "Rubik", sans-serif !important;
    font-size: 14px;
    line-height: 1.2;
}

    /* Parrafos Word */
    .plan-descripcion p,
    .plan-descripcion .MsoNormal {
        margin: 0 0 12px 0 !important;
        line-height: 1.2 !important;
    }

        /* Limpia huecos de parrafos vacios */
        .plan-descripcion p:empty,
        .plan-descripcion .MsoNormal:empty {
            display: none;
        }

    /* Quita exceso visual heredado de spans/fonts de Word */
    .plan-descripcion span,
    .plan-descripcion font {
        line-height: inherit !important;
    }

    /* Titulo en negrita que viene desde Word */
    .plan-descripcion b,
    .plan-descripcion strong {
        font-weight: 700;
    }

    /* Listas con guion que vienen como texto */
    .plan-descripcion p:has(> span:first-child),
    .plan-descripcion p {
        text-indent: 0 !important;
    }

        .plan-descripcion p:empty,
        .plan-descripcion .MsoNormal:empty {
            display: none;
        }

/*FIN DESCRIPCION DEL PLAN.*/


/*TEXTOS*/
.label-form {
    font-size: 13px;
    text-transform: uppercase;
}

.subtitulos-Pasos {
    font-size: 18px;
    color: var(--primary);
    text-transform: uppercase;
}

.subtitulos-Paso span,
.subtitulos-Paso label {
    display: inline;
    text-transform: uppercase;
}
/*FIN TEXTOS*/


/*LOADING*/
.blockUI {
    z-index: 1000 !important;
}

.loading-img {
    width: 32px;
    height: 32px;
}

/*FIN LOADING*/


/*MENSAJE*/
.val-msg {
    min-height: 20px; /* Ajusta según el alto de tu mensaje */
    display: block;
}

.close-msg {
    position: absolute;
    top: 5px;
    right: 12px;
    cursor: pointer;
    font-size: 30px;
    color: #888;
    transition: color 0.2s;
}

    .close-msg:hover {
        color: #d00;
    }

#msg:focus {
    outline: none;
    box-shadow: none;
}

/*FIN MENSAJE*/



/*OTROS*/
.line {
    padding-bottom: 25px;
    padding-top: 25px;
    margin: 0px;
    border: 1px solid #a7a7a7;
}
/*FIN OTROS*/



/*FORMULARIO BASE*/
.textFormBase {
    font-size: 14px;
}

/*Calendario*/
/*campo-fecha es usado en main.js para usado  en formulario. */
/*sitio-fecha usado en otros calendarios*/
.campo-fecha[readonly],
.sitio-fecha[readonly] {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.sitio-fecha:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.date-input-wrap {
    position: relative;
}

    .date-input-wrap .form-control {
        padding-right: 42px;
    }

    .date-input-wrap .campo-fecha,
    .date-input-wrap .sitio-fecha {
        padding-right: 42px;
        background-color: #fff;
        cursor: pointer;
    }

.date-input-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    color: #6c757d;
    font-size: 1rem;
    line-height: 1;
}

    .date-input-btn:hover {
        color: #24337C;
    }

.ui-datepicker {
    width: 320px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.14);
    font-family: "Rubik", sans-serif !important;
    z-index: 9999 !important;
}

    /*Header */
    .ui-datepicker .ui-datepicker-header {
        background-color: #e9e9e9;
        border-color: #e9e9e9;
        padding: 4px 0 12px 0;
        position: relative;
    }

    /*Título*/
    .ui-datepicker .ui-datepicker-title {
        display: flex;
        gap: 5px;
        justify-content: center;
        font-size: 0.98rem;
        font-weight: 500;
        color: #111827;
        line-height: 1.8;
    }

    /*Flechas */
    .ui-datepicker .ui-datepicker-prev,
    .ui-datepicker .ui-datepicker-next {
        top: 6px;
        width: 32px;
        height: 23px;
        border-radius: 4px;
        border: 1px solid #d1d5db !important;
        background: #fff;
        color: #111827;
        padding: 4px 6px;
    }

        .ui-datepicker .ui-datepicker-prev:hover,
        .ui-datepicker .ui-datepicker-next:hover {
            background: #f3f4f6;
            border: none;
        }

        /* Corrige íconos de navegación */
        .ui-datepicker .ui-datepicker-prev span,
        .ui-datepicker .ui-datepicker-next span {
            margin-top: -8px;
            margin-left: -8px;
        }

    /*Selects mes/año */
    .ui-datepicker select.ui-datepicker-month,
    .ui-datepicker select.ui-datepicker-year,
    .ui-datepicker option {
        font-family: "Rubik", sans-serif !important;
        border: 1px solid #d1d5db !important;
        border-radius: 4px;
        background: #fff;
        color: #111827;
        padding: 4px 6px;
        font-size: 0.9rem;
        margin: 0 2px;
        font-weight: 500;
    }

    /*Tabla*/
    .ui-datepicker table {
        margin-top: 8px;
    }

    /*Encabezado días */
    .ui-datepicker th {
        color: #6b7280;
        font-size: 0.78rem;
        font-weight: 400;
        padding: 6px 0;
        text-transform: uppercase;
        font-family: "Rubik", sans-serif !important;
    }

    /*Celdas*/
    .ui-datepicker td {
        padding: 3px;
    }

        /*Día base */
        .ui-datepicker td a,
        .ui-datepicker td span {
            display: flex !important;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border: none !important;
            border-radius: 10px;
            background: transparent !important;
            color: #111827 !important;
            text-decoration: none;
            font-size: 0.9rem;
            font-family: "Rubik", sans-serif !important;
            font-weight: 400 !important;
            transition: all 0.18s ease;
        }

            /*Hover */
            .ui-datepicker td a:hover,
            .ui-datepicker .ui-state-hover,
            .ui-datepicker .ui-widget-content .ui-state-hover,
            .ui-datepicker .ui-widget-header .ui-state-hover {
                border: none !important;
                background: #eef2ff !important;
                color: #24337C !important;
            }

            /*Día seleccionado */
            .ui-datepicker .ui-state-active,
            .ui-datepicker td a.ui-state-active {
                background: #24337C !important;
                color: #fff !important;
                border-radius: 10px;
                font-weight: 500 !important;
                box-shadow: 0 4px 12px rgba(36, 51, 124, 0.28);
            }

    /*Día actual */
    .ui-datepicker .ui-datepicker-today a {
        background: #f3f4f6 !important;
        color: #111827 !important;
        font-weight: 500 !important;
        border: 1px solid #d1d5db !important;
    }

    /*Días deshabilitados */
    .ui-datepicker .ui-state-disabled span {
        color: #c0c4cc !important;
        opacity: 0.65;
        background: transparent !important;
        font-weight: 400 !important;
    }
/*FIN Calendario*/


/* LISTA DE SUGERENCIAS DE CALLES*/
.Extender, .Extender ul {
    background: #f7f7f7 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    font-size: 13px;
    width: auto !important; /* Deja que JS lo ajuste al textbox */
    min-width: 0 !important;
    max-width: none !important;
    margin: 0;
    padding: 0;
    list-style: none !important;
    z-index: 9999;
}
    /* Ítems de la lista */
    .ExtenderList, .Extender li {
        display: block;
        width: 100%;
        background: transparent !important;
        color: #222;
        padding: 8px 16px;
        cursor: pointer;
        list-style: none !important;
        border-bottom: 1px solid #eee;
        margin: 0;
        transition: background 0.2s;
    }

        /* Último ítem sin borde */
        .ExtenderList:last-child, .Extender li:last-child {
            border-bottom: none;
        }

        /* Hover */
        .ui-state-hover2, .ExtenderList:hover, .Extender li:hover {
            background-color: #e0e0e0 !important;
            color: #0067A9 !important;
            border-radius: 3px;
        }

/* FIN FORMULARIO BASE*/

/*Resumen*/
.contenedor-contrato {
    height: 300px; /* alto fijo tipo caja */
    overflow-y: auto; /* scroll vertical */
    border: 1px solid #ccc;
    padding: 15px;
    background-color: #fff;
    font-size: 0.85rem;
    line-height: 1.5;
}

    .contenedor-contrato p {
        margin-bottom: 10px;
        text-align: justify;
    }

    .contenedor-contrato strong {
        font-weight: bold;
    }

.contenedor-contrato {
    font-family: "Rubik", sans-serif !important;
    background: #f9f9f9;
}

.check-sitio {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
}

    .check-sitio input[type="checkbox"] {
        margin-top: 4px;
    }

/*FIN RESUMEN*/

/*PREGUNTAS FRECUENTES*/

/* ACCORDION STLYE */
button.accordion-button {
    text-transform: none
}

.accordion-button:not(.collapsed) {
    background: transparent;
    box-shadow: none
}

.despliegue-producto .accordion-body p:not(:last-child) {
    margin-bottom: 12px
}

.despliegue-producto .accordion-body p:last-child {
    margin-bottom: 0
}


/*SUGERENCIA CALLES CAMBIO DOMICILIO*/
.ui-autocomplete {
    background: #f7f7f7 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    font-size: 13px;
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 9999;
}

/* ITEMS */
.ui-menu-item {
    list-style: none !important;
    margin: 0;
}

/* ITEM */
.ui-menu-item-wrapper {
    display: block !important;
    width: 100% !important;
    padding: 8px 16px !important;
    color: #222 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #eee !important;
    margin: 0 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-sizing: border-box;
}

/* último item sin borde */
.ui-menu-item:last-child .ui-menu-item-wrapper {
    border-bottom: none;
}

/* CONTENEDOR GENERAL DEL AUTOCOMPLETE */
.ui-autocomplete,
.ui-menu,
.ui-widget.ui-widget-content {
    background: #ffffff !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
    font-size: 13px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    z-index: 9999 !important;
    overflow-x: hidden;
}

/* QUITAR ESTILOS DEFAULT DE JQUERY UI */
.ui-menu {
    outline: none !important;
}

    .ui-menu .ui-menu-item {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        background: transparent !important;
    }

/* HOVER / SELECCIONADO */
.ui-state-active,
.ui-menu-item-wrapper.ui-state-active,
.ui-menu-item-wrapper:hover {
    background: #e0e0e0 !important;
    color: #0067A9 !important;
    border: 0 !important;
    border-bottom: 1px solid #eee !important;
    margin: 0 !important;
    text-decoration: none !important;
    border-radius: 0 !important;
}

/* POR SI EL TEXTO VIENE EN <a> */
.ui-menu-item-wrapper a,
.ui-menu-item a,
.ui-autocomplete a {
    color: inherit !important;
    text-decoration: none !important;
}

.ui-autocomplete-input {
    width: 100% !important;
    box-sizing: border-box;
}

/*FIN SUGERENCIA CALLES CAMBIO DOMICILIO*/

/*MODAL GENERICO*/

.contenido-modal-generico h5 {
    display: none;
}

.ui-dialog .ui-dialog-titlebar {
    border-bottom: 2px solid #2f6fdf; /* línea azul */
}

.ui-dialog .ui-dialog-content {
    padding: 16px;
}

.ui-widget-header {
    background: #ffffff !important;
}

/*FIN MODAL GENERICO*/
/*MisSuscripciones*/
.suscripcion-card {
    border-radius: 14px;
}

    .suscripcion-card .card-body {
        font-size: 0.95rem;
    }

    .suscripcion-card .btn {
        border-radius: 10px;
    }

    .suscripcion-card h5 {
        font-size: 1.05rem;
    }

    .suscripcion-card .badge {
        min-width: 42px;
        text-align: center;
    }

.btn-img {
    border: none;
    background: transparent;
    padding: 0;
    height: 36px;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

    .btn-img:hover {
        transform: translateY(-2px);
        opacity: 0.85;
    }

/* Botón de descarga más destacado */
.btn-descargar {
    height: 40px;
}

.cursor-pointer {
    cursor: pointer;
}

.toggle-icon {
    width: 20px;
    transition: transform 0.2s ease;
}

.toggle-content {
    margin-bottom: 20px;
}

.sus-card {
    transition: all 0.2s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2) !important;
}

    .sus-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    }

.susMain {
    position: relative;
    padding-right: 35px;
}

.sus-flecha {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 0px;
}

.susImg {
    width: 20px;
}
/*Fin Mis Suscripciones - Donacion*/

/*suspender PAra que funcione el combobox del suspender suscripción*/
.ui-select-1 span,
.ui-select-1 .ui-icon,
.combo-bootstrap-toggle span,
.combo-bootstrap-toggle .ui-icon {
    display: none !important;
}

.ui-select-1-in,
.combo-bootstrap-input {
    width: 100% !important;
    height: 48px !important;
    padding: 0.75rem 2.75rem 0.75rem 1rem !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.5rem !important;
    background-color: #fff !important;
    color: #212529 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    margin: 0 !important;
    outline: 0 !important;
    display: block !important;
}

    .ui-select-1-in:focus,
    .combo-bootstrap-input:focus {
        border-color: #86b7fe !important;
        box-shadow: 0 0 0 0.2rem rgba(13,110,253,.25) !important;
    }

.ui-select-1::after,
.combo-bootstrap-toggle::after {
    content: "▾";
    font-size: 18px;
    line-height: 1;
    color: #24337C;
    display: block;
}

.ui-select-1-in {
    width: 100% !important;
    padding-right: 52px !important;
}

/*boton flecha*/
.ui-select-1,
.combo-bootstrap-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    z-index: 20 !important;
}

    .ui-select-1:hover,
    .combo-bootstrap-toggle:hover {
        color: #0d6efd !important;
        background: transparent !important;
    }

.ui-autocomplete {
    max-height: 320px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.5rem !important;
    background: #fff !important;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15) !important;
    padding: 0 !important;
    z-index: 2000 !important;
}

.ui-menu-item-wrapper,
.ui-menu-item > a {
    padding: 0 !important;
    border: 0 !important;
    background: #fff !important;
    color: #212529 !important;
    margin: 0 !important;
    white-space: normal !important;
    display: block !important;
    text-decoration: none !important;
}

    .ui-state-active,
    .ui-menu-item-wrapper.ui-state-active,
    .ui-menu-item > a.ui-state-focus {
        background: #f8f9fa !important;
        color: #212529 !important;
        border: 0 !important;
        margin: 0 !important;
    }

.combo-item {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid #f1f1f1;
}

.combo-titulo {
    font-weight: 600;
    color: #0d6efd;
    margin-bottom: 2px;
}

.combo-sub {
    font-size: 0.95rem;
    color: #212529;
}

.combo-dir {
    font-size: 0.82rem;
    color: #6c757d;
}

.combo-bootstrap-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

/*Donacion - Donaciones-Paso2*/
.grid-fundaciones input[type="radio"] {
    transform: scale(1.15);
    cursor: pointer;
    margin: 0;
    box-shadow: none !important;
}

.grid-fundaciones td {
    border-color: #2F79C6 !important;
    vertical-align: middle;
    padding: 0.75rem;
}

.descripcionfundacion {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.4;
}

.grid-fundaciones .form-check-input {
    cursor: pointer;
    transform: scale(1.15);
}
/*FIN Donacion - Donaciones-Paso2*/

/*SITIO MANTENCION*/
.contenedor-mantencion {
    text-align: center;   
}

.img-mantencion {
    width: 100%;
    max-width: 700px;
    height: 100%;
}
/*FIN SITIO MANTENCION*/

/*Cambio clave*/
.password-wrap {
    position: relative;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    z-index: 5;
}

    .password-toggle i {
        font-size: 1.2rem;
        color: #6c757d;
    }

    .password-toggle:hover i {
        color: #0d6efd;
    }
/*FIN Cambio clave*/

/*Renovación*/
.margen-botton-cero {
   margin-bottom: 0 !important;
}
/*FIN Renovación*/

/*Atencion Clientes*/

/* Fuerza radio + texto en la misma línea */
.rb-AtencioCliente input[type="radio"] {
    float: none !important;
    display: inline-block !important;
    vertical-align: middle;
    margin-right: 6px;
    margin-bottom: 4px !important;
}

.rb-AtencioCliente label {
    display: inline !important;
    vertical-align: middle;
    margin: 0;
}

/* Por si el span contenedor del asp:RadioButton lo pone en bloque */
.rb-AtencioCliente {
    display: inline-flex !important;
    align-items: center;
    white-space: nowrap;
}

td .rb-AtencioCliente,
td .rb-AtencioCliente label {
    font-size: inherit !important;
}