﻿.container_slider {
    margin: 0 auto 3em auto;
    background: #f8f8f8;
}

/* Noticias Pagina Principal */
.sec_noticias {
    display: grid;
    /* Cambiado por el tema de facebook 20250304
    grid-template-columns: auto 350px;
    */
    grid-gap: 0 10px;
    margin: 3em 0 0 0;
    background-color: #D6D1C4;
    padding: 8px;
    border-radius: 5px;
}

    .sec_noticias .one {
        background-color: #D6D1C4;
        border-radius: 3px;
    }

    .sec_noticias .two {
        background-color: #D6D1C4;
        border-radius: 3px;
    }

.sec_noticias .two div{
    margin-top: 1.7em;
    padding: 5px;
}

.noti-container {
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.noti-container span .list {
    border-radius: 4px;
    margin: 10px 0;
    display: flex;
    flex-direction: row;
    background-color: #eee;
}

.noti-container span .list .list-header a img{
    width: 300px;
    height: 200px;
    margin: 0 auto;
    border-radius: 5px;
}

.noti-container span .list .list-content{
    /*margin-left: 20px;*/
    margin: auto 10px;
}

.noti-container span .list .list-content h3{
    /*font-size: 18px;*/
    font-size: 100%;
    text-transform: uppercase;
}

.noti-container span .list .list-content h3 a {
    text-decoration: none;
    color: #636569;
}

.noti-container span .list .list-content h3 a:hover {
    color: #C2BA98;
    transition: 0.1s ease-in-out;
}

.noti-container span .list .list-content .list-meta{
    font-weight: bold;
}

.noti-container span .list .list-content .list-meta .list-meta-item i{
    margin-right: 5px;
}

.noti-container span .list:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);
}

