/* =====================================================================
   button.css — Docokids buttons (.btn + variants).

   Styles the brand button and its variants on top of Bootstrap 5.3's .btn.
   Loads AFTER Bootstrap (base_ds.html:67).

   CÓMO SE PINTA EL COLOR (leer antes de tocar):
   Bootstrap 5.3 no pinta los botones con colores literales: pinta con
   variables CSS (--bs-btn-*). El estado normal sale de su regla `.btn`, y
   hover / presionado / foco / deshabilitado salen de reglas propias que usan
   DOS pseudoclases — por ejemplo `.btn:first-child:active` (0,3,0). Esas
   reglas le ganan por ESPECIFICIDAD a cualquier `.btn-primary:active` del DS
   (0,2,0), sin importar el orden de carga: esta hoja carga después y perdía
   igual. Por eso al mantener presionado un botón salía el azul #0a58ca, que
   es lo que Bootstrap le pone a --bs-btn-active-bg en .btn-primary. El
   anillo de foco azul venía del mismo sitio (--bs-btn-focus-shadow-rgb).

   Así que aquí NO escribimos selectores más específicos para ganarle: le
   damos a las variables los tokens de la marca y dejamos que las reglas de
   Bootstrap pinten los valores correctos. Un bloque por variante cubre los
   cuatro estados de una vez, y no se vuelve a romper si Bootstrap cambia sus
   selectores. Mismo patrón que ya usa base.css:127 (.btn-outline-primary).

   DÓNDE VAN LAS VARIABLES: siempre en la VARIANTE, nunca en el `.btn` base.
   `.btn` y `.btn-primary` son las dos una sola clase (0,1,0), así que una
   variable de color puesta en `.btn` aquí le ganaría por orden de fuente a
   la que declara una variante cargada antes (.btn-outline-primary vive en
   base.css). En `.btn` solo va lo que es del sistema entero: la geometría y
   el anillo de foco.

   Every value is a var(--token). No page-name scope: a `.btn btn-primary`
   anchor renders identically on any page type.
   ===================================================================== */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: 1.5;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  /* El COLOR del borde lo pone la variante vía --bs-btn-border-color
     (transparente si no pone ninguna); el 1px sólido es del sistema. Antes
     esto era `1px solid transparent` fijo y, como esta hoja carga después de
     Bootstrap, ese transparente le borraba el borde a cualquier variante que
     solo declarara variables. Leerlo de la variable es lo que hace que base y
     variantes ya no compitan: el valor se resuelve en el elemento, no en la
     cascada. */
  border: 1px solid var(--bs-btn-border-color, transparent);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  text-transform: none;
  box-shadow: none;
  /* Anillo de foco del sistema: el MISMO doble trazo de .ds-focus-ring
     (form.css:147). Trazo claro pegado al borde + trazo oscuro por fuera, así
     que siempre se ve uno de los dos, tanto sobre el relleno teal del botón
     como sobre la página blanca. Sustituye al anillo azul de Bootstrap
     (rgba(49,132,253,.5) vía --bs-btn-focus-shadow-rgb).
     Se sobrescribe la sombra COMPLETA y no el triplete RGB porque los tokens
     de marca son hex y rgba() necesita "r, g, b" — y porque el anillo del DS
     son dos trazos, no uno. */
  --bs-btn-focus-box-shadow:
    0 0 0 2px var(--paper),
    0 0 0 5px var(--gris-oscuro);
}

/* Foco de teclado. Bootstrap apaga el contorno (`outline: 0` en
   .btn:focus-visible) y deja solo la sombra; esta regla vuelve a poner un
   contorno TRANSPARENTE, igual que .ds-focus-ring: en el modo de alto
   contraste de Windows el navegador descarta los box-shadow y pinta el
   outline con un color del sistema, así que ese contorno "invisible" es el
   que salva el foco ahí. El anillo visible sigue siendo el box-shadow de
   --bs-btn-focus-box-shadow.
   PROHIBIDO poner aquí `outline: none` o `box-shadow: none`: sin anillo,
   quien navega con teclado deja de saber dónde está. */
