@import url("https://use.typekit.net/pgn0jqr.css");
@import url("default.css");

/* --- LCC v6: Basado en Default con tipografías y colores de v5 --- */

:root {
  --tiki-page-content-top-margin: 10px;
  
  /* Variables de curvaturas de la versión 5 */
  --lcc-radius: 0.5rem;
  --lcc-radius-sm: 0.25rem;
  --lcc-pill-radius: 2rem;
  
  /* Variables de colores adicionales de la versión 5 */
  --lcc-surface: #ffffff;
  --lcc-on-dark: #ffffff;
  --lcc-subtle-hover-bg: #f4f1ea;
  
  /* Variables de colores para options (como en versión 5) */
  --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;
  
  /* Variables de Bootstrap usando curvaturas de v5 */
  --bs-body-font-size: 1rem; 
  --bs-border-radius: var(--lcc-radius); 
  --bs-border-radius-sm: var(--lcc-radius-sm);
  --bs-border-radius-lg: var(--lcc-radius);
  
  /* Tipografía base del sistema (como en versión 5) */
  --bs-font-sans-serif: adelle-sans, 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: adelle-sans, 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";
  
  /* Colores de tipografías y fondos de v5.3 */
  --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;
  --bs-body-bg: #fff !important;
}

/* CAPA 2 (Fondo General Medio) */
body.tiki {
  font-family: var(--bs-font-sans-serif);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  background-color: var(--lcc-bg) !important;
  background-image: none !important;
  color: var(--lcc-ink) !important; 
}

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

/* CAPA 1 (Techo Oscuro y Footer) */
.top_modules, footer#footer, #cfooter {
  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;
}

.top_modules *, footer#footer *, #cfooter * {
  color: var(--lcc-on-dark) !important;
}

/* Transparencia a tarjetas y modulos ubicados DENTRO del header oscuro */
.top_modules .card, .top_modules .module,
.top_modules .card-body, .top_modules .card-header {
  background-color: transparent !important;
  color: var(--lcc-on-dark) !important;
  border-color: transparent !important;
}
.top_modules .card *, .top_modules .module * {
  color: inherit !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;
}

/* Variables de colores para opciones (heredadas de v5) */
:root {
  --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: #f4f7f9;
  --lcc-pagetop-bg: #bfe1f7;
  --lcc-pagetop-border: #6db5dd;
}

/* 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: var(--lcc-pagetop-bg) !important;
  border-radius: var(--lcc-radius) !important; 
  border-color: var(--lcc-pagetop-border) !important; 
}

/* 3. Ajustes adicionales de fondos para cards (CAPA 3 - Superficie Blanca) */
.tiki .card {
  background-color: var(--lcc-surface) !important;
}

.tiki .card-header {
  background-color: var(--lcc-surface) !important;
}

/* 4. Fondo para módulos específicos (CAPA 3 - Superficie Blanca) */
.tiki .module {
  background-color: var(--lcc-surface) !important;
}

/* 5. Fondo para contenido principal (Capa 3 Blanca) igual que la v5.3 */
#col1, #col2, #col3,
#middle-column,
.tiki-center {
  border: 1px solid var(--lcc-border) !important;
  border-radius: var(--lcc-radius) !important;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05) !important;
  background-color: var(--lcc-surface) !important;
  overflow: visible !important;
  padding: 2rem !important;
  margin-bottom: var(--tiki-page-content-top-margin) !important;
}

/* 6. Fondo para áreas de contenido neutrales o wrapper */
.middle {
  background-color: transparent !important;
}

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

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

.tiki .btn-primary {
  --bs-btn-bg: var(--lcc-link);
  --bs-btn-border-color: var(--lcc-link-hover);
  --bs-btn-hover-bg: var(--lcc-link);
  --bs-btn-hover-border-color: var(--lcc-link);
  border-radius: var(--lcc-pill-radius) !important;
  padding: 0.5rem 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-subtle-hover-bg);
  border-radius: var(--lcc-pill-radius) !important;
  padding: 0.5rem 1rem;
}

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

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

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

/* 8. Configuraciones de tipografías de la versión 5 */
/* Títulos menores con fuente sans-serif sólida */
body.tiki h4, body.tiki h5, body.tiki h6 {
  padding: 0 !important;
  font-size: 1.25rem !important;
  color: var(--lcc-ink) !important;
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 700;
}

/* 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: var(--lcc-ink) !important;
}

/* Configuraciones adicionales de tipografías de la versión 5 */
body, .tiki .mw-parser-output, .tiki .toastui-editor-contents {
  font-family: adelle-sans, 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" !important;
  line-height: 1.5;
}

.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: adelle-sans, 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" !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: adelle-sans, 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" !important;
  font-weight: 400;
  color: var(--bs-body-color);
  line-height: 1.2;
}