/* =====================================================================
 * Archivo de conversaciones · lista, buscador y filtro por tema
 * ================================================================== */

.ca-arch__cabecera { padding: var(--ca-space-7) 0 var(--ca-space-6); }
.ca-arch__intro { font-size: 16px; line-height: 24px; color: var(--ca-ink-muted); margin-top: var(--ca-space-2); }

.ca-arch { padding-bottom: var(--ca-seccion); }
.ca-arch__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ca-space-4);
}

/* La fila sobresale 16px hacia la izquierda al invertirse, como las demás. */
.ca-arch__item { margin-left: calc(-1 * var(--ca-space-4)); }

.ca-arch__fila {
	display: grid;
	grid-template-columns: 64px 240px minmax(0, 1fr);
	column-gap: var(--ca-gutter);
	row-gap: var(--ca-space-3);
	align-items: start;
	padding: var(--ca-space-4);
	transition: background .15s ease, color .15s ease;
}
.ca-arch__fila:hover { text-decoration: none; }

@media (hover: hover) {
	.ca-arch__fila:hover {
		background: var(--ca-surface-inverse);
		color: var(--ca-ink-inverse);
	}
	.ca-arch__fila:hover .ca-secundario,
	.ca-arch__fila:hover .ca-arch__lugar { color: inherit; }
	.ca-arch__fila:hover .ca-arch__foto img { transform: scale(1.03); }
	.ca-arch__fila:hover .ca-arch__cita { border-color: rgba(255, 255, 255, .4); }
	.ca-arch__fila:hover .ca-arch__marca,
	.ca-arch__fila:hover .ca-arch__play {
		background: var(--ca-blanco);
		color: var(--ca-negro);
	}
}

.ca-arch__n {
	font-size: 56px;
	line-height: 52px;
	font-weight: 400;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.ca-arch__foto { display: block; overflow: hidden; background: var(--ca-gris-interfaz); }
.ca-arch__foto:empty { background: none; }
.ca-arch__foto img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform .3s ease;
}
@media (prefers-reduced-motion: reduce) {
	.ca-arch__fila, .ca-arch__foto img { transition: none; }
}

.ca-arch__cuerpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ca-arch__datos { font-size: 13px; line-height: 18px; }
.ca-arch__nombre { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.ca-arch__lugar { font-size: 14px; line-height: 20px; color: var(--ca-ink-muted); }
.ca-arch__linea {
	font-size: 16px;
	line-height: 24px;
	margin-top: var(--ca-space-1);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
.ca-arch__temas { font-size: 13px; line-height: 18px; text-decoration: underline; text-underline-offset: 4px; }

/* Lo que se encontró dentro de la transcripción. */
.ca-arch__cita {
	grid-column: 3 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px var(--ca-space-4);
	padding-top: var(--ca-space-3);
	border-top: 1px solid var(--ca-rule);
	font-size: 14px;
	line-height: 20px;
}
.ca-arch__cita-min { font-weight: 700; }
.ca-arch__marca { background: var(--ca-negro); color: var(--ca-blanco); padding: 0 3px; font-weight: 700; }
.ca-arch__desde { display: inline-flex; align-items: center; gap: var(--ca-space-2); font-size: 13px; font-weight: 700; }
.ca-arch__play {
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	background: var(--ca-negro);
	color: var(--ca-blanco);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ca-arch__nada {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ca-space-4);
	padding: var(--ca-space-6) var(--ca-space-4);
	font-size: 16px;
	line-height: 24px;
}

/* ------------------------------------------------- columna de buscar */

.ca-arch__lado { display: flex; flex-direction: column; gap: var(--ca-space-5); }
.ca-arch__forma { display: flex; flex-direction: column; gap: var(--ca-space-2); }
.ca-arch__campo { position: relative; }
.ca-arch__campo svg {
	position: absolute;
	left: var(--ca-space-4);
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}
.ca-arch__campo input {
	width: 100%;
	box-sizing: border-box;
	height: 56px;
	padding: 0 var(--ca-space-4) 0 48px;
	border: 1px solid var(--ca-ink);
	border-radius: 0;
	background: var(--ca-surface);
	color: var(--ca-ink);
	font: inherit;
	font-size: 16px;
	-webkit-appearance: none;
	appearance: none;
}
.ca-arch__campo input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ca-arch__pista { font-size: 13px; line-height: 18px; color: var(--ca-ink-muted); }

.ca-arch__bloque { display: flex; flex-direction: column; gap: var(--ca-space-2); align-items: flex-start; }
/* La fila de temas se desliza dentro de su ancho, no estira la página. */
.ca-arch__bloque > .ca-temas { width: 100%; max-width: 100%; }
.ca-arch__rotulo { font-size: 14px; line-height: 20px; font-weight: 700; }
.ca-arch__ver-temas { margin-top: var(--ca-space-1); }

.ca-arch__pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ca-space-4);
	font-size: 13px;
	line-height: 18px;
}
.ca-arch__cuenta { color: var(--ca-ink-muted); }
.ca-arch__orden {
	border: none;
	background: none;
	padding: 0;
	font: inherit;
	font-size: 13px;
	line-height: 18px;
	font-weight: 700;
	color: var(--ca-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}

/* ------------------------------------------------------------ celular */

@media (max-width: 900px) {
	.ca-arch__cabecera { padding-top: var(--ca-space-6); }
	.ca-arch__lado { gap: var(--ca-space-4); }
	.ca-arch__campo input { height: 44px; }
	/* En celular sobra la ayuda: el campo ya lo dice en su marca de agua. */
	.ca-arch__pista, .ca-arch__rotulo { display: none; }
	.ca-arch__item { margin-left: 0; }
	.ca-arch__fila { grid-template-columns: minmax(0, 1fr); padding-inline: 0; }
	.ca-arch__n { font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: 0; }
	.ca-arch__nombre { font-size: 22px; line-height: 28px; }
	.ca-arch__cita { grid-column: 1 / -1; }
	.ca-arch__nada { padding-inline: 0; }
}