/* =====================================================================
   BARRA UNIFICADA
   ---------------------------------------------------------------------
   Antes cada página ponía los botones donde le tocaba: en Proyectos y
   en el Panel personal "Portafolio" iba a la IZQUIERDA; en Guías y
   Apuntes a la DERECHA (y en distinto orden); en Guías y en el blog la
   hamburguesa estaba a la izquierda y en Apuntes y el inicio a la
   derecha. Se sentía desordenado porque lo estaba.

   Ahora hay UNA sola regla para todas las páginas:

     [ Título ...........  ← Portafolio · Mi blog · cuenta · 🔍 · 🌙 · ☰ ]

   · El título, a la izquierda.
   · TODO lo demás, a la derecha y siempre en el mismo orden.
   · En el teléfono, los botones de texto se recogen en el menú ☰, que
     también está a la derecha y se abre hacia la derecha.

   Este archivo se carga el ÚLTIMO en cada página para ganar a las
   reglas viejas de cada hoja. El prefijo "html body" solo sube el peso
   del selector; no hace falta !important.
   ===================================================================== */

html body [data-barra] {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  grid-template-columns: none;
  text-align: left;
}

/* El título ocupa el espacio libre y empuja todo lo demás a la derecha. */
html body [data-barra] > h1 {
  order: 0;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  text-align: left;
  justify-self: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html body [data-barra] > .barra-acciones { order: 1; }
html body [data-barra] > .barra-iconos   { order: 2; }
html body [data-barra] > [data-barra-toggle] { order: 3; }

/* "← Portafolio" y "Mi blog": icono y texto siempre separados igual. */
html body [data-barra] .btn-salida {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  white-space: nowrap;
}

html body [data-barra] .barra-iconos {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}

/* Botón ☰: mismo tamaño y mismo lugar (el último a la derecha) en todas. */
html body [data-barra] > [data-barra-toggle] {
  position: static;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  border-radius: 10px;
  border: 1px solid rgba(77, 163, 255, 0.45);
  background: rgba(77, 163, 255, 0.08);
  color: #4da3ff;
  cursor: pointer;
}
html[data-theme="light"] body [data-barra] > [data-barra-toggle] {
  color: #1668c9;
  border-color: rgba(22, 104, 201, 0.4);
  background: rgba(22, 104, 201, 0.06);
}

/* ---------------------------------------------------------------------
   ESCRITORIO: todo en una fila, sin menú.
   --------------------------------------------------------------------- */
@media (min-width: 769px) {
  html body [data-barra] > [data-barra-toggle] {
    display: none;
  }

  html body [data-barra] .barra-acciones,
  html body [data-barra] .barra-acciones > .encabezado-links,
  html body [data-barra] .barra-acciones > .auth-section,
  html body [data-barra] .barra-acciones > #auth-section {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    position: static;
    width: auto;
    padding: 0;
    margin: 0;
    background: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    flex: none;
  }
}

