@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap');

/* =========================================
   1. PALETA DE COLORES "BONGO"
   ========================================= */
[data-md-color-primary="bongo"] {
  /* Milab & El Bongo Primary Colors */
  --md-primary-fg-color:        #1c318e;
  --md-primary-fg-color--light: #324dd2;
  --md-primary-fg-color--dark:  #006383; /* Milab Logo Dark */
  
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: #f5f7fa;
}

[data-md-color-accent="bongo"] {
  /* Accent Colors */
  --md-accent-fg-color:         #ec7704; /* Milab Logo Accent */
  --md-accent-fg-color--transparent: rgba(236, 119, 4, 0.1);
}

:root {
  /* Custom Palette / Utility Colors */
  --bongo-green:   #4dcfa9;
  --bongo-yellow:  #fbca01;
  --bongo-red:     #f00a27;
  
  --sec-orange-1:  #F76806;
  --sec-orange-2:  #F49F08;
  --sec-pink:      #FF0068;
  --sec-purple:    #6406F7;
  --sec-green:     #0EAD0E;
}

/* =========================================
   2. TIPOGRAFÍA Y GRADIENTES
   ========================================= */
/* Headings Typography Override */
h1, h2, h3, h4, h5, h6, 
.md-nav__title, 
.md-typeset h1, 
.md-typeset h2, 
.md-typeset h3, 
.md-typeset h4, 
.md-typeset h5, 
.md-typeset h6 {
  font-family: 'Exo', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Gradiente espectacular en los títulos principales (solo en documentos) */
.md-content__inner h1, 
.md-content__inner h2 {
  background: linear-gradient(120deg, var(--md-primary-fg-color), var(--md-primary-fg-color--light), var(--bongo-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  padding-bottom: 4px;
}

/* Gradiente adaptado para Modo Oscuro (slate) */
[data-md-color-scheme="slate"] .md-content__inner h1, 
[data-md-color-scheme="slate"] .md-content__inner h2 {
  background: linear-gradient(120deg, var(--bongo-green), var(--bongo-yellow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* =========================================
   3. GLASSMORPHISM (HEADER Y TABS)
   ========================================= */
.md-header {
  background-color: rgba(28, 49, 142, 0.85) !important; /* Semitransparente usando #1c318e */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.md-tabs {
  background-color: rgba(28, 49, 142, 0.75) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Ajuste de color para la búsqueda en el header transparente */
.md-search__form {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-radius: 20px;
}
.md-search__form:hover {
  background-color: rgba(255, 255, 255, 0.25) !important;
}

/* =========================================
   4. BORDES REDONDEADOS Y SOMBRAS DINÁMICAS
   ========================================= */
/* Admonitions (Notas, advertencias, etc.) */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.md-typeset .admonition:hover,
.md-typeset details:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Bloques de Código */
.md-typeset pre {
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* Botones */
.md-typeset .md-button {
  border-radius: 8px;
  font-weight: 600;
  text-transform: none;
  transition: all 0.3s ease;
}

.md-typeset .md-button--primary {
  background: linear-gradient(135deg, var(--md-primary-fg-color), var(--md-primary-fg-color--light));
  border: none;
  box-shadow: 0 4px 15px rgba(28, 49, 142, 0.3);
}

.md-typeset .md-button--primary:hover {
  background: linear-gradient(135deg, var(--md-primary-fg-color--light), var(--bongo-green));
  box-shadow: 0 6px 20px rgba(77, 207, 169, 0.4);
  transform: translateY(-2px);
}

/* Enlaces */
.md-typeset a {
  transition: color 0.2s ease, text-decoration 0.2s ease;
}
.md-typeset a:hover {
  color: var(--md-accent-fg-color);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}