/*
Theme Name: TEMPLATE VISION UAS 2029 ROUNDED VERSION - MULTIPURPOSE
Description: Template de desarrollo UAS con las reglas de diseño institucional 'UAS con visión de futuro 2029', con capacidades multiproposito
Author: El Canan    
Version: 2.0
Update: AGO 14, 2025
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: template-vision-uas-2029-rounded-version-multipurpose
Copyright: © 2025 Universidad Autónoma de Sinaloa
Tested up to: 6.5
Requires at least: 5.0
Requires PHP: 7.4
*/

/* ==========================================================
   VARIABLES CSS: Colores y fuentes institucionales
   ========================================================== */
:root {
  --color-azul: #1362af;
  --color-azul-secundario: #1D71B8;
  --color-dorado: #ad9716;
  --color-dorado-claro: #d1b648;
  --color-fondo: #fbfbfb;
  --fuente-principal: 'Roboto Condensed', sans-serif;
}

/* ==========================================================
   RESET Y TIPOGRAFÍA GLOBAL
   ========================================================== */
* {
  font-family: var(--fuente-principal);
  box-sizing: border-box;
}
body {
  background: var(--color-fondo);
  margin: 0;
  padding: 0;
}

/* ==========================================================
   BLOQUES DE GUTENBERG Y ESTILOS BÁSICOS
   ========================================================== */
