/* ==========================================================================
   TOPBAR — barra superior fija · VERSION-LOGO-FIX-2
   Modo claro: verde jade oscuro (--verde-marca) con patrón oro al 25%
   Modo oscuro: cielo profundo (--azul-noche) con patrón oro al 25%
   ========================================================================== */

.topbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 7rem;
  background: var(--verde-marca);
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.6rem;
  z-index: var(--z-topbar);
  transition: background 0.4s ease;
}

/* Línea inferior — degradado oro con centro brillante */
.topbar::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: .3rem; /* 3px — modo claro */
  background: var(--linea-oro-h);
  z-index: 2;
  pointer-events: none;
  transition: height 0.4s ease;
}

[data-tema="oscuro"] .topbar::before {
  height: .2rem; /* 2px — modo oscuro */
}

/* Patrón ornamental como marca de agua */
.topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../img/ornamento-topbar.svg");
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: center;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.4s ease;
}

[data-tema="oscuro"] .topbar {
  background: var(--azul-noche);
}
[data-tema="oscuro"] .topbar::after {
  opacity: 0.25;
}

/* Blur al abrir sidebar */
.topbar.topbar-blur {
  filter: blur(.4rem) brightness(0.85);
}

.topbar a {
  position: relative;
  z-index: 1;
}

/* Logotipo (span.topbar-wordmark reemplaza el h1 inválido dentro de <a>) */
.topbar-wordmark {
  font-family: var(--fuente-titulos);
  font-size: 3.8rem;
  font-weight: 700;
  color: #F2EDE4;
  position: relative;
  z-index: 1;
  line-height: 1;
  /* Playfair Display: ascender/descender asimétricos causan offset visual.
     translateY corrige sin alterar el layout ni el flujo del documento */
  transform: translateY(-0.06em);
}

/* Hamburguesa */
.menu-btn {
  position: absolute;
  left: 1.6rem;
  font-size: 2.4rem;
  color: #F2EDE4;
  flex-shrink: 0;
  z-index: 2;
}

/* Navegación desktop */
.top-actions {
  display: none;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 1;
}
.top-actions a {
  color: #F2EDE4;
  padding: .8rem 1.2rem;
  font-size: 1.7rem;
  font-family: var(--fuente-titulos);
  letter-spacing: .03em;
}
.top-actions a:hover {
  color: var(--color-amarillo);
}

/* ====== TOPBAR DASHBOARD ====== */
.topbar-perfil {
  padding: 0 2rem;
  gap: 1.5rem;
  justify-content: space-between;
}
/* ====== LOGO ======
   Base (móvil/tablet): centrado en todo el topbar.
   En desktop el override mueve el centro sobre el sidebar (ver media query). */
.topbar-logo {
  flex-shrink: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}
.topbar-logo .topbar-wordmark {
  font-size: 3rem;
  padding: 0;
  margin: 0;
  transform: translateY(-0.06em);
  white-space: nowrap;
}

/* Acciones usuario */
.user-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-shrink: 0;
  position: relative;
  z-index: 3;  /* encima de la línea dorada del topbar (::before z-index: 2) */
  padding-right: 4rem;
  margin-left: auto;   /* siempre a la derecha, aunque sea el único hijo en flujo */
}
.user-menu {
  position: relative;
  z-index: 3;
}
.user-btn {
  background: var(--verde-marca);          /* mismo verde del topbar (modo claro) */
  border: .15rem solid #C9A44C;
  border-radius: 2.5rem;
  padding: .4rem 1rem .4rem .4rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: #F2EDE4;
  transition: background var(--transicion-media), border-color var(--transicion-media);
}
.user-btn:hover {
  background: #0F3028;
  border-color: #FFE080;
}
[data-tema="oscuro"] .user-btn {
  background: var(--azul-noche);          /* mismo azul oscuro del topbar en modo oscuro */
}
[data-tema="oscuro"] .user-btn:hover {
  background: #07101A;
}
/* Contenedor del avatar — contiene tanto la img como el fallback emoji */
.user-avatar-wrap {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radio-redondo);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Foto de perfil real — mismas dimensiones que el fallback */
.user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radio-redondo);
}

.user-avatar-fallback {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radio-redondo);
  background: linear-gradient(135deg, var(--color-verde), #1A1F36);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.4rem;
  flex-shrink: 0;
}