.btn-noticias{
    background-color: #636569;
    padding: 10px 30px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

    .btn-noticias:hover {
        border: 2px solid #636569;
        color: #636569;
        background-color: #fff;
        transition: 0.3s ease-in-out;
    }

/* Vista Responsiva */
/*
    
    Hasta 575px son teléfonos móviles en modo vertical.
    De 576px a 767px son teléfonos móviles en modo horizontal.
    De 768px a 991px son tabletas.
    De 992px a 1199px son pantallas de escritorio normales.
    1200px o más son pantallas grandes como televisores.

*/

@media (max-width: 575px){
    .sec_noticias{
        display: flex;
        flex-direction: column;
    }

    .sec_noticias .one{
        height: auto;
    }

    .sec_noticias .one div{
        margin-bottom: 20px;
    }

    .sec_noticias .two{
        margin-top: 20px;
    }
    
    .sec_noticias .two div {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .noti-container span .list{
        display: flex;
        flex-direction: column;
    }

    .noti-container span .list .list-header .list-header-image img{
        width: 100%;
        height: auto;
    }

    .noti-container span .list .list-content{
        text-align: center;
    }
}

@media (min-width: 576px) and (max-width: 767px){
    .sec_noticias {
        display: flex;
        flex-direction: column;
    }
    
    .sec_noticias .one {
        height: auto;
    }
    
    .sec_noticias .one div {
        margin-bottom: 20px;
    }
    
    .sec_noticias .two {
        margin-top: 20px;
    }
    
    .sec_noticias .two div {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .noti-container span .list {
        display: flex;
        flex-direction: column;
    }
    
    .noti-container span .list .list-header .list-header-image img {
        width: 100%;
        height: auto;
    }
    
    .noti-container span .list .list-content {
        text-align: center;
    }
}

/*De 768px a 991px son tabletas.*/
@media (min-width: 768px) and (max-width: 991px){
    .sec_noticias {
        display: flex;
        flex-direction: column;
    }
    
    .sec_noticias .one {
        height: auto;
    }
    
    .sec_noticias .one div {
        margin-bottom: 20px;
    }
    
    .sec_noticias .two {
        margin-top: 20px;
    }
    
    .sec_noticias .two div {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .noti-container span .list{
        height: 220px;
        padding: 10px;
    }

    .noti-container span .list .list-header .list-header-image{
        margin: 0;
        padding: 0;
    }

    .noti-container span .list .list-header .list-header-image img{
        margin: auto 0;
    }
}

/*De 992px a 1199px son pantallas de escritorio normales*/
@media (min-width: 992px) and (max-width: 1119px){
    .sec_noticias .one div {
        margin-bottom: 20px;
    }

    .sec_noticias .two div iframe{
        height: 900px;
    }

    .noti-container span .list {
        display: flex;
        flex-direction: column;
    }

    .noti-container span .list .list-header .list-header-image img {
        width: 100%;
        height: auto;
    }
    
    .noti-container span .list .list-content {
        text-align: center;
    }
}

@media (min-width: 1120px) {
    .sec_noticias .one div {
        margin-bottom: 20px;
    }

    .noti-container span .list{
        padding: 20px;
        height: 240px;
    }
}

/* Pagina Noticia Individual */
.container-noticia {
    background-color: #D6D1C4;
    padding: 20px;
    border-radius: 5px;
}

    .container-noticia h1 {
        text-align: center;
        text-align: center;
        color: #636569;
        font-size: 32px;
    }

.container-noticia .img_des_cont {
    display: flex;
    justify-content: center;
}

.container-noticia .img_des_cont img {
    border-radius: 3px;
    width: 600px;
    height: auto;
    /*width: 253px;
    height: 158px;*/
    margin: 1em 0;
}

.container-noticia .noti_ante_desp {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
}

.noti_ante_des {
    background-color: #eee;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    width: 400px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
    font-weight: bold;
    color: #000;
    margin: 2em auto 0 auto;
}

.noti_ante_des:hover {
    transform: scale(1.1);
    transition: 0.3s ease-in;
}

.noti_ante_des img {
    width: 202px;
    height: 108px;
    margin: auto;
}

/* Pagina del listado de noticias */
.row {
    margin: 1em 0;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.row .labels {
    text-align: justify;
    font-weight: bold;
}

.container-noticia div span .list {
    border-radius: 4px;
    margin: 10px 0;
    display: flex;
    flex-direction: row;
    background-color: #eee;
    padding: 20px;
}

.container-noticia div span .list .list-header a img{
    width: 240px;
    height: 180px;
}

.container-noticia div span .list .list-content{
    margin-left: 20px;
    text-transform: uppercase;
    margin: auto 20px;
}

    .container-noticia div span .list .list-content h3 a {
        text-decoration: none;
        color: #636569;
    }

        .container-noticia div span .list .list-content h3 a:hover {
            color: #C2BA98;
            transition: 0.1s ease-in-out;
        }

.container-noticia div span .list .list-content .list-meta {
    font-weight: bold;
}

.container-noticia div span .list .list-content .list-meta .list-meta-item i{
    margin-right: 5px;
}

.container-noticia span .list:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);
}

.navegacion_noticias {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

@media (max-width: 759px){
    .container-noticia div span .list {
        display: flex;
        flex-direction: column;
        padding: 10px;
        height: auto;
    }

    .container-noticia div span .list .list-header .list-header-image img{
        width: 100%;
        height: auto;
        border: 3px;
    }

    .container-noticia div span .list .list-content{
        text-align: center;
        font-size: 100%;
    }
}

@media (max-width: 795px){
    .container-noticia h1{
        font-size: 100%;
    }

    .container-noticia .img_des_cont img{
        width: 90%;
        height: auto;
    }
}

/* Compromisos */
.grid-compromisos {
    margin: 10px;
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 15px;
    /* Nada sale del contenedor */
    overflow: hidden; 
}

.grid-compromisos img{
    width: 100%;
    height: auto;
    border-radius: 4px;

    vertical-align: top;
    object-fit: cover;
}

.grid-compromisos > a{
    display: block;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 6px rgba(0, 0, 0, .5);
}

.grid-compromisos a:hover{
    /* Efecto Distorcionado */
    /*filter: blur(2px);*/
    transform: scale(1.05);
    transition: 0.3s ease;
}

/*-------------------*/
.light-box{
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    transition: transform 0.3s ease-in-out;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0);
}

.light-box img {
    width: 75vw;
    height: auto;
    /*max-height: 70vh;*/
}

.light-box:target{
    transform: scale(1);
}

.lg-close {
    display: block;
    position: absolute;
    top: 40px;
    right: 40px;
    background-color: #C2BA98;
    color: #fff;
    text-decoration: none;
    width: 40px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
}

.lg-next {
    display: block;
    background-color: #C2BA98;
    color: #fff;
    height: 40px;
    width: 40px;
    font-size: 20px;
    line-height: 40px;
    text-decoration: none;
    text-align: center;
}

/* Contenedor Gral */
.contenido-gral {
    background-color: #f8f8f8;
    border-radius: 5px;
    padding: 20px;
}

/* Nueva Vista Tramites */
.container-busqueda-tramite {
    width: 80%;
    margin: 1.5em auto;
    padding: 2em;
    background: rgba(250, 250, 250, 0.5);
    border-radius: 5px;
}

.container-busqueda-tramite h1{
     font-size: 32pt;
     color: #636569;
     margin-bottom: .2em;
}

.container-categorias-tramites {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 10px 20px;
    /*background-color: red;*/
}

.container-categorias-tramites a{
    margin: 0;
    padding: 0;
    text-decoration: none;
}

.categoria-tramite{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.categoria-tramite img{
    width: 140px;
    height: auto;
}

.categoria-tramite span{
    font-weight: bold;
    color: #000;
    font-size: 18pt;
}

.tramite-buttons{
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    margin: 10px 0;
}

@media (max-width: 806px){
    .tramite-buttons {
        display: flex;
        flex-direction: column;
        margin: 10px 0;
        gap: 10px;
    }
}

/* Diseño de secretarias */
.container-secretarias {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    margin-top: 1.5em;
}

.container-secretarias a{
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: #000;
}

.card-secretaria {
    width: 100%;
    height: auto;
    border-top: 5px solid #999;
    padding: 5px;
    background: #fff;
    display: grid;
    grid-template-columns: 100px calc(100% - 100px);
    grid-gap: 0;
}

    .card-secretaria .card-icono {
        font-size: 36px;
        background-color: #f8f8f8;
        width: 72px;
        height: 72px;
        margin: auto 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
    }

.card-secretaria .card-icono i {
    color: #bb945b;
}

.card-secretaria .card-info{
    border-left: 3px solid #636569;
    /*padding-left: 10px;*/
    width: 100%;
    height: 100px;
    padding: 10px 0 0 10px;
}

.card-secretaria .card-info i{
    color: #bb945b;
    font-weight: bold;
    margin-left: 10px;
}

/* Denuncias */
.container-denuncias{
    border: 10px double #C2BA98;
    border-radius: 5px;
    padding: 20px;
    text-align: center;
}

.container-denuncias h2{
    color: #636569;
    margin-bottom: 20px;
}

.container-denuncias p{
    margin-bottom: 20px;
}

.container-denuncias a{
    margin: 0;
    padding: 0;
    color: #000;
    text-decoration: none;
}

.denuncias-iconos {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.icono-denuncias {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.icono-denuncias img{
    width: 100px;
    height: auto;
}

/* Contacto Secretarias */
.contenido-contacto-sec {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    grid-gap: 20px;
}

.contacto-sec {
    padding: 10px;
    background-color: #D6D1C4;
    border-radius: 3px;
    font-weight: normal;
    height: 100%;
}

    .contacto-sec h4 {
        text-align: center;
        color: #000;
    }

    .contacto-sec p {
        font-weight: 400;
        color: #636569;
    }

.contacto-sec p i{
    margin-right: 10px;
    color: #BB945B;
}

.scroll{
    overflow-x: auto;
}
/*  */

/* Servicios Internos normatividad aplicable */
.servicios-internos-links h3 {
    background-color: #C2BA98;
    color: #636569;
    margin: 1em 0 5px 0;
    font-weight: bold;
    padding: 8px 0 8px 5px;
    border-radius: 5px;
}

.newTitulos {
    background-color: #C2BA98;
    color: #636569;
    margin: 1em 0 5px 0;
    font-weight: bold;
    padding: 8px 0 8px 5px;
    border-radius: 5px;
}

.newContainerButton{
    display: flex; 
    align-items: center;
    justify-content: center;
    margin: 1em 0 0 0;
}

    .newContainerButton a {
        background-color: #636569;
        color: #fff;
        text-decoration: none;
        font-size: 16pt;
        font-weight: bold;
        padding: 8px 60px;
        border-radius: 8px;
        border: 2px solid #636569;
    }

        .newContainerButton a:hover {
            background-color: #fff;
            color: #636569;
            transition: 0.2s ease;
        }

/* Diseño Slider Principal Video */
.container_slider2 {
    display: grid;
    grid-template-columns: auto 240px;
    grid-gap: 0 10px;
    /*margin-bottom: em;*/
}


@media (max-width: 1180px) {
    .container_slider2{
        display: flex;
        flex-direction: column; 
        gap: 0;
    }

    .container_slider2 .slider_video{
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: center; 
        justify-content: center;
    }

    .container_slider2 .slider_video{
        width: 100%;
        background-color: #fff;
        padding: 10px;
        border-radius: 5px;
    }

    .slider_video video{
        width: 100%;
    }
}

/* Diseño E-R */
.container-ER {
    border: 10px double #C2BA98;
    border-radius: 5px;
    padding: 20px;
    text-align: center;
}

.container-ER h2{
    color: #636569;
    font-size: 18pt;
}

    .container-ER h3 {
        color: #636569;
        font-size: 16pt;
    }

.container-ER-info{
    display: flex;
    flex-direction: row;
}

.container-ER-info img{
    width: 70%;
}

    .container-ER-info .container-ER-text {
        margin: auto 0;
        font-size: 16pt;
        color: #000;
    }

.container-ER-icons {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    margin-top: 1.5em;
}

    .container-ER-icons a {
        margin: 0;
        padding: 0;
        color: #636569;
        text-decoration: none;
    }

.lista-ER{
    list-style: none;
}

.lista-ER li::before{
    font-family: "FontAwesome";
    content: "\f019";
    margin-right: 10px;
}

.lista-ER li a{
    text-decoration: none;
    color: #636569;
    font-weight: bold;
}

@media (max-width: 1000px){
    .container-ER-info {
        display: flex;
        flex-direction: column;
    }

    .container-ER-info img{
        width: 70%;
        margin: 15px auto;
    }
}

.lista-Normatividad {
    list-style: circle;
    text-align: justify;
    font-weight: bold;
}

.lista-Normatividad li{
    padding: 10px 15px;
}

.lista-Normatividad li a{
    text-decoration: none;
    color: #000;
}

.lista-Normatividad li:hover{
    background-color: darkgray;
    border-radius: 5px;
    color: #fff;
    transition: all 0.3s ease;
}

/* Pbr-SED */
.title-pbrsed {
    text-align: left;
    font-size: 18pt;
    color: #636569;
    border-left: 5px solid #C2BA98;
    padding-left: 15px;
    margin: 0 0 1em 0;
}

.top-pbrsed h1 {
    text-align: left;
    font-size: 18pt;
    color: #636569;
    border-left: 5px solid #C2BA98;
    padding-left: 15px;
    margin: 0 0 1em 0;
}

.top-pbrsed p{
    text-align: justify;
    margin-bottom: 10px;
}

    .top-pbrsed p span {
        color: #C2BA98;
    }

.bottom-pbrsed {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.bottom-pbrsed img{
    width: 100%;
    margin: 10px;
}

/* 
    color 1: #DDC8A2 
    color 2: #BC945C
    color icono: #535659
*/

.color-c1 {
    background-color: #D6D1C4;
}

.color-c2 {
    background-color: #D6D1C4;
}

.pbrsed-card {
    width: 320px;
    /*margin: 0 10px;*/
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

    .pbrsed-card .img-pbrsed {
        background-color: #535659;
        width: 240px;
        height: 240px;
        padding: 20px;
        margin: 20px auto;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pbrsed-card .img-pbrsed img{
        width: 80%;
    }

    .pbrsed-card span{
        color: darkred;
        font-size: 18pt;
        font-weight: bold;
    }

    .pbrsed-card:hover {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }

/* Dropdownlist */
.pbrsed-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.pbrsed-dropdownbtn {
    background-color: #C2BA98;
    color: #636569;
    font-weight: bold;
    font-size: 18px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    /*width: 360px;*/
    width: 100%;
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.pbrsed-dropdownbtn img{
    width: 80px;
    margin-right: 1.8em;
    background-color: #A6A6A8;
    padding: 20px;
    border-radius: 10px 0 0 10px;
}

.pbrsed-dropdown {
    position: relative;
    display: inline-block;
}

.pbrsed-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    max-width: 360px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    font-size: 16px;
    text-align: center;
    margin: 0 10px;
}

    .pbrsed-dropdown-content a {
        color: black;
        text-decoration: none;
        width: 100%;
        display: flex;
        align-items: center;
        padding: 12px 16px;
    }

    .pbrsed-dropdown-content a:hover{
        background-color: #f1f1f1;
    }
    
    .pbrsed-dropdown-content a img {
        width: 60px;
        margin-right: 15px;
    }

    .pbrsed-dropdown-content a span{
        height: 60px;
        text-align: center;
    }

.pbrsed-dropdown:hover .pbrsed-dropdown-content{
    display: block;
}

.pbrsed-dropdown:hover .pbrsed-dropdownbtn {
    background-color: #DDC8A2;
}

/* Accordion */
:root {
    --primary: #C2BA98;
    --secondary: #D6D1C4;
    --background: #eee;
    --highlight: #A6A6A8;
    /* Theme color */
    --theme: var(--primary);
}

.tab input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.tab .tab-header {
    width: 100%;
    color: #fff;
    background-color: #C2BA98;
}

.tab__content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.35s;
}

.tab input:checked ~ .tab__content {
    max-height: 100rem;
    /*height: auto;*/
}

/* Visual styles */
.accordion {
    color: var(--theme);
    border: 2px solid;
    border-radius: 0.5rem;
    overflow: hidden;
    margin: 10px 0;
}

.tab__label,
.tab__close {
    display: flex;
    color: white;
    background: var(--theme);
    cursor: pointer;
    font-weight: bold;
}

.tab__label {
    justify-content: space-between;
    height: 65px;
    padding: 10px;
    /*padding: 1rem;*/
}

    .tab__label::before {
        content: url(../Images/PbrSED/planificacion-fiscal-white_30X30.png);
        width: 30px;
        height: 30px;
        background-color: #636569;
        border-radius: 5px;
        padding: 5px;
    }

    .tab__label::after {
        content: "\276F";
        width: 1em;
        height: 1em;
        text-align: center;
        transform: rotate(90deg);
        transition: all 0.35s;
    }

.tab input:checked + .tab__label::after {
    transform: rotate(270deg);
}

.tab__content p {
    margin: 0;
    padding: 1rem;
}

.tab__close {
    justify-content: flex-end;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
}

.accordion--radio {
    --theme: var(--secondary);
}

/* Arrow animation */
.tab input:not(:checked) + .tab__label:hover::after {
    animation: bounce .5s infinite;
}

@keyframes bounce {
    25% {
        transform: rotate(90deg) translate(.25rem);
    }

    75% {
        transform: rotate(90deg) translate(-.25rem);
    }
}


/* Lista PP */

.menuPP * {
    list-style: none;
    cursor: pointer;
    font-weight: bold;
    color: #222;
}

.menuPP li {
    line-height: 180%;
    margin: 10px 0;
}

    .menuPP li a {
        color: #222;
        text-decoration: none;
    }

        .menuPP li a:hover {
            background: lightgrey;
            padding: 10px;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

.menuPP li {
    /* content:"\025b8"; color:#ddd; margin-right:4px; */
    padding-left: 2rem;
    background-image: url(../Images/PbrSED/pdf.png);
    background-position: 0 0;
    background-size: 1.6rem 1.6rem;
    background-repeat: no-repeat;
}

.menuPP input[name="list"] {
    position: absolute;
    left: -1000em;
}

.menuPP label:before {
    /* content:"\025b8"; margin-right:4px; */
    padding-left: 2rem;
    background-image: url(../Images/PbrSED/pdf.png);
    background-position: 0 0;
    background-size: 1.6rem 1.6rem;
    background-repeat: no-repeat;
}

.menuPP input:checked ~ label:before {
    /* content:"\025be"; */
    /*padding-left: 2rem;*/
    background-image: url(../Images/PbrSED/pdf.png);
    background-position: 0 0;
    background-size: 1.6rem 1.6rem;
    background-repeat: no-repeat;
}

.menuPP .interior {
    display: none;
}

.menuPP input:checked ~ ul {
    display: block;
}