body {
    background-color: #f2fcff;
    background-image: url(../img/back-papel.png);
    background-repeat: repeat;
    background-size: contain;
}

#edit-user-picture-0--description:first-child {
    display: none;
}

.hoja{
    width: 300px;
    height: 200px;
    background-color: #ddd;
}
h3 {
    color: #d22841;
}
/*Buscador*/
form#views-exposed-form-buscador-page-1 {
    position: relative;
    float: inline-end;
    padding-top: 10px;
}
.js-form-item.js-form-type-textfield.form-type-textfield.js-form-item-title.form-item-title.mb-3 {
    width: 65%;
}
button#edit-submit-buscador {
    width: 130px;
    float: left;
}
div#edit-actions--2 {
    float: left;
    display: flex;
    width: 33%;
}
.buscador {
    padding: 15px!important;
}

.enlace-buscador a {
    font-size: 18px;
    font-weight: bold;    
}

#edit-submit-buscador-general--2 {
    background-color: var(--color-principal);
    color: white;
    border-color: var(--color-principal);
}
.form-control {
    display: block;
    width: 10vw;
}
.form-select {
    display: block;
    width: auto !important;
}
/*----- filtro expuesto ---*/

.js-form-item.js-form-type-select.form-type-select.js-form-item-id.form-item-id.form-no-label.mb-3 {
    width: 159px;
}
.contextual-region.view.view-block-materias.view-id-block_materias.view-display-id-page_1.js-view-dom-id-014c27c50f0ebcc63ba7dfbec821e77c83c0e1a7d238d7c45f6667ba04eb4f00 {
    display: none;
}
.contextual-region.view.view-block-materias.view-id-block_materias.view-display-id-page_1.js-view-dom-id-386d30ee65f48bc93220bf7cbca705e86bdd3ae9e9e3c7812fe725f36d405682 {
    display: none;
}
form#views-exposed-form-block-materias-page-1 {
    display: none;
}
form#views-exposed-form-buscador-page-1 {
    position: relative;
    float:inline-start;
    padding-top: 10px;
}
.form-control {
    display: block;
    width: 10vw;
}
div#edit-actions--2 {
    float: left;
    display: flex;
    width: 23%;
}
/* ------------- esconder buscador ------------*/

#views-exposed-form-block-materias-block-1 {
    display: none !important;
}

/*------------*/
div#edit-actions {
    width: 25%;
    float: left;
}
.collapse.container#collapseExample3 {
    position: sticky !important;
    top: 57px !important;
    z-index: 5000 !important;
    background-color: #f0f9fc !important;
    border-bottom-right-radius: 7px !important;
    border-bottom-left-radius: 7px !important;
}
/* menú lateral */

.accordion {
    --bs-accordion-bg: rgba(255, 255, 255, 0.1) !important;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.01);
}
.accordion-body a{
    text-decoration: none;
    color: #777777;
}
.accordion-body a:hover{
    text-decoration: none;
    color: #d22841;
}
.accordion-button:focus {
    border-color: rgb(187, 187, 187, 0.01) !important;
    box-shadow: 0px !important;
}
/* ul {
    list-style: none;
    line-height: 22px;
} */
.row-menu-materias a {
    color: #454545 !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in;
}
.row-menu-materias a:hover {
    color: #f00505 !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;
}

.menu-temas {
    list-style: none;
    line-height: 22px;
}
.sub-submenu {
    margin-left: 10px !important;
}
a.submenu.active-submenu {
    color: orangered !important;
}
/*HEADER*/
.bg-principal {
    background:#d22841;
    border-bottom: 2px solid #242120 !important;
    position: sticky !important;
    background-image: url(../img/textura-back-top.png);
    background-repeat: repeat-x !important;
    
}

