@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@200..900&display=swap");
@import url("default.css");

/* =============================================================================
   LAS CUENCAS CUENTAN v7
   Basado en el tema Default de Tiki (Bootstrap 5.3)
   Estructura por capas: oscuro (header/footer) → medio (fondo) → claro (superficie)
   Las variables de color son sobreescritas por cada option.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. VARIABLES GLOBALES
   ----------------------------------------------------------------------------- */

:root {
  /* Espaciado */
  --tiki-page-content-top-margin: 10px;
  /* Offset para anchors del AutoTOC. Compensa el header superior cuando la navegación usa fixed-top.
     Estado original del archivo (según backup.zip): no existía esta variable ni había compensación para anchors.
     Valor activo: 110px. */
  --lcc-anchor-offset: 110px;
  /* Estado original: sin --lcc-anchor-offset */

  /* Escala de capas */
  --lcc-z-underlay: 0;
  --lcc-z-content: 1;
  --lcc-z-float: 5;
  --lcc-z-pagetop: 30;
  --lcc-z-pagetop-dropdown: 31;
  --lcc-z-header: 40;
  --lcc-z-overlay: 50;
  --lcc-radius: 0.5rem;
  --lcc-radius-sm: 0.25rem;
  --lcc-pill-radius: 2rem;

  /* Colores de superficie y contraste */
  --lcc-surface: #ffffff;
  --lcc-on-dark: #ffffff;

  /* Paleta base (opción azul por defecto, sobreescrita por cada option) */
  --lcc-ink: #316492;
  --lcc-link: #3885ba;
  --lcc-link-hover: #6db5dd;
  --lcc-bg: #dbe6ef;
  --lcc-top-accent: #bfe1f7;
  --lcc-top-accent-bg: #21496b;
  --lcc-border: #c9d8e5;
  --lcc-soft-bg: #f5f7f9;
  --lcc-pagetop-bg: #bfe1f7;
  --lcc-pagetop-border: #6db5dd;

  /* Bootstrap: curvaturas */
  --bs-border-radius: var(--lcc-radius);
  --bs-border-radius-sm: var(--lcc-radius-sm);
  --bs-border-radius-lg: var(--lcc-radius);

  /* Bootstrap: tipografía */
  --bs-body-font-size: 1rem;
  --bs-font-sans-serif: 'Source Sans 3', system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-body-font-family: var(--bs-font-sans-serif);

  /* Bootstrap: colores (sincronizados con la paleta LCC) */
  --bs-body-color: var(--lcc-ink);
  --bs-heading-color: var(--lcc-ink);
  --bs-emphasis-color: var(--lcc-ink);
  --bs-link-color: var(--lcc-link);
  --bs-link-hover-color: var(--lcc-link-hover);
  --bs-body-bg: var(--lcc-surface);
}


/* -----------------------------------------------------------------------------
   2. BODY Y TIPOGRAFÍA BASE
   ----------------------------------------------------------------------------- */

body.tiki {
  font-family: var(--bs-font-sans-serif);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  background-color: var(--lcc-bg);
  background-image: none;
  color: var(--lcc-ink);
}

/* Corrección de herencias de color de Bootstrap — acotado a áreas de contenido */
:is(#col1, #col2, #col3, .middle, .wikitext, .page-content, .article, .blog-post) * { color: var(--lcc-ink); }
ul li::marker, ol li::marker { color: var(--lcc-ink) !important; }
.tiki .card-header *, .tiki .btn * { color: inherit !important; }

/* Tipografía: cuerpo */
body,
.tiki .mw-parser-output,
.tiki .toastui-editor-contents {
  font-family: var(--bs-font-sans-serif) !important;
  line-height: 1.5;
}

/* Tipografía: títulos principales — serif */
body.tiki h1, body.tiki h2, body.tiki h3,
.page-header h1, .page-header h2 {
  font-family: "Linux Libertine", "Times New Roman", serif !important;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--lcc-ink) !important;
}

/* Tipografía: títulos secundarios — sans-serif */
body.tiki h4, body.tiki h5, body.tiki h6,
.tiki .card-header h1, .tiki .card-header h2, .tiki .card-header h3,
.tiki .card-header h4, .tiki .card-header h5, .tiki .card-header h6,
.tiki .card-title, .tiki .module-title {
  padding: 0 !important;
  font-size: 1.25rem !important;
  color: var(--lcc-ink) !important;
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* Tipografía: editor WYSIWYG */
.tiki .mw-parser-output h1, .tiki .mw-parser-output h2,
.tiki .mw-parser-output h3, .tiki .mw-parser-output h4,
.tiki .mw-parser-output h5, .tiki .mw-parser-output h6 {
  font-family: var(--bs-font-sans-serif) !important;
  line-height: 1.2;
}

.tiki .toastui-editor-contents h1, .tiki .toastui-editor-contents h2,
.tiki .toastui-editor-contents h3, .tiki .toastui-editor-contents h4,
.tiki .toastui-editor-contents h5, .tiki .toastui-editor-contents h6,
.tiki .toastui-editor-contents .h1, .tiki .toastui-editor-contents .h2,
.tiki .toastui-editor-contents .h3, .tiki .toastui-editor-contents .h4,
.tiki .toastui-editor-contents .h5, .tiki .toastui-editor-contents .h6 {
  font-family: var(--bs-font-sans-serif) !important;
  font-weight: 400;
  color: var(--bs-body-color);
  line-height: 1.2;
}



/* -----------------------------------------------------------------------------
   3. CAPA OSCURA: HEADER Y FOOTER
   ----------------------------------------------------------------------------- */

/* Fondo oscuro en header y footer: usa --lcc-ink como color base.
   Cada option sobreescribe --lcc-ink en :root para cambiar este fondo. */
/* Fondo oscuro en footer: usa --lcc-ink transparente y difuminado. */
footer#footer, #cfooter {
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
  border-radius: 0 !important;
  background-color: color-mix(in srgb, var(--lcc-ink) 90%, transparent) !important;
  backdrop-filter: blur(5px);
}

