.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #69B3E7;
}

/*TEXTO DE pRRAFOS*/
.texto-programa {
    max-width: 1100px;
    margin: 1rem auto;
}

/* CONTENEDOR GENERAL */
.accordion {
    width: clamp(220px, 90%, 1200px);
    margin: 1rem auto;
}

/* ITEM COMPLETO centrado */
.accordion-item {
    width: 87%;
    margin: 0 auto 10px auto; /* centrado horizontal */
    border: none;
    border-radius: 12px;
    overflow: hidden;
}

/* BOTÓN */
.accordion .custom-accordion-btn {
    width: 100%;
    background-color: #004B87 !important;
    color: white !important;
    font-weight: bold;
    border: none;
    box-shadow: none !important;
    position: relative;
    padding-left: 2.5rem;
}

/* Iconos */
.accordion-button.collapsed::before {
    content: "+";
    font-size: 1.6rem;
    font-weight: bold;
    position: absolute;
    left: 15px;
    color: white;
}

.accordion-button:not(.collapsed)::before {
    content: "–";
    font-size: 2rem;
    font-weight: bold;
    position: absolute;
    left: 15px;
    color: #808080;
}

/* Estado abierto */
.accordion-button.custom-accordion-btn[aria-expanded="true"] {
    background-color: #C8D6EB !important;
    color: #004B87 !important;
    box-shadow: none !important;
}

/* Hover */
.accordion-button.custom-accordion-btn:hover {
    background-color: #003A6B !important;
    color: white !important;
}

/* Quitar flecha default */
.accordion-button::after {
    display: none !important;
}

/* BODY */
.accordion-body {
    background-color: #F5F5F5;
    padding: 1.25rem;
}








.nav-tabs {
    border-bottom: none;
}

    .nav-tabs .nav-link {
        color: white;
        background-color: #004B87;
        border: none;
        border-radius: 10px;
        font-weight: 600;
        margin: 4px;
        transition: all 0.2s ease;
    }

        .nav-tabs .nav-link.active {
            background-color: #69B3E7;
            color: #004B87;
            border: 1px solid #ddd;
        }

        .nav-tabs .nav-link:hover {
            background-color: #003A6B; /* tono más claro al pasar el cursor */
            color: white; /* cambia el color del texto */
            /*border-color: #fff;  opcional */
        }


.tab-content {
    text-align: center;
    margin-top: 2rem;
}

    .tab-content p {
        margin-bottom: 0.5rem;
    }

body{
    margin-bottom: 60px;
    background-color: #fff;
    font-family: "Segoe UI", sans-serif;
}

body p{
    margin-bottom: 10px;
    margin-top:6px
}


.pdf-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px solid #004B87; /* azul fuerte */
    color: #004B87;
    font-weight: 500;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 6px;
    width: clamp(220px, 80%, 1000px);
    margin: 1rem auto;
    transition: all 0.25s ease;
    background-color: transparent;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 6px;
}

    .pdf-link i {
        font-size: 1.2rem;
    }

    .pdf-link:hover {
        background-color: #004B87;
        color: #FFFFFF;
        border-color: #004B87;
    }


/*########  VIÑETAS ESTILIZADAS  #######*/

.lista-estilizada {
    list-style: none;
    padding-left: 0;
}

    .lista-estilizada li {
        position: relative;
        padding-left: 2.2rem; /* un poco menos */
        margin-bottom: 0.5rem; /* ↓ antes 1rem */
        font-size: 0.9rem;
        line-height: 1.35; /* ↓ antes 1.6 */
    }

        /* Viñeta tipo punto institucional */
        .lista-estilizada li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 6px; /* ajustado al nuevo line-height */
            width: 9px;
            height: 9px;
            background-color: #004B87;
            border-radius: 50%;
        }

@media (max-width: 480px) {
    .lista-estilizada li {
        padding-left: 1.8rem;
        font-size: 0.85rem;
        line-height: 1.3;
        margin-bottom: 0.4rem;
    }

        .lista-estilizada li::before {
            width: 7px;
            height: 7px;
            top: 5px;
        }
}

