/**
 * AyudasYaUSA — estilos de las cuatro herramientas interactivas.
 *
 * Se carga solo en sus cuatro páginas, desde `inc/herramientas.php`.
 * Mobile-first, sin fuentes ni dependencias externas, sobre los tokens de
 * `style.css`.
 *
 * Aviso de mantenimiento (el mismo que la sección 17 de main.css): ninguna
 * clase de este archivo se pone en el mismo elemento que `.contenedor`. Poner
 * un `margin` o un `padding` en atajo sobre un elemento que también lleva
 * `.contenedor` pisa su `margin: 0 auto` y descentra la página entera. Ya ha
 * pasado cuatro veces en este proyecto.
 */

:root {
	/* El rojo de alerta no está en style.css porque hasta ahora no había nada
	   urgente que pintar. Sobre blanco da ~6,4:1 y cumple WCAG AA. */
	--color-alerta: #B3261E;
	--color-alerta-fondo: #FDECEA;
	--color-alerta-borde: #F0B4AE;
	--color-exito-fondo: #EAF6EE;
}

/* =========================================================================
   1. Estructura de la herramienta
   ========================================================================= */
.herramienta {
	margin-top: 2rem;
	margin-bottom: 2.5rem;
}

.herramienta__intro {
	max-width: var(--ancho-lectura);
	margin-bottom: 1.25rem;
}

/* El panel es la caja del formulario: lo primero que se ve, sin scroll. */
.panel {
	background: var(--color-gris-fondo);
	border: 1px solid var(--color-gris-borde);
	border-radius: var(--radio);
	padding: 1.25rem;
}

@media (min-width: 700px) {
	.panel { padding: 1.5rem; }
}

.panel__titulo {
	margin-top: 0;
	margin-bottom: .35rem;
	font-size: 1.2rem;
}

.panel__ayuda {
	margin-bottom: 1.1rem;
	color: var(--color-texto-suave);
	font-size: .95rem;
}

.panel__campos {
	display: grid;
	gap: 1rem;
}

@media (min-width: 700px) {
	.panel__campos--dos { grid-template-columns: 1fr 1fr; }
	.panel__campos--tres { grid-template-columns: 2fr 1fr 1fr; }
}

.campo {
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.campo__etiqueta {
	font-weight: 600;
	font-size: .95rem;
}

.campo__pista {
	color: var(--color-texto-suave);
	font-size: .85rem;
}

.campo input[type="text"],
.campo input[type="date"],
.campo input[type="number"],
.campo input[type="search"],
.campo select {
	width: 100%;
	padding: .65rem .75rem;
	font: inherit;
	font-size: 1rem;
	color: var(--color-texto);
	background: var(--color-blanco);
	border: 1px solid var(--color-gris-borde);
	border-radius: var(--radio);
}

/* En iOS, un campo con menos de 16px hace que Safari haga zoom al enfocarlo
   y descoloca toda la página. Se fuerza el mínimo en pantallas pequeñas. */
@media (max-width: 699px) {
	.campo input,
	.campo select { font-size: 16px; }
}

.campo--casilla {
	flex-direction: row;
	align-items: flex-start;
	gap: .6rem;
}

.campo--casilla input {
	margin-top: .28rem;
	width: 1.05rem;
	height: 1.05rem;
	flex: 0 0 auto;
}

.panel__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: center;
	margin-top: 1.2rem;
}

.panel__error {
	margin-top: .9rem;
	margin-bottom: 0;
	padding: .7rem .9rem;
	background: var(--color-alerta-fondo);
	border-left: 4px solid var(--color-alerta);
	border-radius: 0 var(--radio) var(--radio) 0;
	color: var(--color-alerta);
	font-weight: 600;
}

.herramienta__sin-js { margin-top: 1.5rem; }

.aviso-reloj {
	margin-bottom: 1.25rem;
	padding: .8rem 1rem;
	background: var(--color-aviso-fondo);
	border-left: 4px solid var(--color-aviso-borde);
	border-radius: 0 var(--radio) var(--radio) 0;
}

.aviso-reloj p { margin-bottom: 0; }