/* ====== TOGGLE TEMA — píldora con animación deslizante ====== */
.tema-toggle {
  width: 8.0rem;
  height: 4.0rem;
  border-radius: 2rem;
  background: var(--verde-marca);
  border: .2rem solid #C9A44C;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: background var(--transicion-media), border-color var(--transicion-media);
}
.tema-toggle:hover { background: #153D2E; }

/* Iconos fijos — siempre visibles, cambian de color */
.tema-toggle .t-moon,
.tema-toggle .t-sun {
  width: 2.0rem;
  height: 2.0rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
  position: relative;
  z-index: 1;
  border-radius: 50%;
  transition: color 0.3s ease;
  pointer-events: none;
}
/* Micro-ajuste vertical por carácter Unicode */
.tema-toggle .t-moon { padding-top: .15rem; }
.tema-toggle .t-sun  { padding-bottom: .1rem; }

/* Bola deslizante — se mueve entre luna y sol */
.tema-toggle .t-ball {
  position: absolute;
  top: .8rem;    /* = padding → centrado vertical perfecto */
  left: .8rem;   /* = padding → posición inicial */
  width: 2.0rem;
  height: 2.0rem;
  border-radius: 50%;
  z-index: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.3s ease,
              box-shadow 0.3s ease;
}

/* MODO CLARO — bola a la derecha (sol activo) */
[data-tema="claro"] .tema-toggle {
  border-color: #C9A44C;
}
[data-tema="claro"] .tema-toggle .t-ball {
  transform: translateX(4.0rem); /* 8.0 - 0.4 - 0.8 - 2.0 - 0.8 = 4.0rem */
  background: #F5C842;
  box-shadow: 0 0 .8rem rgba(245, 200, 66, 0.55);
}
[data-tema="claro"] .tema-toggle .t-sun  { color: #7A4A00; }
[data-tema="claro"] .tema-toggle .t-moon { color: rgba(242, 237, 228, 0.28); }

/* MODO OSCURO — bola a la izquierda (luna activa) */
[data-tema="oscuro"] .tema-toggle {
  background: var(--azul-noche);
  border-color: #C9A44C;
}
[data-tema="oscuro"] .tema-toggle:hover { background: #161F2E; }
[data-tema="oscuro"] .tema-toggle .t-ball {
  transform: translateX(0);
  background: #B8C8E8;
  box-shadow: 0 0 .8rem rgba(140, 170, 220, 0.40);
}
[data-tema="oscuro"] .tema-toggle .t-moon { color: #1A2540; }
[data-tema="oscuro"] .tema-toggle .t-sun  { color: rgba(229, 231, 235, 0.20); }

/* ====== DROPDOWN DEL USUARIO ====== */
/* Los estilos del .user-dropdown viven en componentes/user-dropdown.css */

/* ====== DESKTOP ====== */
@media (min-width: 1024px) {
  .menu-btn { display: none; }
  .topbar { justify-content: space-between; }
  .top-actions { display: flex; padding-right: 4rem; }
  /* Equilibrar margen del logo en topbar público con el del top-actions */
  .topbar:not(.topbar-perfil) > a { padding-left: 4rem; }

  /* Logo centrado sobre el avatar del sidebar.
     El centro del texto se ancla en 14rem (= centro del sidebar de 28rem),
     translateX(-50%) desplaza el texto media anchura hacia la izquierda. */
  .topbar-perfil .topbar-logo {
    left: 11.5rem;
    width: auto;
    transform: translateX(-50%);
    display: flex;
    justify-content: flex-start;
  }
  /* Cápsula de usuario: misma distancia desde la derecha */
  .topbar-perfil .user-actions {
    position: absolute;
    right: 11.5rem;
    width: auto;
    padding-right: 0;
    margin-left: 0;
    justify-content: center;
    transform: translateX(50%);
  }
}

/* ====== MÓVIL — solo avatar en el topbar ====== */
@media (max-width: 1023px) {
  /* La hamburguesa fluye en el flujo (no absoluta) para compartir
     el mismo margen de borde que el avatar — ambos los da el padding
     del topbar (0 2rem) */
  .topbar-perfil .menu-btn {
    position: static;
    left: auto;
    flex: 1;                /* mismo peso que el avatar */
    text-align: left;
  }
  .topbar-perfil .user-actions {
    position: static;
    width: auto;
    padding-right: 0;
    margin-left: 0;
    gap: .8rem;
    flex: 1;                /* mismo peso que la hamburguesa */
    justify-content: flex-end;
  }

  /* Cápsula → solo el avatar circular */
  .topbar-perfil .user-btn {
    padding: .3rem;
    border-radius: var(--radio-redondo);
    background: transparent;
    border-color: #C9A44C;
  }
  [data-tema="oscuro"] .topbar-perfil .user-btn { background: transparent; }

  /* Ocultar nombre y chevron en móvil */
  .topbar-perfil .user-nombre,
  .topbar-perfil .user-chevron {
    display: none;
  }

  /* Logo en el centro: hamburguesa (flex:1) y avatar (flex:1) lo empujan
     a la mitad exacta. Sin position absolute ni cálculos. */
  .topbar-perfil .topbar-logo {
    position: static;
    left: auto;
    right: auto;
    transform: none;
    margin: 0;
    display: flex;
    justify-content: center;
  }
  .topbar-perfil .topbar-logo .topbar-wordmark {
    transform: translateY(-0.06em);
  }
}