/* Header principal unificado (fondo semi-transparente que respeta el color dinámico) */
header.tiki-top-nav-light,
header.tiki-top-nav-dark {
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
  border-radius: 0 !important;
  background-color: color-mix(in srgb, var(--lcc-ink) 90%, transparent) !important;
  backdrop-filter: blur(5px);
}

/* Bordes internos (3px) superpuestos por encima del contenido y el SVG del río */
footer#footer::after,
#cfooter::after,
header.tiki-top-nav-light::after,
header.tiki-top-nav-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--lcc-ink) 90%, transparent),
              inset 0 -3px 0 color-mix(in srgb, var(--lcc-ink) 90%, transparent);
  pointer-events: none;
  z-index: var(--lcc-z-content);
}

/* Hacer el nav interior completamente transparente para no duplicar fondos */
nav.tiki-top-nav-light,
nav.tiki-top-nav-dark,
.top_modules {
  background: transparent !important;
  backdrop-filter: none;
  box-shadow: none !important;
}

/* Footer: padding y sin borde superior */
footer#footer, #cfooter {
  border-top: none !important;
  padding: 2rem 0;
}


/* Imagen decorativa del río también en el footer.
   Se reutiliza el mismo SVG del header, espejado en ambos sentidos
   para que se sienta parte de la misma familia visual sin verse idéntico. */
footer#footer,
#cfooter {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

footer#footer::before,
#cfooter::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/rio.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.38;
  transform: scale(-1, -1);
  transform-origin: center center;
  pointer-events: none;
  z-index: var(--lcc-z-underlay);
}

footer#footer > *,
#cfooter > * {
  position: relative;
}

/* Texto claro sobre fondo oscuro (header, footer) */
.top_modules *, footer#footer *, #cfooter * {
  color: var(--lcc-on-dark) !important;
}

/* Variables Tiki de navbar: sincronizadas con la paleta LCC.
   Estas variables las usa el SCSS base de Tiki para colorear las navbars.
   Al usar var(--lcc-*), cambian automáticamente con cada option. */
.tiki-top-nav-light, .tiki-topbar-nav-light {
  --tiki-top-bg: var(--lcc-ink);
  --tiki-top-color: var(--lcc-on-dark);
  --tiki-top-hover-color: var(--lcc-top-accent);
  --tiki-top-active-color: var(--lcc-on-dark);
  --tiki-top-hover-bg: var(--lcc-top-accent-bg);
  --tiki-top-active-bg: var(--lcc-top-accent-bg);
  --tiki-topbar-bg: var(--lcc-ink);
  --tiki-topbar-color: var(--lcc-on-dark);
  --tiki-topbar-hover-color: var(--lcc-top-accent);
  --tiki-topbar-active-color: var(--lcc-on-dark);
  --tiki-topbar-hover-bg: var(--lcc-top-accent-bg);
  --tiki-topbar-active-bg: var(--lcc-top-accent-bg);
}

/* Links y textos del header: blanco sobre fondo oscuro */
.top_modules .navbar-nav .nav-link, .top_modules .navlink,
.top_modules .navbar-brand, .top_modules .navbar-text,
.sitetitle, .sitetagline, .sitesubtitle,
body.tiki h1.sitetitle, body.tiki h2.sitetitle, body.tiki h1.sitesubtitle,
body.tiki h2.sitetagline, body.tiki h3.sitetagline, body.tiki h2.sitesubtitle {
  color: var(--lcc-on-dark) !important;
}

.tiki-top-nav-light span, .tiki-top-nav-light p,
.tiki-topbar-nav-light span, .tiki-topbar-nav-light p {
  color: var(--lcc-on-dark) !important;
}

.tiki-top-nav-light a, .tiki-topbar-nav-light a {
  color: var(--lcc-on-dark) !important;
}

/* Hover de links en header: usa el color acento claro de la paleta */
.tiki-top-nav-light a:hover, .tiki-topbar-nav-light a:hover,
.top_modules .navbar-nav .nav-link:hover, .top_modules .navlink:hover,
.top_modules .navbar-brand:hover {
  color: var(--lcc-top-accent) !important;
}

/* Inputs y dropdowns dentro del header: texto oscuro sobre fondo claro */
.tiki-topbar-nav-light input:not([type="checkbox"]):not([type="radio"]), 
.tiki-top-nav-light input:not([type="checkbox"]):not([type="radio"]), 
.top_modules input:not([type="checkbox"]):not([type="radio"]), 
header input:not([type="checkbox"]):not([type="radio"]),
.top_modules .module input:not([type="checkbox"]):not([type="radio"]), 
header .module input:not([type="checkbox"]):not([type="radio"]), 
.top_modules .card input:not([type="checkbox"]):not([type="radio"]), 
header .card input:not([type="checkbox"]):not([type="radio"]) {
  color: var(--lcc-ink) !important;
  background-color: var(--lcc-surface) !important;
}

