/* ==========================================================================
   Header público (templates/header-offlog.tpl): se ve en home, carrito,
   checkout, mis compras, plantillas y precios, y el resto de las páginas
   públicas/logueadas que no son ni el dashboard admin ni login/registro.
   Reescrito para usar el mismo sistema de tokens --cp-* que ya define
   css/carrito.css (siempre cargado en esta misma plantilla) -antes este
   archivo tenía su propia paleta suelta (#313399, #6366f1, un gradiente
   morado #7B2FF7→#3B38F3 sin relación con el resto) que no combinaba con
   el resto del flujo de compra-.
   ========================================================================== */

header {
  --hdr-accent: var(--cp-accent, #303198);
  --hdr-accent-dark: var(--cp-accent-dark, #242572);
  --hdr-surface: var(--cp-surface, #ffffff);
  --hdr-line: var(--cp-line, #e7e9f2);
  --hdr-text: var(--cp-text, #26263b);
  --hdr-text-muted: var(--cp-text-muted, #6b7086);
  --hdr-canvas: var(--cp-canvas, #f5f8fc);
  --hdr-shadow: var(--cp-shadow, 0 2px 10px rgba(30,30,60,.06));

  background: var(--hdr-surface);
  border-bottom: 1px solid var(--hdr-line);
  box-shadow: var(--hdr-shadow);
  min-height: 4rem;
  padding: .75rem 1.5rem;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
  z-index: 100;
}

.logopng-header { height: 40px; display: block; }

.offlog-header-about {
  margin-right: auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.cm-header-nav-links {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.cm-header-nav-links a,
.cm-header-nav-links button {
  background: none;
  border: none;
  color: var(--hdr-text);
  font-size: .95rem;
  font-family: inherit;
  cursor: pointer;
  transition: color .15s ease;
  text-decoration: none;
}

/* ---------- links de texto (Nosotros, Plantillas y precios, Mis compras, Carrito) ---------- */
.header-alt-options {
  position: relative;
  background: none;
  border: none;
  color: var(--hdr-text);
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

.header-alt-options::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--hdr-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}

.header-alt-options:hover {
  color: var(--hdr-accent);
  text-decoration: none;
}

.header-alt-options:hover::after { transform: scaleX(1); }

/* ---------- botón "Ingresar" (ghost) y disparador del perfil ---------- */
.login-button-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .5rem 1rem;
  border-radius: 9px;
  border: 1px solid var(--hdr-line);
  color: var(--hdr-text);
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.login-button-header:hover {
  border-color: var(--hdr-accent);
  color: var(--hdr-accent);
  background-color: var(--hdr-canvas);
  text-decoration: none;
}

/* ---------- botón "Registro" (sólido) ---------- */
.register-button-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--hdr-accent) !important;
  padding: .5rem 1.1rem !important;
  border-radius: 9px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: background-color .15s ease !important;
}

.register-button-header:hover {
  background: var(--hdr-accent-dark) !important;
}

/* ---------- dropdown de perfil (desktop) ---------- */
.cm-header-profile { position: relative; outline: none; }
.cm-header-profile > button { font-weight: 600; }
.cm-header-profile button:focus { outline: none; }

.cm-header-profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: none;
  flex-direction: column;
  min-width: 180px;
  z-index: 50;
  border-radius: 10px;
  overflow: hidden;
  background: var(--hdr-surface);
  border: 1px solid var(--hdr-line);
  box-shadow: var(--hdr-shadow);
}

.cm-header-profile.open .cm-header-profile-menu { display: flex; }

.cm-header-profile-menu a {
  background: none;
  border: none;
  color: var(--hdr-text);
  text-align: left;
  padding: .7rem 1rem;
  font-size: .9rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s ease;
}

.cm-header-profile-menu a:hover {
  background: var(--hdr-canvas);
  color: var(--hdr-accent);
  font-weight: 600;
}

/* ---------- hamburguesa (mobile) ---------- */
.cm-header-hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.cm-header-hamburger div {
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--hdr-text);
}

/* ---------- menú lateral (mobile) ---------- */
.cm-header-mobile-menu {
  position: fixed;
  top: 0;
  left: -280px;
  width: 260px;
  height: 100vh;
  background-color: var(--hdr-surface);
  box-shadow: 8px 0 24px rgba(30,30,60,.12);
  display: flex;
  flex-direction: column;
  padding: 5rem 1rem 1.5rem;
  gap: .25rem;
  transition: left .25s ease;
  z-index: 99;
}

.cm-header-mobile-menu.open { left: 0; }

.cm-header-mobile-menu a {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--hdr-text);
  font-size: .92rem;
  font-weight: 500;
  text-align: left;
  padding: .65rem .6rem;
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}

.cm-header-mobile-menu a:hover {
  background: var(--hdr-canvas);
  color: var(--hdr-accent);
}

.cm-header-mobile-menu svg {
  margin-right: .6rem;
  color: var(--hdr-text-muted);
  flex-shrink: 0;
}

.cm-header-mobile-menu a:hover svg { color: var(--hdr-accent); }

.cm-header-mobile-menu hr {
  border: none;
  border-top: 1px solid var(--hdr-line);
  margin: .5rem 0;
}

/* ---------- responsive ---------- */
@media (max-width: 768px) {
  .cm-header-nav-links { display: none; }

  .cm-header-hamburger { display: flex; }

  header { justify-content: flex-start; }

  .offlog-header-about { margin-right: 0; }

  .header-alt-options { display: none; }
}