/*
Theme Name: Tsonami — Liberacoop
Theme URI: https://liberacoop.cl/
Author: Liberacoop, sobre el diseño original de Hugo Solar
Description: Tema derivado del `tsonami` original (Hugo Solar, 2013) para la
  migración de tsonami.cl. El DISEÑO es el del sitio original — su CSS, su
  retícula de 960, su tipografía y sus imágenes, bajados del sitio publicado y
  auditados (0 hallazgos bloqueantes). El PHP es NUEVO, escrito acá: ni una
  línea viene del servidor comprometido, que es donde vivía la inyección
  `SC_TH_BEGIN` (48 líneas al final de `functions.php` del tema original).
Version: 1.0.0
License: GPLv2 or later
Text Domain: tsonami-liberacoop
*/

/* El CSS del sitio original, tal cual. Va importado y no pegado para que se
   pueda comparar byte a byte contra la fuente. */
@import url("_original.css");

/* La franja gris bajo el menú. En el original es `<nav id="sub-menu">`, vacía:
   el JS que la llenaba está comentado desde hace años. Medida sobre el sitio
   publicado: 29 px de alto, rgb(210,211,213). */
#sub-menu { height: 29px; background: rgb(210,211,213); clear: both; }

/* El equipo de «Sobre Tsonami», como el sitio vivo: foto de 140 y, AL LADO,
   el nombre y el cargo. De a dos por fila.
 *
 * La retícula cierra exacta y por eso los números son estos: cada ficha es un
 * par `grid_2` (140) + `grid_4` (300) = 460, y dos pares con la calle de 20
 * dan los 940 de `grid_12`. Los «480 px de aire» que parecía haber entre las
 * dos fotos del original NUNCA fueron aire: ahí va la columna del cargo. Se
 * midieron sólo las imágenes y se leyó un hueco donde había texto.
 *
 * No se define tipografía nueva: `_original.css` ya da `h3` en Antártida-Light
 * versalitas #494949 y `p` en 0.75em/17px, que es lo que se ve en el original.
 * Los 18 px de margen inferior reproducen la fila de 158 medida (140 + 18). */
.equipo .persona { float: left; width: 460px; margin: 0 20px 18px 0; }
.equipo .persona:nth-child(even) { margin-right: 0; }
.equipo .persona-foto { float: left; width: 140px; }
.equipo .persona-foto img { display: block; width: 140px; height: 140px; }
.equipo .persona-datos { margin-left: 160px; }
.equipo .persona-datos h3 { margin: 0 0 6px; }

/* **Esta regla es INERTE hoy, a propósito, y conviene que quede.**
 * `header.php` declara `<meta name="viewport" content="width=1000">`, o sea
 * que un teléfono renderiza el sitio como un lienzo de 1000 px y lo escala:
 * ninguna consulta de `max-width` en píxeles se dispara jamás. Cambiar eso es
 * una decisión de sitio entero, no de esta sección.
 *
 * Queda escrita porque el patrón «foto a la izquierda, texto a la derecha» ya
 * es el correcto para apilar, y el día que el tema pase a `width=device-width`
 * esta sección no hay que volver a pensarla. */
@media (max-width: 700px) {
	.equipo .persona { float: none; width: auto; margin-right: 0; }
}

.correo { font-size: 12px; margin-bottom: 18px; }

/* ------------------------------------------------ el título de cada actividad
 *
 * **Blanco sobre `#44c8f5`, que es lo que hace el original.**
 *
 * `_original.css:404-407` pinta `#ext-contenido h3` de blanco sobre el chip
 * celeste, y ahí el título es texto pelado --`<h3>Título</h3>`, comprobado
 * contra https://www.tsonami.cl/blog/--. Acá `archive.php` y
 * `page-extensiones.php` lo envuelven en un `<a>` para que se pueda abrir la
 * entrada, y `_original.css:108-109` da `article a { color:#44c8f5 }`: sin
 * decir nada, el enlace saldría del MISMO color que su fondo, 1:1, invisible.
 * Por eso el color se declara para el `h3` Y para el `a` que lleva dentro.
 *
 * ENTRE EL 2026-08-27 Y EL 2026-09-11 ESTO DIJO `#494949`, y era una
 * divergencia: 4,64:1 en vez de los 1,94:1 del blanco. Revertida por decisión
 * explícita -- el encargo es reproducir el sitio publicado, no corregirlo. La
 * objeción queda escrita acá para quien haga la revisión de accesibilidad:
 * este renglón, la banda de años y `#ext-categorias` son el mismo problema.
 */