element.style {
    position: relative;
    z-index: 0;
    border-bottom: none !important;
}
.navbar.navbar-expand-lg.bg-barra-inicio {
    position: sticky !important;
    z-index: 2000 !important;
}
.bg-barra-inicio {
    /* background:#2a2927; */
    background-image: url(../img/back-barra-full.jpg);
    background-size: contain !important;
    background-repeat: repeat-x !important;
    background-color: #000000 !important;
    
}
.nav-link {
    color: #FFFFFF !important;
    position: sticky !important;
    text-shadow: 3px 2px 3px #000000;
}
.nav-link a {
    color: #FFFFFF !important;
    transition: all 0.5s ease-in;
    box-shadow: -5px 8px 5px -1px rgba(0,0,0,0.87);   
}
.nav-link a:hover {
    color: #e7e7e7 !important;
    transition: all 0.5s ease-in-out;
}
.navbar-toggler-icon {
    background-color: #03f2ff !important;
    border-radius: 3px !important;
}
.navbar-toggler {
    border: 2px solid #03f2ff !important;
}
.logos {
    width: 100px;
}
.img-logo {
    max-width: 19%;
    height: auto;
    opacity: 100%;
    z-index: 1;
    position: absolute;
    right: 61%;
    top:18px;
}
.navbar{
    position: relative;
    width: 100%;
    z-index: 0;
    top:0px;
 }
.oculta {
    display: none;
}

.text {
    text-align: end;
}
.contenedor-logos .logo-unam {
    max-height: 90px !important;
    max-width: 55px !important;
    padding-bottom: 10px;
    padding-top: 3px;
    margin-left: 0px;
}
.contenedor-logos .logo-iij {
    max-height: 90px !important;
    max-width: 55px !important;
    padding-bottom: 10px;
    padding-top: 3px;
    margin-left: 10px;
}
.texto-header {
    font-size: 27px;
    color: white;
    text-shadow: 0.5px 0px black;
    display: inline;
    padding-top: 40px;
    /* margin-left: 20vw; */
    line-height: 24px;
    position: absolute;
    text-shadow: 3px 2px 3px #871212 !important;
}

/*MENU*/

.navbar-brand {
    font-size: 16px;
    color: #FFFFFF !important;
    text-shadow: 3px 2px 3px #000000 !important;
}
.logo {
    width: 300px;
}
.foto-perro {
    margin-bottom: 7px;
    margin-top: 7px;
}
.foto-perro-detalle {
    padding: 14px 0 14px 0 !important;
    
}

/*BUSCADOR*/
.buscador-sentencia {
    color: #FFFFFF !important;
    position: sticky !important;
}
#buscadorSentencia {
    color: #fff;
    position: sticky !important;
}

/*BANNERS*/
.contenedor-banner {
    /* border-top: 2px solid #000000 !important; */
}
#block-bannerprincipal, #block-descripcionsition {
    padding: 0px;
}
/*---------------   MENÚ HAMBURGUESA REPSONSIVE   ---------------*/
.mobile-btn {
    margin: 50px auto 0px auto;
    display: block;
    color: #000;
    height: 36px;
    width: 36px;
    border-top: 4px solid;
    position: relative;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
  }
  
  .mobile-btn::after, .mobile-btn::before {
    content: '';
    display: block;
    height: 4px;
    margin-top: 6px;
    background: currentColor;
    position: relative;
    transition: transform .3s ease;
  }
  
  .mobile-btn.active {
    border-top-color: transparent;
  }
  
  .mobile-btn.active::after {
    margin-top: 0px;
    top: 2px;
    transform: rotate(45deg);
  }
  
  .mobile-btn.active::before {
    margin-top: 0px;
    top: 6px;
    transform: rotate(135deg);
  }
  
  .menu-mobile {
    opacity: 0;
    visibility: hidden;
    text-align: center;
    margin-top: 0px;
    transform: translate3D(0, -50px, 0);
    transition: .3s;
  }
  
  .menu-mobile li {
    line-height: 1.4em;
  }
  
  .menu-mobile.active {
    visibility: visible;
    opacity: 1;
     transform: translate3D(0, 0, 0);
  }
  /*------- FIN MENU HAMBURGUESA RESPONSIVE -------*/

  
  /*------- BOTON SCROLL -------*/

