/*
Theme Name:   Astra Child — Organizarte
Theme URI:    https://organizarte.co
Description:  Tema hijo de Astra para organizarte.co. Todas las personalizaciones
              (CSS, plantillas, funciones) van acá para que las actualizaciones
              del tema padre no las borren.
Author:       Organizarte
Template:     astra
Version:      1.0.0
Text Domain:  astra-child
*/

/* ==========================================================================
   Los estilos propios van debajo de esta línea.
   El CSS del padre (Astra) se carga primero desde functions.php.
   ========================================================================== */

/* Botón de reserva de LatePoint (CTA del hero en la home).

   El <a> se queda en display:inline porque quien lo pinta es LatePoint, no un
   bloque core/button, así que WordPress no encola la regla que le daría
   inline-block a .wp-block-button__link. Mientras el texto entra en una línea
   no se nota, pero al envolver en móvil un inline con padding parte el fondo
   en dos cajas superpuestas y el padding vertical se desborda del wrapper. */
.latepoint-book-button-wrapper .latepoint-book-button {
	display: inline-block;
	max-width: 100%;
	text-align: center;
	line-height: 1.4;
}

/* Enlace legal del pie (lo pinta functions.php, y solo si la política de
   tratamiento de datos está publicada).

   Astra imprime el hook astra_footer_content_bottom *fuera* de la barra inferior
   del pie, ya cerrado su contenedor. Sin estilos el enlace queda como una franja
   suelta sobre el fondo blanco de la página, justo debajo de la barra azul
   oscura del copyright — que es exactamente lo que se veía mal.

   Se arregla repitiendo el fondo y el color de texto de esa barra, tomados de
   los mismos tokens globales que usa el Personalizador de Astra
   (color-7 es el fondo de la barra inferior, color-5 el texto). Así las dos
   franjas se leen como una sola y, si mañana se cambia la paleta del sitio,
   esto cambia con ella sin tocar el archivo. No se ponen valores de respaldo a
   propósito: si los tokens faltaran, la franja vuelve a ser transparente y
   hereda el color del pie, que es peor pero nunca ilegible. */
.organizarte-footer-legal {
	background-color: var(--ast-global-color-7);
	color: var(--ast-global-color-5);
	text-align: center;
	font-size: 0.8125rem;
	line-height: 1.6;
	padding: 0 20px 24px;
}

/* El tamaño es algo menor que el del copyright y el enlace va atenuado: es un
   enlace de cumplimiento, tiene que estar y poder pulsarse, no llamar la
   atención por encima del contenido del pie. */
.organizarte-footer-legal a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

.organizarte-footer-legal a:hover,
.organizarte-footer-legal a:focus {
	opacity: 1;
}

/* Casilla de autorización de datos en el paso de cliente de LatePoint
   (la pinta inc/latepoint-consent.php).

   El grueso del aspecto no está acá: el bloque sale ya maquetado por el propio
   plugin, porque lleva sus clases .os-form-group.os-form-checkbox-group. De ahí
   vienen la separación con el campo de arriba, el tamaño de fuente, el cursor,
   la etiqueta pulsable entera —importa en móvil: acertarle al cuadrito de 13 px
   es la primera causa de abandono— y hasta la animación escalonada de entrada
   del paso. Lo que sigue son solo los tres ajustes que ese patrón no cubre.

   El área pulsable es la etiqueta entera, no solo el cuadrito. */

/* 1. Un fondo suave para separarlo de los campos sin dibujar líneas nuevas.
      El tinte es el color de superficie que el sitio ya usa en otras secciones
      (color-4) y el radio, el que LatePoint aplica a sus propios campos: el
      bloque queda dentro del formulario, no encima de él. */
.latepoint-w .os-form-group.organizarte-consent {
	background-color: var(--ast-global-color-4);
	border-radius: var(--latepoint-border-radius);
	padding: 12px 14px;
}

/* 2. La regla del plugin para estas etiquetas asume texto corto: lo centra
      verticalmente y lo pone en negrita. Acá es una frase legal de dos o tres
      líneas, así que se alinea arriba con la casilla y baja a peso normal.
      Los selectores arrancan en .latepoint-w .os-form-group solo para ganarle
      en especificidad a esa regla — no hay otra razón para el prefijo. */
.latepoint-w .os-form-group.organizarte-consent .organizarte-consent__label {
	align-items: flex-start;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
}

/* flex-shrink evita que el checkbox se aplaste cuando el texto envuelve, que
   es lo que pasa por defecto dentro de un contenedor flex estrecho.
   accent-color lo pinta con el azul de marca del sitio al marcarlo, en vez del
   azul del sistema operativo. */
.latepoint-w .os-form-group.organizarte-consent .organizarte-consent__input {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	accent-color: var(--ast-global-color-0);
}

/* 3. Estado de aviso: lo activa el JS cuando se intenta continuar sin marcar.
      Reutiliza los colores con los que el propio plugin pinta sus mensajes de
      error (.latepoint-message-error) en vez de inventar un rojo nuevo — son
      literales porque LatePoint tampoco los expone como variable.
      Solo cambia el color: el relleno ya está puesto en el estado normal, así
      que la caja no se mueve justo cuando la persona mira dónde pulsar. */
.latepoint-w .os-form-group.organizarte-consent--required {
	background-color: #ffcfcf;
}

.latepoint-w .os-form-group.organizarte-consent--required .organizarte-consent__text,
.latepoint-w .os-form-group.organizarte-consent--required .organizarte-consent__text a {
	color: #750e0e;
}