/* 
  INSPIRATION: https://github.com/astral-sh/uv/blob/main/mkdocs.template.yml
  MATERIAL COLORS: https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/stylesheets/main/_colors.scss
  DARK & LIGHT STYLES: https://uxplanet.org/create-an-easily-switchable-light-dark-styles-in-figma-ffee3cd542a7
  PATTERNS BASED ON PRIMARY COLOR: https://mycolor.space/?hex=%23009485&sub=1
*/

/* LIGHT MODE */
[data-md-color-scheme="default"] {
  /* Modification of theme colors */
  /* --md-code-hl-comment-color: var(--md-primary-fg-color); */

  /* Custom colors */
  --blue-color: rgb(23, 143, 255);
  --green-color: rgb(29, 187, 53);
  --orange-color: rgb(254, 160, 47);
  --red-color: rgb(248, 65, 65);
  --yellow-color: rgb(216, 210, 25);
  --pink-color: rgb(177, 36, 137);
  /* Transparent custom colors */
  --blue-transparent-color: rgba(23, 143, 255, 0.5);
  --green-transparent-color: rgba(29, 187, 53, 0.5);
  --orange-transparent-color: rgba(254, 160, 47, 0.5);
  --red-transparent-color: rgba(248, 65, 65, 0.5);
  --yellow-transparent-color: rgba(216, 210, 25, 0.5);
  --pink-transparent-color: rgba(177, 36, 137, 0.5);

  .blue {
    color: var(--blue-color);
  }
  .green {
    color: var(--green-color);
  }
  .orange {
    color: var(--orange-color);
  }
  .red {
    color: var(--red-color);
  }
  .yellow {
    color: var(--yellow-color);
  }
  .pink {
    color: var(--pink-color);
  }
}

/* DARK MODE */
[data-md-color-scheme="slate"] {
  /* Modification of theme colors */
  /* --md-code-hl-comment-color: var(--md-accent-fg-color); */

  /* Custom colors */
  --blue-color: rgb(0, 133, 255);
  --green-color: rgb(32, 203, 73);
  --orange-color: rgb(249, 135, 0);
  --red-color: rgb(233, 44, 44);
  --yellow-color: rgb(231, 231, 21);
  --pink-color: rgb(196, 44, 153);

  /* Transparent custom colors */
  --blue-transparent-color: rgba(0, 133, 255, 0.5);
  --green-transparent-color: rgba(32, 203, 73, 0.5);
  --orange-transparent-color: rgba(249, 135, 0, 0.5);
  --red-transparent-color: rgba(233, 44, 44, 0.5);
  --yellow-transparent-color: rgba(231, 231, 21, 0.5);
  --pink-transparent-color: rgba(196, 44, 153, 0.5);

  .blue {
    color: var(--blue-color);
  }
  .green {
    color: var(--green-color);
  }
  .orange {
    color: var(--orange-color);
  }
  .red {
    color: var(--red-color);
  }
  .yellow {
    color: var(--yellow-color);
  }
  .pink {
    color: var(--pink-color);
  }
}

.hl {
  color: var(--md-primary-fg-color);
}

.acc {
  color: var(--md-accent-fg-color);
}

.mono {
  font-family: monospace;
}

.bold {
  font-weight: bold;
}

.md-nav__link--active {
  font-weight: bold;
}

@keyframes beat {
  0%,
  40%,
  80%,
  100% {
    transform: scale(1);
  }
  20%,
  60% {
    transform: scale(1.15);
  }
}
.beat {
  animation: beat 1000ms infinite;
}

@keyframes flip {
  /* https://animista.net/play/basic/flip */
  50% {
    transform: rotateY(-180deg);
  }
}
.flip {
  animation: flip 1500ms infinite both;
}

@keyframes slide {
  /* https://animista.net/play/basic/slide */
  0% {
    transform: translateX(-1px);
  }
  50% {
    transform: translateX(1px);
  }
  100% {
    transform: translateX(-1px);
  }
}
.slide {
  animation: slide 1000ms infinite both;
}