/* Boton Scroll */
.scrollToTop {
	display:none; 
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--color-principal);
    color: white;
    cursor: pointer;
    padding: 8px 15px;
    border-radius: 10px;
    font-size: 18px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.scrollToTop:hover{
	text-decoration:none;
    color: white;
}
/*-------- DESCRIPCION DEL SITIO --------*/
.contenido-descripcion {
    background-color: #000000;
    filter: opacity(0.6);
    color: #e9e9e9;
}
.contenido-descripcion h1 {
    color: #e9e9e9 !important;
}
.container-fluid {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
/*-------- form select --------*/

.form-select {
    display: block;
    width: 180px !important;
}
label {
    display: inline-block;
    margin-top: 20px !important;
    font-weight: bold !important;
}
/*-------- ETIQUETAS UNIDADES Y TÉCNICAS --------*/

.etiqueta-unidad-padre {
    color: #0c62a9;
    font-size: 14px !important;
}
.etiqueta-unidad-hijo {
    color: #1773bf;
    font-style: italic;
    font-size: 13px !important;
    padding-left: 25px;
}
.etiqueta-tecnica-padre {
    text-decoration: none !important;
    color: #0e803a !important;
    font-size: 14px !important;
}
.etiqueta-tecnica-hijo {
    text-decoration: none !important;
    color: #0db14c !important;
    font-style: italic;
    font-size: 13px !important;
    padding-left: 25px;
}
.docil {
    position: absolute;
    top: 7px;
    background-color: rgb(8, 159, 223);
    height: 24px;
    width: 132px;
    /* padding: 10px; */
    margin: 0 auto;
    text-align: center;
    border-radius: 3px;
    color: #ffffff;
}
.hiperactivo {
    position: absolute;
    top: 7px;
    background-color: rgb(255, 103, 9);
    height: 24px;
    width: 132px;
    /* padding: 10px; */
    margin: 0 auto;
    text-align: center;
    border-radius: 3px;
    color: #ffffff;
}
.agresivo {
    position: absolute;
    top: 7px;
    background-color: rgb(255, 21, 9);
    height: 24px;
    width: 132px;
    /* padding: 10px; */
    margin: 0 auto;
    text-align: center;
    border-radius: 3px;
    color: #ffffff;
}

/* ETIQUETAS UNIDAD  */
.etiqueta-unidad a {
    position: absolute;
    padding-top: 0px !important;
    background-color: rgb(1, 152, 97) !important;
    padding: 0px;
    width: 120px;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    color: #ffffff !important;
    z-index: 1000 !important;
    transition: all 0.5s ease-in;
}
.etiqueta-unidad a:hover {
    position: absolute;
    padding-top: 0px !important;
    background-color: rgb(6, 109, 71) !important;
    padding: 0px;
    width: 120px;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    color: #ffffff !important;
    z-index: 1000 !important;
    transition: all 0.5s ease-in-out;
}
.titulos-bloques {
    font-weight: bold;
    font-size: 20px;
    color: grey;
    /* border-bottom: 1px solid grey; */
    padding: 0 0 10px 0;
}
.subrayado {
    border-bottom: #000000 2px solid;
}
.card {
    --bs-card-border-color: none;
    --bs-card-border-width: 0px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    transition: box-shadow 0.3s ease-in-out;
}
.card-back {
    background-image: url(/themes/barrio_fedb/img/pleca-top-cards.jpg);
    background-repeat: no-repeat;
    width: 100% !important;
    height: auto;
}
.card-detalle {
    --bs-card-border-color: none;
    --bs-card-border-width: 0px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    background-color: #ffffff;
    border-radius: 7px !important;
    padding-left: 30px !important;
    padding-top: 25px !important;
}

.contenedor-cards {
    padding-left: 30px !important;
    padding-right: 12px !important;
}

.repositorio .campo-titulo {
    position: relative;
    margin-bottom: 20%;
    align-items: center;
}
.repositorio .multimedia {
    position: absolute;
    align-items: center;
}
.repositorio .unitec {
    font-size: 16px;
    position: absolute;
    bottom: 0;
    padding-right: 20px;
    font-weight: 200;
}

.campo-tema {
    font-size: 18px;
    font-weight: 500;
    color: #f5005d;
    padding-top: 18px;
    line-height: 24px;
}
.campo-materia {
    font-size: 14px;
    font-weight: 300;
    color: #4a70d0;
    font-style: italic;
    line-height: 21px;
    margin-bottom: 2px;
}
.campo-materia-detalle {
    font-size: 14px;
    font-weight: 300;
    color: #4a70d0;
    font-style: italic;
    line-height: 21px;
    margin-bottom: 2px; 
}
.campo-unidad {
    font-size: 14px;
    font-weight: 300;
    color: #b84555;
    font-style: italic;
    line-height: 21px;
    margin-bottom: 2px; 
}

.campo-tipo-tecnica {
    font-size: 16px;
    font-weight: 500;
    color: #337128;
    padding-top: 18px;
    line-height: 24px;
}
.campo-tecnica {
    font-size: 14px;
    font-weight: 300;
    color: #427838;
    font-style: italic;
    line-height: 21px;
    margin-bottom: 2px; 
}
.campo-titulo {
    font-size: 16px;
    font-weight: bold;
    color: #807897;
    line-height: 20px;
    margin-top: 10px;
}
.campos-multimedia {
    position: absolute;
    bottom: 10px;
    right: 10px;
}
.icono {
    margin: 2px;
}
.menu-temas ul {
    list-style-type: none !important;
}
.accordion-button:not(.collapsed) {
    color: #424242 !important;
    box-shadow: inset 0 calc(var(--bs-accordion-border-width) * -1) 0 var(--bs-accordion-border-color);
}
.card-tema a {
    text-decoration: none;
    text-decoration: none !important;
}
.card:hover {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

#block-views-block-eventos-block-1 .card-body, #block-barrio-1824-content .card-body {
    padding: 0;
}


.campo-titulo-detalle {
    font-size: 25px;
    font-weight: bold;
    color: #807897;
    padding-top: 18px;
}
.campo-autoria {
    color: #7b849a;
    font-size: 13px;
    font-style: italic;
    font-weight: 300 !important;
    padding-top: 9px !important;
}
.campo-autoria-detalle {
    color: #7b849a;
    font-size: 14px;
    font-style: italic;
    font-weight: 300 !important;
    justify-content: right !important;
    display: flex;
    padding-right: 10px !important;
}
.campo-unitec {
    text-indent: 20px !important;
}
.card-tema a:hover {

    text-decoration: none;
}
/* .card-detalle {
    --bs-card-border-color: none;
    --bs-card-border-width: 0px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    background-color: #ffffff;
    border-radius: 7px !important;
} */

/*-------- fontawesome ------*/
.fa-file-pdf {
    color: #FF9800;
}
.fa-image {
    color: #ff4500;
}
.fa-youtube {
    color: #ff0000;
}
/*-------- ETIQUETAS --------*/
.temas {
    font-size: 15px;
    font-style: italic;
    color: green;
}
.temas .tecnicas {
    color: orangered !important;
}
.tipos {
    margin-left: 0px !important;
}
.tipo {
    font-size: 12px;
    font-style: italic;
    text-align: center !important;
    color: #f0f0f0;
    padding-top: 3px;
}
#tipo-uno {
    background-color: orangered !important;
}
#tipo-dos {
    background-color: #e7811b;
}
#tipo-tres {
    background-color: #e7991b !important;
}
#tipo-cuatro {
    background-color: #e7b11b !important;
}
.vermas a {
    text-decoration: none;
    color: orangered;
    transition: all 0.9s ease-in;
}
.vermas a:hover {
    text-decoration: none;
    color: rgb(52, 2, 160);
    transition: all .9s ease-in-out;
}
.js-form-item.js-form-type-select.form-type-select.js-form-item-field-edad-target-id.form-item-field-edad-target-id.mb-3 {
    width: 200px;
}
/* -------------- esconder contenedor -------------------- */
.hidde {
    display: none !important;
}
/* BREADCRUMB */