/* =========================================================================
   2. Caja de resultado (común a las cuatro)
   ========================================================================= */
.resultado {
	margin-top: 1.5rem;
	padding: 1.25rem;
	background: var(--color-blanco);
	border: 2px solid var(--color-azul);
	border-radius: var(--radio);
	box-shadow: var(--sombra);
}

.resultado:focus { outline: none; }
.resultado:focus-visible { outline: 3px solid var(--color-verde); outline-offset: 2px; }

.resultado__titular {
	margin-top: 0;
	margin-bottom: 1rem;
	padding-left: .9rem;
	border-left: 5px solid var(--color-azul);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--color-azul);
}

.resultado__titular--urgente,
.resultado__titular--vencido,
.resultado__titular--hueco {
	border-left-color: var(--color-alerta);
	color: var(--color-alerta);
}

.resultado__titular--atencion,
.resultado__titular--cerrado {
	border-left-color: var(--color-aviso-borde);
	color: #8A6400;
}

.resultado__titular--holgado,
.resultado__titular--abierto,
.resultado__titular--medicaid {
	border-left-color: var(--color-verde);
	color: var(--color-verde-oscuro);
}

/* Rejilla de datos: etiqueta arriba, valor grande debajo. */
.resultado__datos {
	display: grid;
	gap: .75rem;
	margin-bottom: 1.25rem;
	padding: .9rem 1rem;
	background: var(--color-gris-fondo);
	border-radius: var(--radio);
}

@media (min-width: 640px) {
	.resultado__datos { grid-template-columns: 1fr 1fr; }
}

.resultado__dato {
	display: flex;
	flex-direction: column;
	gap: .1rem;
}

.resultado__etiqueta {
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--color-texto-suave);
}

.resultado__valor {
	font-size: 1.05rem;
	color: var(--color-texto);
}

.resultado__bloque { margin-bottom: 1.1rem; }
.resultado__bloque h3 { margin-top: 0; margin-bottom: .35rem; font-size: 1.05rem; }
.resultado__bloque p { margin-bottom: 0; }

.resultado__destacado {
	margin-bottom: 1.1rem;
	padding: .9rem 1rem;
	border-left: 4px solid var(--color-azul);
	border-radius: 0 var(--radio) var(--radio) 0;
	background: var(--color-gris-fondo);
}

.resultado__destacado h3 { margin-top: 0; margin-bottom: .3rem; font-size: 1.02rem; }
.resultado__destacado p { margin-bottom: 0; }

.resultado__destacado--urgente {
	background: var(--color-alerta-fondo);
	border-left-color: var(--color-alerta);
}
.resultado__destacado--urgente h3 { color: var(--color-alerta); }

.resultado__destacado--atencion {
	background: var(--color-aviso-fondo);
	border-left-color: var(--color-aviso-borde);
}

.resultado__destacado--holgado {
	background: var(--color-exito-fondo);
	border-left-color: var(--color-verde);
}
.resultado__destacado--holgado h3 { color: var(--color-verde-oscuro); }

.resultado__nota {
	margin-bottom: 1.1rem;
	color: var(--color-texto-suave);
	font-size: .95rem;
}
.resultado__nota p { margin-bottom: 0; }

.resultado__acciones h3 { margin-top: 1.25rem; margin-bottom: .5rem; font-size: 1.05rem; }
.resultado__acciones ol { padding-left: 1.3rem; }
.resultado__acciones li { margin-bottom: .55rem; }
.resultado__acciones p { margin-top: 1rem; margin-bottom: 0; }

.resultado__aviso {
	margin-top: 1rem;
	padding: .85rem 1rem;
	background: var(--color-aviso-fondo);
	border-left: 4px solid var(--color-aviso-borde);
	border-radius: 0 var(--radio) var(--radio) 0;
}
.resultado__aviso p { margin-bottom: 0; }

/* =========================================================================
   3. Calendario: filtros y tarjetas de fecha
   ========================================================================= */
.filtros__grupo { margin-bottom: 1.1rem; }

.filtros__titulo {
	display: block;
	margin-bottom: .5rem;
	font-weight: 600;
	font-size: .95rem;
}

