/* =============================================================
   AyudasYa — Herramientas de la portada
   Se enqueue solo en la home, después de main.css.
   Usa exclusivamente los tokens definidos en style.css.
============================================================= */

/* -------------------------------------------------------------
   Contenedor
------------------------------------------------------------- */
.herramientas__cabecera { margin-bottom: var(--espacio-md); }
.herramientas__cabecera h2 { margin-top: 0; }
.herramientas__cabecera p { color: var(--color-gris-texto-suave); max-width: 68ch; }

.herramientas__caja {
	background: var(--color-gris-fondo);
	border: 1px solid var(--color-gris-borde);
	border-radius: var(--radio-borde);
	padding: var(--espacio-md);
	/* Cortafuegos: nada de aquí dentro puede desbordar la página en móvil. */
	overflow-wrap: break-word;
}

@media (min-width: 641px) {
	.herramientas__caja { padding: var(--espacio-lg); }
}

/* -------------------------------------------------------------
   Pestañas
   Sin JS quedan ocultas y los tres paneles se muestran apilados,
   cada uno con su <h3>. Con JS, el <h3> se oculta porque el título
   ya lo da la pestaña.
------------------------------------------------------------- */
.hy-tabs { display: none; }

.herramientas--js .hy-tabs {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--espacio-xs);
	margin-bottom: var(--espacio-md);
}

@media (min-width: 641px) {
	.herramientas--js .hy-tabs { grid-template-columns: repeat(3, 1fr); }
}

/* Cada herramienta tiene su color, y los tres son VIVOS a proposito: la
   version anterior usaba tonos oscuros y tintes casi blancos, y en movil las
   tres pestanas no se distinguian entre si.

   Se mantiene la identidad: el verde #2ECC71 es el --color-verde-accent que
   ya usa el tema, el azul #5DADE2 es la version clara del azul de marca, y el
   turquesa #48C9B0 hace de puente entre los dos. Nada fuera de la familia
   azul-verde del sitio.

   Todos llevan TEXTO OSCURO, no blanco. Es deliberado: un color vivo tiene la
   luminosidad demasiado alta para el texto blanco (el verde #2ECC71 con blanco
   da 2,5:1, ilegible), pero con el gris de texto del tema los tres pasan de
   sobra. Contrastes sobre #222831, calculados con la formula de luminancia:

     Estado inactivo (tinte claro)     Estado activo (color vivo)
     - Azul     #AED6F1 ... 10,6:1     #5DADE2 ... 6,0:1
     - Verde    #D5F5E3 ... 12,7:1     #2ECC71 ... 7,1:1
     - Turquesa #76D7C4 ...  8,7:1     #48C9B0 ... 7,2:1

   Los tres tintes se eligieron MIDIENDO, no a ojo: se probaron 72 ternas y se
   escogio la de mayor diferencia perceptual (deltaE) entre las tres, con la
   condicion de que las tres pasaran AA. La ganadora separa los tres fondos por
   un deltaE minimo de 24,4. La version anterior dejaba el verde y el turquesa
   a 5,7, que es justo por lo que no se distinguian en movil.

   El salto de luminosidad entre el tinte y el color pleno es lo que marca cual
   esta seleccionada, y el tono es lo que distingue una herramienta de otra. */
.hy-tab--imv {
	--hy-tinte: #AED6F1;
	--hy-fuerte: #5DADE2;
	--hy-borde-fuerte: #2E86C1;
	--hy-titulo: var(--color-gris-texto);
	--hy-texto-activo: var(--color-gris-texto);
}

.hy-tab--simulador {
	--hy-tinte: #D5F5E3;
	--hy-fuerte: var(--color-verde-accent);
	--hy-borde-fuerte: #229954;
	--hy-titulo: var(--color-gris-texto);
	--hy-texto-activo: var(--color-gris-texto);
}

.hy-tab--bono {
	--hy-tinte: #76D7C4;
	--hy-fuerte: #48C9B0;
	--hy-borde-fuerte: #148F77;
	--hy-titulo: var(--color-gris-texto);
	--hy-texto-activo: var(--color-gris-texto);
}

.hy-tab {
	display: block;
	width: 100%;
	text-align: left;
	cursor: pointer;
	background: var(--hy-tinte);
	border: 1px solid var(--hy-borde-fuerte);
	border-left: 6px solid var(--hy-borde-fuerte);
	border-radius: var(--radio-borde);
	padding: 0.75rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--color-gris-texto);
	/* Área táctil cómoda en móvil. */
	min-height: 56px;
	/* Solo se anima el borde (efecto hover). El fondo y el color del texto
	   cambian de golpe a propósito: si el fondo se animara, durante los 150 ms
	   de la transición habría un fotograma con el texto ya cambiado sobre el
	   fondo todavía sin cambiar, y el contraste bajaba a 1,13:1. Medido. */
	transition: border-color 0.15s ease;
}

.hy-tab:hover { border-color: var(--hy-fuerte); }