/* Imagen decorativa del río como sobreimpresión en el header general */
header.tiki-top-nav-light,
header.tiki-top-nav-dark {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

header.tiki-top-nav-light::before,
header.tiki-top-nav-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/rio.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.38;
  pointer-events: none;
  z-index: var(--lcc-z-underlay);
}

header.tiki-top-nav-light > *,
header.tiki-top-nav-dark > * {
  position: relative;
}

/* Z-index del header sobre el contenido */
#header_outer,
#page-header,
#top_modules.top_modules {
  position: relative;
  z-index: var(--lcc-z-header);
}

#middle_outer {
  position: relative;
  z-index: var(--lcc-z-content);
}

/* Transparencia de tarjetas y módulos dentro del header */
.top_modules .card, .top_modules .module,
.top_modules .card-body, .top_modules .card-header,
.top_modules .bg-light, .top_modules .bg-white,
header .card, header .module, header .bg-light, header .bg-white,
.tiki-top-nav-light .card, .tiki-top-nav-light .module,
.tiki-top-nav-light .bg-light, .tiki-top-nav-light .bg-white,
.tiki-topbar-nav-light .card, .tiki-topbar-nav-light .module,
.tiki-topbar-nav-light .bg-light, .tiki-topbar-nav-light .bg-white {
  background-color: transparent !important;
  color: var(--lcc-on-dark) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.top_modules .card *, .top_modules .module *,
header .card *, header .module * {
  color: inherit !important;
}

/* Fondo transparente de navbars dentro del header */
header.navbar, .tiki-top-nav-light, .tiki-topbar-nav-light {
  border-bottom: none !important;
}

.top_modules header.navbar,
.top_modules .tiki-top-nav-light,
.top_modules .tiki-topbar-nav-light,
.top_modules .navbar,
.top_modules .nav {
  background-color: transparent !important;
}

.tiki-topbar-nav-light, .tiki-topbar-nav-dark {
  margin-top: 0 !important;
}

/* Topbar (barra entre header y contenido) con color acento claro */
.topbar-wrapper.tiki-topbar-nav-light,
.topbar.tiki-topbar-nav-light {
  background-color: var(--lcc-top-accent);
  color: var(--lcc-ink);
}

.topbar-wrapper.tiki-topbar-nav-light .nav-link,
.topbar.tiki-topbar-nav-light .nav-link,
.topbar-wrapper.tiki-topbar-nav-light .btn-link,
.topbar.tiki-topbar-nav-light .btn-link {
  color: var(--lcc-ink);
}

.topbar-wrapper.tiki-topbar-nav-light .nav-link:hover,
.topbar.tiki-topbar-nav-light .nav-link:hover,
.topbar-wrapper.tiki-topbar-nav-light .btn-link:hover,
.topbar.tiki-topbar-nav-light .btn-link:hover {
  color: var(--lcc-link);
}

/* Espacio entre navbar fija y contenido (layout classic bootstrap) */
body.navbar-padding {
  padding-top: calc(90px + 10px) !important;
}

/* Espacio superior al contenedor de contenido */
body.tiki .middle_outer {
  margin-top: 10px !important;
}


/* -----------------------------------------------------------------------------
   4. CAPA MEDIA: FONDO Y CONTENIDO PRINCIPAL
   ----------------------------------------------------------------------------- */

/* Columnas transparentes */
#col1, #col2, #col3,
#middle-column,
.tiki-center {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  margin-bottom: var(--tiki-page-content-top-margin) !important;
}

.middle {
  background-color: transparent !important;
}

/* Módulos transparentes */
.tiki .module {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}


/* -----------------------------------------------------------------------------
   5. CAPA CLARA: SUPERFICIES DE LECTURA
   ----------------------------------------------------------------------------- */

/* Tarjetas */
.tiki .card {
  background-color: var(--lcc-surface);
  border-radius: var(--lcc-radius);
  border: 1px solid var(--lcc-border);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
}

/* Tarjetas flotantes (float inline): elevar z-index para que los bloques
   vecinos (que ocupan 100% del ancho) no capturen sus clicks. */
.wikitext .card[style*="float"],
.page-content .card[style*="float"],
#page-data .card[style*="float"] {
  position: relative;
  z-index: var(--lcc-z-float);
}

.tiki .card-body {
  background-color: var(--lcc-surface);
  border-bottom-left-radius: calc(var(--lcc-radius) - 1px);
  border-bottom-right-radius: calc(var(--lcc-radius) - 1px);
}

.tiki .card-footer {
  background-color: var(--lcc-soft-bg);
  border-bottom-left-radius: calc(var(--lcc-radius) - 1px);
  border-bottom-right-radius: calc(var(--lcc-radius) - 1px);
}

.tiki .card-header {
  background-color: var(--lcc-surface);
  border-bottom: 2px solid var(--lcc-bg);
  border-radius: calc(var(--lcc-radius) - 1px) calc(var(--lcc-radius) - 1px) 0 0;
  padding: 0.75rem 1rem;
}

/* Superficies de lectura: fondo blanco, borde redondeado, sombra sutil.
   Se aplica a todo contenedor de contenido wiki/artículo/blog. */
