/* ============================================================
   Botón de GCG Cliente en la cabecera (partial includes/partials/gcg-cliente-boton.php).
   Sustituye al botón flotante. Un solo componente para los tres chromes:
     .gcg-cliente-cta--landing   cabecera de la portada (index.php, clases .boton)
     .gcg-cliente-cta--publico   cabecera del chrome público (clases .gcg-landing-btn)
     .gcg-cliente-cta--sesion    cabecera de la app (clases .gcg-btn), con y sin sesión
   y para los menús (.gcg-cliente-btn--menu / .gcg-cliente-nota).

   Variante V1: blanco sólido #F5F7FA con texto #090D10, bisel de esquina de 8px (el de .boton),
   sin glow, blur ni gradiente. «Regístrate» sigue siendo el único botón naranja relleno.
   Sin descarga publicada es un botón de CONTORNO blanco (nunca relleno) con la etiqueta PRONTO.

   Se carga con el partial, después de las hojas de la página, y por eso sube la especificidad con la
   doble clase en vez de usar !important (la excepción, documentada, es el desplazamiento de .boton).
   Funciona con el vocabulario de la portada (--acento, --fuente-titulo) y con el de la app (--gcg-accent, …).
   ============================================================ */
.gcg-cliente-cta,
.gcg-cliente-btn,
.gcg-cliente-aviso,
.gcg-cliente-nota {
  --gcg-cb-acento: var(--acento, var(--gcg-accent, #F4A62A));
  --gcg-cb-acento-claro: var(--acento-claro, var(--gcg-accent-hover, #FFC15A));
  --gcg-cb-titulo: var(--fuente-titulo, var(--gcg-font-display, 'Space Grotesk', 'Inter', 'Segoe UI', Arial, sans-serif));
  --gcg-cb-mono: var(--fuente-mono, var(--gcg-font-mono, 'JetBrains Mono', Consolas, 'Courier New', monospace));
}

/* ---------- Contenedor (solo en cabeceras) ---------- */
.gcg-cliente-cta {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
}

/* ---------- Botón ---------- */
.gcg-cliente-btn.gcg-cliente-btn {
  --gcg-cb-h: 40px;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--gcg-cb-h);
  min-height: var(--gcg-cb-h);
  padding: 0 14px;
  overflow: hidden;
  border: 1px solid #F5F7FA;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  background: #F5F7FA;
  color: #090D10;
  font: 700 11px/1 var(--gcg-cb-titulo);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.gcg-cliente-btn.gcg-cliente-btn:hover { background: #FFFFFF; border-color: #FFFFFF; }
.gcg-cliente-btn.gcg-cliente-btn:active { background: #DDE1E6; border-color: #DDE1E6; transform: none; }
/* Foco: el patrón de .gcg-landing-btn (dos anillos por dentro: el bisel recortado no los corta). */
.gcg-cliente-btn.gcg-cliente-btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px #070A0D, inset 0 0 0 4px var(--gcg-cb-acento-claro);
}
/* .boton desplaza 4px su último <span> al pasar el ratón (la flecha de «Descubrir…»): aquí no hay flecha. */
.gcg-cliente-btn > span { transform: none !important; }

.gcg-cliente-btn__icono {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gcg-cliente-btn__texto { display: inline-block; }

/* Etiqueta de estado, como .gcg-v2-etiqueta del menú de la app. */
.gcg-cliente-btn__etiqueta {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  font: 700 11px/1.2 var(--gcg-cb-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gcg-cb-acento);
  border: 1px solid rgba(244, 166, 42, .35);
}

/* Sin descarga publicada: contorno blanco (1px al 70%), texto blanco, NUNCA relleno. */
.gcg-cliente-btn.gcg-cliente-btn--pronto {
  background: transparent;
  color: #F5F7FA;
  border-color: rgba(245, 247, 250, .7);
}
.gcg-cliente-btn.gcg-cliente-btn--pronto:hover,
.gcg-cliente-btn.gcg-cliente-btn--pronto[aria-expanded="true"] { background: transparent; border-color: #F5F7FA; }
.gcg-cliente-btn.gcg-cliente-btn--pronto:active { background: transparent; border-color: rgba(245, 247, 250, .5); }

/* ---------- Cabeceras de la portada y del chrome público ---------- */
/* ≥961px: junto a Ingresar / Regístrate, con 16px de hueco hasta ellos (los márgenes negativos restan el gap del flex). */
.cabecera__interior > .gcg-cliente-cta,
.gcg-landing-nav__inner > .gcg-cliente-cta { margin-right: -22px; }

@media (min-width: 961px) and (max-width: 1120px) {
  .cabecera__interior > .gcg-cliente-cta,
  .gcg-landing-nav__inner > .gcg-cliente-cta { margin-right: -6px; }
  :is(.gcg-cliente-cta--landing, .gcg-cliente-cta--publico) .gcg-cliente-btn.gcg-cliente-btn { width: 40px; padding: 0; gap: 0; }
  :is(.gcg-cliente-cta--landing, .gcg-cliente-cta--publico) :is(.gcg-cliente-btn__texto, .gcg-cliente-btn__etiqueta) { display: none; }
}

/* ≤960px: entre el logo y el botón de menú. Los enlaces y los botones de cuenta ya no se ven. */
@media (max-width: 960px) {
  .cabecera__interior:has(> .gcg-cliente-cta),
  .gcg-landing-nav__inner:has(> .gcg-cliente-cta) { gap: 8px; }
  .cabecera__interior > .gcg-cliente-cta,
  .gcg-landing-nav__inner > .gcg-cliente-cta { margin: 0 0 0 auto; }
  /* El botón de menú pasa a ir pegado al aviso (8px), no a empujarlo: el que absorbe el hueco es el aviso. */
  .gcg-cliente-cta ~ .menu,
  .gcg-cliente-cta ~ .gcg-landing-nav__menu { margin-left: 0; }
  :is(.gcg-cliente-cta--landing, .gcg-cliente-cta--publico) .gcg-cliente-btn.gcg-cliente-btn { --gcg-cb-h: 44px; }
  /* «Próximamente» en móvil: siempre solo icono 44×44. */
  :is(.gcg-cliente-cta--landing, .gcg-cliente-cta--publico) .gcg-cliente-btn--pronto.gcg-cliente-btn { width: 44px; padding: 0; gap: 0; }
  :is(.gcg-cliente-cta--landing, .gcg-cliente-cta--publico) .gcg-cliente-btn--pronto :is(.gcg-cliente-btn__texto, .gcg-cliente-btn__etiqueta) { display: none; }
}
@media (max-width: 359px) {
  :is(.gcg-cliente-cta--landing, .gcg-cliente-cta--publico) .gcg-cliente-btn.gcg-cliente-btn { width: 44px; padding: 0; gap: 0; }
  :is(.gcg-cliente-cta--landing, .gcg-cliente-cta--publico) :is(.gcg-cliente-btn__texto, .gcg-cliente-btn__etiqueta) { display: none; }
}

/* ---------- Cabecera de la app (.gcg-v2-header__actions) ---------- */
.gcg-cliente-cta--sesion .gcg-cliente-btn.gcg-cliente-btn { --gcg-cb-h: 44px; }
/* <1440px: solo icono 44×44 (la cabecera de la app ya lleva navegación, saldo y perfil). */
@media (max-width: 1439px) {
  .gcg-cliente-cta--sesion .gcg-cliente-btn.gcg-cliente-btn { width: 44px; padding: 0; gap: 0; }
  .gcg-cliente-cta--sesion :is(.gcg-cliente-btn__texto, .gcg-cliente-btn__etiqueta) { display: none; }
}
/* ≤480px: no cabe junto al perfil y la hamburguesa; vive en el cajón lateral. */
@media (max-width: 480px) {
  .gcg-cliente-cta--sesion { display: none; }
}

/* ---------- En los menús (móvil de la portada, móvil del chrome público, cajón de la app) ---------- */
.gcg-cliente-btn.gcg-cliente-btn--menu {
  width: 100%;
  height: auto;
  min-height: 44px;
  padding: 10px 14px;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}
.menu-movil > .gcg-cliente-btn--menu.gcg-cliente-btn { margin-top: 8px; }

/* Sin descarga, los menús muestran la nota en línea (no hay nada que pulsar). */
.gcg-cliente-nota {
  box-sizing: border-box;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .02);
  text-align: left;
}
.gcg-cliente-nota--drawer { margin-top: 0; }
.gcg-cliente-nota__fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
.gcg-cliente-nota__titulo { font: 700 12px/1.2 var(--gcg-cb-titulo); letter-spacing: .06em; text-transform: uppercase; color: #F5F7FA; }
.gcg-cliente-nota__texto { margin: 0; font-size: 13px; line-height: 1.5; color: #AAB2BA; }

/* ---------- Aviso de «Próximamente» (anclado bajo la cabecera; el JS fija top y right al abrirlo) ---------- */
.gcg-cliente-aviso {
  box-sizing: border-box;
  position: fixed;
  top: 84px;
  right: 16px;
  z-index: 130;
  width: min(320px, calc(100% - 24px));
  padding: 16px 18px 18px;
  background: #090D10;
  border: 1px solid rgba(255, 255, 255, .16);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  color: #F5F7FA;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
}
.gcg-cliente-aviso[hidden] { display: none; }
.gcg-cliente-aviso::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 1px;
  background: var(--gcg-cb-acento);
}
.gcg-cliente-aviso__titulo { margin: 0 0 6px; font: 700 14px/1.3 var(--gcg-cb-titulo); color: #F5F7FA; }
.gcg-cliente-aviso__texto { margin: 0; font-size: 13px; line-height: 1.5; color: #AAB2BA; }

@media (prefers-reduced-motion: reduce) {
  .gcg-cliente-btn.gcg-cliente-btn { transition: none; }
}
@media print {
  .gcg-cliente-cta, .gcg-cliente-aviso { display: none; }
}