#ext-contenido h3,
#ext-contenido h3 a,
#ext-contenido h3 a:visited {
	color: #fff;
}

/* Sin esto el enlace no se distingue del texto: `_original.css:105-107` quita
 * el subrayado a TODOS los enlaces del sitio, así que dentro del chip no queda
 * ninguna señal de que el título se puede pulsar. El foco visible es además la
 * única pista para quien navega con el teclado. */
#ext-contenido h3 a:hover,
#ext-contenido h3 a:focus-visible {
	text-decoration: underline;
}

/* ----------------------------------------------- la lista de categorías
 *
 * `_original.css:419-435` la pinta `#bcbec0` sobre blanco: **1,86:1**. Es la
 * ÚNICA navegación de esta página, y era un gris decorativo que no es legible
 * como texto. `#808285`, que también está en la paleta, sólo llega a 3,85:1 y
 * no alcanza. `#494949` da **9,0:1** y es la misma tinta del cuerpo.
 */
#ext-categorias li a {
	color: #494949;
}

/* ------------------------------------------------------------- el buscador
 *
 * Vive dentro de `#sub-menu`, la franja gris que el original dejó vacía. No se
 * toca el alto ni el color de esa franja --son del diseño prestado--: sólo se
 * coloca el formulario dentro.
 */
