/* ============================================================
   SOCIOS ECOM — Botones («terciopelo negro»)
   Un solo sistema para toda la casa: la plataforma, la portada y
   el panel de entrar.

   - Principal: píldora plana del verde de la marca, texto oscuro.
     Es el único color saturado que lleva fondo de botón: una
     acción principal por pantalla.
   - Segundo: contorno fino que se enciende al pasar.
   - Fantasma: solo texto.

   Sin degradados ni destellos: la paleta es plana; el brillo se
   queda para la constelación. Se carga la última y los selectores
   llevan `html` delante para ganar a los :hover de cada sección
   sin recurrir a !important.
   ============================================================ */

:root {
  --bt-verde: #14c39a;
  --bt-verde-vivo: #2ee0b5;
  --bt-sobre-verde: #03140f;
  --bt-dorado: #e6b34a;
  --bt-dorado-vivo: #f2c66a;
  --bt-linea: rgba(18, 23, 26, .2);
  --bt-linea-viva: rgba(18, 23, 26, .55);
  --bt-velo: rgba(18, 23, 26, .04);
  --bt-texto: #10181a;
  --bt-halo: 0 0 0 5px rgba(20, 195, 154, .16);
  --bt-salida: cubic-bezier(.16, 1, .3, 1);

  /* Lo que en las secciones se pinta «con el color de acción» (contadores,
     opciones elegidas, la burbuja propia del chat): el mismo verde, plano. */
  --se-accion: var(--bt-verde);
  --se-accion-hover: var(--bt-verde-vivo);
  --se-sobre-accion: var(--bt-sobre-verde);
}
[data-tema="oscuro"], .portada, .acceso {
  --bt-linea: rgba(255, 255, 255, .18);
  --bt-linea-viva: rgba(255, 255, 255, .6);
  --bt-velo: rgba(255, 255, 255, .05);
  --bt-texto: #fcfcfc;
  --se-accion: var(--bt-verde);
  --se-accion-hover: var(--bt-verde-vivo);
  --se-sobre-accion: var(--bt-sobre-verde);
}

/* ---------- Principal ---------- */

html :is(
  .btn--primario, .ficha__btn--clonar, .marco-plan__copiar, .es-destacado .cr-plan__boton,
  .cuantas__op.es-activa, .medida.es-activa, .cr-periodo.es-activo,
  .pt-btn--marca, .acceso__enviar, .acceso__pestana.es-activa,
  .crea-pestana.es-activa, .tema-sello button.es-activo
) {
  color: var(--bt-sobre-verde);
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--bt-verde);
  box-shadow: none;
  text-shadow: none;
  font-weight: 600;
  transition:
    background-color .25s ease,
    box-shadow .4s var(--bt-salida),
    transform .35s var(--bt-salida);
}
html :is(
  .btn--primario, .ficha__btn--clonar, .marco-plan__copiar, .es-destacado .cr-plan__boton,
  .pt-btn--marca, .acceso__enviar
):hover {
  color: var(--bt-sobre-verde);
  background: var(--bt-verde-vivo);
  box-shadow: var(--bt-halo);
  transform: translateY(-1px);
}
html :is(
  .btn--primario, .ficha__btn--clonar, .marco-plan__copiar, .es-destacado .cr-plan__boton,
  .pt-btn--marca, .acceso__enviar
):active { transform: translateY(0) scale(.97); box-shadow: none; }

html :is(.btn--primario, .pt-btn--marca, .acceso__enviar):focus-visible {
  outline: 2px solid var(--bt-verde-vivo);
  outline-offset: 3px;
}
html :is(.btn--primario, .acceso__enviar):is([disabled], :disabled) {
  opacity: .45;
  box-shadow: none;
  transform: none;
}

/* Dorado: el pago y la mejora de plan */
html .btn--dorado {
  color: #2b1d02;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--bt-dorado);
  box-shadow: none;
  transition: background-color .25s ease, box-shadow .4s var(--bt-salida), transform .35s var(--bt-salida);
}
html .btn--dorado:hover { background: var(--bt-dorado-vivo); box-shadow: 0 0 0 5px rgba(230, 179, 74, .18); transform: translateY(-1px); }