.filtros__perfiles {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}

.filtros__perfiles li { margin-bottom: 0; }

/* Casilla escondida + etiqueta con aspecto de píldora. El foco se traslada a
   la etiqueta con :focus-within para no perder accesibilidad de teclado. */
.pildora {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .45rem .8rem;
	background: var(--color-blanco);
	border: 1px solid var(--color-gris-borde);
	border-radius: 999px;
	font-size: .9rem;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}

.pildora:hover { border-color: var(--color-azul-claro); }

.pildora input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.pildora:has(input:checked) {
	background: var(--color-azul);
	border-color: var(--color-azul);
	color: var(--color-blanco);
	font-weight: 600;
}

.pildora:has(input:focus-visible) {
	outline: 3px solid var(--color-verde);
	outline-offset: 2px;
}

/*
 * Respaldo para navegadores sin :has() —Firefox anterior a la 121 y algún
 * WebKit antiguo—. Sin esto, la píldora seleccionada no cambia de color y el
 * filtro parece que no responde. El JS añade la clase como refuerzo.
 */
.pildora--activa {
	background: var(--color-azul);
	border-color: var(--color-azul);
	color: var(--color-blanco);
	font-weight: 600;
}

.filtros__resumen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-gris-borde);
}

.filtros__contador {
	font-weight: 600;
	color: var(--color-texto-suave);
	font-size: .95rem;
}

.calendario__lista {
	display: grid;
	gap: 1rem;
	margin-top: 1.5rem;
}

.evento {
	padding: 1.1rem 1.2rem;
	background: var(--color-blanco);
	border: 1px solid var(--color-gris-borde);
	border-left: 5px solid var(--color-gris-borde);
	border-radius: var(--radio);
}

.evento[data-gravedad="critica"] { border-left-color: var(--color-alerta); }
.evento[data-gravedad="alta"] { border-left-color: var(--color-aviso-borde); }
.evento[data-gravedad="media"] { border-left-color: var(--color-azul-claro); }

.evento[data-estado="cerrado"],
.evento[data-estado="pasado"] { opacity: .62; }

.evento__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem .75rem;
	margin-bottom: .5rem;
}

.evento__fecha {
	font-weight: 700;
	color: var(--color-azul);
}

.evento__cuenta {
	display: inline-block;
	padding: .16rem .6rem;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 700;
	background: var(--color-gris-fondo);
	color: var(--color-texto-suave);
}

.evento__cuenta--abierto,
.evento__cuenta--hoy {
	background: var(--color-exito-fondo);
	color: var(--color-verde-oscuro);
}

.evento__cuenta--proximo {
	background: #E8F0F7;
	color: var(--color-azul);
}

.evento__cuenta--cerrado,
.evento__cuenta--pasado {
	background: var(--color-gris-fondo);
	color: var(--color-texto-suave);
}

.evento__aproximada {
	font-weight: 400;
	font-style: italic;
	opacity: .85;
}

