/* Planucawhax DA 4.0.1 — capas de compatibilidad con Joomla 4.
   Cargar DESPUÉS del CSS original. Se preservan los colores, fotos y bloques originales. */

html { scroll-behavior: smooth; }
body { margin: 0; min-width: 0; }
#contenedor { max-width: 100%; }
#cabecera { max-width: 100%; height: auto; }
#cabecera .cabecera-imagen { position: relative; }
#cabecera img { display: block; max-width: 100%; width: 100%; height: auto; }
#cabecera .logo-link { position: absolute; display: block; z-index: 2; }
#cabecera .logo-uc { left: 4.1%; top: 15.4%; width: 15.7%; height: 68.4%; }
#cabecera .logo-cyt { left: 83.0%; top: 24.8%; width: 13.5%; height: 51.3%; }
#cabecera .logo-link:focus-visible { outline: 3px solid #0097ff; outline-offset: -3px; }

/* Menú horizontal: Joomla 4 mod_menu produce .mod-menu y niveles .mod-menu__sub. */
#menu { max-width: 100%; height: auto; min-height: 41px; background: #141414; position: relative; z-index: 100; }
#menu .moduletable_menu, #menu .moduletable { min-height: 41px; box-sizing: border-box; width: 100%;
  background: linear-gradient(to bottom, #32323a, #141414); border-bottom: 4px solid #0097ff; }
#menu ul.mod-menu, #menu ul.menudropdown, #menu ul.menu { display: flex; flex-wrap: nowrap; position: relative;
  float: none; list-style: none; margin: 0; padding: 0; width: 100%; z-index: 1000; }
#menu ul.mod-menu > li, #menu ul.menudropdown > li, #menu ul.menu > li {
  position: relative; display: block; flex: 0 0 auto; float: none; box-sizing: border-box;
  height: auto; padding: 0; margin: 0; border-right: 1px solid #393939; line-height: 1.3;
}
#menu li > a, #menu li > span, #menu li > button:not(.da-submenu-toggle) {
  color: #fff; display: block; padding: 10px 8px; text-decoration: none; font-size: 12px;
  font-family: 'UbuntuLight', 'Trebuchet MS', Arial, sans-serif; background: transparent; border: 0;
}
#menu li:hover > a, #menu li:focus-within > a, #menu li.active > a, #menu li.current > a { background: #0097ff; color: #fff; }
#menu li > ul, #menu ul.mod-menu__sub {
  display: none; position: absolute; left: 0; top: 100%; min-width: 185px; width: max-content; max-width: 340px;
  background: #14569d; border: 1px solid #14569d; list-style: none; padding: 0; margin: 0; z-index: 1002;
  visibility: visible; float: none; white-space: normal;
}
#menu li:hover > ul, #menu li:focus-within > ul, #menu li.da-submenu-open > ul { display: block; }
#menu li > ul > li, #menu ul.mod-menu__sub > li { display: block; float: none; border-bottom: 1px solid rgba(255,255,255,.3); position: relative; }
#menu li > ul > li > a { white-space: normal; padding: 10px 12px; }
#menu li > ul > li > ul { top: 0; left: 100%; }
#menu .nav-toggle { display: none; }
#menu .da-submenu-toggle { position: absolute; top: 3px; right: 1px; padding: 6px 5px; background: transparent;
  color: #fff; border: 0; font-size: 11px; cursor: pointer; }
#menu li:has(> .da-submenu-toggle) > a { padding-right: 24px; }
#menu .menu-empty { min-height: 5px; }

/* Banner de imágenes 1051 × 200, con reglas que evitan desbordamientos en móviles. */
#banner { max-width: 100%; height: auto; min-height: 0; overflow: hidden; }
#banner img { max-width: 100%; height: auto; }
#banner .moduletable { margin: 0; }

/* Columnas y contenido: los anchos originales se mantienen en escritorio. */
#cuerpo { max-width: 100%; display: flow-root; }
#col-izq, #col-mid, #col-der { max-width: 100%; }
#col-mid { overflow-wrap: anywhere; overflow-x: auto; }
#col-mid img, #col-izq img, #col-der img { max-width: 100%; height: auto; }
#col-mid iframe { max-width: 100%; }
#col-mid .breadcrumb, #col-mid .mod-breadcrumbs { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; font-size: 12px; }
#col-mid .breadcrumb li, #col-mid .mod-breadcrumbs li { display: inline-block; }
#col-mid .article-info { font-size: 11px; }
#col-mid .article-info dt { display: none; }
#col-mid .article-info dd { display: inline-block; margin: 0 .5em 4px 0; }
#col-mid .blog-items { display: block; }
#col-mid .blog-item, #col-mid .blog-items > div, #col-mid .items-leading > div { display: flow-root; box-sizing: border-box;
  margin-bottom: 18px; padding: 10px; background: #fff; border-top: 1px solid #14569d; border-bottom: 1px solid #14569d; }