.wikitext,
.page-content, .article, .blog-post, .mw-parser-output {
  background-color: var(--lcc-surface) !important;
  border-radius: var(--lcc-radius) !important;
  border: 1px solid var(--lcc-border);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
  padding: 2rem;
}

/* Color de texto oscuro en superficies claras */
#col1 .card *, #col2 .card *, #col3 .card *, .middle .card *,
#col1 .module *, #col2 .module *, #col3 .module *, .middle .module *,
.wikitext *, .page-content *, .article *, .blog-post * {
  color: var(--lcc-ink) !important;
}

/* Excepción: botones preservan sus colores propios */
#col1 .card .btn, #col1 .card .btn *, #col2 .card .btn, #col2 .card .btn *,
#col3 .card .btn, #col3 .card .btn *, .middle .card .btn, .middle .card .btn *,
.wikitext .btn, .wikitext .btn *, .page-content .btn, .page-content .btn * {
  color: inherit !important;
}

/* Excepción: clases text-white/text-light sobre superficies claras */
.tiki .card.text-white, .tiki .card .text-white,
.tiki .card.text-light, .tiki .card .text-light,
.tiki .module.text-white, .tiki .module .text-white,
.wikitext.text-white, .wikitext .text-white,
.wikitext.text-light, .wikitext .text-light {
  color: var(--lcc-ink) !important;
}


/* -----------------------------------------------------------------------------
   6. MENÚ PAGETOP (barra de navegación interna)
   ----------------------------------------------------------------------------- */

#mod-menupagetop1, .mod-menupagetop1, [id^="mod-menupagetop"],
[id^="mod-menupagetop"] .card,
[id^="mod-menupagetop"] .bg-light,
[id^="mod-menupagetop"] .navbar,
[id^="mod-menupagetop"] .tiki-nav-light,
[id^="mod-menupagetop"] > div {
  background-color: var(--lcc-pagetop-bg);
  border-radius: var(--lcc-radius);
  border-color: var(--lcc-pagetop-border);
}

[id^="mod-menupagetop"] .tiki-nav-light,
[id^="mod-menupagetop"] > div {
  border-radius: var(--lcc-radius);
}

#mod-menupagetop1,
#mod-menupagetop1 .navbar,
#mod-menupagetop1 .navbar-nav,
#mod-menupagetop1 .nav-link,
#mod-menupagetop1 .nav-link *,
#mod-menupagetop1 .navbar-brand,
#mod-menupagetop1 .dropdown-item,
#mod-menupagetop1 .dropdown-item * {
  color: var(--lcc-ink);
}

#mod-menupagetop1 .nav-link:hover,
#mod-menupagetop1 .nav-link:focus,
#mod-menupagetop1 .dropdown-item:hover,
#mod-menupagetop1 .dropdown-item:focus {
  color: var(--lcc-link);
}

#mod-menupagetop1,
#mod-menupagetop1 .navbar,
#mod-menupagetop1 .navbar-collapse,
#mod-menupagetop1 .navbar-nav,
#mod-menupagetop1 .dropdown {
  position: relative;
  overflow: visible !important;
}

#mod-menupagetop1 { z-index: var(--lcc-z-pagetop); }
#mod-menupagetop1 .dropdown-menu { z-index: var(--lcc-z-pagetop-dropdown); }


/* -----------------------------------------------------------------------------
   7. DROPDOWNS Y MENÚS
   ----------------------------------------------------------------------------- */

/* Dropdown base */
.dropdown-menu {
  --bs-dropdown-bg: var(--lcc-surface);
  --bs-dropdown-link-color: var(--lcc-ink);
  --bs-dropdown-link-hover-bg: var(--lcc-bg);
  --bs-dropdown-link-hover-color: var(--lcc-ink);
  --bs-dropdown-link-active-bg: var(--lcc-bg);
  --bs-dropdown-link-active-color: var(--lcc-link);
  border-radius: var(--lcc-radius);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--lcc-border);
}

.dropdown-item,
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item *,
.top_modules .dropdown-menu .dropdown-item,
.top_modules .dropdown-menu .dropdown-item * {
  color: var(--lcc-ink) !important;
}

/* Dropdowns oscuros de Bootstrap en el panel de administración:
   se renderizan sobre fondo claro, hay que revertirlos al esquema claro. */
.tiki .dropdown-menu.dropdown-menu-dark,
.tiki ul.dropdown-menu.tiki-admin-top-nav-dark {
  --bs-dropdown-bg: var(--lcc-surface);
  --bs-dropdown-color: var(--lcc-ink);
  --bs-dropdown-link-color: var(--lcc-ink);
  --bs-dropdown-link-hover-color: var(--lcc-link);
  --bs-dropdown-link-hover-bg: var(--lcc-soft-bg);
  --bs-dropdown-border-color: var(--lcc-border);
  --lcc-on-dark: var(--lcc-ink);
  background-color: var(--lcc-surface) !important;
  color: var(--lcc-ink) !important;
}

.tiki .dropdown-menu.dropdown-menu-dark .dropdown-item,
.tiki ul.dropdown-menu.tiki-admin-top-nav-dark .dropdown-item {
  color: var(--lcc-ink) !important;
}