.evento__programa {
	display: inline-block;
	padding: .16rem .55rem;
	border-radius: var(--radio);
	background: var(--color-gris-fondo);
	color: var(--color-texto-suave);
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.evento__titulo {
	margin: 0 0 .45rem;
	font-size: 1.1rem;
}

.evento__que-pasa { margin-bottom: .6rem; }

.evento__consecuencia {
	margin-bottom: 0;
	padding: .7rem .85rem;
	background: var(--color-gris-fondo);
	border-radius: var(--radio);
	font-size: .95rem;
}

.evento__consecuencia strong { color: var(--color-azul); }

.evento__enlace { margin-top: .7rem; margin-bottom: 0; font-size: .95rem; }

.calendario__vacio,
.glosario__vacio {
	margin-top: 1.5rem;
	padding: 1.5rem;
	text-align: center;
	background: var(--color-gris-fondo);
	border-radius: var(--radio);
}

.calendario__vacio p:last-child,
.glosario__vacio p:last-child { margin-bottom: 0; }

.calendario__descargado {
	margin-top: .75rem;
	margin-bottom: 0;
	color: var(--color-verde-oscuro);
	font-weight: 600;
	font-size: .95rem;
}

/* =========================================================================
   4. Glosario
   ========================================================================= */
.glosario__buscador { position: relative; }

.glosario__categorias {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin-top: 1rem;
}

.chip {
	padding: .4rem .8rem;
	background: var(--color-blanco);
	border: 1px solid var(--color-gris-borde);
	border-radius: 999px;
	font: inherit;
	font-size: .88rem;
	color: var(--color-texto);
	cursor: pointer;
}

.chip:hover { border-color: var(--color-azul-claro); }

.chip[aria-pressed="true"] {
	background: var(--color-azul);
	border-color: var(--color-azul);
	color: var(--color-blanco);
	font-weight: 600;
}

.glosario__grupo { margin-top: 2rem; }

.glosario__grupo-titulo {
	margin-bottom: .75rem;
	padding-bottom: .35rem;
	border-bottom: 2px solid var(--color-gris-borde);
	font-size: 1.15rem;
}

.glosario__lista {
	display: grid;
	gap: .85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.termino {
	margin-bottom: 0;
	padding: 1rem 1.1rem;
	background: var(--color-blanco);
	border: 1px solid var(--color-gris-borde);
	border-radius: var(--radio);
}

.termino:target {
	border-color: var(--color-verde);
	box-shadow: 0 0 0 3px rgba(30, 132, 73, .18);
}

.termino__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .4rem .6rem;
	margin-bottom: .4rem;
}

.termino__en {
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--color-azul);
}

.termino__es {
	color: var(--color-texto-suave);
	font-size: .95rem;
}

.termino__es::before { content: "· "; }

.termino__plazo {
	padding: .12rem .5rem;
	border-radius: 999px;
	background: var(--color-aviso-fondo);
	border: 1px solid var(--color-aviso-borde);
	color: #8A6400;
	font-size: .74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	white-space: nowrap;
}

.termino__definicion { margin-bottom: 0; }

.termino__accion {
	margin-top: .6rem;
	margin-bottom: 0;
	padding: .6rem .8rem;
	background: var(--color-exito-fondo);
	border-radius: var(--radio);
	font-size: .95rem;
}

.termino__accion strong { color: var(--color-verde-oscuro); }

/* =========================================================================
   5. Escala del comprobador de Medicaid
   ========================================================================= */
.escala { margin-bottom: 1.25rem; }

.escala__pista {
	position: relative;
	display: flex;
	height: 1.6rem;
	border-radius: var(--radio);
	overflow: hidden;
	background: var(--color-gris-fondo);
}