#col-mid .blog-item figure.item-image, #col-mid .blog-item .item-image { float: left; max-width: 42%; margin: 0 14px 12px 0; }
#col-mid .blog-item figure.item-image img { width: 100%; }
#col-mid .readmore a, #col-mid a.btn { display: inline-block; padding: 8px 16px; border-radius: 4px; }
#col-mid .pagination, #col-mid .pagination ul { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; }
#col-mid .pagination li { display: block; }
#col-mid table { max-width: 100%; }
#col-mid input:not([type=checkbox]):not([type=radio]), #col-mid textarea, #col-mid select { max-width: 100%; }
#col-mid .btn, #col-mid button { cursor: pointer; }

/* Menús laterales del nuevo mod_menu. */
#col-izq .moduletable { margin: 0 auto; padding: 10px 12px; }
#col-izq .moduletable h3 { margin: 0; padding: 12px 0; color: #333; }
#col-izq ul.mod-menu, #col-izq ul.menu { float: none; margin: 0 0 16px; padding: 0; list-style: none; width: auto; }
#col-izq ul.mod-menu li, #col-izq ul.menu li { display: block; float: none; position: relative;
  border: 1px dotted #ccc; background: white; margin: 0; padding: 0; }
#col-izq ul.mod-menu li a, #col-izq ul.menu li a { display: block; padding: 7px 8px; color: #333; background: #fff; text-decoration: none; font-size: 13px; }
#col-izq ul.mod-menu li a:hover, #col-izq ul.mod-menu li.active > a,
#col-izq ul.menu li a:hover { background: #0095ff; color: #fff; }
#col-izq ul.mod-menu ul, #col-izq ul.menu ul { list-style: none; margin: 0; padding-left: 12px; }

#col-der .moduletable, #col-der .moduletable > div { max-width: 100%; }
#footer { max-width: 100%; box-sizing: border-box; height: auto; min-height: 120px; }
#toTop { z-index: 2000; }

/* Vista sin cabecera ni columnas: tmpl=component */
body.da-component-only { background: #fff; }
body.da-component-only #col-mid { float: none; width: auto !important; margin: 0; padding: 20px; max-width: none; border-top: 0; }

@media (max-width: 1080px) {
  #contenedor, #cabecera, #banner, #cuerpo { width: 100%; }
  #cuerpo { box-sizing: border-box; padding: 0 12px 16px; display: flex; flex-wrap: wrap; gap: 12px; }
  #col-izq, #col-mid, #col-der { float: none; margin: 12px 0 0; box-sizing: border-box; }
  #col-izq { flex: 1 1 225px; width: auto; }
  #col-mid, #col-mid.no-col-izq, #col-mid.no-col-der, #col-mid.no-cols {
    flex: 3 1 440px; min-width: 0; width: auto !important; }
  #col-der { flex: 1 1 200px; width: auto; }
}

@media (max-width: 980px) {
  #menu .nav-toggle { display: block; width: 100%; padding: 10px 16px; text-align: left;
    background: #22242b; color: #fff; border: 0; border-bottom: 4px solid #0097ff; cursor: pointer; font-size: 15px; }
  #menu > .moduletable, #menu > .moduletable_menu { display: none; }
  #menu.nav-open > .moduletable, #menu.nav-open > .moduletable_menu { display: block; }
  #menu ul.mod-menu, #menu ul.menudropdown, #menu ul.menu { display: block; width: 100%; }
  #menu ul.mod-menu > li, #menu ul.menudropdown > li, #menu ul.menu > li { display: block; border-bottom: 1px solid #414141; }
  #menu li > ul, #menu ul.mod-menu__sub { position: static; display: none; width: 100%; min-width: 0; max-width: none; border: 0; }
  #menu li:hover > ul, #menu li:focus-within > ul { display: none; }
  #menu li.da-submenu-open > ul { display: block; }
  #menu li > ul > li > a { padding-left: 22px; }
  #menu .da-submenu-toggle { top: 2px; right: 12px; padding: 8px; font-size: 15px; }
}

@media (max-width: 680px) {
  #cuerpo { display: flex; flex-direction: column; padding: 0 10px 16px; gap: 12px; }
  #col-izq, #col-mid, #col-der { margin: 0; width: 100% !important; flex: none; }
  #col-mid { padding: 16px; }
  #col-mid .blog-item figure.item-image, #col-mid .blog-item .item-image { float: none; max-width: 100%; margin: 0 0 12px; }
  #footer { padding: 18px; }
}