.breadcrumb-item a {
    color: #787878;
    border-bottom: 1px solid #787878;
    text-decoration: none;
    transition: all 0.5s ease-in;
}
.breadcrumb-item a:hover {
    color: #ff6f08;
    text-decoration: none !important;
    transition: all 0.5s ease-in-out;
    border-bottom: 1px solid #f3f3f3;
}
.breadcrumb-item.active {
    color: #bababa !important;
    font-size: 14px !important;
}

/* REDES SOCIALES */
.icon-bar {
    position: fixed;
    z-index: 3;
    top: 50%;
    left: 0px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding-left: 17px;
    padding-top: 13px;
    background-color: #272727;
    color: #FFF;
    padding-right: 4px;
    padding-right: 17px;
    border-radius: 0 9px 9px 0;
    box-shadow: 0px 8px 9px -2px rgba(163, 161, 163, 1);
    border: thin solid #eceae8;
    border-left: 0px;
}
.icon-bar a {
    /* color: #f5bbbb; */
    transform: scale(1.0) !important;
    transition: all 0.5s ease-in !important;
  }
  .icon-bar a:hover #dacebook #equis #instagram {
    color: #ffffff;
    transform: scale(1.5) !important;
    transition: all 0.5s ease-in-out !important;
  }
  .punto-redes {
    display: none;
  }
  #facebook {
    color: #1591f6;
  }
  #equis {
    color: #03f2ff;
  }
  #instagram {
    color: #ff4f5a;
  }
