/* Fichas (comparativa, protocolo, herramienta) y sus índices: piezas comunes. Se carga con
   plantillas.css (componentes compartidos) y antes de la hoja del tipo (ficha-{tipo}.css), solo
   en esas plantillas (inc/fichas.php, arg_tema_recursos_fichas). Solo variables de tokens.css. */

/* ---------- Cabecera sin pieza: el texto a 880 px, como los marcos (Figma: Hero copy 880) ---------- */
.ficha-cabecera__rejilla--sola .pag-cabecera__copia { max-width: 880px; }
/* Rejilla con pieza (vista de la comparativa): mismas columnas que la cabecera con llamada. */
@media (min-width: 1024px) {
	.ficha-cabecera__rejilla--vista { grid-template-columns: minmax(0, 664fr) minmax(0, 520fr); column-gap: var(--sp-64); }
}

/* ---------- Prosa del cuerpo del .md: una columna de lectura (65ch) con sus H2 ---------- */
.ficha-prosa__cuerpo { max-width: var(--measure); font-size: var(--fs-18); line-height: 1.55; }
.ficha-prosa__cuerpo > * + * { margin-top: var(--sp-16); }
.ficha-prosa__cuerpo h2 { font-size: var(--fs-35); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-wrap: balance; }
.ficha-prosa__cuerpo h2 + * { margin-top: var(--sp-24); }
.ficha-prosa__cuerpo * + h2 { margin-top: var(--sp-48); }
.ficha-prosa__cuerpo h3 { font-size: var(--fs-28); }
.ficha-prosa__cuerpo a { color: var(--arg-link); }
/* Sola en su sección (comparativa, herramienta): centrada, como el marco (Prose 720 centrada). */
.ficha-prosa .ficha-prosa__cuerpo { margin-inline: auto; }
@media (min-width: 1024px) {
	.ficha-prosa__cuerpo { font-size: var(--fs-20); line-height: 1.5; }
	.ficha-prosa__cuerpo h2 { font-size: var(--fs-41); }
}

/* ---------- Tarjetas enlazadas (índices, relacionadas, más herramientas) ----------
   Figma «Card» (5:262): la tarjeta entera es el enlace. El <a> va en el título y su ::after cubre
   la tarjeta; el foco se ve en el borde de la tarjeta (:focus-within). */
.ficha-tarjetas__rejilla { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); }
.ficha-tarjeta {
	position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--sp-24);
	background: var(--arg-surface-card); border: 1px solid var(--arg-border); border-radius: var(--radius-md);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ficha-tarjeta:hover { border-color: var(--arg-ink); box-shadow: var(--shadow-card); }
.ficha-tarjeta:focus-within { outline: 3px solid var(--arg-focus-ring); outline-offset: 2px; }
.ficha-tarjeta__titulo { margin-top: var(--sp-16); font-size: var(--fs-28); line-height: var(--lh-sub); text-wrap: balance; }
.ficha-tarjeta__enlace { color: inherit; text-decoration: none; }
.ficha-tarjeta__enlace:focus-visible { outline: none; }
.ficha-tarjeta__enlace::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ficha-tarjeta__borrador { margin-top: var(--sp-8); color: var(--arg-aviso-text); }
.ficha-tarjeta__frase { margin-top: var(--sp-12); font-family: var(--arg-font-mono); font-size: var(--fs-14); line-height: 1.55; color: var(--arg-text); }
.ficha-tarjeta__texto { margin-top: var(--sp-12); color: var(--arg-text-weak); font-size: var(--fs-16); line-height: 1.5; }
.ficha-tarjeta__accion {
	display: inline-flex; align-items: center; gap: var(--sp-8); min-height: var(--target);
	margin-top: auto; padding-top: var(--sp-16); color: var(--arg-link); font-weight: 600; font-size: var(--fs-16);
}
.ficha-tarjeta__accion svg { width: 18px; height: 18px; transition: transform .2s ease; }
.ficha-tarjeta:hover .ficha-tarjeta__accion span { text-decoration: underline; }
.ficha-tarjeta:hover .ficha-tarjeta__accion svg { transform: translateX(3px); }
@media (min-width: 768px) { .ficha-tarjetas__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24); } }
@media (min-width: 1024px) { .ficha-tarjetas__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
	.ficha-tarjeta, .ficha-tarjeta__accion svg { transition: none; }
	.ficha-tarjeta:hover .ficha-tarjeta__accion svg { transform: none; }
}

/* ---------- Sin viudas: la última línea nunca con una sola palabra (Chrome/Edge/Safari 17.4+;
   donde no se soporta, el texto se parte como siempre). Celdas y titulares cortos, equilibrados. ---------- */
.ficha :is(p, li, dd, dt, summary, blockquote) { text-wrap: pretty; }
.ficha :is(h1, h2, h3, th, td, .ficha-tarjeta__accion) { text-wrap: balance; }