.wp-block { margin-bottom: 1.5rem; }
.wp-block-columns { display: flex; gap: 1rem; }
.wp-block-column { flex: 1; padding: 1rem; }
.wp-block-button__link {
  background-color: var(--color-azul-secundario);
  color: #fff;
  padding: 0.75em 1.5em;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.wp-block-button__link:hover { background-color: var(--color-azul); }

/* ==========================================================
   HEADER Y MENÚ PRINCIPAL
   ========================================================== */
.header { color: #fff; }
.blue-header-main {
  background-image: linear-gradient(90deg, var(--color-azul-secundario) 0%, var(--color-azul) 100%);
}
.blue-header-secundary {
  background-image: linear-gradient(90deg, var(--color-azul) 0%, var(--color-azul-secundario) 100%);
  position: relative;
  z-index: 1;
}
.etiqueta-uas {
  font-weight: 300;
  text-transform: uppercase;
}
.titulo {
  text-align: right;
  letter-spacing: 0px;
  text-transform: uppercase;
}
.logo-uas { position: relative; z-index: 2; }
.menu {
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 14px;
}
.header-menu, .offcanvas {
  background-image: linear-gradient(90deg, var(--color-dorado) 20%, var(--color-dorado-claro) 80%);
  color: #fff;
  font-weight: 300;
}
.header-menu a, .header-menu ul li a, .header-menu ul {
  text-decoration: none;
  color: #fff;
  list-style: none;
}
.menu-menu-container ul { text-align: center; margin-bottom: 0; }
.menu-menu-container ul.main-menu > li:hover { background: var(--color-dorado); }
.menu-menu-container ul.main-menu li:hover > ul.sub-menu { display: block; padding-top: 10px; }
.menu-menu-container ul.main-menu li {
  list-style: none;
  display: inline-block;
  padding: 5px 30px;
  position: relative;
}
.menu-menu-container a { color: #fff; text-decoration: none; }
.menu-menu-container .sub-menu {
  display: none;
  position: absolute;
  width: 350px;
  background: var(--color-dorado);
  z-index: 3000;
  top: 30px;
  left: 0px;
  border-radius: 0px 5px 5px 5px;
}
.menu-menu-container ul.sub-menu li:hover { font-weight: 700; }
.menu-menu-container ul.sub-menu li { display: block; text-align: left; margin: 10px 0px; padding: 5px; }

/* ===== Submenús de segundo nivel ===== */
.menu-menu-container ul.sub-menu ul.sub-menu { background: #000; color: #fff; border-radius: 5px; left: 40px; }
.menu-menu-container ul.sub-menu ul.sub-menu a { color: #fff; }
.menu-menu-container ul.sub-menu li:hover { font-weight: 700; }
.menu-menu-container ul.sub-menu li:hover ul.sub-menu { font-weight: 300; }

/* ==========================================================
   SLIDER Y COMPONENTES VISUALES
   ========================================================== */
.slide, .slide-static, .slider-box {
  background: #e6ebf7;
  height: 350px;
  margin-top: -16px;
  padding-top: 20px;
}
.slide-static { height: 450px; }
.slide-wrapper { padding: 30px 0px; color: var(--color-azul); }
.img-slide { text-align: center; }
.img-slide img { width: 100%; height: auto; }
.slide-ancla a { font-size: 15px; color: var(--color-azul); text-decoration: none; }
.slide-ancla svg { transition: transform 450ms; }
.slide-ancla a:hover svg { transform: rotate(-45deg); }
.carousel-indicators [data-bs-target] { background-color:#1362af; }

/* ==========================================================
   COMPONENTES: MENSAJES, AZUL Y DORADO, ANCLAS
   ========================================================== */
.message { padding: 30px 0 0 0; font-weight: 300; font-size: 20px; color: var(--color-azul); }
.message strong { font-weight: 800; }
.message img { width: 80%; height: auto; }
.dorado, .azul {
  padding: 20px 20px 10px 20px;
  border-radius: 5px;
  text-transform: uppercase;
}
.dorado { background-color: var(--color-dorado); color: #fff; }
.azul { background-color: var(--color-azul); color: #fff; }
.descargar { margin-top: 20px; padding-top: 10px; text-align: right; font-weight: 300; font-size: 15px; }
.descargar a { color:#fff;text-decoration: none; }
.descargar a svg { transition: all 350ms; width: 13px; height: 13px; }
.descargar svg { vertical-align: initial; }
.descargar a:hover svg { width: 17px; height: 17px; }
.envoltorio-wrapper, .envoltorio-wrapper a { color: var(--color-azul); }
.envoltorio a { color: var(--color-azul); text-decoration: none; font-weight: 400; }
.envoltorio hr { border-bottom: 1px solid var(--color-azul); }
a svg { transition: transform 450ms; width: 25px; height: 25px; }
.footer-section a:hover svg { transform: rotate(-45deg); }
.envoltorio-imagen img { width: 100%; height: auto; border-radius: 5px; }

/* ==========================================================
   PRODUCTIVIDAD, NOTICIAS, EVENTOS, CONVOCATORIA, BUSQUEDA, REPOSITORIO
   ========================================================== */

/* ==========================================================
   -- PRODUCTIVIDAD
   ========================================================== */

.productivity {
  background: #ecf2ff;
  padding: 50px 0;
  margin-bottom: 50px;
}
.header-section {
  text-transform: uppercase;
  font-weight: 600;
  background: var(--color-azul);
  color: #fff;
  padding: 25px;
  border-radius: 5px;
  margin-bottom: 20px;
}
.archivo a {
  text-decoration: none;
  color: var(--color-azul);
}
.archivo .extract {
  color: #b5b5b5;
  text-transform: uppercase;
}
.titulo-productividad {
  text-transform: uppercase;
  padding-bottom: 10px;
}
.titulo-productividad a:hover svg {
  transform: rotate(-45deg);
}

/* ==========================================================
   -- NOTICIAS
   ========================================================== */

.titulo-noticia { min-height: 80px;padding-top: 10px; }


/* ==========================================================
   -- ENVOLTORIO Y CABECERAS DE ENVOLTORIO
   ========================================================== */
   .cabecera-envoltorio {
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 10px;
    border-bottom: 1px double var(--color-azul);
    color: var(--color-azul);
  }
  .cabecera-envoltorio-clean {
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 12px;
  }
  .envoltorio-wrapper,
  .envoltorio-wrapper a {
    color: var(--color-azul);
  }
  .envoltorio img {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
  }
  .envoltorio a {
    color: var(--color-azul);
    text-decoration: none;
  }
  .envoltorio .extract {
    color: #000;
    font-weight: 300;
    font-size: 15px;
  }
  .envoltorio hr, .titulo-productividad  {
    border-bottom: 1px solid var(--color-azul);
  }
  .titulo-envoltorio {
    min-height: 90px;
  }

  /* ==========================================================
   -- CONVOCATORIAS Y PÁGINAS INDIVIDUALES
   ========================================================== */
.convocatoria-individual {
  position: relative;
  background: #eef4ff;
  padding: 30px 30px 20px 30px;
  border-radius: 5px;
  transition: all 0.3s ease-out;
  margin-bottom: 20px;
}
.convocatoria-individual { min-height: 280px; }
.convocatoria-individual:hover{
  margin-top: -3px;
}
.convocatoria-individual:hover .flecha-convocatoria svg {
    width: 24px;
    height: 24px;
}
.convocatoria-individual svg{
  width: 20px;
  height: 20px;
  transition: all 350ms;
}
.flecha-convocatoria {
  text-align: right;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.titulo-convocatoria {
  margin-bottom: 10px;
  padding-top: 20px;
}
a.convocatoria-link {
  text-decoration: none;
  border: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================
   -- REPOSITORIO
   ========================================================== */
   .titulo-repositorio {
    color: var(--color-azul);
    text-transform: uppercase;
    margin-bottom: 30px;
    border-bottom: 1px solid #dcdcdc;
    padding-bottom: 20px;
  }
  ul.generaciones-repositorio li {
    list-style: none;
    border-bottom: 1px solid #dcdcdc;
    padding: 10px 0;
    transition: padding 350ms ease-out;
  }
  ul.generaciones-repositorio li a {
    text-decoration: none;
    color: var(--color-azul);
  }
  ul.generaciones-repositorio li:hover {
    padding-left: 5px;
  }
  ul.generaciones-repositorio li a:hover {
    text-decoration: underline;
  }
  .alumno {
    font-weight: 800;
  }

  .dropdown { margin-bottom: 20px; }
  
  /* Tablas generales (si no existen ya en otra sección) */
  table {
    width: 100%;
    border-radius: 5px;
  }
  table a {
    color: var(--color-azul);
  }
  thead {
    background: #eef4ff;
  }
  td {
    border-bottom: .5px solid #a9bed3;
  }

  /* ==========================================================
   -- BÚSQUEDA 
   ========================================================== */
    .mark,
    mark {
    border-radius: 5px;
    color: #51470b;
    }
    .card.convocatoria-individual {
    border: none !important;
    }
    .content-main {
    min-height: 600px;
    }
    .docente-grupo {
    color: #b5b5b5;
    }


/* ==========================================================
   -- OPCIÓN
   ========================================================== */
   .opcion {
    text-transform: uppercase;
  }
  .opcion svg {
    transition: transform 450ms;
  }
  .opcion a:hover svg {
    transform: rotate(-45deg);
  }
  .opcion a {
    font-size: 16px;
  }

/* ==========================================================
   PÁGINAS Y POSTS
   ========================================================== */
.header-page { background: #e6ebf7; margin-top: -20px; }
.page-container { min-height: 400px; font-weight: 300; text-align: justify; }
.page-container img { width: 100%; height: auto; border-radius: 5px; }
.title-page { padding: 30px 0 10px 0; font-size: 30px; color: var(--color-azul); font-weight: 800; text-transform: uppercase; }
.slide-page { height: 350px; }
.extracto-page { text-align: left; color: var(--color-azul); font-size: 20px; font-weight: 300; line-height: 1.5em; }
.slide-page-cover img { width: 100%; height: auto; border-radius: 5px; }
.title-post { color: var(--color-azul); border-bottom: 1px solid var(--color-azul); padding: 40px 0 15px 0; font-size: 30px; }
.header-post img { width: 100%; height: auto; margin-bottom: 20px; border-radius: 5px; }
.data-date { font-weight: 300; letter-spacing: 3px; text-transform: uppercase; padding: 10px 0; }
.blockquote { font-weight: 300; }
.blockquote-footer { padding:10px 0px; }
figure { background: #e6ebf7;padding:20px;margin:20px 0px;border-radius:5px; }

/* ==========================================================
   FOOTER
   ========================================================== */
.footer {
  position: relative;
  bottom: 0;
  width: 100%;
  height: 70px;
  background-image: linear-gradient(90deg, var(--color-dorado) 20%, var(--color-dorado-claro) 80%);
  color: #fff;
  text-align: center;
}
.foot_logo1 { position: absolute; width: 109.19px; top: -40px; left: 0; float: left; }
.foot_logo2 { position: absolute; width: 98.59px; top: -1px; float: right; right: 0; }
.img-fluid { max-width: 100%; height: auto; }
.titulo-footer { text-transform: uppercase; letter-spacing: 5px; padding: 20px; font-weight: 100; font-size: 13px; }
.footer-section {
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-azul);
  border-top: 1px var(--color-azul) solid;
  margin-top: 20px;
  padding: 10px 0;
  text-align: right;
}
.footer-section a { text-decoration: none; color: var(--color-azul); }

/* ==========================================================
   UTILIDADES Y COMPONENTES REUTILIZABLES
   ========================================================== */
.accordion { margin: 30px 0; }
.accordion-button::after { background-image: url('visual/accordion.svg'); }
.accordion-button:not(.collapsed)::after { background-image: url('visual/accordion.svg'); transform: rotate(-180deg); }
.separador { margin: 40px 0; }
.accordion-item { border-radius: 5px; padding: 5px; margin-bottom: 15px; border: 1px solid #bfbfbf; }
.accordion .accordion-item { border: 1px solid #bfbfbf !important; }
.accordion-button { color: #000; background-color: #f7f7f7; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
.accordion-button:not(.collapsed) { outline: 1px solid #dcdcdc; box-shadow: none !important; }
.title-content { margin-top: 15px; margin-bottom: 10px; letter-spacing: 3px; text-transform: uppercase; border-bottom: 1px double var(--color-azul); color: var(--color-azul); }
/* ==========================================================
   TABLAS Y LISTAS
   ========================================================== */
table { width: 100%; border-radius: 5px; }
table a { color: var(--color-azul); }
thead { background: #eef4ff; }
td { border-bottom: .5px solid #a9bed3; }
.wp-block-table table { font-size: 12px; text-align: center; border: 1px solid #dcdcdc; text-transform: uppercase; }
.wp-block-table table td { padding: 10px; }
.wp-block-table table tr:first-child { background-color: #f9f9f9; font-weight: bold; }

/* ==========================================================
   CATEGORIAS ANCLAS
   ========================================================== */  
   .category-anchor { font-size: 15px;font-weight: 300; letter-spacing: 1px;text-transform: uppercase;color: #1362af;border-top: 1px #1362af solid;margin-top: 20px;padding: 10px 0px; }
   .category-anchor  a { text-decoration: none;color:#1362af; }
   .anchor-right a svg { transition: transform 450ms, -webkit-transform 450ms;width:25px;height:25px; }
   .anchor-right a:hover svg { transform: rotate(-45deg); }
   .anchor-left a svg { transition: transform 450ms, -webkit-transform 450ms;width:25px;height:25px; }
   .anchor-left a:hover svg { transform: rotate(45deg); }

/* ==========================================================
   MEDIA QUERIES (RESPONSIVE DESIGN)
   ========================================================== */
@media (max-width: 450px) {
  .etiqueta-uas { font-size: 9px; letter-spacing: 5px; text-align: right; padding: 7px; }
}
@media (min-width: 451px) and (max-width: 500px) {
  .etiqueta-uas { font-size: 9px; letter-spacing: 6px; text-align: right; padding: 7px; }
}
@media (max-width: 500px) {
  .img-slide { display: none; }
  .logo-uas img { width: 105%; }
  .logos-institucionales img { width: 37%; }
  .titulo-sitio { display: none; }
  .dorado { margin-bottom: 10px; }
  .col-xl-4.col-md-12.col-sm-12.envoltorio.noticia.modificacion-extra { margin-bottom: 30px; }
  .blue-header-secundary { height: 22px; margin-top: -22px; }
  .etiqueta-uas { padding: 5px; }
}
@media (min-width: 501px) and (max-width: 575px) {
  .img-slide { display: none; }
  .logo-uas img { width: 105%; }
  .logos-institucionales img { width: 40%; }
  .titulo-sitio { display: none; }
  .etiqueta-uas { font-size: 9px; letter-spacing: 7px; text-align: right; padding: 7px; }
  .dorado { margin-bottom: 10px; }
  .col-xl-4.col-md-12.col-sm-12.envoltorio.noticia.modificacion-extra { margin-bottom: 30px; }
  .blue-header-secundary { height: 28px; margin-top: -28px; }
}
@media (min-width: 576px) and (max-width: 767px) {
  .img-slide { display: none; }
  .logo-uas img { width: 116%; }
  .logos-institucionales img { width: 48%; }
  .titulo { font-size: 12px; padding-top: 5px; font-weight: 300; }
  .etiqueta-uas { font-size: 9px; letter-spacing: 9px; text-align: right; padding: 7px; }
  .dorado { margin-bottom: 10px; }
  .col-xl-4.col-md-12.col-sm-12.envoltorio.noticia.modificacion-extra { margin-bottom: 30px; }
  .blue-header-secundary { height: 28px; margin-top: -28px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .message img { display: none; }
  .img-slide { display: none; }
  .logo-uas img { width: 100%; }
  .logos-institucionales img { width: 49%; }
  .titulo { font-size: 18px; padding-top: 12px; font-weight: 300; }
  .etiqueta-uas { font-size: 11px; letter-spacing: 10px; text-align: center; padding: 7px; }
  .dorado { margin-bottom: 10px; }
  .col-xl-4.col-md-12.col-sm-12.envoltorio.noticia.modificacion-extra { margin-bottom: 30px; }
  .blue-header-secundary { height: 28px; margin-top: -28px; }
}
@media (max-width: 991px) {
  .header-menu ul li { text-align: left; }
  .header-menu ul a { text-decoration: none; color: #fff; }
  .header-menu ul li { list-style: none; padding: 10px 0; }
  .menu-menu-container { display: none; }
  ul#main-menu-movil { font-size: 20px; }
  .menu-nav-movil { display: block; padding: 5px 0; text-align: center; color: #fff; text-decoration: none; }
  .menu-nav-movil:hover { color: #fff; }
  .menu-movil-container .sub-menu { display: none; }
  .col-xl-4.col-md-12.col-sm-12.envoltorio.noticia.modificacion-extra { margin-bottom: 15px; }
  .slide-wrapper h2 { font-weight: 700; font-size: 2em; }
  .titulo-footer { font-size: 13px; }
  .title-post { font-size: 20px; }
}
@media (min-width: 992px) {
  .menu-nav-movil { display: none; }
  .col-xl-4.col-md-12.col-sm-12.envoltorio.noticia.modificacion-extra { margin-bottom: 15px; }
  .slide-wrapper h2 { font-weight: 700; font-size: 2.5em; }
  .title-post { font-size: 30px; }
  .blue-header-secundary { height: 28px; margin-top: -28px; }
  .etiqueta-uas { padding: 7px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .img-slide { display: none; }
  .logo-uas img { width: 100%; }
  .logos-institucionales img { width: 45%; }
  .titulo { font-size: 20px; padding-top: 20px; font-weight: 300; }
  .etiqueta-uas { font-size: 12px; letter-spacing: 13px; text-align: center; }
}
@media (min-width: 1200px) {
  .logo-uas img { width: 85%; }
  .logos-institucionales img { width: 48%; }
  .titulo { font-size: 25px; padding-top: 25px; font-weight: 300; }
  .etiqueta-uas { font-size: 12px; letter-spacing: 13px; text-align: center; }
}
@media (min-width: 1400px) {
  .logo-uas img { width: 83%; }
  .logos-institucionales img { width: 48%; }
  .titulo { font-size: 25px; padding-top: 30px; font-weight: 300; }
  .etiqueta-uas { font-size: 12px; letter-spacing: 18px; text-align: center; }
}