@import url("https://use.typekit.net/pgn0jqr.css");
@import url("las-cuencas-cuentan.css");

/* --- LCC v5: Estética WikiHow (Estructura por capas oscuro-medio-claro) --- */

:root {
  --tiki-page-content-top-margin: 10px;
  --bs-body-font-size: 1rem; 
  --bs-border-radius: 0.5rem; 
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-font-sans-serif: "Helvetica Neue", "Nimbus Sans", Helvetica, Arial, sans-serif;
  
  --bs-body-color: #316492 !important;
  --bs-heading-color: #316492 !important;
  --bs-emphasis-color: #316492 !important;
  --bs-link-color: #3885ba !important;
  --bs-link-hover-color: #6db5dd !important;
}

/* CAPA 2 (Fondo General Medio): Tierra clara/Arena de la paleta */
body.tiki {
  font-family: var(--bs-font-sans-serif);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  background-color: #dbe6ef !important; /* Tierra/Arena de la imagen de referencia */
  background-image: none !important;
  color: #316492 !important; 
}

/* Depuración de herencias de color nativo de bootstrap */
body *, p, ul, ol, li, blockquote, div { color: #316492; }
ul li::marker, ol li::marker { color: #316492 !important; }
.tiki .card-header *, .tiki .btn * { color: inherit !important; }

/* CAPA 1 (Techo Oscuro): Usa variables CSS del sistema */
.top_modules {
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15); /* Sombreado fuerte para separar techo de suelo */
  border-radius: 0 !important;
  background-color: var(--lcc-ink) !important;
}

header.navbar, .tiki-top-nav-light, .tiki-topbar-nav-light {
  border-bottom: none !important;
}

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

.tiki-top-nav-light, .tiki-topbar-nav-light {
  --tiki-top-bg: #316492;
  --tiki-top-color: #ffffff;
  --tiki-top-hover-color: #bfe1f7;
  --tiki-top-active-color: #ffffff;
  --tiki-top-hover-bg: #21496b;
  --tiki-top-active-bg: #21496b;
  --tiki-topbar-bg: #316492;
  --tiki-topbar-color: #ffffff;
  --tiki-topbar-hover-color: #bfe1f7;
  --tiki-topbar-active-color: #ffffff;
  --tiki-topbar-hover-bg: #21496b;
  --tiki-topbar-active-bg: #21496b;
  background-color: #316492 !important; /* Forzar el color oscuro superior */
}

/* Links de los menús superiores forzados a blanco porque ahora están sobre fondo azul */
.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: #ffffff !important;
}
.tiki-top-nav-light span, .tiki-top-nav-light p, .tiki-topbar-nav-light span, .tiki-topbar-nav-light p {
  color: #ffffff !important; 
}
.tiki-top-nav-light a, .tiki-topbar-nav-light a {
  color: #ffffff !important;
}

.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: #bfe1f7 !important;
}

/* Permitir que inputs y dropdowns mantengan texto oscuro si tienen fondo claro */
.tiki-topbar-nav-light input, .tiki-top-nav-light input, 
.dropdown-menu *, .dropdown-item {
  color: #316492 !important;
}

/* Invertir toggler (hamburguesa) para que se vea en fondo oscuro */
.navbar-light .navbar-toggler-icon {
  filter: invert(1);
}

/* Pie de página copiando la Capa 1 */
footer#footer, #cfooter {
  background-color: #316492 !important;
  color: #ffffff !important;
  border-top: none !important;
  padding: 2rem 0; 
}
#cfooter *, footer#footer * {
  color: #ffffff !important; /* En el pie las letras deben ser claras */
}

/* CAPA 3 (Módulos/Contenido Claro): Las áreas de lectura son Blancas y "saltan" del fondo arena */
.tiki .card, 
#col1, #middle-column, .tiki-center {
  border: 1px solid #c9d8e5 !important; 
  border-radius: 0.5rem !important; 
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05) !important; /* Sombra separadora del fondo */
  background-color: #ffffff !important; /* Blanco puro para lectura principal */
  overflow: visible !important;
}

#col1, #middle-column, .tiki-center {
  padding: 2rem !important; /* Margen interno para dar respiro al texto en la caja blanca principal */
  margin-bottom: var(--tiki-page-content-top-margin) !important; /* Igualar el aire inferior con la separacion bajo el encabezado */
}

.tiki .card-body, .tiki .module, .tiki .card-accordian {
  overflow: visible !important;
}

/* Forzar lectura oscura si el módulo intentaba ser oscuro (text-white) antes de volverse capa blanca */
.tiki .card.text-white, .tiki .card .text-white,
.tiki .card.text-light, .tiki .card .text-light,
.tiki .module.text-white, .tiki .module .text-white {
  color: #316492 !important;
}

/* Fuerza el texto de las cajas laterales y centrales (#col2 y #col3 son los laterales de tiki) */
#col1 .card *, #col2 .card *, #col3 .card *, .middle .card *,
#col1 .module *, #col2 .module *, #col3 .module *, .middle .module * {
  color: #316492 !important;
}
/* Salvo que sea un botón */
#col1 .card .btn, #col1 .card .btn *, #col2 .card .btn, #col2 .card .btn *,
#col3 .card .btn, #col3 .card .btn *, .middle .card .btn, .middle .card .btn * {
  color: inherit !important;
}