.solo-lectores {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

#sub-menu .center { display: flex; justify-content: flex-end; align-items: center; }

.buscador { display: flex; gap: 6px; align-items: center; }

.buscador__campo {
	width: 260px;
	max-width: 40vw;
	/* 29 px es el alto de la franja: el campo entra dentro, no la estira. */
	height: 23px;
	padding: 0 8px;
	border: 1px solid #808285;
	background: #fff;
	font-family: inherit;
	font-size: 12px;
	color: #494949;
}

.buscador__campo::placeholder { color: #6b6d70; }

.buscador__enviar {
	height: 23px;
	padding: 0 12px;
	border: 0;
	background: #44c8f5;
	/* `#494949` sobre `#44c8f5` da 4,64:1; blanco daría 1,94:1. */
	color: #494949;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.buscador__enviar:hover { background: #2fb4e2; }

/* El foco visible, que el CSS prestado no define para ningún control. */
.buscador__campo:focus-visible,
.buscador__enviar:focus-visible {
	outline: 2px solid #494949;
	outline-offset: 1px;
}

.buscador__resumen {
	margin: 0 10px 14px;
	font-size: 16px;
	color: #494949;
}

/* Los blancos táctiles de 44 px llegan cuando el sitio tenga viewport móvil;
 * hoy `header.php` declara `width=1000` y ninguna consulta de `max-width` se
 * dispara. Queda escrito para que esa sección no haya que volver a pensarla. */
@media (max-width: 700px) {
	#sub-menu .center { justify-content: stretch; }
	.buscador { width: 100%; }
	.buscador__campo { flex: 1; max-width: none; height: 44px; font-size: 16px; }
	.buscador__enviar { height: 44px; }
}

/* ------------------------------------------- la banda de años del archivo
 *
 * Sobre `year_archive` la franja gris lleva el listado de ediciones en vez del
 * buscador (`inc-submenu-archivo.php`). `_original.css:270-311` ya trae el
 * aspecto --versalitas, separadores verticales, la franja de 26 px-- porque el
 * CSS prestado nunca perdió estas reglas: lo que faltaba era el HTML. Acá van
 * sólo los dos ajustes que el HTML generado necesita y la hoja prestada no
 * puede dar.
 *
 * 1. **Ancho.** El original clava `#submenu-archive a { width: 65px }` más un
 *    `padding-left: 70px` sobre el `ul`: catorce años dan 14x65+70 = 980 px y
 *    entran raspando en los 960 de la retícula. Los años ya no son catorce
 *    fijos sino los términos publicados --hoy quince, 2007 a 2021-- y con la
 *    regla prestada la lista se sale del contenedor. Fila flexible centrada:
 *    cabe cualquier cantidad, y el aspecto es el mismo mientras quepan.
 *
 * 2. **Tinta: la del original, `#939598`.** Se probó `#494949` por contraste
 *    --`#939598` sobre `#D2D3D5` da **1,98:1** y `#494949` da 5,94:1-- y se
 *    revirtió por decisión explícita el 2026-09-11: el encargo es reproducir
 *    el aspecto publicado. La objeción queda anotada acá, no aplicada: si
 *    alguna vez se revisa la accesibilidad del sitio, este es el primer
 *    renglón de la lista junto con el título de `/blog/` y `#ext-categorias`.
 *    El año actual va en negro, como allá.
 */
/* Sólo el contenedor directo: el `ul` TAMBIÉN lleva la clase `center`, y una
 * regla sin `>` le imponía `display: block` con más peso que la fila flexible
 * de abajo -- los quince años salían apilados en vertical contra el margen
 * derecho. Medido en el laboratorio antes de corregirlo. */
#sub-menu.sub-menu--anos > .center { display: block; }

#sub-menu .archive-menu {
	display: flex;
	justify-content: center;
	margin: 0;
}

/* El `padding-left: 70px` de la hoja prestada se escribe con DOS ids
 * (`#sub-menu ul#submenu-archive`), así que una regla de clase no lo tumba:
 * medido, el `ul` quedaba de 1030 px dentro de una retícula de 960 y los dos
 * años más viejos caían fuera de la pantalla. Se contesta con la misma
 * especificidad. */
#sub-menu ul#submenu-archive { padding-left: 0; }

#sub-menu .archive-menu li { float: none; }

#sub-menu .archive-menu a {
	width: auto;
	min-width: 52px;
	padding: 0 5px;
	text-align: center;
}

#sub-menu .archive-menu li:first-child a { border-left: 0; }

/* El año actual: `#000` y NADA MAS. El original no lo pone en negrita
 * (`_original.css:291`, medido en el sitio vivo: weight 400), y una negrita
 * de mas ensancha el elemento y corre la fila entera. */
#sub-menu .archive-menu .current-menu-item a { color: #000; }

#sub-menu .archive-menu a:focus-visible {
	outline: 2px solid #494949;
	outline-offset: -2px;
}

/* ------------------------------------ la barra fija de secciones, de abajo
 *
 * `_original.css:340` la deja `position: fixed; width: 100%` SIN `left`, y eso
 * sólo funciona donde el original la pone: colgando de `<body>`, después de
 * cerrar `#wrap`. Acá la imprime `taxonomy-year_archive.php`, o sea DENTRO de
 * `#wrap` --que mide 960 y está centrado--, y un fijo sin `left` hereda como
 * origen la posición que habría tenido en el flujo: medido, la barra arrancaba
 * en x=282 y se iba 282 px fuera de la pantalla por la derecha. `left: 0` la
 * ancla donde el original la tiene, sin mover la plantilla a un gancho.
 */
#menu-archive { left: 0; }

/* La barra tapa los últimos 26 px de la VENTANA, siempre. Sin este respiro al
 * final del documento, el pie queda permanentemente debajo de ella. */
.tax-year_archive { padding-bottom: 26px; }