.escala__tramo { height: 100%; }
.escala__tramo--medicaid { background: #9BD3B0; }
.escala__tramo--hueco { background: #F0B4AE; }
.escala__tramo--subsidio { background: #A8C8E0; }

.escala__marca {
	position: absolute;
	top: -4px;
	bottom: -4px;
	width: 4px;
	margin-left: -2px;
	background: var(--color-texto);
	border-radius: 2px;
}

.escala__leyenda {
	display: flex;
	justify-content: space-between;
	gap: .5rem;
	margin-top: .4rem;
	color: var(--color-texto-suave);
	font-size: .8rem;
}

.escala__leyenda span:nth-child(2) { text-align: center; }
.escala__leyenda span:last-child { text-align: right; }

.escala__tu-posicion {
	margin-top: .5rem;
	margin-bottom: 0;
	font-weight: 600;
}

/* =========================================================================
   6. Barra de plazo de la apelación
   ========================================================================= */
.barra-plazo { margin-bottom: 1.25rem; }

.barra-plazo__pista {
	height: .7rem;
	border-radius: 999px;
	background: var(--color-gris-borde);
	overflow: hidden;
}

.barra-plazo__relleno {
	height: 100%;
	border-radius: 999px;
	background: var(--color-verde);
	transition: width .35s ease;
}

.barra-plazo__relleno[data-nivel="atencion"] { background: var(--color-aviso-borde); }
.barra-plazo__relleno[data-nivel="urgente"] { background: var(--color-alerta); }

.barra-plazo__texto {
	margin-top: .4rem;
	margin-bottom: 0;
	color: var(--color-texto-suave);
	font-size: .9rem;
}

/* =========================================================================
   7. Borrador de la carta de apelación
   ========================================================================= */
.carta {
	margin-top: 1.5rem;
	padding: 1.25rem;
	background: var(--color-gris-fondo);
	border: 1px solid var(--color-gris-borde);
	border-radius: var(--radio);
}

.carta h2 { margin-top: 0; margin-bottom: .35rem; font-size: 1.2rem; }
.carta__ayuda { margin-bottom: 1rem; color: var(--color-texto-suave); font-size: .95rem; }

.carta__texto {
	display: block;
	width: 100%;
	min-height: 22rem;
	padding: 1rem;
	background: var(--color-blanco);
	border: 1px solid var(--color-gris-borde);
	border-radius: var(--radio);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: .85rem;
	line-height: 1.55;
	color: var(--color-texto);
	/*
	 * `pre-wrap` y no `pre`: los saltos de línea del borrador se conservan, que
	 * es lo que importa, pero las líneas largas se ajustan al ancho. Con `pre`
	 * había que arrastrar en horizontal para leer cada renglón, y en un móvil
	 * eso hace la carta ilegible. Lo que se copia son los saltos reales, no el
	 * ajuste visual, así que el texto pegado sale idéntico.
	 */
	white-space: pre-wrap;
	overflow-wrap: break-word;
	resize: vertical;
}

.carta__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: center;
	margin-top: .9rem;
}

.carta__copiada {
	margin: 0;
	color: var(--color-verde-oscuro);
	font-weight: 600;
	font-size: .93rem;
}

/* =========================================================================
   8. Índice y enlaces entre herramientas
   ========================================================================= */
.otras-herramientas {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-gris-borde);
}

.otras-herramientas h2 { margin-top: 0; font-size: 1.25rem; }
.otras-herramientas__indice { margin-top: 1rem; margin-bottom: 0; }

/* ---- Cabecera y prosa del índice -------------------------------------- *
 *
 * Los dos bloques de texto van centrados, no alineados a la izquierda.
 *
 * Es la excepción a la regla de `.contenedor--lectura` de main.css. Allí la
 * columna de texto se deja a la izquierda cuando debajo hay una rejilla a todo
 * el ancho, para que compartan borde. Aquí no funciona: la rejilla de tarjetas
 * ocupa los 1180 px y el texto 792, así que alineados por la izquierda dejaban
 * 356 px de hueco muerto solo a la derecha y la página se veía descolgada.
 *
 * Centrados, los tres bloques comparten el eje y las anchuras distintas se leen
 * como una intención y no como un fallo.
 */
.portada-herramientas,
.portada-herramientas__texto {
	max-width: var(--ancho-lectura);
	margin-inline: auto;
}

.portada-herramientas { margin-bottom: 2rem; }

.portada-herramientas__entrada {
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--color-texto-suave);
}

