/* Brand tokens */
:root {
  --cz-primary: #32cfa6;
  --cz-primary-dark: #0c6d54;
  --cz-dark: #26282B;
  --cz-light: #F7F4EF;
  --cz-light-grey: #ebe7e4;

  /* Material theme variables */
  --md-primary-fg-color: var(--cz-dark);
  --md-accent-fg-color: var(--cz-dark);

  /* Code boxes */
  --md-code-bg-color: var(--cz-light-grey);
  --md-code-fg-color: var(--cz-primary-dark);

  --md-default-bg-color: var(--cz-light);
  --md-default-fg-color: var(--cz-dark);

  --md-typeset-a-color: var(--cz-dark);
}

/* Top bar */
.md-header {
  background-color: var(--cz-dark);
}

/* Ensure header text/icons are readable */
.md-header__title,
.md-header__button,
.md-search__input {
  color: var(--cz-light);
}
.md-search__input.focus-visible {
  color: var(--cz-dark);
}

@media screen and (min-width: 60em) {
  .md-search__form {
      background-color: rgba(247,244,236,.2);
  }
}

/* Ocultar título superior del menú lateral */
.md-nav__title {
  display: none;
}

/* Nav */
.md-nav__item .md-nav__link--active, 
.md-nav__item .md-nav__link--active code {
  color: var(--cz-primary);
  font-weight: 500;
}
.md-nav__item .md-nav__link:hover, 
.md-nav__item .md-nav__link:hover code {
  color: var(--cz-primary-dark);
}
.md-nav__item .md-nav__link.md-nav__link--active:hover, 
.md-nav__item .md-nav__link.md-nav__link--active:hover code {
  color: var(--cz-primary);
}

/* Chevron SVG (más visible) SOLO en subitems del sidebar izquierdo */
.md-nav--primary .md-nav__item--nested .md-nav .md-nav__item > .md-nav__link {
  position: relative;
  padding-left: 2.0em; /* deja sitio para el icono */
}

.md-nav--primary .md-nav__item--nested .md-nav .md-nav__item > .md-nav__link::before {
  content: "";
  position: absolute;
  left: 0.65em;
  top: 50%;
  transform: translateY(-50%);
  width: 1.05em;   /* tamaño icono */
  height: 1.05em;  /* tamaño icono */
  background-color: var(--md-default-fg-color--light);

  /* SVG chevron-right como máscara */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;

  opacity: 0.95;
}

/* Hover/activo para que combine con tu paleta */
.md-nav--primary .md-nav__item--nested .md-nav .md-nav__item > .md-nav__link:hover::before {
  background-color: var(--cz-primary-dark);
}

.md-nav--primary .md-nav__item--nested .md-nav .md-nav__item > .md-nav__link--active::before {
  background-color: var(--cz-primary);
}


/* Content links */
.md-typeset a {
  color: var(--cz-primary);
  text-decoration: none;
  font-weight: 500;
}

.md-typeset a:hover,
.md-typeset a:focus {
  text-decoration: underline;
}

/* Code box */
.md-typeset pre>code {
  border-radius: 6px;
}
.md-code__nav {
  background-color: rgba(38,40,43,.05);
}
:hover>.md-code__nav {
  background-color: rgba(38,40,43,.6);
}
.md-code__button {
  color: rgba(38,40,43,.1);
}
:hover>.md-code__nav .md-code__button {
  color: rgba(247,244,236,.9);
}

/* Main */

.md-content__inner {
  padding-bottom: 1.5rem;
}