/*########  VIÑETAS NUMERADAS  #######*/

.proceso-lista {
    counter-reset: paso;
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

    /* 🔥 elimina completamente números o viñetas nativas */
    .proceso-lista li::marker {
        content: "";
    }

    .proceso-lista li {
        counter-increment: paso;
        position: relative;
        padding-left: 3rem;
        margin-bottom: 1rem;
        font-size: 0.9rem;
        line-height: 1.4;
    }

        .proceso-lista li::before {
            content: counter(paso);
            position: absolute;
            left: 0;
            top: 0.2rem;
            width: 30px;
            height: 30px;
            background-color: #004B87;
            color: white;
            font-weight: bold;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

/* 🔹 Ajuste para móviles pequeños */
@media (max-width: 480px) {
    .proceso-lista li {
        padding-left: 2.5rem;
        font-size: 0.85rem;
    }

        .proceso-lista li::before {
            width: 26px;
            height: 26px;
            font-size: 0.8rem;
        }
}

/*########  VIÑETAS EN INCISO ABC  #######*/

.proceso-lista-inciso-abc {
    counter-reset: paso-abc;
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

    .proceso-lista-inciso-abc li {
        counter-increment: paso-abc;
        position: relative;
        padding-left: 3rem;
        margin-bottom: 1rem;
        font-size: 0.9rem;
        line-height: 1.4;
    }

        /* Quitamos marcador default */
        .proceso-lista-inciso-abc li::marker {
            content: "";
        }

        /* Círculo con letra */
        .proceso-lista-inciso-abc li::before {
            content: counter(paso-abc, upper-alpha); /* 👈 AQUÍ ESTÁ EL CAMBIO */
            position: absolute;
            left: 0;
            top: 0.2rem;
            width: 30px;
            height: 30px;
            background-color: #004B87; /* Azul institucional */
            color: white;
            font-weight: bold;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

/* 🔹 Ajuste para móviles */
@media (max-width: 480px) {

    .proceso-lista-inciso-abc li {
        padding-left: 2.5rem;
        font-size: 0.85rem;
    }

        .proceso-lista-inciso-abc li::before {
            width: 26px;
            height: 26px;
            font-size: 0.8rem;
        }
}






/* HEADER PRINCIPAL (solo el de arriba) */
.img-header {
    height: 240px;
    background-size: contain;  /*llena bonito */
    background-position: center top;
    background-repeat: no-repeat;
}


/* Encabezados internos */
.encabezado-img {
    height: 140px;
    background-size: contain; /* NO recorta */
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    margin-top: 1rem;
}


.contenido-80 {
    width: 80%;
    margin: 0 auto;
}

.contenido-87 {
    width: 87%;
    margin: 0 auto;
    text-align: justify;
    text-justify: inter-word;
    line-height: 1.7;

}

.contenido-94 {
    width: 94%;
    margin: 0 auto;
    text-align: justify;
    text-justify: inter-word;
    line-height: 1.7;
}



.table thead th {
    background-color: #004B87;
    color: white;
    text-align: center;
    vertical-align: middle;
}

.clave-header {
    background-color: #004B87;
    color: white;
    text-align: center;
    width: 100px;
}

.table td, .table th {
    vertical-align: middle;
}

/*grid de destacados */

.custom-highlights-card {
    border: 2px solid #00008b;
    border-radius: 0 !important;
    overflow: hidden;
    height: 100%;
}

.custom-highlights-header {
    background-color: #004b87;
    color: white;
    font-weight: bold;
    font-size: 1.2em;
    padding: 1rem 1.25rem;
    border-bottom: none;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.list-group-item.custom-highlights-item {
    border-bottom: 1px solid #004b87;
    border-top: none;
    padding: 1rem 1.25rem;
    background-color: white;
    transition: background-color 0.3s ease;
}

    .list-group-item.custom-highlights-item:hover {
        background-color: #82909C;
        cursor: pointer;
    }

    .list-group-item.custom-highlights-item:last-child {
        border-bottom: none;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    .list-group-item.custom-highlights-item a {
        color: #004b87;
        font-weight: bold;
        text-decoration: none;
        transition: none;
    }

        .list-group-item.custom-highlights-item a:hover {
            color: white;
            text-decoration: underline !important;
        }

.custom-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.d-flex.align-items-center {
    display: flex !important;
    align-items: center !important;
}


.img-fill {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mobile (una columna) */
.two-cols {
    display: flex;
    flex-wrap: wrap;
}

.col-left,
.col-right {
    width: 100%; /* En móvil ambas ocupan 100% */
}

/* A partir de pantallas medianas (>= 768px) */
@media (min-width: 768px) {
    .col-left {
        width: 70%;
    }

    .col-right {
        width: 30%;
    }
}

/*   ############# INCRUSTACIONES  ################ */


.titulo-seccion {
    font-weight: 600;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.titulo-subseccion {
    font-weight: 600;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}

.linea-decorativa {
    width: auto;
    height: 3px;
    background-color: #004B87;
    margin-bottom: 1.5rem;
}

.iframe-wrapper {
    background-color: #fff;
    padding: 0.5rem;
}



/*   ############# TABLA COMPACTA  ################ */

.tabla-compacta th,
.tabla-compacta td {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

/* ===== CARRUSEL ===== */

.carousel,
.carousel-inner {
    width: 100%;
}

.carousel-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Más panorámico en desktop */
@media (min-width: 992px) {
    .carousel-img {
        aspect-ratio: 21 / 9;
    }
}

/* ===== TARJETAS GRANDES ===== */
.card-img-fixed {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}


.tarjeta-programa {
    border: none;
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.card-img-fixed {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.tarjeta-programa:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}


/* ===== IMÁGENES COMO BACKGROUND ===== */
.bg-img-responsive {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
}

/* ===== ICONOS PEQUEÑOS ===== */
.custom-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.card-img-fixed {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

* ===============================
VARIABLES GLOBALES
================================ */
:root {
    --card-radius: 12px;
    --card-shadow: 0 6px 18px rgba(0,0,0,.12);
    --transition-fast: all .25s ease;
}

/* ===============================
   CONTENEDORES
================================ */
.section-container {
    padding: 2.5rem 0;
}

.grid-responsive {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* Tablet */
@media (max-width: 991px) {
    .grid-responsive {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 575px) {
    .grid-responsive {
        grid-template-columns: 1fr;
    }
}

/* ===============================
   TARJETAS
================================ */
.card-universal {
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: var(--transition-fast);
    background-color: #fff;
    height: 100%;
}

    .card-universal:hover {
        transform: translateY(-4px);
    }

/* ===============================
   IMÁGENES RESPONSIVAS
================================ */
.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fija proporción sin deformar */
.img-ratio-4x3 {
    aspect-ratio: 4 / 3;
}

.img-ratio-16x9 {
    aspect-ratio: 16 / 9;
}

/* ===============================
   CARD BODY
================================ */
.card-body-center {
    padding: 1rem;
    text-align: center;
    font-weight: 600;
}

/* ===============================
   LINKS
================================ */
.card-link {
    text-decoration: none;
    color: inherit;
}

    .card-link:hover {
        color: inherit;
    }

/* ===== DESTACADOS ===== */
.custom-highlights-card {
    display: flex;
    flex-direction: column;
}

/* Header fijo */
.custom-highlights-header {
    background-color: #004a87;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 0.75rem;
    flex-shrink: 0;
}

/* Lista se ajusta a la altura disponible */
.custom-highlights-card .list-group {
    flex-grow: 1;
}

/* Items más compactos */
.custom-highlights-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}

/* Iconos */
.custom-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* ===== DESTACADOS RESPONSIVOS ===== */

@media (min-width: 992px) {
    .home-highlights-row {
        align-items: stretch;
    }

    .custom-highlights-card {
        height: 100%;
        overflow: hidden;
    }

        .custom-highlights-card .list-group {
            overflow-y: auto;
        }
}



/* ===== MOBILE: CAROUSEL REAL WIDTH ===== */
@media (max-width: 576px) {

    .carousel,
    .carousel-inner,
    .carousel-item {
        width: 100%;
    }

    .carousel-img {
        width: 100%;
        height: auto;
        max-height: 240px;
        object-fit: cover; /* NO contain aquí */
    }
}

.ad-img {
    width: 80%;
    height: auto;
    max-width: 1200px; /* evita que se vuelva enorme */
    display: block;
    margin: 0 auto;
    object-fit: contain; /* nunca recorta */
}

@media (max-width: 991px) {
    .img-header {
        height: 200px;
    }

    .encabezado-img {
        height: 120px;
    }
}




/* ============================
   FIX DEFINITIVO MOBILE WIDTH
   ============================ */
@media (max-width: 576px) {

    html, body {
        width: 100%;
        overflow-x: hidden;
    }

        /* Mata cualquier desborde lateral */
        body > * {
            max-width: 100%;
            overflow-x: hidden;
        }

    /* Corrige container-fluid en móvil */
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Corrige rows de Bootstrap (márgenes negativos) */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Carousel NUNCA más ancho que pantalla */
    .carousel,
    .carousel-inner,
    .carousel-item {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    .carousel-img {
        width: 100% !important;
        height: auto !important;
        max-height: 260px;
        object-fit: cover;
    }

    /* Twitter embed */
    .twitter-tweet iframe {
        max-width: 100% !important;
        width: 100% !important;
    }

    .card-universal img.img-ratio-4x3 {
        width: 100%;
        height: auto; /* mantiene proporción real */
        max-height: 160px; /* 👈 controla el tamaño */
        object-fit: contain; /* ❌ NO recorta */
        background-color: #fff; /* evita espacios feos */
    }

    /* Reduce un poco el cuerpo */
    .card-body-center {
        padding: 0.75rem;
        font-size: 0.95rem;
    }

    .ad-img {
        width: 100%; /* ocupa el ancho real */
        max-height: 160px; /* 👈 controla tamaño */
        object-fit: contain;
    }

    .custom-icon {
        margin-right: 8px !important;
    }

    .home-highlights-row {
        margin-left: 0;
        margin-right: 0;
    }

        .home-highlights-row > [class^="col-"] {
            padding-left: 10px;
            padding-right: 10px;
        }

        .home-highlights-row .custom-highlights-card {
            width: 100%;
            margin: 0 auto;
        }

        .home-highlights-row img {
            max-width: 100%;
            height: auto;
        }


        .home-highlights-row > [class^="col-"] {
            min-width: 0;
        }

    .custom-highlights-item a {
        min-width: 0;
        flex-wrap: wrap;
        white-space: normal;
    }

    .custom-highlights-item a {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .img-header {
        height: 160px;
    }

    .encabezado-img {
        height: 100px;
        margin: 1.5rem 0;
    }

    p {
        font-size: 0.95rem;
    }

}

/*################# FORMULARIO REPORTE CIUDADANO #########################3*/

/* TARJETA FORMULARIO */
.card-formulario {
    background-color: #fff;
    border: 1px solid #C8C9C7;
    border-top: 6px solid #004B87;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
}

/* BOTÓN INSTITUCIONAL */
.btn-institucional {
    background-color: #004B87;
    color: #fff;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    transition: all .25s ease;
}

    .btn-institucional:hover {
        background-color: #003A6B;
        color: #fff;
    }

/* Inputs más institucionales */
.form-control {
    border-radius: 6px;
    border: 1px solid #C8C9C7;
}

    .form-control:focus {
        border-color: #69B3E7;
        box-shadow: 0 0 0 0.2rem rgba(105,179,231,.25);
    }


    /* ############ ICONOS ##########*/

.icono-institucional {
    color: #69B3E7;
}