.tiki .dropdown-menu.dropdown-menu-dark .dropdown-item:hover,
.tiki .dropdown-menu.dropdown-menu-dark .dropdown-item:focus,
.tiki ul.dropdown-menu.tiki-admin-top-nav-dark .dropdown-item:hover,
.tiki ul.dropdown-menu.tiki-admin-top-nav-dark .dropdown-item:focus {
  background-color: var(--lcc-soft-bg) !important;
  color: var(--lcc-link) !important;
}

/* Popup de login: texto oscuro sobre fondo blanco */
.siteloginbar_poppedup.dropdown-menu,
.siteloginbar_poppedup.dropdown-menu *,
.siteloginbar_popup .dropdown-menu,
.siteloginbar_popup .dropdown-menu * {
  color: var(--lcc-ink) !important;
}

/* Z-index del popup de login */
.siteloginbar_popup,
.siteloginbar_popup .dropdown-menu,
.siteloginbar_poppedup.dropdown-menu {
  z-index: var(--lcc-z-overlay) !important;
}


/* -----------------------------------------------------------------------------
   8. PANEL DE ADMINISTRACIÓN
   ----------------------------------------------------------------------------- */

/* Barra de anclas de administración: el card tiene fondo claro pero el
   div interior usa bg-dark (fondo oscuro), los nav-links necesitan color claro. */
.adminanchors {
  margin-top: 10px !important;
}

.adminanchors .navbar-nav,
.adminanchors .nav-link {
  color: var(--tiki-admin-top-nav-color, var(--lcc-on-dark));
}

.adminanchors .nav-link:hover,
.adminanchors .nav-link:focus,
.adminanchors .nav-link.active {
  color: var(--tiki-admin-top-nav-hover-color, var(--lcc-on-dark)) !important;
}

/* Nav links del admin navbar: fondo oscuro heredado de Tiki
   (--tiki-admin-top-nav-bg: #212529), color hereda var(--lcc-ink) de body.
   Forzamos color claro con la variable de Tiki. */
#admin-navbar-collapse-1 .navbar-nav,
#admin-navbar-collapse-1 .nav-link {
  color: var(--tiki-admin-top-nav-color);
}
#admin-navbar-collapse-1 .nav-link:hover,
#admin-navbar-collapse-1 .nav-link:focus,
#admin-navbar-collapse-1 .nav-link.active,
#admin-navbar-collapse-1 .nav-link.show,
#admin-navbar-collapse-1 .dropdown-toggle.show {
  color: var(--tiki-admin-top-nav-hover-color, var(--tiki-admin-top-nav-color));
}

/* Dropdowns de admin dentro de la barra oscura: mantener texto claro */
#admin-navbar-collapse-1 .dropdown-menu.dropdown-menu-dark,
#admin-navbar-collapse-1 .dropdown-menu.tiki-admin-top-nav-dark,
#admin-navbar-collapse-1 .dropdown-menu.dropdown-menu-dark *,
#admin-navbar-collapse-1 .dropdown-menu.tiki-admin-top-nav-dark * {
  color: var(--lcc-on-dark);
}

#admin-navbar-collapse-1 .dropdown-menu.dropdown-menu-dark .dropdown-item,
#admin-navbar-collapse-1 .dropdown-menu.tiki-admin-top-nav-dark .dropdown-item,
#admin-navbar-collapse-1 .dropdown-menu.dropdown-menu-dark .dropdown-header,
#admin-navbar-collapse-1 .dropdown-menu.tiki-admin-top-nav-dark .dropdown-header,
#admin-navbar-collapse-1 .dropdown-menu.dropdown-menu-dark .form-check-label,
#admin-navbar-collapse-1 .dropdown-menu.tiki-admin-top-nav-dark .form-check-label {
  color: var(--lcc-on-dark);
}

#admin-navbar-collapse-1 .dropdown-menu.dropdown-menu-dark .dropdown-item:hover,
#admin-navbar-collapse-1 .dropdown-menu.dropdown-menu-dark .dropdown-item:focus,
#admin-navbar-collapse-1 .dropdown-menu.tiki-admin-top-nav-dark .dropdown-item:hover,
#admin-navbar-collapse-1 .dropdown-menu.tiki-admin-top-nav-dark .dropdown-item:focus {
  color: var(--lcc-top-accent);
}

/* Panel de control admin: centrar botones del grid */
.tiki-admin .d-flex.align-content-start.flex-wrap,
.admin-content .d-flex.align-content-start.flex-wrap {
  justify-content: center !important;
}


/* -----------------------------------------------------------------------------
   9. BOTONES
   ----------------------------------------------------------------------------- */

.tiki .btn-primary {
  --bs-btn-bg: var(--lcc-link);
  --bs-btn-color: var(--lcc-on-dark);
  --bs-btn-hover-color: var(--lcc-on-dark);
  --bs-btn-border-color: var(--lcc-link-hover);
  --bs-btn-hover-bg: var(--lcc-link);
  --bs-btn-hover-border-color: var(--lcc-link);
  color: var(--lcc-on-dark) !important;
  border-radius: var(--lcc-pill-radius);
  padding: 0.5rem 1rem;
}

/* Admin buttons: Tiki fuerza color: var(--lcc-ink) en .admbox,
   lo que da texto oscuro sobre fondo --lcc-link. */
.tiki .admbox.btn-primary,
.tiki .admbox .btn-primary,
.tiki .admbox a.btn-primary {
  color: var(--lcc-on-dark) !important;
}

