/* Barra superior fija: transparente sobre la cabecera de página y blanca al hacer scroll. */

@layer componentes {
  .saltar-contenido {
    position: absolute;
    top: var(--espacio-2);
    left: var(--espacio-2);
    z-index: 20;
    padding: var(--espacio-2) var(--espacio-4);
    background: var(--color-fondo);
    color: var(--color-texto);
    transform: translateY(-200%);
  }

  .saltar-contenido:focus {
    transform: none;
  }

  /* Sobre la foto de la página: transparente con un degradado oscuro arriba, para leer el nombre y los enlaces sea
     la foto clara u oscura. Al bajar (o al abrir el menú en el móvil), blanca. */
  .cabecera-sitio {
    position: fixed;
    inset: 0 0 auto;
    z-index: 10;
    view-transition-name: cabecera;  /* en las transiciones, por encima de lo que se mueve debajo */
    background: linear-gradient(to bottom, color-mix(in srgb, black 30%, transparent), transparent);
    transition: background-color var(--transicion), box-shadow var(--transicion);
  }

  .cabecera-sitio__barra {
    display: flex;
    align-items: center;
    gap: var(--espacio-4);
    min-height: var(--alto-barra);
    transition: min-height var(--transicion);
  }

  .cabecera-sitio__logo {
    display: inline-flex;
    gap: var(--espacio-3);
    align-items: center;
  }

  .cabecera-sitio__logo img {
    width: 40px;
    height: 40px;
    transition: transform var(--transicion);
  }

  .cabecera-sitio__logo:hover img {
    transform: scale(1.1);
  }

  .cabecera-sitio__marca {
    color: var(--color-texto-invertido);
    font-size: 1.05rem;
    white-space: nowrap;
    text-shadow: var(--sombra-texto-barra);
  }

  .cabecera-sitio__marca b {
    font-weight: 700;
  }

  .cabecera-sitio__menu {
    display: flex;
    align-items: center;
    gap: var(--espacio-5);
    margin-left: auto;
  }

  .cabecera-sitio__buscador {
    position: relative;
  }

  /* Una caja bajo el buscador, no una franja de lado a lado aunque el buscador ocupe todo el menú (móvil). */
  .cabecera-sitio__buscador .sugerencias {
    right: auto;
    width: min(100%, 320px);
    min-width: min(280px, calc(100vw - 2 * var(--margen-lateral)));
  }

  .cabecera-sitio__buscador input {
    width: 200px;
    padding: 6px 14px;
    border: 1px solid var(--color-borde);
    border-radius: 999px;
    background: var(--color-fondo);
    color: var(--color-texto);
    font-size: 14px;
  }

  .cabecera-sitio__buscador input::placeholder {
    color: var(--color-texto-suave);
  }

  .cabecera-sitio__enlaces {
    display: flex;
    gap: var(--espacio-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Enlaces sin mayúsculas; la sección en la que se está, subrayada en naranja (navegacion.js). */
  .cabecera-sitio__enlaces > li > a {
    display: inline-block;
    padding-block: 2px;
    color: var(--color-texto-invertido);
    font-size: 0.95rem;
    font-weight: 600;
    text-shadow: var(--sombra-texto-barra);
    transition: color var(--transicion), box-shadow var(--transicion);
  }

  .cabecera-sitio__enlaces > li > a:hover {
    color: var(--color-acento);
  }

  .cabecera-sitio__enlaces > li > a[aria-current] {
    box-shadow: inset 0 -2px 0 var(--color-acento);
  }

  /* «Aprende»: un botón como los enlaces, con su flecha, que despliega medusas, algas y natas. Se abre al pasar
     el ratón (en el ordenador, también sin JavaScript) o al pulsarlo (navegacion.js). Sin esquinas redondeadas:
     el subrayado de la sección actual, recto como el de los enlaces. */
  .cabecera-sitio__grupo {
    position: relative;
  }

  .cabecera-sitio__desplegar {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 2px 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--color-texto-invertido);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    text-shadow: var(--sombra-texto-barra);
    cursor: pointer;
    transition: color var(--transicion), box-shadow var(--transicion);
  }

  .cabecera-sitio__desplegar::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform var(--transicion), margin var(--transicion);
  }

  .cabecera-sitio__desplegar[aria-current] {
    box-shadow: inset 0 -2px 0 var(--color-acento);
  }

  .cabecera-sitio--compacta .cabecera-sitio__desplegar {
    color: var(--color-marino);
    text-shadow: none;
  }

  .cabecera-sitio__submenu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    z-index: 20;
    display: none;
    width: 320px;
    margin: 0;
    padding: var(--espacio-2);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    background: var(--color-fondo);
    box-shadow: var(--sombra);
    list-style: none;
    transform: translateX(-50%);
  }

  /* Puente invisible entre el botón y el desplegable, para que no se cierre al bajar el ratón */
  .cabecera-sitio__submenu::before {
    content: "";
    position: absolute;
    inset: -16px 0 auto;
    height: 16px;
  }

  .cabecera-sitio__desplegar[aria-expanded="true"] + .cabecera-sitio__submenu {
    display: block;
  }

  .cabecera-sitio__desplegar[aria-expanded="true"]::after {
    margin-top: 3px;
    transform: rotate(-135deg);
  }

  .cabecera-sitio__submenu a {
    display: grid;
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: 6px;
    color: var(--color-texto-suave);
  }

  .cabecera-sitio__submenu a:hover,
  .cabecera-sitio__submenu a[aria-current] {
    background: var(--color-fondo-suave);
  }

  .cabecera-sitio__submenu b {
    color: var(--color-marino);
    font-size: 0.95rem;
  }

  .cabecera-sitio__submenu a:hover b {
    text-decoration: underline;
  }

  .cabecera-sitio__submenu a[aria-current] b {
    color: var(--color-acento-texto);
  }

  .cabecera-sitio__submenu small {
    font-size: 0.8rem;
    line-height: 1.35;
  }

  /* Con ratón, en el ordenador: se abre al pasar por encima */
  @media (hover: hover) and (min-width: 1081px) {
    .cabecera-sitio__grupo:hover .cabecera-sitio__submenu {
      display: block;
    }

    .cabecera-sitio__grupo:hover .cabecera-sitio__desplegar::after {
      margin-top: 3px;
      transform: rotate(-135deg);
    }

    .cabecera-sitio__desplegar:hover {
      color: var(--color-acento);
    }

    .cabecera-sitio--compacta .cabecera-sitio__desplegar:hover {
      color: var(--color-acento-texto);
    }
  }

  .cabecera-sitio__boton {
    display: none;
  }

  /* Botón del tema: un icono como los enlaces (blanco sobre la foto, azul marino en la barra blanca); la luna en el
     tema claro y el sol en el oscuro */
  .cabecera-sitio__tema {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: var(--espacio-3);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--color-texto-invertido);
    cursor: pointer;
    transition: color var(--transicion);
  }

  .cabecera-sitio__tema[hidden] {
    display: none;
  }

  .cabecera-sitio__tema .icono-dato {
    width: 22px;
    height: 22px;
  }

  .cabecera-sitio__tema:hover {
    color: var(--color-acento);
  }

  .cabecera-sitio__tema-sol,
  :root[data-tema="oscuro"] .cabecera-sitio__tema-luna {
    display: none;
  }

  :root[data-tema="oscuro"] .cabecera-sitio__tema-sol {
    display: block;
  }

  .cabecera-sitio--compacta .cabecera-sitio__tema {
    color: var(--color-marino);
  }

  .cabecera-sitio--compacta .cabecera-sitio__tema:hover {
    color: var(--color-acento-texto);
  }

  /* Al bajar: blanca, más baja, con el nombre y los enlaces en azul marino */
  .cabecera-sitio--compacta {
    background: var(--color-fondo);
    box-shadow: var(--sombra-barra);
  }

  .cabecera-sitio--compacta .cabecera-sitio__barra {
    min-height: var(--alto-barra-compacta);
  }

  .cabecera-sitio--compacta .cabecera-sitio__marca,
  .cabecera-sitio--compacta .cabecera-sitio__enlaces > li > a {
    color: var(--color-marino);
    text-shadow: none;
  }

  .cabecera-sitio--compacta .cabecera-sitio__enlaces > li > a:hover {
    color: var(--color-acento-texto);
  }

  /* Móvil (y tableta: hasta 1080 px la barra entera no cabe): también sobre la foto; el menú, al abrirlo, sobre fondo
     blanco */
  @media (max-width: 1080px) {
    .cabecera-sitio--compacta,
    .cabecera-sitio--abierta {
      background: var(--color-fondo);
      box-shadow: var(--sombra-barra-movil);
    }

    .cabecera-sitio--abierta .cabecera-sitio__marca {
      color: var(--color-marino);
      text-shadow: none;
    }

    .cabecera-sitio__marca {
      font-size: 0.95rem;
    }

    .cabecera-sitio__barra {
      flex-wrap: wrap;
      gap: 0;
    }

    /* El tema, junto al botón del menú; el menú, al abrirse, debajo de los dos */
    .cabecera-sitio__tema {
      order: 1;
      width: 44px;
      height: 44px;
      margin-left: auto;
    }

    .cabecera-sitio--abierta .cabecera-sitio__tema {
      color: var(--color-marino);
    }

    .cabecera-sitio__menu {
      order: 3;
    }

    .cabecera-sitio__boton {
      order: 2;
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      margin-left: 0;
      margin-right: calc(-1 * var(--espacio-2));
      padding: 0;
      border: 0;
      background: none;
      cursor: pointer;
    }

    .cabecera-sitio__icono,
    .cabecera-sitio__icono::before,
    .cabecera-sitio__icono::after {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--color-texto-invertido);
      box-shadow: var(--sombra-texto-barra);
      transition: transform var(--transicion), opacity var(--transicion), background-color var(--transicion);
    }

    .cabecera-sitio--compacta .cabecera-sitio__icono,
    .cabecera-sitio--compacta .cabecera-sitio__icono::before,
    .cabecera-sitio--compacta .cabecera-sitio__icono::after,
    .cabecera-sitio--abierta .cabecera-sitio__icono::before,
    .cabecera-sitio--abierta .cabecera-sitio__icono::after {
      background: var(--color-marino);
      box-shadow: none;
    }

    .cabecera-sitio__icono {
      position: relative;
    }

    .cabecera-sitio__icono::before,
    .cabecera-sitio__icono::after {
      content: "";
      position: absolute;
      left: 0;
    }

    .cabecera-sitio__icono::before {
      top: -7px;
    }

    .cabecera-sitio__icono::after {
      top: 7px;
    }

    .cabecera-sitio--abierta .cabecera-sitio__icono {
      background: transparent;
      box-shadow: none;
    }

    .cabecera-sitio--abierta .cabecera-sitio__icono::before {
      transform: translateY(7px) rotate(45deg);
    }

    .cabecera-sitio--abierta .cabecera-sitio__icono::after {
      transform: translateY(-7px) rotate(-45deg);
    }

    .cabecera-sitio__menu {
      flex-direction: column;
      align-items: stretch;
      gap: var(--espacio-3);
      width: 100%;
      margin: 0;
      padding: var(--espacio-2) 0 var(--espacio-4);
    }

    /* Con JS el menú empieza plegado; sin JS se ve siempre. La media query se evalúa antes
       de ejecutar ningún script, así que no hay destello del menú abierto al cargar. */
    @media (scripting: enabled) {
      .cabecera-sitio__menu {
        display: none;
      }

      .cabecera-sitio--abierta .cabecera-sitio__menu {
        display: flex;
      }
    }

    @media (scripting: none) {
      .cabecera-sitio__submenu {
        display: block;
      }
    }

    .cabecera-sitio__buscador input {
      width: 100%;
      padding: 10px 16px;
      font-size: var(--paso-0);
    }

    .cabecera-sitio__enlaces {
      flex-direction: column;
      gap: 0;
    }

    .cabecera-sitio__enlaces > li + li {
      border-top: 1px solid var(--color-borde);
    }

    .cabecera-sitio__enlaces > li > a,
    .cabecera-sitio--compacta .cabecera-sitio__enlaces > li > a {
      display: flex;
      justify-content: space-between;
      padding: var(--espacio-3) var(--espacio-1);
      color: var(--color-marino);
      font-size: var(--paso-1);
      text-shadow: none;
    }

    .cabecera-sitio__enlaces > li > a::after {
      content: "›";
      color: var(--color-acento-texto);
    }

    .cabecera-sitio__enlaces > li > a[aria-current] {
      box-shadow: inset 3px 0 0 var(--color-acento);
      padding-left: var(--espacio-3);
    }

    /* «Aprende» en el menú: una fila más, que al pulsarla abre debajo los tres temas, sangrados */
    .cabecera-sitio__desplegar,
    .cabecera-sitio--compacta .cabecera-sitio__desplegar {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: var(--espacio-3) var(--espacio-1);
      color: var(--color-marino);
      font-size: var(--paso-1);
      text-shadow: none;
    }

    .cabecera-sitio__desplegar::after {
      margin-right: 4px;
      color: var(--color-acento-texto);
    }

    .cabecera-sitio__desplegar[aria-current] {
      padding-left: var(--espacio-3);
      box-shadow: inset 3px 0 0 var(--color-acento);
    }

    .cabecera-sitio__submenu {
      position: static;
      width: auto;
      margin: 0 0 var(--espacio-2) var(--espacio-3);
      padding: 0 0 0 var(--espacio-3);
      border: 0;
      border-left: 2px solid var(--color-borde);
      border-radius: 0;
      box-shadow: none;
      transform: none;
    }

    .cabecera-sitio__submenu::before {
      content: none;
    }

    .cabecera-sitio__submenu a {
      padding: var(--espacio-2) var(--espacio-1);
    }
  }
}