.tiras-confianza {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.tira-confianza {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-bottom: 0;
	padding: .45rem .85rem;
	background: var(--color-exito-fondo);
	border: 1px solid #C9E6D5;
	border-radius: 999px;
	font-size: .87rem;
	font-weight: 600;
	color: var(--color-verde-oscuro);
}

.tira-confianza svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

/* ---- Rejilla de tarjetas --------------------------------------------- */
.indice-herramientas {
	display: grid;
	gap: 1.25rem;
	margin: 0 0 3rem;
}

@media (min-width: 820px) {
	.indice-herramientas { grid-template-columns: 1fr 1fr; }
}

/*
 * Cada tarjeta lleva su propio color en dos variables:
 *   --tono         para el texto, siempre con contraste suficiente sobre blanco
 *   --tono-grafico para el icono y la barra, donde puede ser más vivo
 *
 * Están separadas porque el ámbar que se ve bien como gráfico (#E0A800) da
 * 2:1 sobre blanco y no vale para texto.
 */
.ficha-herramienta {
	--tono: var(--color-azul);
	--tono-grafico: var(--color-azul-claro);
	--tono-fondo: #E8F0F7;

	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.4rem;
	padding-top: 1.6rem;
	background: var(--color-blanco);
	border: 1px solid var(--color-gris-borde);
	border-radius: var(--radio);
	box-shadow: var(--sombra);
	overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

/* Barra de color arriba: identifica la herramienta antes de leer nada. */
.ficha-herramienta::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	background: var(--tono-grafico);
}

.ficha-herramienta:hover,
.ficha-herramienta:focus-within {
	transform: translateY(-3px);
	border-color: var(--tono-grafico);
	box-shadow: 0 2px 6px rgba(34, 40, 49, .10), 0 12px 28px rgba(34, 40, 49, .12);
}

.ficha-herramienta--alerta { --tono: #B3261E; --tono-grafico: #D4453B; --tono-fondo: var(--color-alerta-fondo); }
.ficha-herramienta--verde  { --tono: var(--color-verde-oscuro); --tono-grafico: var(--color-verde); --tono-fondo: var(--color-exito-fondo); }
.ficha-herramienta--ambar  { --tono: #8A6400; --tono-grafico: #E0A800; --tono-fondo: var(--color-aviso-fondo); }
.ficha-herramienta--azul   { --tono: var(--color-azul); --tono-grafico: var(--color-azul-claro); --tono-fondo: #E8F0F7; }

.ficha-herramienta__cabecera {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: .9rem;
}

.ficha-herramienta__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 18px;
	background: var(--tono-fondo);
	color: var(--tono-grafico);
}

.ficha-herramienta__svg {
	width: 46px;
	height: 46px;
	display: block;
}

/* El número es decorativo y va muy apagado: ordena de un vistazo sin competir
   con el título, que es lo que hay que leer. */
.ficha-herramienta__numero {
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1;
	color: var(--tono-grafico);
	opacity: 0.16;
	user-select: none;
}

.ficha-herramienta__gancho {
	margin-bottom: .3rem;
	font-size: .82rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--tono);
}

.ficha-herramienta__nombre {
	margin-top: 0;
	margin-bottom: .55rem;
	font-size: 1.25rem;
	line-height: 1.3;
}

.ficha-herramienta__nombre a {
	color: var(--color-azul);
	text-decoration: none;
}

.ficha-herramienta__nombre a:hover,
.ficha-herramienta__nombre a:focus {
	text-decoration: underline;
}

/* El enlace del título cubre toda la tarjeta, para que se pueda pinchar en
   cualquier punto. El botón y el resto de enlaces se ponen por encima con
   position:relative para que sigan siendo pinchables por su cuenta. */
.ficha-herramienta__nombre a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ficha-herramienta__descripcion {
	margin-bottom: .9rem;
	font-size: .96rem;
	color: var(--color-texto-suave);
}

.ficha-herramienta__hace {
	flex: 1 1 auto;
	margin: 0 0 1.1rem;
	padding: 0;
	list-style: none;
}

.ficha-herramienta__hace li {
	position: relative;
	margin-bottom: .4rem;
	padding-left: 1.6rem;
	font-size: .93rem;
	line-height: 1.45;
}

.ficha-herramienta__hace li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: -1px;
	font-weight: 800;
	color: var(--tono-grafico);
}

.ficha-herramienta__accion {
	position: relative;
	margin-top: auto;
	margin-bottom: 0;
}

.ficha-herramienta__accion .boton {
	display: block;
	width: 100%;
}

/* =========================================================================
   9. Ajustes de impresión
   =========================================================================
   La gente imprime la carta de apelación y la lista de plazos para llevarlas
   a la oficina. Sin esto, el textarea sale recortado a su altura en pantalla
   y se pierde la mitad del escrito. */
@media print {
	.panel,
	.filtros__resumen,
	.otras-herramientas,
	.carta__acciones,
	.boton { display: none !important; }

	.resultado,
	.carta {
		border: 1px solid #999;
		box-shadow: none;
		break-inside: avoid;
	}

	.carta__texto {
		height: auto;
		min-height: 0;
		white-space: pre-wrap;
		overflow: visible;
		border: 0;
	}

	.evento { break-inside: avoid; }
}