/* Tablas de la prosa (arg_tema_tablas_prosa: .pag-tabla con etiquetas): la cabecera de fila no se
   parte en escritorio y la tabla respira dentro de la columna de lectura. */
.ficha-prosa__cuerpo .pag-tabla { margin-block: var(--sp-24); font-size: var(--fs-16); }
@media (min-width: 900px) { .ficha-prosa__tabla th[scope="row"] { width: auto; white-space: nowrap; } }
/* Con tres columnas, una cabecera de fila larga («Dental patients hanging up before reaching the front
   desk», /tools/missed-call-calculator/) sin partir estiraba la tabla a 902 px en una columna de 750 y,
   a 1000, la última columna quedaba fuera de la pantalla (ola 3). Ahí sí se parte; el reparto
   automático la deja entera si cabe. */
@media (min-width: 900px) { .ficha-prosa__tabla:has(tr > :nth-child(3)) th[scope="row"] { white-space: normal; min-width: 15em; } }
/* Tablas anchas (4 columnas o más: /compare/, alternatives…) en la prosa centrada: en escritorio se
   salen de la columna de lectura (65ch) hasta 1040 px, centradas, para que las celdas no se partan
   palabra a palabra (ola 2: viudas en celdas a 1000-1440). Nunca más anchas que el contenedor, y con
   reparto fijo: con el automático, 6 columnas con relleno de 24 px y la cabecera de fila sin partir
   pedían más de 904 px a 1000 y la última columna quedaba cortada (overflow-x: clip). */
@media (min-width: 900px) {
	.ficha-prosa > .contenedor > .ficha-prosa__cuerpo > .ficha-prosa__tabla:has(tr > :nth-child(4)) {
		--ficha-tabla-ancho: min(1040px, 100vw - 2 * var(--gutter) - 32px);
		width: var(--ficha-tabla-ancho);
		max-width: none;
		margin-inline: calc((100% - var(--ficha-tabla-ancho)) / 2);
		table-layout: fixed;
	}
	.ficha-prosa > .contenedor > .ficha-prosa__cuerpo > .ficha-prosa__tabla:has(tr > :nth-child(4)) :is(th, td) { padding-inline: var(--sp-16); overflow-wrap: break-word; }
	.ficha-prosa > .contenedor > .ficha-prosa__cuerpo > .ficha-prosa__tabla:has(tr > :nth-child(4)) th[scope="row"] { white-space: normal; }
}
/* Con 5 columnas o más, entre 900 y 1099 no caben sin partir cada celda palabra a palabra: siguen como
   tarjetas por fila (las mismas de móvil, plantillas.css) hasta 1100. */
@media (min-width: 900px) and (max-width: 1099px) {
	.ficha-prosa > .contenedor > .ficha-prosa__cuerpo > .ficha-prosa__tabla:has(tr > :nth-child(5)) { width: auto; margin-inline: 0; table-layout: auto; border: 0; border-radius: 0; background: none; overflow: visible; }
	.ficha-prosa__tabla:has(tr > :nth-child(5)) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.ficha-prosa__tabla:has(tr > :nth-child(5)), .ficha-prosa__tabla:has(tr > :nth-child(5)) :is(tbody, tr, th, td) { display: block; }
	.ficha-prosa__tabla:has(tr > :nth-child(5)) tr { margin-bottom: var(--sp-16); border: 1px solid var(--arg-border); border-radius: var(--radius-md); background: var(--arg-white); overflow: hidden; }
	.ficha-prosa > .contenedor > .ficha-prosa__cuerpo > .ficha-prosa__tabla:has(tr > :nth-child(5)) th[scope="row"] { width: auto; padding: var(--sp-12) var(--sp-16); border-top: 0; background: var(--arg-neutral-100); }
	.ficha-prosa > .contenedor > .ficha-prosa__cuerpo > .ficha-prosa__tabla:has(tr > :nth-child(5)) td { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-12) var(--sp-16); font-size: var(--fs-18); line-height: 1.5; }
	.ficha-prosa__tabla:has(tr > :nth-child(5)) td::before { content: attr(data-etiqueta); font-family: var(--arg-font-mono); font-size: var(--fs-14); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--arg-ink); }
}
.ficha-encaja__puntos li > span:last-child { text-wrap: balance; }

/* Rejilla de 3 sin huecos al final (índices de 13 protocolos, etc.): sobre 6 columnas cada tarjeta ocupa 2;
   si sobran 2, las dos últimas ocupan 3; si sobra 1, las cuatro últimas van de dos en dos. */