/*----------- ALIADOS --------------*/
.aliados {
    border-radius: 50%;
    box-shadow: 0px 0px 9px 0px rgba(171, 171, 171, 34%);
    overflow: hidden;
    background-color: #ffffff;
    width: 79%;
    padding: 27px;
    overflow: hidden;
    transition: all 0.5s ease-in;
}
.aliados a {
    border-radius: 50%;
    box-shadow: 0px 0px 9px 0px rgba(171, 171, 171, 34%);
    text-decoration: none !important;
    width: 79%;
    transform: scale(1.0);
    transition: all 0.5s ease-in;
}

.aliados:hover {
    transform: scale(1.05);
    transition: all 0.5s ease-in-out;
}

/* FOOTER */
.footer-back {
    /* background-image: url(https://cjpi.juridicas.unam.mx/themes/barrio_cjpi/img/back-barra-footer-dplv.png); */
    background-image: url(../img/back-barra-footer-dplv.png);
    background-repeat: repeat-x;
    background-size: 50%;
}
.footer {
    padding: 3.5vh !important;
}
.firma-unam {
    max-width: 95%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 25px;
}
.region-footer {
    background-color: #d22841;
    color: #ffffff !important;
}
#block-footer {
    background-color: var(--color-principal);
    color: #FFFFFF;
    margin-top: 25px;
}
.img-ponte-puma {
    width: 50%;
    text-align: center;
}
.legales a {
    color: #efe8aa;
    text-decoration: none;
    transition: all 0.5s ease-in;
}
.legales a:hover {
    color: #cce4ec;
    text-decoration: none;
    transition: all 0.5s ease-in-out;
}

.papime-footer {
    color: #effff7 !important;
    background-color: #fc526b;
    border-radius: 3px;
    padding: 5px;
}

/* ENLACE ACTIVO DEL MENÚ LATERAL */
a.link-activo {
    color: orangered !important;
}
/* ------------------------------------------ */
/*Creditos*/
.enlace {
    color: white;
}
.enlace:visited,
.enlace:focus,
.enlace:active,
.enlace:hover {
    color: white;
}

.titulos-creditos {
	color: var(--color-principal);
	font-size: 18px;
	font-weight: bold;
}

.titulos-contenido-creditos {
	font-weight: bold;
}

/*MEDIA QUERIES*/

