/* GAB Cuentas — piel neutra que hereda del tema; el proyecto la viste
   con las variables --gab-cta-*. Formularios accesibles: labels siempre,
   hit-areas ≥44px, focus visible. */
.gab-cta {
	--gab-cta-acento: #2244CC;   /* 7.59:1 con blanco encima (medido) */
	--gab-cta-error: #b32d2e;
	--gab-cta-ok: #1a7a3c;
	--gab-cta-linea: rgba(128, 128, 128, .35);
	max-width: 26rem;
}

.gab-cta__bloque {
	margin: 0 0 1.5rem;
}

.gab-cta__titulo {
	margin: 0 0 .75rem;
}

.gab-cta__campo {
	margin: 0 0 .9rem;
}

/* El :not() no es cosmético: sin él, esta regla (0-2-1) PISA a
   .gab-cta__check (0-1-0), que también es un label dentro de un
   .gab-cta__campo. Resultado medido en piseando el 09/08/2026: la casilla
   del consentimiento se pintaba en `display:block`, así que su `flex`, su
   `gap` y su `align-items` no se aplicaban NUNCA. El `font-weight: 400
   !important` de .gab-cta__check era el parche de esa misma pelea. */
.gab-cta__campo label:not(.gab-cta__check) {
	display: block;
	margin-bottom: .3rem;
	font-weight: 600;
}

.gab-cta__pista {
	font-weight: 400;
	opacity: .75;
	font-size: .9em;
}

.gab-cta__form input[type="text"],
.gab-cta__form input[type="email"],
.gab-cta__form input[type="password"],
.gab-cta__form input[type="tel"],
.gab-cta__form input[type="number"],
.gab-cta__form select,
.gab-cta__form textarea {
	width: 100%;
	min-height: 44px;
	padding: .5rem .75rem;
	border: 1px solid var(--gab-cta-linea);
	border-radius: 6px;
	font: inherit;
	background: transparent;
	color: inherit;
}

.gab-cta__form :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--gab-cta-acento);
	outline-offset: 1px;
}

.gab-cta__check {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	/* Una casilla es un CONTROL, no un enlace de texto: entra en la regla de
	   44px. Medido en 375: el consentimiento se queda en 40 sin esto. */
	min-height: 44px;
	font-weight: 400 !important; /* frente al label en negrita del tema */
	cursor: pointer;
}

.gab-cta__check input {
	width: 1.1rem;
	height: 1.1rem;
	min-height: 0;
	flex: 0 0 auto;
	accent-color: var(--gab-cta-acento);
	/* Centrada con la PRIMERA línea del texto (no con el bloque entero: el
	   consentimiento ocupa dos líneas en móvil y centrarlo dejaría la
	   casilla en medio de la nada).
	   ⚠️ `1lh` se resuelve contra el line-height DEL PROPIO input, y los
	   temas le dan uno distinto al del texto (Astra: 26,4px frente a 20px
	   → la casilla caía 3,4px por debajo, medido). De ahí el `inherit`:
	   sin él, el calc mide la línea equivocada.
	   El fallback en rem va antes, para navegadores sin la unidad `lh`. */
	line-height: inherit;
	margin-top: .15rem;
	margin-top: calc((1lh - 1.1rem) / 2);
}

/* Texto suelto en label flex → SIEMPRE en span (lección de la librería). */
.gab-cta__check span {
	flex: 1;
}

.gab-cta__boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 1.4rem;
	border: 1px solid var(--gab-cta-acento);
	border-radius: 6px;
	background: var(--gab-cta-acento);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: filter 160ms ease;
}

/* color declarado también en hover: el button:hover de Astra gana a la
   base por la pseudo-clase (lección del 03/08). */
.gab-cta__boton:hover {
	filter: brightness(.9);
	background: var(--gab-cta-acento);
	color: #fff;
}

.gab-cta__boton:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.gab-cta__boton--peligro {
	background: transparent;
	border-color: var(--gab-cta-error);
	color: var(--gab-cta-error);
}

.gab-cta__boton--peligro:hover {
	background: var(--gab-cta-error);
	border-color: var(--gab-cta-error);
	color: #fff;
}

.gab-cta__aviso {
	padding: .75rem 1rem;
	border-radius: 6px;
	border: 1px solid var(--gab-cta-linea);
	margin: 0 0 1rem;
}

.gab-cta__aviso--ok {
	border-color: var(--gab-cta-ok);
}

.gab-cta__aviso--error {
	border-color: var(--gab-cta-error);
}

.gab-cta__ayuda a,
.gab-cta-salir {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* Selector de rol (modalidad multi) y grupos de campos por rol */
.gab-cta__selector {
	border: 1px solid var(--gab-cta-linea);
	border-radius: 6px;
	padding: .75rem 1rem;
	margin: 0 0 1rem;
}

.gab-cta__selector legend,
.gab-cta__campo-titulo {
	font-weight: 600;
	padding: 0 .35rem;
}

/* El radio va de una línea, así que aquí sí se centra con el bloque. El
   `!important` que tenía sobraba: era otro parche del choque de
   especificidad de 1.2.1 (con el label en `display:block`, `align-items`
   no hacía nada dijeras lo que dijeras). Misma especificidad que
   .gab-cta__check y declarado después: gana por orden. */
.gab-cta__radio {
	align-items: center;
}

.gab-cta__grupo {
	border-left: 3px solid var(--gab-cta-linea);
	padding-left: 1rem;
	margin: 0 0 .5rem;
}

.gab-cta__grupo-titulo {
	margin: 0 0 .6rem;
	font-weight: 600;
	font-size: .9em;
	opacity: .85;
}

/* Honeypot: fuera de vista, no display:none (algunos bots lo detectan). */
.gab-cta__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Perfil: dato que se enseña pero no se edita (correo, tipo de cuenta).
   No es un input deshabilitado a propósito: un campo gris que no responde
   se lee como «está roto», y además viajaría vacío en el POST. */
.gab-cta__dato {
	margin: 0 0 .9rem;
	padding: .6rem .75rem;
	border: 1px solid var(--gab-cta-linea);
	border-radius: 4px;
}

.gab-cta__dato-etiqueta {
	display: block;
	font-weight: 600;
	margin-bottom: .15rem;
}

.gab-cta__dato-valor {
	display: block;
	overflow-wrap: anywhere;
}

.gab-cta__dato .gab-cta__pista {
	display: block;
	margin-top: .2rem;
}