@media (min-width: 1024px) {
	.ficha-tarjetas__rejilla { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.ficha-tarjeta { grid-column: span 2; }
	.ficha-tarjeta:nth-last-child(2):nth-child(3n + 1), .ficha-tarjeta:last-child:nth-child(3n + 2) { grid-column: span 3; }
	.ficha-tarjetas__rejilla:has(> .ficha-tarjeta:last-child:nth-child(3n + 1)) > .ficha-tarjeta:nth-last-child(-n + 4) { grid-column: span 3; }
	/* Una sola tarjeta (p. ej. /compare/ con una comparativa): a lo ancho, con medida de lectura. */
	.ficha-tarjetas__rejilla:has(> .ficha-tarjeta:only-child) > .ficha-tarjeta { grid-column: 1 / -1; max-width: 720px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	.ficha-tarjeta:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- Ola 3 · foto de la ficha (componentes/foto-ficha.php) ----------
   Escena sin personas en 4:5, con un acercamiento lento de cámara y, encima, avisos que van
   apareciendo (decoración, aria-hidden). En la cabecera se anima al cargar (CSS); en el resto, al
   entrar en pantalla (servicio.js: .pag-anima--js → .pag-anima--on). Sin movimiento: foto quieta. */
.ficha-foto { margin: 0; min-width: 0; }
.ficha-foto__marco {
	position: relative; overflow: hidden; aspect-ratio: 4 / 5;
	border-radius: var(--radius-lg); background: var(--arg-neutral-100); box-shadow: var(--shadow-pop);
}
.ficha-foto picture, .ficha-foto__img { display: block; width: 100%; height: 100%; }
.ficha-foto__img { object-fit: cover; }
.ficha-foto__avisos {
	position: absolute; left: var(--sp-16); right: var(--sp-16); bottom: var(--sp-16);
	display: grid; justify-items: start; gap: var(--sp-8); margin: 0; padding: 0; list-style: none;
}
.ficha-foto__aviso {
	display: inline-flex; align-items: center; gap: var(--sp-8); max-width: 100%;
	padding: var(--sp-8) var(--sp-12); border-radius: var(--radius-pill);
	background: var(--arg-ink); color: var(--arg-white); box-shadow: 0 6px 18px rgba(21, 26, 23, .28);
	font-family: var(--arg-font-mono); font-size: var(--fs-14); line-height: 1.2;
}
.ficha-foto__punto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--arg-lime); }
.ficha-foto--perdidas .ficha-foto__punto { background: var(--arg-signal); }
.ficha-foto__pie { margin-top: var(--sp-8); font-size: var(--fs-14); line-height: 1.4; color: var(--arg-text-weak); }
/* En la cabecera por debajo de 1024 la foto va tras el texto: apaisada, para no empujar la herramienta. */
@media (max-width: 1023px) {
	.ficha-foto--cabecera { margin-top: var(--sp-32); }
	.ficha-foto--cabecera .ficha-foto__marco { aspect-ratio: 16 / 11; }
	/* Apaisada, lo que importa de la escena (el teléfono, el escritorio) queda abajo: los avisos, arriba. */
	.ficha-foto--cabecera .ficha-foto__img { object-position: 50% 70%; }
	.ficha-foto--cabecera .ficha-foto__avisos { top: var(--sp-16); bottom: auto; }
}
@media (min-width: 1024px) {
	.ficha-cabecera__rejilla--foto { grid-template-columns: minmax(0, 664fr) minmax(0, 520fr); column-gap: var(--sp-64); align-items: center; }
	.ficha-foto--cabecera .ficha-foto__avisos { left: var(--sp-24); bottom: var(--sp-24); }
}
@media (prefers-reduced-motion: no-preference) {
	.ficha-foto--al-cargar .ficha-foto__img { animation: ficha-foto-acerca 14s cubic-bezier(.2, .6, .2, 1) both; }
	.ficha-foto--al-cargar .ficha-foto__aviso { animation: ficha-aparece .5s ease-out both; animation-delay: calc(.8s + var(--i, 0) * 1.1s); }
	.ficha-foto--al-cargar .ficha-foto__punto { animation: ficha-late 1.6s ease-in-out 3 both; animation-delay: calc(.8s + var(--i, 0) * 1.1s); }
	.ficha-foto.pag-anima--js .ficha-foto__img { transform: scale(1.08); transition: transform 12s cubic-bezier(.2, .6, .2, 1); }
	.ficha-foto.pag-anima--on .ficha-foto__img { transform: none; }
}
@keyframes ficha-foto-acerca { from { transform: scale(1.08); } to { transform: none; } }
@keyframes ficha-aparece { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ficha-late { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 178, 36, 0); } 50% { box-shadow: 0 0 0 6px rgba(255, 178, 36, .35); } }

/* ---------- Ola 3 · prosa del cuerpo con la foto de la escena al lado (protocolos) ---------- */
@media (max-width: 1023px) {
	.ficha-foto--prosa { max-width: 560px; margin: var(--sp-48) auto 0; }
}
@media (min-width: 1024px) {
	.ficha-prosa__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: var(--sp-64); align-items: start; }
	.ficha-prosa--con-foto .ficha-prosa__cuerpo { margin-inline: 0; }
	.ficha-foto--prosa { position: sticky; top: var(--sp-96); }
}