@media (min-width: 1875px){   
}
@media (max-width: 1400px){   
    .repositorio .campo-titulo {
        position: relative;
        margin-bottom: 25%;
        align-items: center;
    }
}
@media (max-width: 1200px){   
    .repositorio .campo-titulo {
        margin-bottom: 35%;
    }
}
@media (max-width: 991px) {
    .bg-barra-inicio {
        background-image: url(/themes/barrio_fedb/img/back-barra-full.jpg);
        background-size: cover !important;
    }
    .texto-header {
        font-size: 18px !important;
        padding-left: 30px;
    }
    .repositorio .campo-titulo {
        margin-bottom: 65%;
    }
}
@media (min-width: 769px) and (max-width: 991px){
}
@media (max-width: 768px) { 
    .texto-header {
        font-size: 14px !important;
        padding-left: 20px !important;
    }
    .repositorio .campo-titulo {
        margin-bottom: 30% !important;
    }
}

@media (max-width: 578px) {
    .aliados {
        width: 58%;
        overflow: hidden;
        transition: all 0.5s ease-in;
        margin-left: 90px;
        padding: 9%;
    }
}
/*------------------- estilos para la barra collapse ----------------*/

/* Botón de colapso */

 /* Menú lateral */
        .sidebar {
            width: 388px;
            /* background: #2c3e50; */
            color: #f0f8fa;
            transition: width 0.3s ease;
            position: relative;
            /*height: 100vh; /* Altura completa */
            /* box-shadow: 2px 0 5px rgba(0,0,0,0.1); */
            overflow-y: auto; /* Scroll vertical para el menú */
            overflow-x: hidden; /* Oculta scroll horizontal */
            flex-shrink: 0; /* Evita que se encoja */
        }
        .sidebar .block {
            border-style: solid;
            border-width: 0px !important;
            padding: 15px 15px;
            margin: 0 0 20px;
        }
        .sidebar h2 {
            margin: 0 0 0.5em;
            border-bottom: none !important;
            padding-bottom: 5px;
            text-shadow: 0 1px 0 #fff;
            font-size: 1.071em;
            line-height: 1.2;
        }
        .container-collapse {
            display: flex;
            height: 100vh;
            width: 100vw;
            position: relative;
            overflow: hidden;
        }
        .responsive-lateral {
            padding-left: 20px !important;
            background: linear-gradient(90deg,rgba(238, 246, 249, 0) 0%, rgba(208, 215, 219, 0) 76%, rgba(159, 171, 179, 0.18) 100%);
        }
        /* Personalizar scroll del menú */
        .sidebar::-webkit-scrollbar {
            width: 6px;
        }

        .sidebar::-webkit-scrollbar-track {
            background: #34495e;
        }

        .sidebar::-webkit-scrollbar-thumb {
            background: #95a5a6;
            border-radius: 3px;
        }

        .sidebar::-webkit-scrollbar-thumb:hover {
            background: #b0c0c5;
        }

        /* Cuando está colapsado - franja azul */
        .sidebar.collapsed {
            width: 19px;
            /* background: #3498db; */
            overflow: hidden; /* Oculta el contenido */
        }

        /* Contenido del menú - scroll independiente */
        .menu-content {
            padding: 20px 0;
            min-height: 100%; /* Altura mínima */
            /* background: #2c3e50; */
            width: 390px; /* Ancho fijo para el contenido */
        }
        .responsive-contenido {
            /* float: right;
            width: 80%; */
            transition: width 0.3s ease;
            flex-grow: 1;
            padding-left: 45px;
            padding-right: 30px;
        }
        .sidebar.collapsed ~ .responsive-contenido {
            width: 97%;
        }
        
        /* Botón de colapso */
        .collapse-btn {
            /* display: none ! important; */
            position: absolute;
            left: 388px;
            top: 390px;
            transform: translateY(-50%);
            width: 24px;
            height: 48px;
            /* background: #2c3e50; */
            background: #3abfb3;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 1000;
            border: none;
            outline: none;
            transition: all 0.3s ease;
            border-radius: 0 6px 6px 0;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
            flex-shrink: 0; /* Evita que se encoja */
        }

        /* Posición del botón cuando el menú está colapsado */
        .sidebar.collapsed + .collapse-btn {
            left: 18px;
            background: #656565;
        }

        .collapse-btn:hover {
            width: 28px;
            filter: brightness(1.1);
        }

        .js-form-item.js-form-type-select.form-type-select.js-form-item-field-materia-target-id.form-item-field-materia-target-id.mb-3 {
            width: 220px;
            margin-left: 15px !important;
        }
        .js-form-item.js-form-type-textfield.form-type-textfield.js-form-item-title.form-item-title.mb-3 {
            width: 22%;
        }
        .js-form-item.js-form-type-textfield.form-type-textfield.js-form-item-field-autoria-value.form-item-field-autoria-value.mb-3 {
            width: 9vw;
        }

        .form-select {
            display: block;
            width: 209px !important;
        }
        /* Flecha usando CSS puro */
        .arrow {
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            transition: transform 0.3s ease;
        }

        .arrow-left {
            border-right: 10px solid white;
            border-left: 0;
        }

        .arrow-right {
            border-left: 10px solid white;
            border-right: 0;
        }
        .sidebar {
            border-right: 1px solid #c9c9c9;
            border-left: 0;
            margin-top: 20px;
        }
        /* Estilos del menú */
        .menu-title {
            padding: 15px 20px;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #95a5a6;
            border-bottom: 1px solid #34495e;
            margin: 10px 0 5px 0;
        }

        .menu-title:first-of-type {
            margin-top: 0;
        }

        .menu-item {
            padding: 12px 20px;
            cursor: pointer;
            transition: background 0.2s;
            white-space: nowrap;
            font-size: 14px;
        }

        .menu-item:hover {
            background: #34495e;
        }

        .menu-section {
            margin-bottom: 15px;
        }
        .region-lateral h2 {
            color: #424242 !important;
            font-size: 18px;
            font-weight: bold;
        }
        .region-lateral ul, li {
            color: #424242 !important;
            list-style-type: none;
        }
        /* Contenido principal con scroll */
        .main-content {
            flex: 1;
            padding: 30px;
            background: white;
            margin: 20px 20px 20px 40px;
            border-radius: 12px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.08);
            transition: margin-left 0.3s ease;
            overflow-y: auto; /* Scroll para el contenido principal */
            height: calc(100vh - 40px); /* Altura total menos márgenes */
        }

        /* Personalizar scroll del contenido principal */
        .main-content::-webkit-scrollbar {
            width: 8px;
        }

        .main-content::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }

        .main-content::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 4px;
        }

        .main-content::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }

        /* Ajuste cuando el menú está colapsado */
        .sidebar.collapsed ~ .main-content {
            margin-left: 50px;
        }

        /* Estilos del contenido */
        /* h1 {
            color: #2c3e50;
            margin-bottom: 20px;
            font-size: 28px;
        } */

        /* p {
            color: #7f8c8d;
            line-height: 1.6;
            margin-bottom: 30px;
        } */

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }

        .stat-card {
            background: #f8fafc;
            padding: 25px;
            border-radius: 10px;
            border: 1px solid #e9ecef;
        }

        .stat-card h3 {
            color: #64748b;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .stat-card .value {
            font-size: 28px;
            font-weight: 600;
            color: #2c3e50;
        }

        .content-box {
            background: #f8fafc;
            border: 1px solid #e9ecef;
            border-radius: 10px;
            padding: 25px;
            margin-top: 30px;
        }

        .content-box h2 {
            color: #2c3e50;
            margin-bottom: 15px;
            font-size: 20px;
        }

        .feature-list {
            list-style: none;
            margin-top: 15px;
        }

        .feature-list li {
            padding: 8px 0;
            color: #64748b;
            border-bottom: 1px solid #e9ecef;
        }

        .feature-list li:last-child {
            border-bottom: none;
        }

        .feature-list li::before {
            content: "•";
            color: #2c3e50;
            font-weight: bold;
            margin-right: 10px;
        }

        /* Texto vertical en la franja (opcional) */
        .franja-texto {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(180deg);
            color: white;
            font-size: 12px;
            font-weight: bold;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            white-space: nowrap;
            letter-spacing: 2px;
        }

        .sidebar.collapsed .franja-texto {
            display: block;
        }

        /* Para contenido de prueba largo */
        .largo-content {
            height: 800px; /* Simula contenido largo */
            border: 2px dashed #e0e0e0;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
        }
        .ocultar-sidebar {
            display: none !important;
          }
          .row-flex {
            display: flex;
            transition: all 0.3s ease;
          }
          .row-flexin {
            display: block;
            transition: all 0.3s ease;
          }