/* btn-primary + dropdown-item: el botón fuerza --lcc-on-dark sobre fondo claro del
   dropdown. Prevalece el estilo de dropdown-item: fondo transparente, texto de la option. */
.tiki .btn-primary.dropdown-item,
.tiki a.btn-primary.dropdown-item {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  color: var(--bs-dropdown-link-color) !important;
  border-radius: var(--bs-dropdown-item-border-radius, 0);
  padding: var(--bs-dropdown-item-padding-y, 0.25rem) var(--bs-dropdown-item-padding-x, 1rem);
}

.tiki .btn-secondary {
  --bs-btn-bg: var(--lcc-surface);
  --bs-btn-border-color: var(--lcc-border);
  --bs-btn-color: var(--lcc-ink);
  --bs-btn-hover-bg: var(--lcc-bg);
  border-radius: var(--lcc-pill-radius);
  padding: 0.5rem 1rem;
}

/* Botones deshabilitados */
.tiki .btn.disabled,
.tiki .btn:disabled,
.tiki .btn.disabled-clickable,
.tiki .btn-primary.disabled,
.tiki .btn-primary.disabled-clickable {
  background-color: var(--lcc-top-accent);
  border-color: var(--lcc-top-accent);
  color: var(--lcc-ink);
  opacity: 0.8;
}


/* -----------------------------------------------------------------------------
   10. FORMULARIOS Y CONTROLES
   ----------------------------------------------------------------------------- */

textarea.form-control,
.form-control,
.search-box input {
  border-radius: var(--lcc-radius);
}





/* -----------------------------------------------------------------------------
   11. POPOVERS
   ----------------------------------------------------------------------------- */

.popover {
  border-radius: var(--lcc-radius);
  z-index: var(--lcc-z-overlay);
}

.popover, .popover-body, .popover-header {
  color: var(--lcc-ink);
}

.popover-header {
  background-color: var(--lcc-soft-bg);
  border-bottom: 1px solid var(--lcc-border);
}

.popover-body {
  background-color: var(--lcc-surface);
}


/* -----------------------------------------------------------------------------
   11. POPOVERS
   ----------------------------------------------------------------------------- */

.popover {
  border-radius: var(--lcc-radius) !important;
  z-index: var(--lcc-z-overlay) !important;
}

.popover, .popover-body, .popover-header {
  color: var(--lcc-ink) !important;
}

.popover-header {
  background-color: var(--lcc-soft-bg) !important;
  border-bottom: 1px solid var(--lcc-border) !important;
}

.popover-body {
  background-color: var(--lcc-surface) !important;
}


/* -----------------------------------------------------------------------------
   12. HIPERVÍNCULOS EN EL CUERPO DEL CONTENIDO
   Usan el color de la paleta activa con subrayado para distinguirlos.
   Los visitados usan --lcc-link-hover (tono claro).
   Se excluyen botones, nav-links y dropdowns con :not().
   Se usa :is() para agrupar contextos y evitar repetición.
   ----------------------------------------------------------------------------- */

:is(#col1, #col2, #col3, .middle, .wikitext, .page-content, .article, .blog-post)
  a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand) {
  color: var(--lcc-ink) !important;
  text-decoration: underline;
}

:is(#col1, #col2, #col3, .middle, .wikitext, .page-content, .article, .blog-post)
  a:visited:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand) {
  color: var(--lcc-link-hover) !important;
}

:is(#col1, #col2, #col3, .middle, .wikitext, .page-content, .article, .blog-post)
  a:hover:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand) {
  color: var(--lcc-link) !important;
  text-decoration: underline;
}


/* Logo del sitio: escalado proporcional en todos los tamaños.
   El HTML usa img-fluid (max-width:100%; height:auto) pero si el
   contenedor flex comprime solo el ancho, la imagen se deforma.
   Forzamos height:auto + width:auto para mantener la relación de
   aspecto siempre. */
.sitelogo-img,
.sitelogo img {
  height: auto !important;
  width: auto;
  max-width: 100%;
}


/* -----------------------------------------------------------------------------
   13. ALINEACIÓN DEL BUSCADOR EN EL HEADER
   El div.mb-3 que envuelve el input de búsqueda tiene display:block por defecto
   en Bootstrap, lo que fuerza un salto de línea y desalinea el buscador respecto
   al login. Se corrige solo en el contexto del header para no afectar formularios
   del resto del sitio.
   ----------------------------------------------------------------------------- */

.top_modules .box-search .mb-3,
header .box-search .mb-3 {
  display: inline-flex !important;
  align-items: center;
  margin-bottom: 0 !important;
}


/* -----------------------------------------------------------------------------
   14. MODALES
   La ayuda del editor requiere que el backdrop no opaque el contenido.
   Se mantiene position: fixed (Bootstrap default) pero se reduce la opacidad
   y se controla el z-index para que no interfiera.
   ----------------------------------------------------------------------------- */

.modal-backdrop {
  opacity: 0.15 !important;
  /* z-index bajo para que no intercepte clicks ni bloquee la
     interacción con la página. Se pierde click-fuera-para-cerrar
     del modal, que debe cerrarse con su botón X. */
  z-index: -1 !important;
}