.hy-tab[aria-selected="true"] {
	background: var(--hy-fuerte);
	border-color: var(--hy-borde-fuerte);
	color: var(--hy-texto-activo);
	box-shadow: inset 0 0 0 1px var(--hy-borde-fuerte);
}

.hy-tab__titulo { display: block; font-weight: 700; line-height: 1.3; color: var(--hy-titulo); }
.hy-tab[aria-selected="true"] .hy-tab__titulo { color: var(--hy-texto-activo); }
/* 0.75 en vez de 0.8: sobre el ámbar del estado activo, el texto oscuro
   atenuado necesita seguir por encima de 4,5:1. */
.hy-tab__sub { display: block; font-size: 0.85rem; opacity: 0.75; margin-top: 0.15rem; }
/* Opacidad plena, no 0.9: sobre el verde del estado activo, el blanco
   atenuado al 90 % caia a 4,16:1 y el subtitulo (13,6 px) necesita 4,5:1.
   La jerarquia con el titulo la da el tamano, no la transparencia. */
.hy-tab[aria-selected="true"] .hy-tab__sub { opacity: 1; }

/* El borde del resultado hereda el color de su herramienta. */
.hy-panel--imv .hy-resultado { border-left-color: #2E86C1; }
.hy-panel--simulador .hy-resultado { border-left-color: #229954; }
.hy-panel--bono .hy-resultado { border-left-color: #148F77; }

/* -------------------------------------------------------------
   Paneles y formularios
------------------------------------------------------------- */
.hy-panel + .hy-panel { margin-top: var(--espacio-lg); }
.herramientas--js .hy-panel + .hy-panel { margin-top: 0; }
.hy-panel:focus { outline: none; }

.hy-panel__titulo { margin-top: 0; }
.herramientas--js .hy-panel__titulo { display: none; }

.hy-panel__intro {
	margin-top: 0;
	color: var(--color-gris-texto-suave);
	max-width: 70ch;
}

.hy-campos {
	display: grid;
	/* auto-fit resuelve móvil, tablet y escritorio sin puntos de ruptura. */
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--espacio-sm);
	margin-bottom: var(--espacio-sm);
}

.hy-campo { margin: 0; }
.hy-campo--ancho { grid-column: 1 / -1; }

.hy-campo label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.3rem;
	font-size: 0.95rem;
}

.hy-campo select,
.hy-campo input[type="text"] {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--color-gris-borde);
	border-radius: 8px;
	background: var(--color-blanco);
	font-family: inherit;
	/* 16px evita que iOS haga zoom automático al enfocar el campo. */
	font-size: 1rem;
	color: var(--color-gris-texto);
	min-height: 46px;
}

.hy-ayuda-campo {
	display: block;
	font-size: 0.85rem;
	color: var(--color-gris-texto-suave);
	margin-top: 0.3rem;
}

.hy-campo--check label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 400;
	cursor: pointer;
	/* Área táctil cómoda. */
	padding: 0.4rem 0;
}

.hy-campo--check input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0.15rem 0 0;
	flex: 0 0 auto;
	accent-color: var(--color-azul);
}

.hy-fieldset {
	border: 1px solid var(--color-gris-borde);
	border-radius: 8px;
	padding: var(--espacio-sm);
	margin: 0 0 var(--espacio-sm);
	background: var(--color-blanco);
}

.hy-fieldset legend { font-weight: 700; padding: 0 0.4rem; font-size: 0.95rem; }

.hy-lista-tramos {
	margin: var(--espacio-sm) 0 0;
	padding-left: 1.1rem;
	font-size: 0.9rem;
	color: var(--color-gris-texto-suave);
}

.hy-lista-tramos li { margin-bottom: 0.3rem; }

/* -------------------------------------------------------------
   Resultados
   min-height reserva el hueco para que la página no dé un salto
   al aparecer el resultado (evita CLS).
------------------------------------------------------------- */
.hy-resultado {
	background: var(--color-blanco);
	border: 1px solid var(--color-gris-borde);
	border-left: 5px solid var(--color-verde-cta);
	border-radius: 8px;
	padding: var(--espacio-sm) var(--espacio-md);
	margin-top: var(--espacio-md);
	min-height: 7rem;
}

.hy-resultado p { margin: 0 0 0.6rem; }
.hy-resultado p:last-child { margin-bottom: 0; }

.hy-resultado__destacado {
	font-size: 1.15rem;
	line-height: 1.45;
	color: var(--color-verde-cta-hover);
}

.hy-resultado__destacado--no { color: var(--color-azul); }
.hy-resultado__resumen { font-size: 1.05rem; }
.hy-resultado__dato { color: var(--color-gris-texto); }

.hy-resultado__apunte {
	font-size: 0.88rem;
	color: var(--color-gris-texto-suave);
}

.hy-resultado__enlaces {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espacio-xs);
	margin-top: var(--espacio-sm) !important;
	padding-top: var(--espacio-sm);
	border-top: 1px solid var(--color-gris-borde);
}