/* Modulos Títulos: Como el borde del módulo es blanco, usaremos letras oscuras y sutiles sin relleno extra */
.tiki .card-header {
  background-color: #ffffff !important; /* Estilo WikiHow: el fondo título es igual al módulo */
  border-bottom: 2px solid #dbe6ef !important; /* Línea de color arena dividiendo título del contenido */
  border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0 !important;
  padding: 0.75rem 1rem !important; 
}

.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-header .text-white, .tiki .card-header .text-light {
  margin: 0 !important; 
  padding: 0 !important;
  font-size: 1.25rem !important; 
  color: #316492 !important;
  font-family: "Helvetica Neue", Arial, sans-serif !important; /* Letra sólida para títulos menores */
  font-weight: 700;
}

.tiki .card-header a, .tiki .card-title a { color: #316492 !important; text-decoration: none; }
.tiki .card-header a:hover, .tiki .card-title a:hover { color: #3885ba !important; }

/* Menús de dropdowns */
.dropdown-menu, .tiki .dropdown-menu.dropdown-menu-dark {
  --bs-dropdown-bg: #ffffff;
  --bs-dropdown-link-color: #316492;
  --bs-dropdown-link-hover-bg: #f5f7f9;
  --bs-dropdown-link-hover-color: #316492;
  border-radius: 0.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
  border: 1px solid #c9d8e5;
}

.dropdown-item, .tiki .dropdown-menu.dropdown-menu-dark .dropdown-item {
  color: #316492 !important;
  background: transparent;
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: #f5f7f9 !important;
  color: #316492 !important; 
}

/* El dropdown del login hereda links blancos del header; se fuerza lectura oscura dentro del menu */
.top_modules .dropdown-menu .dropdown-item,
.top_modules .dropdown-menu .dropdown-item *,
.tiki-top-nav-light .dropdown-menu .dropdown-item,
.tiki-top-nav-light .dropdown-menu .dropdown-item *,
.tiki-topbar-nav-light .dropdown-menu .dropdown-item,
.tiki-topbar-nav-light .dropdown-menu .dropdown-item * {
  color: #316492 !important;
}

/* JERARQUÍA SERIF ESTILO LCC/WIKIHOW PARA CUERPO CENTRAL */
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: #316492 !important;
}

body.tiki h1 { font-size: clamp(2.2rem, 3vw, 3.2rem); margin-top: 1rem; margin-bottom: 1rem; line-height: 1.1; }
body.tiki h2 { font-size: clamp(1.8rem, 2.5vw, 2.5rem); margin-top: 2rem; margin-bottom: 1rem; }
body.tiki h3 { font-size: clamp(1.4rem, 1.8vw, 1.8rem); margin-top: 1.5rem; margin-bottom: 0.5rem; }

/* Botones WikiHow style (Sólidos, color acento, redondos) */
.tiki .btn-primary {
  --bs-btn-bg: #6db5dd;
  --bs-btn-border-color: #6db5dd;
  --bs-btn-hover-bg: #3885ba;
  --bs-btn-hover-border-color: #3885ba;
  border-radius: 2rem !important; 
  padding: 0.5rem 1rem;
}

.tiki .btn-secondary {
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: #c9d8e5;
  --bs-btn-color: #316492;
  --bs-btn-hover-bg: #f4f1ea;
  border-radius: 2rem !important;
  padding: 0.5rem 1rem;
}

  
/* 2. Cuadro gris del mod-menupagetop1 convertido a clarito acuático puro */
/* Aplicamos esto tanto al contenedor externo como a cualquier tarjeta interna para "matar" el gris residual */
#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: #bfe1f7 !important; /* Menta / Aqua pastel */
  border-radius: 0.5rem !important; 
  border-color: #6db5dd !important; 
}
[id^="mod-menupagetop"] {
  border: 1px solid #6db5dd !important; 
  padding: 0.5rem 1rem !important;
}
[id^="mod-menupagetop"] .card, [id^="mod-menupagetop"] .navbar {
  border: none !important;
  box-shadow: none !important;
}

/* --- REFUERZO DE COLOR FINAL PARA ENCABEZADO --- */
/* Garantiza que el título y subtítulo en la barra superior sean siempre blancos, anulando cualquier "h1/h2" superior */
.tiki-top-nav-light .sitetitle, .tiki-topbar-nav-light .sitetitle,
.tiki-top-nav-light .sitetagline, .tiki-topbar-nav-light .sitetagline,
#sitetitle, #sitetagline,
div.sitetitle, div.sitetagline,
span.sitetitle, span.sitetagline,
h1.sitetitle, h2.sitetagline, h3.sitetagline {
  color: #ffffff !important;
}

/* Ajuste minimo del popover para no interferir con otros menus */
.popover {
  border-radius: 0.5rem !important;
}

.popover-header {
  border-top-left-radius: calc(0.5rem - 0.125rem);
  border-top-right-radius: calc(0.5rem - 0.125rem);
  padding-top: 0.5rem;
  padding-bottom: 0.75rem;
}

h3.popover-header {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: 1.25rem !important;
  line-height: 1.3;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}