/* -----------------------------------------------------------------------------
   15. IMGBOX: AJUSTE DE CONTENEDOR DE IMÁGENES
   Tiki genera .imgbox con width/height inline en píxeles reales de la imagen.
   Cuando la imagen tiene img-fluid, se escala pero el contenedor no.
   Se fuerza height:auto y max-width:100% para que el recuadro se ajuste.
   ----------------------------------------------------------------------------- */

.imgbox {
  height: auto !important;
  max-width: 100% !important;
}

.imgbox img.img-fluid {
  width: 100%;
  height: auto;
}


/* -----------------------------------------------------------------------------
   16. FIX: CHECKBOXES Y RADIOS EN UI-DIALOG-CONTENT
   El fondo aplicado a todos los inputs dentro de .ui-dialog-content
   tapa la visualización de checks y radios. Se corrige aquí.
   ----------------------------------------------------------------------------- */
.tiki .ui-dialog-content input[type="checkbox"],
.tiki .ui-dialog-content input[type="radio"] {
    background: transparent !important;
}

/* -----------------------------------------------------------------------------
   17. CATBLOCK: LISTA HORIZONTAL DE PÁGINAS
   La lista de páginas del catblock se muestra en línea (horizontal con wrap)
   en vez de vertical. Se agrega separador sutil entre ítems.
   ----------------------------------------------------------------------------- */

/* Título de categoría */
.catblock .cattitle {
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* Contenedor catblock: misma superficie que .wikitext */
.catblock {
  background-color: var(--lcc-surface);
  border-radius: var(--lcc-radius);
  border: 1px solid var(--lcc-border);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
  padding: 2rem;
  margin-top: 1rem;
}

/* Etiqueta "wiki page:" / "file gallery:" en línea con los ítems */
.catblock .catfeatures > li {
  margin-bottom: 0.75rem;
}

/* Lista interna: layout horizontal con wrap */
.catblock ul.list-inline {
  display: inline-flex !important;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

/* Cada ítem en línea */
.catblock ul.list-inline > li {
  display: inline-block;
}

/* Sin separador entre ítems */

/* Links dentro del catblock */
.catblock ul.list-inline > li a.link {
  text-decoration: underline !important;
  font-weight: 400 !important;
  color: var(--lcc-link) !important;
  padding: 0.15rem 0.4rem;
  border-radius: var(--lcc-radius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.catblock ul.list-inline > li a.link:hover {
  background-color: var(--lcc-soft-bg);
  color: var(--lcc-ink) !important;
  text-decoration: underline !important;
}


/* -----------------------------------------------------------------------------
   18. HOVER Y RUTA ACTIVA EN MENÚS
   Mejora la legibilidad de la navegación con fondos visibles en hover y en la
   ruta activa. Usa las variables --lcc-* de cada option, por lo que funciona
   en todas las variantes de color sin cambios adicionales.

   En el header (fondo oscuro con glass): se usa un velo semitransparente de
   --lcc-on-dark (blanco) que no rompe el efecto de vidrio esmerilado.

   En dropdowns (fondo blanco): se usa --lcc-bg, el color de fondo del body,
   que varía con cada option y es claramente visible sobre la superficie blanca.
   ----------------------------------------------------------------------------- */

/* HOVER: nav-link en el header — velo semitransparente sobre el fondo oscuro */
.tiki-top-nav-light .navbar-nav .nav-link:hover,
.tiki-top-nav-light .navbar-nav .nav-link:focus-visible {
  background: color-mix(in srgb, var(--lcc-on-dark) 12%, transparent);
  color: var(--lcc-top-accent);
  border-radius: var(--lcc-radius-sm);
}

/* HOVER: dropdown-item — fondo del body de la paleta activa */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--lcc-bg) !important;
  color: var(--lcc-ink) !important;
  border-radius: var(--lcc-radius-sm);
}

/* ACTIVO: nav-link de la página actual en el header */
.tiki-top-nav-light .navbar-nav .nav-link.active,
.tiki-top-nav-light .navbar-nav .nav-link.show {
  background: color-mix(in srgb, var(--lcc-on-dark) 18%, transparent);
  color: var(--lcc-top-accent);
  border-radius: var(--lcc-radius-sm);
}

/* ACTIVO: dropdown-item de la página actual */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--lcc-bg) !important;
  color: var(--lcc-link) !important;
  border-radius: var(--lcc-radius-sm);
}

/* RUTA ACTIVA: padre cuyo submenú contiene el ítem activo.
   Se marca con el mismo estilo que un nav-link activo. */
.nav-item.dropdown:has(.dropdown-item.active) > .nav-link,
.nav-item.dropdown:has(.dropdown-menu .active) > .nav-link {
  background: color-mix(in srgb, var(--lcc-on-dark) 18%, transparent);
  color: var(--lcc-top-accent);
  border-radius: var(--lcc-radius-sm);
}

/* HOVER Y ACTIVO: menús laterales (sidebar).
   El sidebar usa fondo claro (--lcc-surface), a diferencia del header.
   Se pasa el background-color al .nav-item (full-width) para que el
   sombreado cubra todo el ancho del contenedor collapse. */
[id^="mod-menuleft"] .navbar-nav,
[id^="mod-menuleft"] .navbar-nav .nav-item {
  width: 100%;
}
[id^="mod-menuleft"] .navbar-nav .nav-item:hover {
  background-color: var(--lcc-bg);
  border-radius: var(--lcc-radius-sm);
}
[id^="mod-menuleft"] .navbar-nav .nav-link:hover,
[id^="mod-menuleft"] .navbar-nav .nav-link:focus-visible {
  color: var(--lcc-ink);
}