.btn:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Presionado, para cualquier variante y en cualquier posición del DOM.
   Bootstrap no declara `.btn:active` a secas: lo condiciona a la POSICIÓN del
   botón (`.btn:first-child:active` o `:not(.btn-check) + .btn:active`). Hoy
   eso cubre todos los botones del sitio, pero es un detalle interno suyo, no
   un contrato. Esta regla declara el presionado del DS sin depender de esa
   posición, leyendo LAS MISMAS variables: no puede discrepar del valor que
   pinta Bootstrap (y le cede el paso, porque sus selectores son más
   específicos). Tres declaraciones compartidas por todas las variantes, en
   vez de una regla :active por variante. */
.btn:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-primary {
  --bs-btn-color: var(--paper-pure);
  --bs-btn-bg: var(--p-verde);
  --bs-btn-border-color: var(--p-verde);
  /* Hover y presionado comparten el teal oscuro: es el único escalón más
     oscuro que hay en tokens.css, y en táctil (donde apareció el bug) no hay
     hover — el presionado ES la señal de que el toque entró. El borde ahora
     acompaña al relleno: el borde blanco que se usaba antes en hover dejaba
     un halo raro al tocar (lo documenta pages/home.css en su parche móvil). */
  --bs-btn-hover-color: var(--paper-pure);
  --bs-btn-hover-bg: var(--p-verde-hover);
  --bs-btn-hover-border-color: var(--p-verde-hover);
  --bs-btn-active-color: var(--paper-pure);
  --bs-btn-active-bg: var(--p-verde-hover);
  --bs-btn-active-border-color: var(--p-verde-hover);
  /* Deshabilitado: el mismo teal, apagado por la opacidad 0.65 que ya aplica
     Bootstrap. Sin esto heredaba el azul #0d6efd, y se veía de verdad: el JS
     de la landing deshabilita el botón de compra al enviar el formulario. */
  --bs-btn-disabled-color: var(--paper-pure);
  --bs-btn-disabled-bg: var(--p-verde);
  --bs-btn-disabled-border-color: var(--p-verde);
}

.btn-outline {
  --bs-btn-color: var(--p-verde);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--p-verde);
  /* Hover: se rellena de teal. Presionado: el teal oscuro, el mismo que el
     presionado del primario — un solo color de "presionado" en todo el DS. */
  --bs-btn-hover-color: var(--paper-pure);
  --bs-btn-hover-bg: var(--p-verde);
  --bs-btn-hover-border-color: var(--p-verde);
  --bs-btn-active-color: var(--paper-pure);
  --bs-btn-active-bg: var(--p-verde-hover);
  --bs-btn-active-border-color: var(--p-verde-hover);
  --bs-btn-disabled-color: var(--p-verde);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--p-verde);
}

/* .btn-link del DS es otra cosa: un enlace de TEXTO con hairline inferior, y
   en las plantillas se usa SIN la clase .btn (index_ds.html:116 y compañía).
   Aun así Bootstrap trae su propio .btn-link y le mete mano con reglas que no
   necesitan .btn: `.btn-link:focus-visible { color: var(--bs-btn-color) }` lo
   pintaba AZUL (--bs-link-color) al llegar con Tab, y --bs-btn-active-color lo
   pintaba azul al presionarlo. Reapuntar esas variables a los tokens deja
   todos esos estados en marca, aquí y en la galería, donde sí se usa como
   `.btn btn-link`. El anillo de foco de este enlace es el :focus-visible
   universal de base.css:57 (contorno teal), que sí le aplica porque no lleva
   la clase .btn. */
.btn-link {
  --bs-btn-color: var(--gris-oscuro);
  --bs-btn-hover-color: var(--p-verde);
  --bs-btn-active-color: var(--p-verde);
  --bs-btn-active-bg: transparent;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-small);
  color: var(--gris-oscuro);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
}
.btn-link:hover { color: var(--p-verde); border-color: var(--p-verde); }

/* Full-width tap target on mobile (≤767.98px). Opt-in modifier for in-content
   conversion CTAs on landings (hero, pricing, closing band): a thumb-sized
   target that matches the section width. Page-agnostic — any CTA that carries
   the class gets it; the nav CTA and sticky bar deliberately do NOT, so they
   keep their own widths. */
@media (max-width: 767.98px) {
  .btn--block-mobile {
    display: block;
    width: 100%;
    text-align: center;
  }
}