/* ------------------------------------------- las filas del listado, alineadas
 *
 * **Los pares fecha/contenido se despegaban a partir del segundo.**
 *
 * Cada resultado son dos columnas flotadas --`#ext-data` (`grid_2`) y
 * `#ext-contenido` (`grid_8`)-- y nada cerraba la fila. Medido en
 * `/?s=escucha`: la fila 1 salía bien (x=473 y x=633), y de la 2 en adelante la
 * columna de fecha se iba a x=623 y luego a x=1103, cayendo en el hueco que
 * dejaba el resultado anterior. Con textos de altura desigual --y acá van de
 * 89 a 323 px-- eso deja la fecha de una actividad al lado del texto de otra,
 * que es peor que feo: es información mal atribuida.
 *
 * `clear: both` en el primero de cada par obliga a empezar fila. Una
 * declaración, y arregla a la vez la búsqueda, `archive.php` y
 * `page-extensiones.php`, que comparten este marcado.
 *
 * (Nota para quien pase por acá: `ext-data` y `ext-contenido` son `id` y se
 * repiten veinte veces por página. Es marcado heredado del original y el CSS
 * prestado los selecciona así, por eso no se tocan; pero un `id` repetido es
 * HTML inválido y conviene que esté anotado antes de que muerda.)
 */
#ext-data { clear: both; }

/* --------------------------------------------------- «estás acá» en las categorías
 *
 * `_original.css:430` define `#ext-categorias li.current-menu-item a
 * { font-weight: bold }` y las plantillas emitían `class="current"`: el estilo
 * existía y no lo activaba nadie, así que en `/category/artistas/` la
 * categoría abierta no se distinguía de las otras 32.
 *
 * El gancho es `aria-current`, no una clase: la misma marca sirve para el ojo
 * y para el lector de pantalla, que lo anuncia. Y no se distingue SÓLO por
 * peso, porque el peso tipográfico es una diferencia sutil sobre 12 px; la
 * barra a la izquierda es la señal que se ve.
 */
#ext-categorias a[aria-current] {
	font-weight: 700;
	border-left: 3px solid #44c8f5;
	padding-left: 5px;
	margin-left: -8px;
}

/* La fila entera pulsable, no sólo la caja del texto.
 *
 * WCAG 2.5.8 (AA) pide 24×24 px; hoy el `<a>` es en línea dentro de una fila de
 * 26 px, así que el blanco real es el ancho del texto. Los 44×44 son 2.5.5
 * (AAA) y en escritorio darían 34 filas × 44 px = 1.496 px de columna: se
 * reservan para el puntero grueso, donde hacen falta de verdad. */
#ext-categorias li a { display: block; padding: 6px 0; }

@media (pointer: coarse) {
	#ext-categorias li a { min-height: 44px; display: flex; align-items: center; }
}

/* ------------------------------------------- el medio de una ficha suelta
 *
 * `/videos/<slug>/` y `/sonido/<slug>/`: 28 y 2 fichas que guardaban la
 * dirección del medio y no la mostraban. Ver `single.php`.
 *
 * La caja de 16:9 es la misma técnica que `visor.css` ya usa para el modal
 * (`padding-top: 56.25%`), y no una segunda forma de hacer lo mismo: un
 * `<iframe>` sin alto propio colapsa a 150 px.
 */
.ficha-medio {
	position: relative;
	padding-top: 56.25%;
	margin: 0 10px 18px;
	background: #000;
}
.ficha-medio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ficha-medio__enlace { margin: 0 10px 18px; }
article > .reproductor { width: calc(100% - 20px); margin: 0 10px 18px; }

/* ------------------------------- `[audioalbum]` y `[audiotrack]` rescatados
 *
 * Ver la nota larga en `functions.php`. Todo es contenido de frase porque el
 * `post_content` del origen mete estos atajos dentro de un `<h5>`; el
 * `display: block` da el dibujo sin meter un `<div>` donde no puede ir.
 *
 * El `<h5>` que los envuelve trae la tipografía de titular heredada, así que
 * el nombre del autor y el reproductor se devuelven al peso del cuerpo: si no,
 * una ficha técnica sale gritada.
 */