/* ---------- Segundo nivel: contorno fino ---------- */

html :is(
  .btn--contorno,
  .ficha__btn:not(.ficha__btn--clonar, .es-abierto, [aria-expanded="true"]),
  .cr-plan:not(.es-destacado) .cr-plan__boton,
  .pt-btn--borde,
  .tg-atajo, .pf-boton, .marco-portada__guardados, .marco-portada__prueba, .clonar-reciente,
  .cr-periodo:not(.es-activo), .guardado__borrar, .creditos
) {
  color: var(--bt-texto);
  border: 1px solid var(--bt-linea) !important;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  transition: background-color .25s ease, border-color .25s ease, transform .35s var(--bt-salida), color .25s ease;
}
html :is(
  .btn--contorno,
  .ficha__btn:not(.ficha__btn--clonar, .es-abierto, [aria-expanded="true"]),
  .cr-plan:not(.es-destacado) .cr-plan__boton,
  .pt-btn--borde,
  .tg-atajo, .pf-boton, .marco-portada__guardados, .marco-portada__prueba, .clonar-reciente,
  .cr-periodo:not(.es-activo), .guardado__borrar
):hover {
  color: var(--bt-texto);
  border-color: var(--bt-linea-viva) !important;
  background: var(--bt-velo);
  transform: translateY(-1px);
}
html :is(.btn--contorno, .ficha__btn, .cr-plan__boton, .pt-btn--borde):active { transform: scale(.97); }

/* Las pestañas de elegir cuando están abiertas */
html .ficha__btn:is(.es-abierto, [aria-expanded="true"]) {
  color: var(--bt-sobre-verde);
  border-color: transparent;
  background: var(--bt-verde);
}

/* Borrar avisa en rojo al pasar */
html .guardado__borrar:hover {
  color: #ff7b8f;
  border-color: rgba(255, 123, 143, .7) !important;
  background: rgba(255, 123, 143, .08);
}
html .guardado__borrar { border-radius: 10px; }
html .clonar-reciente { border-radius: 14px; }
html .clonar-reciente:hover { transform: translateY(-2px); }
html .marco-portada__prueba { border-style: solid !important; }
html .creditos { color: var(--bt-texto); }
html .tema-sello button.es-activo { border-radius: 9px; }

/* ---------- Menú lateral ---------- */

/* La sección activa: velo claro, texto blanco y el icono en verde, con su marca a la izquierda */
html .nav-item.es-activo:not(.nav-item--hijo) {
  color: var(--se-nav-activo-texto);
  background: var(--se-nav-activo-fondo);
  box-shadow: none;
  text-shadow: none;
}
html .nav-item.es-activo:not(.nav-item--hijo) .nav-item__icono { color: var(--se-nav-activo-icono); }

/* Las subsecciones se marcan con el texto y el icono */
html .nav-grupo .nav-item--hijo.es-activo {
  color: var(--se-nav-activo-texto);
  background: transparent;
  box-shadow: none;
  font-weight: 600;
}
html .nav-grupo .nav-item--hijo.es-activo .nav-item__icono { color: var(--se-nav-activo-icono); opacity: 1; }

/* ---------- Fantasma ---------- */

html :is(.btn--fantasma, .pt-btn--texto) {
  border-radius: 999px;
  transition: background-color .25s ease, color .25s ease;
}
html .btn--fantasma:hover { background: var(--bt-velo); }
html .pt-btn--texto { color: var(--pt-ceniza, #9a9a9a); }
html .pt-btn--texto:hover { color: #fff; background: transparent; }

@media (prefers-reduced-motion: reduce) {
  html :is(.btn, .ficha__btn, .pt-btn, .acceso__enviar, .cr-plan__boton) { transition: none !important; }
  html :is(.btn, .ficha__btn, .pt-btn, .acceso__enviar, .cr-plan__boton):hover { transform: none !important; }
}