/* ACTIVO: sección actual en la sidebar (li.nav-item.active).
   Sin background-color fijo para que no quede permanentemente
   enfatizado como si estuviera en hover. Solo se distingue por
   el color del texto (--lcc-link). El fondo aparece únicamente
   en hover (regla .nav-item.active:hover). */
/* (background-color eliminado intencionalmente) */
[id^="mod-menuleft"] .navbar-nav .nav-item.active > .nav-link,
[id^="mod-menuleft"] .navbar-nav .nav-item.active > .nav-link.has-submenu {
  color: var(--lcc-link);
}

/* HOVER sobre ítem activo: usar color hover */
[id^="mod-menuleft"] .navbar-nav .nav-item.active:hover {
  background-color: var(--lcc-bg);
  border-radius: var(--lcc-radius-sm);
}
[id^="mod-menuleft"] .navbar-nav .nav-item.active:hover > .nav-link,
[id^="mod-menuleft"] .navbar-nav .nav-item.active:hover > .nav-link.has-submenu {
  color: var(--lcc-ink);
}

/* RUTA ACTIVA: padre cuyo submenú contiene un ítem activo en sidebar */
[id^="mod-menuleft"] .navbar-nav .nav-item.dropdown:has(.dropdown-item.active) {
  background-color: var(--lcc-bg);
  border-radius: var(--lcc-radius-sm);
}
[id^="mod-menuleft"] .navbar-nav .nav-item.dropdown:has(.dropdown-item.active) > .nav-link,
[id^="mod-menuleft"] .navbar-nav .nav-item.dropdown:has(.dropdown-item.active) > .nav-link.has-submenu {
  color: var(--lcc-link);
}


/* Ajuste del punto de aterrizaje de anchors para índices generados con AutoTOC.
   Estado original del archivo (según backup.zip): este bloque no existía y no había compensación de anchors.
   Ajuste actual que sí funcionó: desplazar físicamente el ancla con padding-top
   + margin-top negativo sobre los títulos que tienen id.
   Si en algún momento la navbar deja de usar fixed-top, revisar o desactivar este bloque.

   Estado original para volver atrás:
   Sin --lcc-anchor-offset.
   Sin bloque de compensación para títulos con id.
*/
body.tiki h1[id],
body.tiki h2[id],
body.tiki h3[id],
body.tiki h4[id],
body.tiki h5[id],
body.tiki h6[id],
body.tiki .showhide_heading[id] {
  padding-top: var(--lcc-anchor-offset) !important;
  margin-top: calc(var(--lcc-anchor-offset) * -1) !important;
}


/* -----------------------------------------------------------------------------
   MOBILE (≤767px): Ajustes responsive para header y navegación
   -----------------------------------------------------------------------------
   Problemas resueltos:
   - Barra de búsqueda comprimida: el input se reduce a unos pocos píxeles.
   - Logo deformado: la imagen se comprime y pierde proporción.
   ----------------------------------------------------------------------------- */

/* Tablets y pantallas medianas (≤991px):
   búsqueda y login pasan a la segunda línea.
   3 columnas → 2 filas */
@media (max-width: 991.98px) {

  #top_modules {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  /* Logo: tamaño natural */
  #top_modules .card:has(.sitelogo-img),
  #top_modules .card:has(.sitelogo > img) {
    flex: 0 0 auto;
    width: auto;
  }

  /* Menú: ocupa el resto de la primera línea */
  #top_modules .card:not(:has(.sitelogo-img)):not(:has(form)) {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Módulos con formulario (búsqueda, login): segunda línea */
  #top_modules .card:has(form) {
    flex: 0 0 100%;
  }

}


/* Celulares (≤767px):
   el logo se achica más, los inputs se expanden */
@media (max-width: 767.98px) {

  #top_modules {
    gap: 0.25rem;
  }

  /* Logo más chico en celular */
  #top_modules .card:has(.sitelogo-img),
  #top_modules .card:has(.sitelogo > img) {
    max-width: 100px;
  }

  /* Input de búsqueda: ocupa todo el ancho */
  .mod_quick_search .form-control,
  .search-box .form-control {
    width: 100% !important;
    min-width: 160px;
  }

  .mod_quick_search,
  .search-box {
    width: 100%;
  }

  /* Logo: tamaño controlado */
  .sitelogo-img,
  .sitelogo img {
    max-width: 100px;
    height: auto !important;
  }

  .sitelogo .navbar-brand.w-100 {
    width: auto !important;
  }

  /* Popup de login: anclado al viewport con position:fixed.
     Así nos independizamos de cualquier contenedor intermedio
     (card, .siteloginbar_popup, etc.) que pueda tener un ancho
     reducido y cause que el dropdown se desplace fuera de la pantalla.
     top: 3.5rem estima la altura del header en mobile. */
  .siteloginbar_poppedup.dropdown-menu {
    position: fixed !important;
    top: 3.5rem !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
    width: auto !important;
    max-width: calc(100vw - 1rem) !important;
    transform: none !important;
  }

  /* Contenido del formulario de login: fluido */
  .siteloginbar_poppedup input,
  .siteloginbar_poppedup select,
  .siteloginbar_poppedup button,
  .siteloginbar_poppedup .form-control {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

}