.hy-resultado__enlaces a {
	display: inline-block;
	background: var(--color-azul);
	color: var(--color-blanco);
	text-decoration: none;
	padding: 0.55rem 0.9rem;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	/* 44 px: el tamano comodo de pulsacion que recomiendan tanto Apple como
	   Android. Por encima del minimo de 24 px de WCAG. */
	min-height: 44px;
	line-height: 1.6;
}

.hy-resultado__enlaces a:hover,
.hy-resultado__enlaces a:focus { background: var(--color-azul-oscuro); color: var(--color-blanco); }

/* -------------------------------------------------------------
   Grupos del simulador
------------------------------------------------------------- */
.hy-grupo { margin-bottom: var(--espacio-md); }
.hy-grupo:last-child { margin-bottom: 0; }

.hy-grupo__titulo {
	/* Mas grande que los enlaces de las ayudas (1,0625rem en negrita): con
	   1rem el encabezado quedaba POR DEBAJO de lo que agrupa y la jerarquia
	   se leia al reves. */
	font-size: 1.25rem;
	margin: 0 0 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-left: 0.7rem;
	border-left: 4px solid var(--color-gris-borde);
}

.hy-grupo--si .hy-grupo__titulo { border-left-color: var(--color-verde-cta); color: var(--color-verde-cta-hover); }
.hy-grupo--quiza .hy-grupo__titulo { border-left-color: var(--color-aviso-borde); }
.hy-grupo--no .hy-grupo__titulo { color: var(--color-gris-texto-suave); }

.hy-grupo__contador {
	background: var(--color-gris-fondo);
	border-radius: 20px;
	padding: 0.05rem 0.55rem;
	font-size: 0.8rem;
	font-weight: 700;
}

.hy-grupo__lista { list-style: none; margin: 0; padding: 0; }

.hy-grupo__lista li {
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--color-gris-borde);
}

.hy-grupo__lista li:last-child { border-bottom: none; }
/* inline-block + relleno vertical para que el area de pulsacion llegue a
   30 px. Como <a> suelto medía 22 px y WCAG 2.5.8 (AA en WCAG 2.2) pide un
   minimo de 24x24 px para cualquier destino que no sea un enlace dentro de
   una frase. Medido en el sitio en produccion. */
.hy-grupo__lista a {
	font-weight: 600;
	display: inline-block;
	padding: 0.25rem 0;
}

.hy-grupo__motivo {
	display: block;
	font-size: 0.87rem;
	color: var(--color-gris-texto-suave);
	margin-top: 0.15rem;
}

.hy-etiqueta-plazo {
	display: inline-block;
	background: var(--color-aviso-fondo);
	border: 1px solid var(--color-aviso-borde);
	color: var(--color-gris-texto);
	border-radius: 20px;
	padding: 0.05rem 0.5rem;
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
}

/* -------------------------------------------------------------
   Tabla de cuantías desplegable
------------------------------------------------------------- */
.hy-tabla-detalle { margin-top: var(--espacio-md); }

.hy-tabla-detalle summary {
	cursor: pointer;
	font-weight: 700;
	padding: 0.5rem 0;
	color: var(--color-azul);
}

/* Igual que .resumen-rapido: la tabla scrollea dentro de su caja,
   nunca ensancha la página en móvil. */
.hy-tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.hy-tabla-scroll table {
	width: 100%;
	border-collapse: collapse;
	background: var(--color-blanco);
	font-size: 0.92rem;
}

.hy-tabla__caption {
	text-align: left;
	font-size: 0.85rem;
	color: var(--color-gris-texto-suave);
	padding: 0.4rem 0;
}

.hy-tabla-scroll th,
.hy-tabla-scroll td {
	border: 1px solid var(--color-gris-borde);
	padding: 0.5rem 0.7rem;
	text-align: left;
}

.hy-tabla-scroll th { background: var(--color-gris-fondo); }
.hy-tabla-scroll td:last-child { white-space: nowrap; font-weight: 600; }

/* -------------------------------------------------------------
   Aviso legal
------------------------------------------------------------- */
.hy-aviso-legal {
	margin: var(--espacio-md) 0 0;
	font-size: 0.85rem;
	color: var(--color-gris-texto-suave);
	background: var(--color-aviso-fondo);
	border: 1px solid var(--color-aviso-borde);
	border-radius: 8px;
	padding: var(--espacio-sm);
}

/* -------------------------------------------------------------
   Accesibilidad
------------------------------------------------------------- */
.hy-tab:focus-visible,
.hy-campo select:focus-visible,
.hy-campo input:focus-visible,
.hy-resultado__enlaces a:focus-visible,
.hy-tabla-detalle summary:focus-visible {
	outline: 3px solid var(--color-azul);
	outline-offset: 2px;
}

/* La seccion recibe el foco por JavaScript al pulsar el boton del hero, para
   que quien navega con teclado aterrice aqui. No debe dibujarse un contorno
   por eso: :focus-visible sigue funcionando para el foco real de teclado. */
.herramientas:focus:not(:focus-visible) { outline: none; }

.hy-campo--check input[type="checkbox"]:focus-visible {
	outline: 3px solid var(--color-azul);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.hy-tab { transition: none; }
}