/* ---------------------------------------------------------------------
   TELÉFONO: título + iconos + ☰ en la barra; el resto en el menú, que
   cae pegado al borde DERECHO, debajo del ☰.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  html body [data-barra] {
    padding-inline: 1rem;
  }

  html body [data-barra] > h1 {
    font-size: 1.3rem;
    color: inherit;
  }

  html body [data-barra] > [data-barra-toggle] {
    display: inline-flex;
  }

  html body [data-barra] .barra-acciones {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0.75rem;
    left: auto;
    z-index: 1000;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    width: min(260px, calc(100vw - 1.5rem));
    margin: 0;
    padding: 0.85rem;
    border-radius: 12px;
    /* Fondo opaco: el de la barra es translúcido y dejaba ver el
       contenido de detrás a través del menú. */
    background: #1b1f24;
    border: 1px solid rgba(77, 163, 255, 0.25);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  }
  html[data-theme="light"] body [data-barra] .barra-acciones {
    background: #fff;
    border-color: rgba(22, 104, 201, 0.25);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.15);
  }

  html body [data-barra].barra-abierta .barra-acciones {
    display: flex;
  }

  /* Los grupos de dentro también en columna y a lo ancho del menú. */
  html body [data-barra] .barra-acciones > .encabezado-links,
  html body [data-barra] .barra-acciones > .auth-section,
  html body [data-barra] .barra-acciones > #auth-section,
  html body [data-barra] .barra-acciones .usuario-info {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    position: static;
    width: 100%;
    padding: 0;
    margin: 0;
    background: none;
    box-shadow: none;
    border: 0;
  }
  /* user-info empieza oculto con style="display:none" y el JS lo
     muestra al iniciar sesión: ese estilo en línea sigue mandando. */

  html body [data-barra] .barra-acciones .btn,
  html body [data-barra] .barra-acciones a.btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    margin: 0;
  }

  html body [data-barra] .barra-acciones .usuario-info .avatar,
  html body [data-barra] .barra-acciones > .auth-section > .avatar {
    align-self: center;
  }
}

/* Páginas cuya barra no es fija: el menú se coloca respecto a la barra. */
html body header.encabezado[data-barra] {
  position: relative;
  z-index: 100; /* el menú desplegado va por encima de las tarjetas */
}
/* Apuntes: su barra es fija y tiene que seguir siéndolo. */
html body[data-seccion="apuntes"] header.encabezado[data-barra] {
  position: fixed;
}
/* Panel personal: barra pegajosa arriba, como estaba. */
html body header.app-header[data-barra] {
  position: sticky;
  z-index: 100;
}

/* =====================================================================
   BOTÓN "VOLVER" DENTRO DEL CONTENIDO (una guía abierta, una entrada
   del blog abierta…). Siempre arriba y a la DERECHA, igual que los de
   la barra. Antes uno iba abajo a la derecha y otro arriba a la
   izquierda.
   ===================================================================== */
.barra-volver-contenido {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 1rem;
}
.barra-volver-contenido.barra-volver-abajo {
  margin: 1.25rem 0 0;
}
.btn-volver-contenido,
#entrada-volver {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
/* La entrada del blog: el botón es hijo directo del artículo. */
#entrada-detalle > #entrada-volver {
  display: flex;
  width: fit-content;
  margin: 0 0 1rem auto;
}

/* =====================================================================
   BLOG (usa la barra de Bootstrap, no la de arriba)
   En el teléfono la hamburguesa estaba a la IZQUIERDA y la marca en el
   centro. Ahora sigue la misma regla que el resto: marca a la
   izquierda, botones a la derecha y ☰ el último. Al abrir el menú, las
   secciones caen en la fila de abajo.
   ===================================================================== */
@media (max-width: 991.98px) {
  html body .navbar .nav-center-wrapper {
    flex-wrap: wrap;
  }
  html body .navbar .nav-center-wrapper > .logo-btn {
    order: 0;
    flex: 1 1 auto;
    text-align: left;
  }
  html body .navbar .nav-center-wrapper > .nav-acciones {
    order: 1;
  }
  html body .navbar .nav-center-wrapper > .navbar-toggler {
    order: 2;
    margin-left: 0;
  }
  html body .navbar .nav-center-wrapper > .navbar-nav.site-nav-menu {
    order: 3;
  }
}

/* En el teléfono el blog esconde el texto de sus botones de salida;
   el "Volver" de una entrada abierta sí tiene que decir a dónde va. */
html body #entrada-detalle #entrada-volver span {
  display: inline;
}

/* =====================================================================
   CURRÍCULUM: misma regla — título a la izquierda, botones a la
   derecha y "Portafolio" el primero de ellos.
   ===================================================================== */
.cv-barra .cv-barra-titulo {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}
.cv-barra .cv-barra-acciones {
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 560px) {
  .cv-barra .btn-imprimir .cv-imprimir-largo {
    display: none;
  }
}