.audioalbum__titulo, .audioalbum__detalle, .track,
.songtitle, .songwriter { display: block; }
.audioalbum__detalle, .songwriter { font-weight: 400; color: #808285; }
.track { margin: 0 0 14px; }
.track .reproductor { display: block; width: 100%; margin-top: 6px; }

/* ------------------------------------------ la ficha de una emisión de radio
 *
 * Ver `inc-radio.php`: 189 entradas cuyo cuerpo es el volcado JSON del API de
 * Airtime. Acá sólo el aspecto; la decisión y la evidencia están allá.
 *
 * La tinta de los datos es `#808285`, que ya está en la paleta del sitio, y
 * sobre blanco da 4,6:1. El aviso de «sin grabación» va en la misma tinta del
 * cuerpo y no en rojo: no es un error de la página, es un hecho del archivo.
 */
.emision { margin: 0 10px 26px; }
.emision__obra { margin: 0 0 3px; font-weight: 700; }
.emision__datos { margin: 0 0 8px; font-size: 0.85em; color: #808285; }
.emision__parte { margin: 8px 0 2px; font-size: 0.85em; color: #808285; }
.emision .reproductor { display: block; width: 100%; }
.emision__sin-audio { margin: 0; font-size: 0.85em; font-style: italic; }

/* ------------------------------------- el reproductor de un proveedor de audio
 *
 * Ver `interfaz/principal/src/audios.ts`. Cada proveedor trae su propio alto
 * --Spotify 152, Mixcloud 120, Bandcamp 470--, así que lo pone el JS en
 * `--alto` en vez de fijarse acá: una caja de 16:9 como la del visor le
 * quedaría enorme a un reproductor de audio de 120 px.
 */
.audio-incrustado { margin: 6px 10px 18px; }
.audio-incrustado iframe {
	display: block;
	width: 100%;
	height: var(--alto, 152px);
	border: 0;
}

/* El reproductor de Internet Archive dentro de una ficha de radio. Ver
 * `inc-radio.php`: trece emisiones que Tsonami publicó allá. El alto lo fija
 * el propio reproductor de archive.org para audio; 60 px es lo que ocupa su
 * barra sin la lista de pistas. */
.emision__archive { margin-top: 6px; }
.emision__archive iframe { display: block; width: 100%; height: 60px; border: 0; }

/* --------------------------- el reproductor de Internet Archive, sin marco
 *
 * Ver `inc-archive.php`. Son `<audio>` nativos servidos desde archive.org,
 * porque su `<iframe>` no se pinta en Firefox. La ficha del ítem va debajo:
 * es donde están la licencia y quién publicó, y sigue siendo el enlace que
 * funciona aunque todo lo demás falle.
 */
.ia-repro { margin: 6px 10px 18px; }
.ia-repro__control { margin: 0 0 10px; }
.ia-repro .reproductor { display: block; width: 100%; }
.ia-repro__ficha { margin: 8px 0 0; font-size: 0.8em; }

/* La lista de pistas. Ver `interfaz/principal/src/lista.ts`: son enlaces al
 * `.mp3`, no botones, y siguen funcionando sin JavaScript.
 *
 * El número va por CSS y no en el texto del enlace: «3» no es parte del
 * nombre de la obra, y quien navega con lector de pantalla ya recibe la
 * posición de la `<ol>` sin que se la digan dos veces. */
.ia-lista {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: pista;
	border-top: 1px solid #d2d3d5;
}
.ia-lista li { counter-increment: pista; border-bottom: 1px solid #d2d3d5; }

.ia-pista {
	display: flex;
	gap: .6em;
	align-items: baseline;
	/* 44 px de blanco táctil: la lista se usa con el dedo, no sólo con ratón. */
	min-height: 44px;
	padding: .5em .2em;
	font-size: 0.85em;
	/* `#494949` sobre blanco da 9,0:1, la misma tinta del cuerpo. */
	color: #494949;
	text-decoration: none;
}
.ia-pista::before {
	content: counter(pista) ".";
	flex: 0 0 1.6em;
	text-align: right;
	color: #808285;
}
.ia-pista:hover { background: #f2f2f2; text-decoration: underline; }
.ia-pista:focus-visible { outline: 2px solid #494949; outline-offset: -2px; }

/* La que suena. El fondo celeste es el color de marca; `#494949` encima da
 * 4,64:1, que es el mismo par que ya usa el botón del buscador. La negrita
 * NO es el único indicador: `aria-current` lo dice sin depender del color. */
.ia-pista[aria-current] { background: #44c8f5; font-weight: 700; }
.ia-pista[aria-current]::before { color: #494949; }
.ia-pista[aria-current]:hover { background: #2fb4e2; }