/* =========================================
   CONTENEDOR GENERAL
========================================= */

#materias-mobile-sidebar{
    position:relative;
    width:100%;
  }
  
  /* =========================================
     BOTÓN TOGGLE
  ========================================= */
  
  #materias-sidebar-toggle{
    width:100%;
    border:none;
    background: none;
    padding:16px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    font-size:16px;
    font-weight:600;
    border-radius:12px;
  }
  
  /* =========================================
     PANEL
  ========================================= */
  
  .materias-sidebar-panel{
    margin-top:10px;
    background:#111827;
    border-radius:14px;
    overflow:hidden;
  
    max-height:0;
    opacity:0;
    visibility:hidden;
  
    transition:
      max-height .45s ease,
      opacity .25s ease;
  }
  
  /* PANEL ACTIVO */
  
  #materias-mobile-sidebar.materias-panel-open .materias-sidebar-panel{
    max-height:1200px;
    opacity:1;
    visibility:visible;
  }
  
  /* =========================================
     ITEM
  ========================================= */
  
  .materias-sidebar-item{
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  
  /* =========================================
     BOTÓN INTERNO
  ========================================= */
  
  .materias-sidebar-btn{
    width:100%;
    background:none;
    border:none;
    color:#fff;
    padding:18px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
    transition:.3s;
  }
  
  .materias-sidebar-btn:hover{
    background:rgba(255,255,255,.05);
  }
  
  /* =========================================
     LABEL
  ========================================= */
  
  .segovia-sidebar-label{
    font-size:15px;
    font-weight:500;
  }
  
  /* =========================================
     FLECHA
  ========================================= */
  
  .materias-sidebar-arrow{
    font-size:13px;
    transition:transform .35s ease;
  }
  
  /* =========================================
     SUBMENU
  ========================================= */
  
  .materias-sidebar-submenu{
    background:#1f2937;
  
    max-height:0;
    overflow:hidden;
  
    transition:max-height .4s ease;
  }
  
  /* LINKS */
  
  .materias-sidebar-submenu a{
    display:block;
    padding:14px 20px 14px 32px;
    color:#d1d5db;
    text-decoration:none;
    font-size:14px;
    transition:.25s;
  }
  
  .materias-sidebar-submenu a:hover{
    background:rgba(255,255,255,.05);
    color:#fff;
  }
  
  /* =========================================
     ITEM ABIERTO
  ========================================= */
  
  .materias-sidebar-item.materias-submenu-open
  .materias-sidebar-submenu{
    max-height:500px;
  }
  
  .materias-sidebar-item.materias-submenu-open
  .materias-sidebar-arrow{
    transform:rotate(180deg);
  }
  
  /* =========================================
     RESPONSIVE
  ========================================= */
  
  /* OCULTO EN DESKTOP */
  
  @media(min-width:992px){
  
    #materias-mobile-sidebar{
      display:none;
    }
  
  }

/* -------- Responsive -------- */
        
        @media (max-width: 768px) {
            .sidebar {
                /* position: fixed; */
                z-index: 1000;
            }
            
            .main-content {
                margin: 10px 10px 10px 50px;
                padding: 20px;
                height: calc(100vh - 20px);
            }

            .stats-grid {
                grid-template-columns: 1fr;
            }
            .sidebar:not(.collapsed) ~ .main-content .row-flex {
                display: block;
              }
            
            
        }
        @media (max-width: 992px) {
            .sidebar {
                display: none !important;
            }
            .collapse-btn {
                display: none !important;
            }
        }