/* Custom exercise admonition */
:root {
  --md-admonition-icon--brain: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.33 12.91c.09 1.55-.62 3.04-1.89 3.95l.77 1.49c.23.45.26.98.06 1.45-.19.47-.58.84-1.06 1l-.79.25a1.687 1.687 0 0 1-1.86-.55L14.44 18c-.89-.15-1.73-.53-2.44-1.1-.5.15-1 .23-1.5.23-.88 0-1.76-.27-2.5-.79-.53.16-1.07.23-1.62.22-.79.01-1.57-.15-2.3-.45a4.1 4.1 0 0 1-2.43-3.61c-.08-.72.04-1.45.35-2.11-.29-.75-.32-1.57-.07-2.33C2.3 7.11 3 6.32 3.87 5.82c.58-1.69 2.21-2.82 4-2.7 1.6-1.5 4.05-1.66 5.83-.37.42-.11.86-.17 1.3-.17 1.36-.03 2.65.57 3.5 1.64 2.04.53 3.5 2.35 3.58 4.47.05 1.11-.25 2.2-.86 3.13.07.36.11.72.11 1.09m-5-1.41c.57.07 1.02.5 1.02 1.07a1 1 0 0 1-1 1h-.63c-.32.9-.88 1.69-1.62 2.29.25.09.51.14.77.21 5.13-.07 4.53-3.2 4.53-3.25a2.59 2.59 0 0 0-2.69-2.49 1 1 0 0 1-1-1 1 1 0 0 1 1-1c1.23.03 2.41.49 3.33 1.3.05-.29.08-.59.08-.89-.06-1.24-.62-2.32-2.87-2.53-1.25-2.96-4.4-1.32-4.4-.4-.03.23.21.72.25.75a1 1 0 0 1 1 1c0 .55-.45 1-1 1-.53-.02-1.03-.22-1.43-.56-.48.31-1.03.5-1.6.56-.57.05-1.04-.35-1.07-.9a.97.97 0 0 1 .88-1.1c.16-.02.94-.14.94-.77 0-.66.25-1.29.68-1.79-.92-.25-1.91.08-2.91 1.29C6.75 5 6 5.25 5.45 7.2 4.5 7.67 4 8 3.78 9c1.08-.22 2.19-.13 3.22.25.5.19.78.75.59 1.29-.19.52-.77.78-1.29.59-.73-.32-1.55-.34-2.3-.06-.32.27-.32.83-.32 1.27 0 .74.37 1.43 1 1.83.53.27 1.12.41 1.71.4q-.225-.39-.39-.81a1.038 1.038 0 0 1 1.96-.68c.4 1.14 1.42 1.92 2.62 2.05 1.37-.07 2.59-.88 3.19-2.13.23-1.38 1.34-1.5 2.56-1.5m2 7.47-.62-1.3-.71.16 1 1.25zm-4.65-8.61a1 1 0 0 0-.91-1.03c-.71-.04-1.4.2-1.93.67-.57.58-.87 1.38-.84 2.19a1 1 0 0 0 1 1c.57 0 1-.45 1-1 0-.27.07-.54.23-.76.12-.1.27-.15.43-.15.55.03 1.02-.38 1.02-.92"/></svg>');
}
.md-typeset .admonition.exercise,
.md-typeset details.exercise {
  border-color: rgb(156, 18, 158);
}
.md-typeset .admonition.exercise,
.md-typeset details.exercise {
  background-color: rgba(156, 18, 158, 0.15);
}
.md-typeset .exercise > .admonition-title::before,
.md-typeset .exercise > summary::before {
  background-color: rgb(156, 18, 158);
  -webkit-mask-image: var(--md-admonition-icon--brain);
  mask-image: var(--md-admonition-icon--brain);
}

span.example {
  font-style: italic;
  font-weight: bold;
  color: var(--orange-color);
  span.twemoji {
    margin-left: -0.15rem;
    margin-right: -0.2rem;
    margin-top: 0.1rem;
  }
}

span.pyversion {
  span.version {
    font-size: smaller;
  }
  span.twemoji {
    margin-right: -0.1rem;
  }
}

span.dj-level {
  width: fit-content;
  display: block;
  font-size: smaller;
  color: rgb(230, 230, 230);
  padding: 0.03rem 0.3rem 0.03rem 0.3rem;
  border-radius: 0.2rem;
  background: gray;
}

/* https://github.com/squidfunk/mkdocs-material/issues/3453#issuecomment-2407192662 */
.md-tooltip {
  top: inherit;
  left: inherit;
  margin-left: 12px;
  margin-top: 7px;
}

/* https://mkdocstrings.github.io/recipes/#prevent-selection-of-prompts-and-output-in-python-code-blocks */
.highlight .gp,
.highlight .gt,
.highlight .gr,
.highlight .go {
  /* Generic.Prompt, Generic.Output */
  user-select: none;
}

.white {
  background-color: white;
  display: inline-block;
}

.uv {
  color: #de5fe9;
}

/* Fix icon alignment inside links */

a span.twemoji {
  vertical-align: middle !important;
}

/* Modo presentación (tecla P) */
.presentation-mode .md-sidebar {
  display: none;
}
.presentation-mode .md-content {
  max-width: none;
  margin: 0;
}
.presentation-mode .md-header__topic + .md-header__topic {
  display: none;
}

/* Hide footer meta (copyright / "Made with Zensical") */
.md-footer-meta {
  display: none;
}

/* Make the prev/next navigation footer visually prominent */
.md-footer__inner {
  padding: 0.25rem 0;
}

.md-footer__link {
  padding: 1.5rem 2rem !important;
  gap: 1rem;
}

.md-footer__direction {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.75;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.md-footer__title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.3;
}

/* Full-width content: hide right TOC and expand content area */
.md-sidebar--secondary {
  display: none;
}

.md-content {
  max-width: initial;
}