/* SoundCheck CR — consola de alertas.
*
* Una herramienta de trabajo, no una página de producto. Las decisiones se
* ordenan por densidad primero: caben 20 filas en una pantalla de portátil.
*
* El color tiene un solo trabajo: significar estado. El rojo de la bandera de
* Costa Rica queda reservado para fallo real, así que cuando aparece, importa.
*/
:root {
/* La paleta sale del logo de SoundCheck.
*
* El azul estructura toda la interfaz. El logo va en negro, que es la
* versión corporativa: con la marca en negro, el color queda disponible para
* significar estado en vez de competir con ella. El naranja de la marca no
* aparece en la interfaz por el mismo motivo. Esto lo mira un banco.
*
* El resto son grises con el mismo tono que el azul, así que el conjunto se
* lee como la marca sin que la marca aparezca por todos lados. */
/* El azul de marca, profundizado. El anterior se aclaraba demasiado contra el
fondo nuevo y los enlaces perdían peso. */
--marca-azul: #10618f;
--marca-negro: #000000;
--tinta: #14202c;
--tinta-suave: #566577;
--tinta-tenue: #8d9aa8;
/* El fondo es más oscuro que el papel de antes y las superficies quedan en
blanco puro. Es lo que hace que una caja se lea como apoyada encima y no
como un rectángulo dibujado sobre el mismo tono. */
--papel: #e8ecf0;
--superficie: #ffffff;
--linea: #e3e8ed;
--linea-fuerte: #c6cfd8;
/* El fondo del encabezado. Más oscuro que `--tinta` —que es color de
texto— para que el blanco encima llegue holgado al contraste que pide
la norma y no justo al mínimo. */
--oscuro: #1d2b3a;
/* --- la elevación, como sistema ----------------------------------------
*
* Tres alturas y no una sombra suelta repetida. La jerarquía de la pantalla
* se ve sin leer una palabra: el encabezado flota sobre todo, los cuadros de
* datos se apoyan, y las cifras quedan casi al ras.
*
* Todas las sombras son del color de la tinta y no negras: una sombra negra
* sobre un fondo azulado se lee sucia. */
--alto-encabezado: 0 18px 40px -22px rgb(20 32 44 / 0.65), 0 2px 6px rgb(20 32 44 / 0.12);
--alto-cuadro: 0 1px 2px rgb(20 32 44 / 0.05), 0 8px 22px -14px rgb(20 32 44 / 0.28);
--alto-ras: 0 1px 2px rgb(20 32 44 / 0.06);
/* El radio, en dos medidas. El grande es para lo que se apoya en el fondo;
el chico para lo que va adentro de una caja —botones, campos—. Una sola
medida para las dos cosas deja los controles con cara de tarjeta. */
--radio: 14px;
--radio-control: 8px;
/* Estado. Cada uno con su fondo tenue para la píldora. */
--activa: #2c6e56;
--dormida: #8ba1ad;
--dormida-fondo: #eaeff2;
--sin-datos: #8a6b3d;
/* El rojo se reserva para una sola cosa: algo que falló de verdad. Por eso
conserva fuerza mientras los demás la pierden. */
--falla: #a02b33;
--falla-fondo: #fbeced;
--acento: var(--marca-azul);
/* Avenir Next primero y el resto de respaldo. Es la que se aprobó en pantalla
—geométrica, de caja alta, con números que no se estorban— y existe en todo
macOS, que es donde se trabaja. En Windows y Linux cae al stack de sistema
de siempre, así que nadie se queda sin tipografía: cambia el carácter, no
la maqueta. */
--ui: "Avenir Next", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
--fila: 2.5rem;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--papel);
color: var(--tinta);
font: 400 0.875rem/1.45 var(--ui);
-webkit-font-smoothing: antialiased;
}
a { color: var(--acento); }
:focus-visible {
outline: 2px solid var(--acento);
outline-offset: 2px;
}
/* --- barra superior ------------------------------------------------------ */
.barra {
display: flex;
align-items: center;
gap: 1.5rem;
/* 3,5 rem y no 3: el logotipo son dos líneas apiladas y necesita alto para
leerse. Es la única medida de la interfaz que la marca manda. */
height: 3.5rem;
padding: 0 1.25rem;
background: var(--superficie);
border-bottom: 1px solid var(--linea);
position: sticky;
top: 0;
z-index: 10;
}
.barra nav { display: flex; gap: 0.25rem; margin-right: auto; }
.barra nav a {
padding: 0.3rem 0.6rem;
border-radius: 4px;
color: var(--tinta-suave);
text-decoration: none;
font-weight: 500;
}
.barra nav a:hover { background: var(--dormida-fondo); color: var(--tinta); }
.barra nav a[aria-current="page"] { background: var(--tinta); color: #fff; }
/* --- el menú de configuración ----------------------------------------------
*
* Arriba a la derecha y separado de la navegación: lo que se toca una vez cada
* varios meses no compite por lugar con lo que se usa todos los días. Es el
* mismo sitio donde lo busca cualquiera que haya usado otra aplicación.
*/
.menu { position: relative; }
.menu > summary {
list-style: none;
display: grid;
place-items: center;
width: 1.9rem;
height: 1.9rem;
border-radius: 5px;
color: var(--tinta-tenue);
cursor: pointer;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover,
.menu[open] > summary { background: var(--dormida-fondo); color: var(--tinta); }
.menu[data-activo] > summary { color: var(--tinta); }
/* El engranaje gira al abrir. Sesenta grados y no una vuelta entera: alcanza
* para que se sienta que respondió, y no distrae a quien abre esto a diario. */
.menu > summary svg { transition: transform 220ms ease; }
.menu[open] > summary svg { transform: rotate(60deg); }
.menu__panel {
position: absolute;
top: calc(100% + 0.45rem);
right: 0;
min-width: 12.5rem;
padding: 0.3rem;
background: var(--superficie);
border: 1px solid var(--linea);
border-radius: 6px;
box-shadow: 0 6px 16px rgba(14, 51, 72, 0.10), 0 1px 3px rgba(14, 51, 72, 0.06);
z-index: 20;
animation: desplegar 120ms ease both;
}
@keyframes desplegar {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
.menu__quien {
margin: 0 0 0.3rem;
padding: 0.45rem 0.6rem 0.55rem;
border-bottom: 1px solid var(--linea);
line-height: 1.3;
}
.menu__quien strong { display: block; font-weight: 600; }
.menu__quien span { font-size: 0.75rem; color: var(--tinta-tenue); }
.menu__panel a,
.menu__panel button {
display: block;
width: 100%;
padding: 0.4rem 0.6rem;
border: 0;
border-radius: 4px;
background: none;
font: inherit;
text-align: left;
text-decoration: none;
color: var(--tinta-suave);
cursor: pointer;
}
.menu__panel a:hover,
.menu__panel button:hover { background: var(--dormida-fondo); color: var(--tinta); }
.menu__panel a[aria-current="page"] { color: var(--tinta); font-weight: 550; }
.menu__panel form {
margin: 0.3rem 0 0;
padding-top: 0.3rem;
border-top: 1px solid var(--linea);
}
/* --- estructura ---------------------------------------------------------- */
main { padding: 1.25rem; }
.encabezado {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 0.875rem;
}
.encabezado h1 {
margin: 0;
font-size: 1.125rem;
font-weight: 650;
letter-spacing: -0.02em;
}
.cuenta { color: var(--tinta-tenue); font-size: 0.8125rem; }
.encabezado .boton { margin-left: auto; }
.boton {
display: inline-block;
padding: 0.4rem 0.75rem;
background: var(--tinta);
color: #fff;
border: 0;
border-radius: var(--radio-control);
font: 500 0.8125rem var(--ui);
text-decoration: none;
cursor: pointer;
}
.boton:hover { background: var(--acento); }
.boton--tenue { background: var(--superficie); color: var(--tinta); border: 1px solid var(--linea-fuerte); }
/* Un menú que se abre desde un botón con texto.
*
* El `.menu` de la barra de arriba es un cuadradito con un engranaje. Este es
* la misma mecánica con otra forma: una acción —exportar— que se cumple de
* tres maneras. Antes eran tres controles al hilo con pesos distintos, y esa
* diferencia sugería una jerarquía que no existe: cuál sirve depende de qué
* vas a hacer con el archivo. */
.menu--descarga > summary {
display: inline-flex;
align-items: center;
gap: 0.35rem;
width: auto;
height: auto;
padding: 0.4rem 0.7rem;
border: 1px solid var(--linea-fuerte);
border-radius: 4px;
background: var(--superficie);
font: 500 0.8125rem var(--ui);
color: var(--tinta);
}
.menu--descarga[open] > summary { background: var(--dormida-fondo); }
.menu--descarga > summary svg { transition: transform 160ms ease; }
.menu--descarga[open] > summary svg { transform: rotate(180deg); }
.menu__panel--descarga { min-width: 17rem; }
/* Cada opción dice para qué sirve: elegir entre tres formatos sin saber qué
* trae cada uno es adivinar, y quien adivina mal descarga tres veces. */
.menu__panel--descarga a { padding: 0.5rem 0.6rem; }
.menu__panel--descarga strong {
display: block;
font-weight: 600;
font-size: 0.8125rem;
color: var(--tinta);
}
.menu__panel--descarga span {
display: block;
margin-top: 0.1rem;
font-size: 0.75rem;
line-height: 1.35;
color: var(--tinta-tenue);
}
.menu__panel--descarga a:hover { background: var(--dormida-fondo); }
.boton--tenue:hover { background: var(--dormida-fondo); color: var(--tinta); }
/* --- la tabla ------------------------------------------------------------ */
.marco {
background: var(--superficie);
border: 1px solid var(--linea);
border-radius: 6px;
overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; }
thead th {
/* Sin `position: sticky`. Con la barra superior ya fija, un encabezado
* pegajoso se apoyaba encima de la primera fila y la tapaba. Para tablas de
* diez o veinte filas no aporta nada; si alguna crece, se resuelve con un
* contenedor con su propio desplazamiento, no con esto. */
background: var(--superficie);
text-align: left;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--tinta-tenue);
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--linea-fuerte);
white-space: nowrap;
}
tbody td {
padding: 0 0.75rem;
height: var(--fila);
border-bottom: 1px solid var(--linea);
vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--papel); }
/* La barra de estado al inicio de la fila: el ojo la sigue hacia abajo. */
tbody td:first-child {
border-left: 3px solid var(--linea);
padding-left: 0.6rem;
}
tr[data-estado="activa"] td:first-child { border-left-color: var(--activa); }
/* Una alerta dormida se apaga entera. Hoy están las 10 así, y la pantalla
* tiene que decir eso, no disimularlo. */
tr[data-estado="inactiva"] { color: var(--tinta-suave); }
tr[data-estado="inactiva"] .nombre { font-weight: 400; }
.codigo {
font: 500 0.8125rem var(--mono);
color: var(--tinta-suave);
letter-spacing: -0.02em;
white-space: nowrap;
}
.nombre { font-weight: 550; }
.nombre a { color: inherit; text-decoration: none; }
.nombre a:hover { text-decoration: underline; }
.numero {
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
}
.tenue { color: var(--tinta-tenue); }
/* --- la tira de niveles --------------------------------------------------- */
/* Cuatro posiciones fijas, siempre FB IG TK X. Una lista separada por comas
* hay que leerla; cuatro casillas en la misma posición se escanean. */
.redes { display: flex; gap: 2px; }
.red {
width: 1.5rem;
height: 1.25rem;
display: grid;
place-items: center;
border-radius: 3px;
font: 600 0.625rem var(--mono);
letter-spacing: 0.02em;
border: 1px solid transparent;
}
.red--activa { background: var(--tinta); color: #fff; }
.red--inactiva { border-color: var(--linea-fuerte); color: var(--tinta-tenue); }
.red--ausente { background: repeating-linear-gradient(
-45deg, transparent, transparent 3px, var(--linea) 3px, var(--linea) 4px); }
/* --- píldoras de estado --------------------------------------------------- */
.estado {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8125rem;
font-weight: 500;
white-space: nowrap;
color: var(--tinta-suave);
}
.estado::before {
content: "";
width: 0.4375rem;
height: 0.4375rem;
border-radius: 50%;
background: currentColor;
flex: none;
}
.estado--activa { color: var(--activa); }
.estado--inactiva { color: var(--tinta-tenue); }
.estado--sin-datos { color: var(--tinta-tenue); font-style: italic; }
.estado--sin-datos::before { background: none; box-shadow: inset 0 0 0 1px currentColor; }
.estado--falla { color: var(--falla); }
/* --- vacío --------------------------------------------------------------- */
.vacio {
padding: 3rem 1.25rem;
text-align: center;
color: var(--tinta-suave);
}
.vacio p { margin: 0 0 1rem; }
/* --- login ---------------------------------------------------------------- */
.entrada {
min-height: 100dvh;
display: grid;
place-items: center;
padding: 1.25rem;
}
.entrada form {
width: 100%;
max-width: 21rem;
background: var(--superficie);
border: 1px solid var(--linea);
border-radius: 8px;
padding: 1.75rem;
}
.entrada .marca { display: block; font-size: 1.0625rem; margin-bottom: 0.25rem; }
.entrada .ayuda { color: var(--tinta-tenue); font-size: 0.8125rem; margin: 0 0 1.5rem; }
label {
display: block;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--tinta-suave);
margin-bottom: 0.3rem;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 0.5rem 0.625rem;
margin-bottom: 1rem;
border: 1px solid var(--linea-fuerte);
border-radius: var(--radio-control);
font: 400 0.875rem var(--ui);
color: var(--tinta);
background: var(--superficie);
}
input:focus { border-color: var(--acento); }
.entrada .boton { width: 100%; padding: 0.5rem; }
/* --- elegir la contraseña propia ----------------------------------------- */
/* La pantalla del enlace usa la misma caja que la de entrar, porque es el mismo
* momento: alguien parado en la puerta. `entrada__cuerpo` es para las que no
* son un formulario —el enlace vencido— y necesitan la caja igual. */
.entrada__cuerpo {
width: 100%;
max-width: 21rem;
background: var(--superficie);
border: 1px solid var(--linea);
border-radius: 8px;
padding: 1.75rem;
}
.acceso__titulo { font-size: 1.0625rem; margin: 0 0 0.5rem; }
.acceso__quien {
margin: 0 0 1.25rem;
font-size: 0.8125rem;
color: var(--tinta-suave);
}
/* La ayuda del campo va pegada a él, no separada como la del encabezado. */
.entrada .ayuda--campo { margin: -0.5rem 0 1rem; font-size: 0.75rem; line-height: 1.45; }
/* El enlace recién emitido.
*
* Es un secreto que se muestra una vez, así que la pantalla tiene que decirlo
* con la forma y no solo con el texto: caja aparte, ancho completo, y el campo
* seleccionable de un clic para que copiarlo no dependa de arrastrar bien. */
.enlace-nuevo {
background: var(--superficie);
border: 1px solid var(--linea-fuerte);
border-radius: 6px;
padding: 0.875rem 1rem;
margin-bottom: 1rem;
}
.enlace-nuevo__titulo { margin: 0 0 0.5rem; font-size: 0.875rem; font-weight: 600; }
.enlace-nuevo__caja {
width: 100%;
margin-bottom: 0.5rem;
font-family: var(--mono);
font-size: 0.75rem;
}
.enlace-nuevo .ayuda { margin: 0; font-size: 0.75rem; line-height: 1.5; color: var(--tinta-tenue); }
.fila--recien { background: var(--dormida-fondo); }
.acceso-celda { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.en-linea { display: inline; margin: 0; }
.error {
background: var(--falla-fondo);
color: var(--falla);
border-radius: 4px;
padding: 0.5rem 0.625rem;
margin-bottom: 1rem;
font-size: 0.8125rem;
}
/* --- pantallas angostas --------------------------------------------------- */
@media (max-width: 40rem) {
.barra { gap: 0.75rem; padding: 0 0.75rem; }
.barra nav { overflow-x: auto; }
main { padding: 0.75rem; }
.oculta-angosto { display: none; }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
/* ==========================================================================
Plataforma: lo que ve un cliente que paga, no una consola de administración.
========================================================================== */
.cabecera {
display: flex;
align-items: flex-end;
gap: 1rem;
padding: 1.5rem 0 1.25rem;
border-bottom: 1px solid var(--linea);
margin-bottom: 1.25rem;
}
.cabecera h1 {
margin: 0;
font-size: 1.5rem;
font-weight: 660;
letter-spacing: -0.03em;
}
.cabecera .bajada {
color: var(--tinta-suave);
font-size: 0.875rem;
margin: 0.15rem 0 0;
}
.cabecera .acciones { margin-left: auto; display: flex; gap: 0.5rem; }
/* Elegir qué mitad se limpia: publicaciones o comentarios.
Son dos enlaces con forma de ficha, como los filtros, porque hacen lo mismo a
la vista —prender uno de dos—. Van pegados a la derecha del encabezado y no
entre los filtros: los filtros recortan lo que se mira, esto cambia qué. */
.mitades {
margin-left: auto;
display: flex;
gap: 0.35rem;
flex-shrink: 0;
}
.mitades .ficha { font-size: 0.8125rem; }
/* --- indicadores ---------------------------------------------------------- */
.indicadores {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
gap: 1px;
background: var(--linea);
border: 0;
border-radius: var(--radio);
box-shadow: var(--alto-ras);
overflow: hidden;
margin-bottom: 1.25rem;
}
.indicador { background: var(--superficie); padding: 1.15rem 1.25rem; }
.indicador dt {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--tinta-tenue);
margin: 0 0 0.3rem;
}
.indicador dd {
margin: 0;
font-size: 1.5rem;
font-weight: 620;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.indicador .pie { font-size: 0.75rem; color: var(--tinta-tenue); font-weight: 400; }
.indicador--negativo dd { color: var(--tinta); }
/* --- paneles -------------------------------------------------------------- */
/* Dos columnas de peso distinto: en la ancha se trabaja y en la angosta se
consulta —la lista y su bitácora, en limpieza, medios y clientes—.
Limpieza, medios y clientes repetían esta misma proporción en un `style=` de
la etiqueta. No agregaba nada, porque acá ya estaba; lo que hacía era ganarle
por especificidad a la regla de abajo, y por eso en 390 px las tres pantallas
se quedaban con sus dos columnas: la de trabajo a 250 px y la de consulta
estrujada en 100, con una palabra por renglón. */
.paneles {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.25rem;
margin-bottom: 1.25rem;
}
@media (max-width: 56rem) { .paneles { grid-template-columns: 1fr; } }
/* Los cuadros se apoyan en el fondo con sombra, no con borde.
*
* Un borde de un píxel dibuja el contorno de una caja; una sombra dice que la
* caja está encima. Con el fondo un tono más oscuro que la superficie, lo
* segundo se lee solo y deja de hacer falta lo primero. */
.panel {
background: var(--superficie);
border: 0;
border-radius: var(--radio);
box-shadow: var(--alto-cuadro);
padding: 1.4rem 1.5rem;
}
/* El título de un cuadro es un rótulo, no un titular: chico, espaciado y en
* tinta tenue. Lo que tiene que destacar adentro son las cifras. */
.panel h2 {
margin: 0 0 0.875rem;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tinta-tenue);
}
.grafico { width: 100%; height: auto; display: block; }
.barra-sentimiento { border-radius: 3px; overflow: hidden; display: block; }
.reparto { list-style: none; margin: 0.875rem 0 0; padding: 0; }
.reparto li {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.3rem 0;
font-size: 0.8125rem;
}
.reparto .punto { width: 0.5rem; height: 0.5rem; border-radius: 2px; flex: none; }
.reparto .valor {
margin-left: auto;
font-variant-numeric: tabular-nums;
font-weight: 550;
}
.reparto .parte { color: var(--tinta-tenue); font-variant-numeric: tabular-nums; min-width: 3rem; text-align: right; }
/* --- filtros -------------------------------------------------------------- */
.filtros {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.75rem;
background: var(--superficie);
border: 0;
border-radius: var(--radio);
box-shadow: var(--alto-ras);
padding: 0.875rem 1rem;
margin-bottom: 1.25rem;
}
.filtros .campo { display: flex; flex-direction: column; gap: 0.25rem; }
.filtros label { margin: 0; }
.filtros select, .filtros input[type="date"] {
padding: 0.35rem 0.5rem;
border: 1px solid var(--linea-fuerte);
border-radius: var(--radio-control);
font: 400 0.8125rem var(--ui);
color: var(--tinta);
background: var(--superficie);
min-width: 9rem;
}
.filtros .boton { margin-left: auto; }
/* El desplegable de cliente del listado de alertas.
*
* Va en la cabecera, al lado de «Crear alerta», y no en una barra de filtros
* propia: es un solo control, y una barra entera para él pesaría más que la
* tabla que filtra. Toma prestada la forma de los `select` de `.filtros` para
* que un desplegable se vea igual en toda la aplicación. */
.filtro-cliente { display: flex; align-items: center; }
.filtro-cliente select {
padding: 0.35rem 0.5rem;
border: 1px solid var(--linea-fuerte);
border-radius: var(--radio-control);
font: 400 0.8125rem var(--ui);
color: var(--tinta);
background: var(--superficie);
min-width: 11rem;
}
/* «Quitar filtros» va pegado a «Aplicar» y no puede competir con él: es la
salida, no la acción. Hasta ahora era un enlace crudo —azul y subrayado— al
lado de un botón sólido, que entre controles se lee como algo que se rompió.
Ahora toma la forma del botón sin su peso: mismo alto, misma tipografía,
tinta apagada y sin fondo hasta que el puntero lo toca. El borde redondeado
además le da forma al anillo de foco, que antes caía como un rectángulo
suelto alrededor del texto. */
.limpiar {
display: inline-flex;
align-items: center;
padding: 0.4rem 0.6rem;
border: 1px solid transparent;
border-radius: 4px;
color: var(--tinta-suave);
font: 500 0.8125rem var(--ui);
text-decoration: none;
}
.limpiar:hover { background: var(--dormida-fondo); color: var(--tinta); }
.filtros .limpiar { align-self: flex-end; }
/* --- estados de solicitud ------------------------------------------------- */
.estado--potencial { color: var(--tinta-tenue); }
.estado--contacto { color: var(--marca-azul); }
.estado--propuesta { color: var(--sin-datos); }
.estado--ganada { color: var(--activa); }
.estado--perdida { color: var(--falla); }
.estado--pausada { color: var(--tinta-tenue); }
.estado--pausada::before { background: none; box-shadow: inset 0 0 0 1px currentColor; }
/* --- ficha (dos columnas: contenido y metadatos) -------------------------- */
.ficha { display: grid; grid-template-columns: 1fr 16rem; gap: 1.25rem; align-items: start; }
@media (max-width: 56rem) { .ficha { grid-template-columns: 1fr; } }
.campo-largo { margin-bottom: 1.25rem; }
.campo-largo h3 {
margin: 0 0 0.3rem;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--tinta-tenue);
}
.campo-largo p { margin: 0; white-space: pre-wrap; }
.campo-largo .sin-completar { color: var(--tinta-tenue); font-style: italic; }
.campo-largo--limite { border-left: 2px solid var(--linea-fuerte); padding-left: 0.75rem; }
.datos { list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; }
.datos li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.35rem 0; border-bottom: 1px solid var(--linea); }
.datos li:last-child { border-bottom: 0; }
.datos .clave { color: var(--tinta-tenue); }
/* --- notas ---------------------------------------------------------------- */
.notas { list-style: none; margin: 0.875rem 0 0; padding: 0; }
.nota { padding: 0.625rem 0; border-bottom: 1px solid var(--linea); }
.nota:last-child { border-bottom: 0; }
.nota p { margin: 0 0 0.25rem; white-space: pre-wrap; }
.nota .firma { font-size: 0.75rem; color: var(--tinta-tenue); }
textarea {
width: 100%;
min-height: 4.5rem;
padding: 0.5rem 0.625rem;
border: 1px solid var(--linea-fuerte);
border-radius: 4px;
font: 400 0.875rem/1.45 var(--ui);
color: var(--tinta);
resize: vertical;
}
textarea:focus { border-color: var(--acento); }
/* --- vacío con dirección --------------------------------------------------- */
.vacio h2 { margin: 0 0 0.4rem; font-size: 1rem; font-weight: 620; color: var(--tinta); }
.vacio .detalle { font-size: 0.8125rem; max-width: 26rem; margin: 0 auto 1rem; }
/* --- la marca --------------------------------------------------------------
*
* El arte original, servido como archivo, siempre en negro.
*
* El logotipo son dos líneas apiladas —SOUND sobre CHECK— y esa proporción no
* se toca: es el logo, no un elemento de la interfaz. Lo que se ajusta es el
* alto de la barra para que quepa a un tamaño en el que se lea.
*/
.marca-enlace { text-decoration: none; color: inherit; }
.marca { display: inline-flex; align-items: center; }
/* 1930×887 en el original. A 2,25 rem de alto son 78 px de ancho, y cada línea
de la palabra queda con 16 px de altura de mayúscula: se lee. */
.marca__logo { height: 2.25rem; width: auto; flex: none; display: block; }
.marca__signo { height: 1.75rem; width: auto; flex: none; display: block; }
/* En la entrada la marca es el encabezado, no un adorno de la barra. */
.entrada .marca { margin-bottom: 0.25rem; }
.entrada .marca__logo { height: 3.5rem; }
/* --- gráficos ------------------------------------------------------------- */
.grafico { width: 100%; height: auto; display: block; }
.grafico--tiempo { height: 210px; }
/* --- el reparto: un corte, una barra ---------------------------------------
*
* Reemplazó a una barra por categoría medida contra la más grande. Con estos
* datos aquello no dibujaba nada —cuando uno se lleva el 85 %, el resto queda
* en dos píxeles— y encima el SVG se declaraba a 460 px fijos para que su letra
* no se estirara, así que dejaba un cuarto del cuadro en blanco. Acá la barra
* *es* el ancho del cuadro y no hay medida que se quede corta.
*
* Va en HTML: la leyenda se acomoda sola en las líneas que haga falta, cosa que
* en SVG habría que medir y cortar a mano. */
.reparto__barra {
display: flex;
height: 1.875rem;
border-radius: 3px;
overflow: hidden;
/* El contorno es para el extremo claro de la rampa: sin él, el último trozo
se apoya contra el blanco de la tarjeta y la barra parece terminar antes. */
box-shadow: inset 0 0 0 1px rgb(20 32 44 / 0.08);
}
.reparto__trozo {
display: flex;
align-items: center;
justify-content: center;
/* Un trozo del 0,4 % existe igual: es un hilo, pero está. */
min-width: 2px;
}
.reparto__trozo b {
font-size: 0.6875rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.reparto__leyenda {
display: flex;
flex-wrap: wrap;
gap: 0.3rem 1.25rem;
list-style: none;
margin: 0.625rem 0 0;
padding: 0;
font-size: 0.75rem;
}
/* La identidad la lleva acá y no adentro de la barra: en un trozo del 3 % no
cabe un nombre, y medio nombre recortado es peor que ninguno. */
.reparto__clave {
display: flex;
align-items: baseline;
gap: 0.35rem;
color: var(--tinta-suave);
text-decoration: none;
border-radius: var(--radio-control);
}
.reparto__clave i {
width: 8px;
height: 8px;
border-radius: 2px;
flex: none;
transform: translateY(-1px);
/* Mismo motivo que el contorno de la barra: los tonos claros de la rampa
desaparecen sobre blanco y la clave se queda sin su color. */
box-shadow: inset 0 0 0 1px rgb(20 32 44 / 0.12);
}
.reparto__clave b { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.reparto__clave em { color: var(--tinta-tenue); font-style: normal; font-variant-numeric: tabular-nums; }
/* Solo las que filtran son enlaces, así que solo esas responden al mouse. */
a.reparto__clave { cursor: pointer; }
a.reparto__clave:hover { color: var(--acento); }
a.reparto__clave:hover b { color: var(--acento); }
a.reparto__clave:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
/* La leyenda existe porque hay tres series: la identidad no puede depender
* solo del color. Los nombres van en tinta, no en el color de su serie. */
.leyenda {
display: flex;
flex-wrap: wrap;
gap: 1rem;
list-style: none;
margin: 0.75rem 0 0;
padding: 0;
font-size: 0.8125rem;
color: var(--tinta-suave);
}
.leyenda li { display: flex; align-items: center; gap: 0.4rem; }
/* Los hitos numerados, debajo del gráfico. Con seis marcas en un mes, el texto
* sobre el dibujo se superpone y no se lee ninguno; un número siempre entra.
*
* La caja se dibuja aunque esté vacía. El borde de arriba vive acá y no en la
* lista porque antes, sin hitos, no había ni borde ni encabezado: la pantalla
* ofrecía un formulario para crear y ninguna pista de qué existía ni de cómo se
* borra. */
.hitos-caja {
margin: 1rem 0 0;
padding: 0.875rem 0 0;
border-top: 1px solid var(--linea);
}
.hitos__titulo {
margin: 0;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--tinta-tenue);
}
.hitos__titulo .tenue { font-weight: 400; letter-spacing: 0; }
.hitos__vacio {
margin: 0.4rem 0 0;
font-size: 0.8125rem;
color: var(--tinta-tenue);
}
.hitos {
list-style: none;
margin: 0.4rem 0 0;
padding: 0;
font-size: 0.8125rem;
}
/* La vuelta desde la vista de un día. Va pegada al gráfico que se acaba de
acotar, que es donde uno mira cuando se pregunta cómo salir de acá. */
.volver-dia {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.625rem;
margin: 0 0 0.75rem;
font-size: 0.8125rem;
}
.hitos li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.25rem 0; }
.hito__numero {
flex: none;
width: 1.125rem;
height: 1.125rem;
border-radius: 50%;
background: var(--tinta);
color: #fff;
font-size: 0.6875rem;
font-weight: 600;
display: grid;
place-items: center;
}
.hitos .tenue { margin-left: auto; white-space: nowrap; }
.anotar {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.6rem;
margin-top: 1rem;
padding-top: 0.875rem;
border-top: 1px solid var(--linea);
}
.anotar .campo { display: flex; flex-direction: column; gap: 0.25rem; }
.anotar .campo--ancho { flex: 1 1 14rem; }
.anotar input[type="text"], .anotar input[type="date"] {
margin: 0;
padding: 0.35rem 0.5rem;
font-size: 0.8125rem;
}
/* ==========================================================================
El banco de trabajo
========================================================================== */
/* --- profundidad ----------------------------------------------------------
* Sobrio no es plano. Una sombra corta y de muy baja opacidad separa las capas
* sin llamar la atención: se nota que hay una jerarquía, no se nota la sombra.
*/
.panel, .marco, .indicadores {
box-shadow: 0 1px 2px rgba(14, 51, 72, 0.04), 0 1px 1px rgba(14, 51, 72, 0.03);
}
/* Los números son el contenido, no una etiqueta más. */
.indicador dd { font-size: 1.75rem; font-weight: 660; letter-spacing: -0.04em; }
.indicador { transition: background 120ms ease; }
.indicador:hover { background: var(--papel); }
.variacion { display: inline-flex; align-items: baseline; gap: 0.3rem; font-weight: 550; }
.variacion span { font-weight: 400; color: var(--tinta-tenue); }
/* La flecha dice la dirección, no si está bien o mal: que una alerta suba de
* volumen no es bueno ni malo por sí solo. Por eso ambas van en tinta. */
.variacion--sube, .variacion--baja { color: var(--tinta-suave); }
.pista {
font-weight: 400;
text-transform: none;
letter-spacing: normal;
color: var(--tinta-tenue);
margin-left: 0.5rem;
}
/* --- gráficos que son controles ------------------------------------------- */
.grafico--tiempo .dia { cursor: pointer; transition: fill 100ms ease; }
.grafico--tiempo .dia:hover { fill: rgba(14, 51, 72, 0.07); }
/* --- fichas de filtro activo ----------------------------------------------- */
.fichas-filtro { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: -0.5rem 0 1.25rem; }
.ficha {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.2rem 0.6rem;
border: 1px solid var(--linea-fuerte);
border-radius: 999px;
background: var(--superficie);
font-size: 0.8125rem;
color: var(--tinta-suave);
text-decoration: none;
transition: border-color 120ms ease, color 120ms ease;
}
.ficha:hover { border-color: var(--acento); color: var(--acento); }
.ficha span { color: var(--tinta-tenue); font-size: 0.9375rem; line-height: 1; }
/* Encendida, la píldora se pinta del color de lo que hace.
*
* Antes se pintaban todas del mismo casi-negro, y una fila de filtros
* encendidos era una fila de manchas oscuras iguales. Ahora el color dice qué
* se está mirando: azul de marca para red, formato y orden; y en polaridad, el
* color que ese sentimiento tiene en los gráficos, para que el filtro y lo que
* filtra sean la misma cosa a la vista.
*
* El blanco sobre cada fondo pasa el contraste de texto: 6,5 sobre el azul,
* 7,7 sobre el rojo, 6,5 sobre el verde. El neutro es el único que no se puede
* usar tal como está en los gráficos —#6e8794 con letra blanca da 3,7 y hace
* falta 4,5— así que la píldora usa el gris azulado oscuro de la interfaz, que
* es el mismo tono un paso más abajo. */
.ficha--activa { background: var(--acento); border-color: var(--acento); color: #fff; }
.ficha--activa:hover { color: #fff; border-color: var(--acento); }
.ficha--neg.ficha--activa { background: #9c2733; border-color: #9c2733; }
.ficha--neu.ficha--activa { background: var(--tinta-suave); border-color: var(--tinta-suave); }
.ficha--pos.ficha--activa { background: #0b6d4a; border-color: #0b6d4a; }
/* El punto encendido pasa a blanco: sobre su propio color no se vería, y el
* color ya lo está diciendo la píldora entera. */
.ficha--activa .punto { background: #fff !important; }
.ficha--activa .ficha__cuenta { color: rgba(255, 255, 255, 0.75); }
.filtros .campo--busca { flex: 1 1 12rem; }
.filtros input[type="text"] { margin: 0; padding: 0.35rem 0.5rem; font-size: 0.8125rem; width: 100%; }
/* --- las menciones -------------------------------------------------------- */
.panel--menciones { padding-bottom: 0.5rem; }
.menciones__cabecera {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 0.5rem;
}
.menciones__cabecera h2 { margin: 0; }
.menciones__cabecera .cuenta { text-transform: none; letter-spacing: normal; margin-left: 0.4rem; }
.menciones__controles { display: flex; gap: 0.4rem; margin-left: auto; }
.menciones { list-style: none; margin: 0; padding: 0; }
.mencion {
display: flex;
gap: 0.75rem;
padding: 0.875rem 0;
border-bottom: 1px solid var(--linea);
}
.mencion:last-child { border-bottom: 0; }
.mencion--atendida { opacity: 0.55; }
/* Una barra de color por mención, del ancho de un cabello: dice el sentimiento
* sin agregar una mancha más a una lista de veinticinco. */
.mencion__marca { flex: none; width: 3px; border-radius: 2px; background: var(--linea); }
.mencion__marca--neg { background: #9c2733; }
.mencion__marca--neu { background: #6e8794; }
.mencion__marca--pos { background: #0b6d4a; }
.mencion__marca--sin { background: #c9d5db; }
.mencion__cuerpo { min-width: 0; flex: 1; }
.mencion__meta { margin: 0 0 0.25rem; font-size: 0.8125rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.mencion__texto {
margin: 0 0 0.4rem;
line-height: 1.5;
/* Tres líneas y corta: una lista donde cada fila mide distinto es imposible
* de barrer con la vista. El texto completo está en el original. */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mencion__pie {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.875rem;
font-size: 0.8125rem;
color: var(--tinta-tenue);
}
.mencion__pie .numero { font-weight: 550; color: var(--tinta-suave); }
.en-linea { display: inline; margin: 0; }
.en-linea button {
background: none;
border: 0;
padding: 0;
font: inherit;
color: var(--acento);
cursor: pointer;
text-decoration: underline;
}
.paginas {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 0 0.5rem;
border-top: 1px solid var(--linea);
}
.paginas .cuenta { margin-right: auto; }
/* --- entrada en escena -----------------------------------------------------
* Una sola animación, corta, al cargar. Lo suficiente para que la pantalla se
* sienta viva y no tanto como para estorbar la quinta vez que se abre.
*/
@keyframes aparecer {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
.indicadores, .paneles, .panel--menciones { animation: aparecer 260ms ease both; }
.paneles { animation-delay: 40ms; }
.panel--menciones { animation-delay: 80ms; }
@media (prefers-reduced-motion: reduce) {
.indicadores, .paneles, .panel--menciones { animation: none; }
}
.aviso {
margin: -0.5rem 0 1.25rem;
padding: 0.6rem 0.75rem;
border-left: 3px solid var(--linea-fuerte);
background: var(--superficie);
border-radius: 0 4px 4px 0;
font-size: 0.8125rem;
color: var(--tinta-suave);
}
/* --- segundo nivel de navegación -------------------------------------------
* Aparece solo en las secciones que agrupan más de una pantalla. Una sección
* con un solo destino no necesita un menú para elegirlo.
*/
.subnav {
display: flex;
gap: 0.25rem;
padding: 0 1.25rem;
background: var(--superficie);
border-bottom: 1px solid var(--linea);
}
.subnav a {
padding: 0.55rem 0.7rem;
color: var(--tinta-suave);
text-decoration: none;
font-size: 0.8125rem;
font-weight: 500;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.subnav a:hover { color: var(--tinta); }
.subnav a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--tinta); }
@media (max-width: 40rem) { .subnav { padding: 0 0.75rem; overflow-x: auto; } }
/* Mientras llega la zona nueva, lo viejo se atenúa: la pantalla avisa que está
* trabajando sin vaciarse, que es lo que hace sentir que algo se rompió. */
#resultados { transition: opacity 120ms ease; }
#resultados[aria-busy="true"] { opacity: 0.45; pointer-events: none; }
/* --- la leyenda deja de ser texto muerto y pasa a filtrar ------------------- */
.leyenda button {
display: flex;
align-items: center;
gap: 0.4rem;
background: none;
border: 0;
padding: 0.15rem 0.4rem;
border-radius: 4px;
font: inherit;
color: var(--tinta-suave);
cursor: pointer;
}
.leyenda button:hover { background: var(--dormida-fondo); color: var(--tinta); }
.leyenda button[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.leyenda button[aria-pressed="true"] .punto { box-shadow: 0 0 0 1.5px #fff; }
/* --- excluir --------------------------------------------------------------- */
.aviso--accion { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.aviso--accion form { margin-left: auto; }
/* ==========================================================================
El panel, segunda vuelta
========================================================================== */
/* --- cabeceras de panel ----------------------------------------------------
* Título a la izquierda, pista a la derecha. Antes la pista iba pegada al
* título y en un panel angosto lo empujaba a dos renglones.
*/
.panel__cabecera {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.875rem;
}
.panel__cabecera h2 { margin: 0; }
.panel__cabecera .pista { margin: 0; text-align: right; }
.panel--ancho { margin-bottom: 1.25rem; }
/* --- los cuatro indicadores, con la misma forma ----------------------------
*
* Los cuatro traen una cifra del mismo tamaño y peso, y el detalle abajo. El
* ojo compara tamaños de letra antes que significados: con un rango de fechas
* a 1rem al lado de un número a 1,75rem, la fila se lee torcida aunque cada
* pieza esté bien.
*/
.indicador dd small {
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0;
color: var(--tinta-tenue);
margin-left: 0.1rem;
}
.indicador .pie { display: block; }
.pie__marca { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--tinta-suave); }
.pie__marca .punto {
width: 0.4375rem;
height: 0.4375rem;
border-radius: 50%;
flex: none;
}
/* --- el lienzo de los gráficos ---------------------------------------------
* La altura se fija acá y no en el guion: la librería mide el contenedor al
* arrancar, y un contenedor sin altura le da cero y no dibuja nada.
*/
.lienzo { width: 100%; height: 220px; }
.lienzo--alto { height: 300px; }
@media (max-width: 56rem) { .lienzo--alto { height: 240px; } }
/* --- el tablero -------------------------------------------------------------
*
* Dos gráficos apilados a la izquierda y los repartos en una columna al
* costado que corre a lo largo de los dos. Todo el período entra en una
* pantalla; con los tres cuadros a lo ancho había que bajar tres veces para
* ver lo mismo.
*/
/* Los dos repartos, uno al lado del otro y del mismo ancho.
*
* Antes esto era 2fr/1fr: los gráficos a la izquierda y una columna angosta al
* costado que corría a lo largo de las dos filas. Esa columna era más alta que
* el gráfico de volumen y el sobrante estiraba la primera fila, abriendo un
* hueco entre dos líneas de tiempo que comparten el eje. Los gráficos se fueron
* a su propio cuadro de ancho completo y acá quedaron dos cuadros hermanos, que
* es lo que siempre fueron: dos formas de repartir el mismo total.
*
* `align-items: start` para que el más corto no se estire al alto del otro. */
.tablero {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem;
margin-bottom: 1.25rem;
/* Sin `align-items: start`: los dos cuadros toman el alto del más alto.
*
* Con cada uno a su alto natural quedaban muy dispares —uno tiene tres grupos
* y el otro cuatro— y dos cajas hermanas de alto distinto se leen como si una
* estuviera cortada. Igualarlas es la mitad del arreglo; la otra mitad es
* repartir el sobrante adentro, abajo. */
}
/* Las cajas del mismo alto, el contenido arrancando arriba en las dos.
*
* Se probó repartir el sobrante entre los grupos con `space-between` y quedó
* peor que el problema: cuando un cuadro tiene tres grupos y el otro cuatro con
* más filas, la diferencia son cientos de píxeles que se van a dos huecos, y el
* cuadro se lee como tres bloques sueltos flotando en blanco. El aire al pie de
* una caja es aire; el aire en el medio parece que algo no cargó. */
.tablero > .panel { display: flex; flex-direction: column; }
.tablero > .panel > .panel__cabecera { flex: none; }
.tablero > .panel > .reparto-grupo:last-child { margin-bottom: 0; }
@media (max-width: 62rem) {
.tablero { grid-template-columns: 1fr; }
}
.reparto-grupo + .reparto-grupo {
margin-top: 1rem;
padding-top: 0.875rem;
border-top: 1px solid var(--linea);
}
.reparto-grupo h3 {
margin: 0 0 0.5rem;
font-size: 0.75rem;
font-weight: 550;
color: var(--tinta-suave);
}
/* --- voces, en dos lados ----------------------------------------------------
*
* Detractores a la izquierda porque es lo que se atiende primero. El punto de
* color en el título no es adorno: es la misma clave que usan los gráficos, y
* ata las dos tablas a la paleta del sentimiento sin repetir la leyenda.
*/
.paneles--mitades { grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 62rem) { .paneles--mitades { grid-template-columns: 1fr; } }
.cuenta--suelta { display: block; margin: -0.35rem 0 0.75rem; }
.panel__cabecera h2 { display: flex; align-items: center; gap: 0.4rem; }
.panel__cabecera h2 .punto {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
flex: none;
}
/* `display: flex` NO va sobre un `
`.
*
* Es lo que rompía este cuadro. Una celda con `display: flex` deja de ser una
* celda: el navegador la saca de la tabla y envuelve lo que quedó suelto en
* celdas anónimas. Como acá había tres celdas así, la fila terminaba con menos
* celdas que encabezados y las dos últimas se apilaban una debajo de la otra.
* Por eso el nombre aparecía en un renglón, los números en otro y las dos
* barras en un tercero, sin que ninguna columna coincidiera con su título.
*
* La regla para no repetirlo: el `
` se queda como celda y el flex va en un
* `` adentro. */
.voces { width: 100%; table-layout: fixed; }
.voces td, .voces th { padding: 0 0.5rem; }
.voces td { height: 2.4rem; }
.voces td:first-child, .voces th:first-child { border-left: 0; padding-left: 0; }
.voces td:last-child, .voces th:last-child { padding-right: 0; }
/* Los anchos, de derecha a izquierda: primero lo que tiene que caber sin
* partirse, y lo que sobra se lo lleva la cuenta. El encabezado del peso se
* pisaba con el de al lado porque las dos columnas de la derecha estaban
* apretadas a 4,75 y 7 rem con títulos que no entraban. */
.voces th:nth-child(2) { width: 2.75rem; }
.voces th:nth-child(3) { width: 5.25rem; }
.voces__peso-col { width: 9.5rem; }
.voces__postura-col { width: 4.5rem; }
/* Con el cuadro a media pantalla, la red al lado del nombre es lo primero que
* sobra: «El Oráculo de Costa Rica» importa y «Facebook» se deduce del ícono
* de la publicación. Se esconde antes de que el nombre empiece a cortarse. */
@media (max-width: 82rem) {
.voces .codigo { display: none; }
}
/* Con `table-layout: fixed` una celda apretada parte el texto en dos renglones
* y la fila crece al doble. Los números no se parten. */
.voces td.numero, .voces th.numero { white-space: nowrap; }
.voces__cuenta { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.voces__cuenta a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.voces__cuenta .codigo { font-size: 0.6875rem; flex: none; }
.voces th.numero, .voces__peso-col { font-weight: 500; }
/* La barra del peso: qué parte del alcance total se lleva esta cuenta.
*
* Es lo único largo de la fila porque es lo que ordena la tabla y lo que
* contesta "cuánto pesa". La escala es común a los dos cuadros —el 100 % de
* largo es la cuenta más pesada de las veinte, esté del lado que esté— así que
* una barra larga en detractores y una larga en aliados significan lo mismo.
*
* Un solo color por cuadro, rojo o verde, nunca los dos en la misma barra:
* pegados dan 4.0 de separación en daltonismo rojo-verde, que es lo mismo que
* pintarlos del mismo color. Acá el color es redundante —el título ya dice de
* qué lado está el cuadro— así que no carga información que se pueda perder. */
.peso { display: flex; align-items: center; gap: 0.5rem; }
.peso__barra {
display: flex;
flex: 1;
height: 8px;
border-radius: 4px;
overflow: hidden;
background: var(--dormida-fondo);
min-width: 2.5rem;
}
/* El mínimo de 3 px es lo que separa «casi nada» de «nada».
*
* El reparto del alcance es de cola larga: la cuenta más pesada se lleva el
* 14 % y la décima el 0,2 %, así que a escala lineal las últimas filas quedan
* por debajo de un píxel y se ven exactamente igual que una fila vacía. Que se
* vean chiquitas es el dato —esas cuentas casi no pesan—; que no se vean sería
* decir que no existen. */
.peso__barra > span { display: block; height: 100%; border-radius: 4px; min-width: 3px; }
.peso__valor {
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
color: var(--tinta-suave);
min-width: 2.6rem;
text-align: right;
flex: none;
}
/* La postura es un número y no una barra: dos barras por fila que miden cosas
* distintas y se ven iguales no son el doble de información, son la mitad. */
.postura {
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
color: var(--tinta-suave);
text-decoration: none;
}
.postura:hover { color: var(--acento); text-decoration: underline; }
/* --- la concentración ------------------------------------------------------
*
* "5 429 cuentas participaron. Las 20 de estos dos cuadros se llevan el 55 %"
* era una frase suelta en gris: cierta, útil, y sin ninguna forma que la
* hiciera mirar. Convertida en el pie de una barra, la frase explica la barra
* y la barra muestra la frase. De paso deja a la vista la escala con la que se
* leen los dos cuadros de abajo. */
.concentracion__nota {
margin: 0.5rem 0 0;
font-size: 0.75rem;
line-height: 1.5;
color: var(--tinta-tenue);
max-width: 46rem;
}
.etiqueta-medio {
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--tinta-tenue);
border: 1px solid var(--linea-fuerte);
border-radius: 3px;
padding: 0.05rem 0.25rem;
flex: none;
}
/* --- el buscador, ahora dentro de las publicaciones ------------------------- */
.oculto {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.buscador {
display: flex;
align-items: stretch;
margin-left: auto;
border: 1px solid var(--linea-fuerte);
border-radius: 5px;
background: var(--superficie);
overflow: hidden;
transition: border-color 120ms ease;
}
.buscador:focus-within { border-color: var(--acento); }
.buscador input[type="search"] {
width: 17rem;
max-width: 45vw;
margin: 0;
padding: 0.35rem 0.6rem;
border: 0;
font: 400 0.8125rem var(--ui);
color: var(--tinta);
background: none;
}
.buscador input:focus { outline: none; }
.buscador button {
display: grid;
place-items: center;
width: 2rem;
border: 0;
border-left: 1px solid var(--linea);
background: var(--papel);
color: var(--tinta-suave);
cursor: pointer;
}
.buscador button:hover { background: var(--dormida-fondo); color: var(--tinta); }
/* --- los controles de la lista ---------------------------------------------
* Cuatro grupos rotulados en vez de una fila de fichas sueltas: sin el rótulo,
* "Facebook", "Video" y "Negativo" se leen como la misma clase de cosa.
*/
/* Un renglón por dimensión y los títulos alineados en una columna.
*
* Todo esto era una sola línea con las tres dimensiones seguidas, envolviendo
* sola contra el borde derecho. Catorce píldoras y cuatro títulos del mismo
* tamaño, sin ningún borde que ordenara la lectura: para encontrar «Polaridad»
* había que leer las píldoras de formato una por una. En columna, los títulos
* arman un borde vertical y cada dimensión se lee de un vistazo. */
/* Una sola barra para todo lo que decide qué se ve.
*
* Antes eran dos superficies: una franja con el buscador y el orden, y otra
* debajo con las tres dimensiones. Dos cajas para un solo trabajo, y encima
* separadas de una forma que no significaba nada.
*
* Ahora es una caja con dos zonas y una línea fina entre ellas, y esa línea sí
* significa algo: arriba lo que no descarta nada —buscar, ordenar—, abajo lo
* que sí —red, formato, polaridad—. Es la única división que importa acá, y
* antes era justo la que no estaba dibujada. */
.barra-filtros {
background: var(--papel);
border: 1px solid var(--linea);
border-radius: 6px;
margin-bottom: 0.75rem;
}
.barra-filtros__arriba {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
padding: 0.6rem 0.75rem;
border-bottom: 1px solid var(--linea);
}
/* Dentro de la barra el buscador arranca pegado a la izquierda —el `auto` que
* lo empujaba a la derecha era para la cabecera vieja— y el orden se va al
* otro extremo. */
.barra-filtros__arriba .buscador { margin-left: 0; flex: 0 1 22rem; }
.barra-filtros__arriba .buscador input[type="search"] { width: 100%; }
.barra-filtros__arriba .orden { margin-left: auto; }
.controles {
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 0.6rem 0.75rem;
}
.controles__fila {
display: flex;
align-items: baseline;
gap: 0.6rem;
}
.controles__fichas { display: flex; flex-wrap: wrap; gap: 0.3rem; flex: 1; min-width: 0; }
.controles__titulo {
flex: none;
/* El ancho fijo es lo que alinea los tres títulos. Sin él, cada uno empieza
donde termina el anterior y la columna no existe. */
width: 4.5rem;
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--tinta-tenue);
/* Baja la línea de base de la mayúscula chica hasta la de las píldoras. */
position: relative;
top: 0.1rem;
}
/* El orden, que no es un filtro.
*
* Las mismas píldoras que los filtros —funcionaban y se entendían— pero en
* otro lugar: arriba, al lado del título de la lista que ordena. Un filtro
* descarta publicaciones; el orden no descarta ninguna, y en la misma fila las
* dos cosas se leían igual. */
.orden { display: flex; align-items: center; gap: 0.4rem; flex: none; }
.orden__titulo {
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--tinta-tenue);
margin-right: 0.15rem;
}
.orden .ficha { padding: 0.2rem 0.55rem; }
.controles .ficha { padding: 0.2rem 0.55rem; }
.controles .ficha .punto {
width: 0.4375rem;
height: 0.4375rem;
border-radius: 50%;
flex: none;
}
.ficha__cuenta { font-size: 0.75rem; color: var(--tinta-tenue); font-variant-numeric: tabular-nums; }
.ficha--activa .ficha__cuenta { color: rgba(255, 255, 255, 0.7); }
.ficha--activa .punto { box-shadow: 0 0 0 1.5px #fff; }
.ficha--quitar span { color: var(--tinta-tenue); font-size: 0.9375rem; line-height: 1; }
/* --- las acciones de cada publicación ---------------------------------------
* En su propia columna, a la derecha. Antes iban en el pie mezcladas con las
* interacciones y las vistas, y se leían como un dato más de la fila en vez de
* como lo único que se puede hacer.
*/
.mencion__acciones {
flex: none;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.25rem;
padding-left: 0.75rem;
/* Aparecen al pasar por encima. Veinticinco filas con tres botones cada una
* son setenta y cinco botones compitiendo con el texto, que es lo que
* realmente hay que leer. */
opacity: 0;
transition: opacity 120ms ease;
}
.mencion:hover .mencion__acciones,
.mencion:focus-within .mencion__acciones { opacity: 1; }
/* Sin hover —un teléfono, una tableta— no hay forma de que aparezcan. */
@media (hover: none) { .mencion__acciones { opacity: 1; } }
.mencion__acciones form { margin: 0; }
.accion {
display: flex;
align-items: center;
gap: 0.35rem;
width: 100%;
padding: 0.25rem 0.5rem;
border: 1px solid var(--linea);
border-radius: 4px;
background: var(--superficie);
font: 500 0.75rem var(--ui);
color: var(--tinta-suave);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.accion:hover { border-color: var(--linea-fuerte); background: var(--papel); color: var(--tinta); }
.accion--quitar:hover { border-color: var(--falla); color: var(--falla); background: var(--falla-fondo); }
.accion svg { flex: none; }
@media (max-width: 40rem) {
.mencion { flex-wrap: wrap; }
.mencion__acciones { flex-direction: row; padding: 0.5rem 0 0 0.75rem; }
.accion { width: auto; }
.buscador { margin-left: 0; width: 100%; }
.buscador input[type="search"] { width: 100%; max-width: none; }
.controles__grupo--fin { margin-left: 0; }
}
/* --- opciones en botones ---------------------------------------------------
*
* Casillas y radios de verdad, con el control nativo escondido y la etiqueta
* disfrazada de botón. No es decoración: el navegador se encarga de la
* selección, del teclado y del envío, y no hace falta una línea de JavaScript
* para que un grupo de redes funcione.
*/
.opciones { border: 0; padding: 0; margin: 1.25rem 0 0; }
.opciones legend {
padding: 0;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--tinta-suave);
margin-bottom: 0.5rem;
}
.opciones__fila { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.opcion { margin: 0; cursor: pointer; }
.opcion input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.opcion span {
display: inline-block;
padding: 0.35rem 0.75rem;
border: 1px solid var(--linea-fuerte);
border-radius: 999px;
background: var(--superficie);
font-size: 0.8125rem;
color: var(--tinta-suave);
transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.opcion:hover span { border-color: var(--acento); color: var(--acento); }
.opcion input:checked + span {
background: var(--tinta);
border-color: var(--tinta);
color: #fff;
}
/* El foco tiene que verse: con el control escondido, el navegador no lo dibuja
* solo y navegar con el teclado quedaría a ciegas. */
.opcion input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
/* --- limpieza de datos ------------------------------------------------------ */
.menciones--limpieza .mencion { align-items: flex-start; }
.marcar { flex: none; display: flex; align-items: center; padding-top: 0.15rem; cursor: pointer; }
.marcar input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.marcar__caja {
display: block;
width: 1.05rem;
height: 1.05rem;
border: 1px solid var(--linea-fuerte);
border-radius: 3px;
background: var(--superficie);
transition: border-color 120ms ease, background 120ms ease;
}
.marcar:hover .marcar__caja { border-color: var(--acento); }
.marcar input:checked + .marcar__caja {
background: var(--tinta);
border-color: var(--tinta);
/* La palomita se dibuja con un fondo y no con un carácter: una tipografía que
* no traiga el glifo dejaría la casilla marcada indistinguible de la vacía. */
background-image: linear-gradient(45deg, transparent 45%, #fff 45%, #fff 56%, transparent 56%),
linear-gradient(-45deg, transparent 58%, #fff 58%, #fff 69%, transparent 69%);
background-size: 62% 62%, 62% 62%;
background-position: 22% 68%, 46% 55%;
background-repeat: no-repeat;
}
.marcar input:focus-visible + .marcar__caja { outline: 2px solid var(--acento); outline-offset: 2px; }
/* La barra de acciones va arriba y pegada al desplazarse. Al final de
* veinticinco filas quedaba fuera de pantalla: marcabas una mención y no pasaba
* nada visible, que es exactamente lo que parece un botón roto. */
.acciones-lote {
position: sticky;
top: 3rem;
z-index: 5;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin: 0 -1.125rem 0.25rem;
padding: 0.6rem 1.125rem;
background: var(--superficie);
border-top: 1px solid var(--linea);
border-bottom: 1px solid var(--linea);
}
.acciones-lote__cuenta {
margin-right: auto;
font-size: 0.8125rem;
color: var(--tinta-tenue);
font-variant-numeric: tabular-nums;
}
/* Con nada marcado los dos botones no hacen nada. Se atenúan en vez de
* desaparecer: si se van, la barra cambia de alto y la lista salta. */
form[data-lote]:not(.con-marcadas) .acciones-lote .boton {
opacity: 0.45;
pointer-events: none;
}
form[data-lote].con-marcadas .acciones-lote__cuenta { color: var(--tinta); font-weight: 550; }
.marcar--todas { gap: 0.4rem; font-size: 0.8125rem; color: var(--tinta-suave); }
.marcar--todas:hover { color: var(--tinta); }
/* --- limpiar por criterio ---------------------------------------------------
* La única forma que escala cuando el ruido son miles. El número va en el
* botón: nadie tiene que adivinar cuántas se lleva.
*/
.por-criterio {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
padding: 0.7rem 0.85rem;
background: var(--papel);
border: 1px solid var(--linea);
border-left: 3px solid var(--sin-datos);
border-radius: 0 4px 4px 0;
font-size: 0.8125rem;
color: var(--tinta-suave);
}
.por-criterio .boton { margin-left: auto; }
.boton--riesgo { background: var(--falla); }
.boton--riesgo:hover { background: #86222a; }
.mencion__texto--corto { -webkit-line-clamp: 2; margin-bottom: 0; }
.menciones--limpieza .mencion { padding: 0.6rem 0; align-items: flex-start; }
.menciones--limpieza .mencion .numero { flex: none; padding-left: 0.75rem; font-size: 0.8125rem; }
.notas--exclusiones { max-height: 26rem; overflow-y: auto; }
/* --- acciones dentro de una fila de tabla ----------------------------------
*
* Esto vivía sobre el `
` y lo sacaba de la tabla — el mismo defecto que
* desarmaba el cuadro de voces. Ahora el `
` es `.acciones` y el flex va en
* un `` adentro. */
.acciones-fila {
display: flex;
justify-content: flex-end;
gap: 0.3rem;
white-space: nowrap;
}
.acciones-fila form { margin: 0; }
.acciones-fila .accion { width: auto; justify-content: center; }
/* La fila que se está editando queda señalada: sin eso, con veintisiete medios
* en pantalla, no hay forma de saber a cuál corresponde el formulario. */
tr.fila--editando td { background: var(--dormida-fondo); }
tr.fila--editando td:first-child { border-left-color: var(--acento); }
.panel__cabecera a.pista { text-decoration: none; }
.panel__cabecera a.pista:hover { color: var(--acento); text-decoration: underline; }
.contrato { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.contrato .campo { display: flex; flex-direction: column; gap: 0.25rem; }
.contrato input[type="date"] {
padding: 0.4rem 0.5rem;
border: 1px solid var(--linea-fuerte);
border-radius: 4px;
font: 400 0.8125rem var(--ui);
color: var(--tinta);
background: var(--superficie);
min-width: 10rem;
}
/* Un aviso que aclara por qué algo no responde a un filtro. Va en el mismo
* párrafo del dato, no en un recuadro aparte: separado se lee como una alarma,
* y esto es una aclaración. */
.aviso-en-linea {
display: block;
margin-top: 0.15rem;
color: var(--tinta-tenue);
font-style: italic;
}
/* --- corridas ---------------------------------------------------------------
*
* Una fila por corrida, con el detalle por paso en la misma fila. La pregunta
* que trae a alguien acá —"¿por qué esta alerta no tiene datos de ayer?"— se
* contesta con el paso que falló, no con la fecha, así que el paso no se
* esconde detrás de un clic.
*/
.corridas td { height: auto; padding-top: 0.45rem; padding-bottom: 0.45rem; }
.corridas .nombre span { display: block; font-weight: 400; font-size: 0.75rem; }
.corrida__pasos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.paso {
font-size: 0.6875rem;
padding: 0.1rem 0.4rem;
border-radius: 3px;
border: 1px solid var(--linea);
color: var(--tinta-suave);
white-space: nowrap;
}
.paso b { font-weight: 600; color: var(--tinta); }
.paso--ok { border-color: var(--linea-fuerte); }
.paso--error { border-color: var(--falla); background: var(--falla-fondo); color: var(--falla); }
/* Lo omitido no falló: no se intentó. Pintarlo de rojo haría ver tres problemas
* donde hay uno. */
.paso--omitido { color: var(--tinta-tenue); border-style: dashed; }
.corrida__error {
flex-basis: 100%;
font-size: 0.75rem;
color: var(--falla);
}
tr[data-estado="falla"] td:first-child { border-left-color: var(--falla); }
/* El «Falló» de la tabla de alertas lleva fondo porque ahí es un enlace metido
* entre columnas de números y sin él no se distingue de un dato más.
*
* Estaba declarado suelto, o sea que le ponía fondo a `.estado--falla` en toda
* la aplicación: la misma clase se usa como píldora de texto en otras pantallas
* y ahí el recuadro rosado aparecía sin que nadie lo hubiera pedido. Con la
* regla de arriba —la de la línea 392— ya alcanzaba para el color. */
td .estado--falla { background: var(--falla-fondo); }
/* --- los comentarios de una publicación ------------------------------------
*
* Leer lo que la gente contestó sin salir de la lista. Va en `details`: abre y
* cierra con teclado sin una línea de JavaScript, y el guion solo agrega que
* los comentarios se traigan sin recargar la página.
*
* Sangrado y con una línea a la izquierda, como una cita: lo que hay adentro
* cuelga de la publicación de arriba y no es una publicación más de la lista.
*/
.comentarios-caja { margin-top: 0.5rem; }
.comentarios-caja > summary {
display: inline-flex;
align-items: baseline;
gap: 0.4rem;
cursor: pointer;
padding: 0.15rem 0;
font-size: 0.8125rem;
color: var(--acento);
/* El triángulo por omisión de Safari y Chrome no coinciden; se dibuja uno. */
list-style: none;
}
.comentarios-caja > summary::-webkit-details-marker { display: none; }
.comentarios-caja > summary::before {
content: "";
width: 0;
height: 0;
border: 4px solid transparent;
border-left-color: currentColor;
align-self: center;
transition: transform 120ms ease;
}
.comentarios-caja[open] > summary::before { transform: rotate(90deg); }
.comentarios-caja > summary:hover { text-decoration: underline; }
.comentarios-caja__cuerpo {
margin: 0.5rem 0 0.25rem;
padding-left: 0.875rem;
border-left: 2px solid var(--linea);
}
/* --- la espera de Escucha, una sola y de toda la pantalla ------------------
*
* Cubre entero y con desenfoque: se sigue viendo qué hay debajo, así que la
* pantalla no aparece de la nada sino que se revela, y quien esperó reconoce
* dónde está. Un fondo opaco cortaría esa continuidad.
*
* El desenfoque es lo único de este archivo que existe para verse bien, y se
* lo puede permitir porque no significa estado: significa «todavía no». Donde
* `backdrop-filter` no exista queda el velo sin desenfocar, que hace el mismo
* trabajo con menos gracia. */
.cargando {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--papel) 62%, transparent);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
transition: opacity 240ms ease;
}
.cargando--fuera { opacity: 0; pointer-events: none; }
.cargando__caja {
min-width: 17rem;
padding: 1.25rem 1.5rem;
border-radius: var(--radio);
background: var(--superficie);
box-shadow: var(--alto-cuadro);
text-align: center;
}
.cargando__titulo {
margin: 0 0 0.875rem;
font-size: 0.9375rem;
font-weight: 620;
color: var(--tinta);
}
/* La barra crece con lo que va llegando. No es una animación decorativa que
* corre sola: cada tramo es un bloque que ya está, así que lo que se ve avanzar
* es trabajo hecho y no un reloj. */
.cargando__barra {
height: 4px;
border-radius: 2px;
background: var(--linea);
overflow: hidden;
}
.cargando__barra span {
display: block;
height: 100%;
width: 0;
border-radius: 2px;
background: var(--acento);
transition: width 260ms ease;
}
.cargando__paso {
margin: 0.625rem 0 0;
font-size: 0.75rem;
color: var(--tinta-tenue);
}
@media (prefers-reduced-motion: reduce) {
.cargando, .cargando__barra span { transition: none; }
}
.comentarios__cargando,
.comentarios__vacio,
.comentarios__aviso {
margin: 0 0 0.5rem;
font-size: 0.75rem;
line-height: 1.5;
color: var(--tinta-tenue);
}
.comentarios { list-style: none; margin: 0; padding: 0; }
.comentario {
display: flex;
gap: 0.5rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--linea);
}
.comentario:last-child { border-bottom: 0; }
/* La misma marca de sentimiento que la publicación, más fina: es el mismo
* dato en un nivel de abajo. */
.comentario__marca { flex: none; width: 3px; border-radius: 2px; background: #c9d5db; }
.comentario__marca--neg { background: #9c2733; }
.comentario__marca--neu { background: #6e8794; }
.comentario__marca--pos { background: #0b6d4a; }
.comentario__cuerpo { min-width: 0; }
.comentario__meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0 0 0.15rem;
font-size: 0.75rem;
}
.comentario__meta strong { font-weight: 600; color: var(--tinta); }
.comentario__texto {
margin: 0;
font-size: 0.8125rem;
line-height: 1.5;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
/* --------------------------------------------------------------------------
La pantalla de comentarios
-------------------------------------------------------------------------- */
/* Cómo escribe una cuenta: una barra partida por sentimiento, todas al mismo
ancho. Acá la pregunta no es quién escribió más —eso lo dice la columna de
al lado, que además ordena la tabla— sino de qué lado está cada una. Con la
barra proporcional al volumen, la fila veinte sería un hilo y su postura no
se vería. */
.postura-barra {
display: flex;
width: 100%;
min-width: 5rem;
height: 0.55rem;
border-radius: 3px;
overflow: hidden;
background: var(--linea);
}
.postura-barra > span { display: block; height: 100%; }
/* Las siete reacciones. Mismo dibujo que las barras de reparto: nombre a la
izquierda, pista común, cifra y parte a la derecha. La pista es común a
propósito —todas se miden contra el total— así que dos reacciones de
tamaños parecidos se ven parecidas. */
.reacciones { list-style: none; margin: 0; padding: 0; }
.reaccion {
display: grid;
grid-template-columns: 6.5rem 1fr auto 2.6rem;
align-items: center;
gap: 0.5rem;
padding: 0.16rem 0;
font-size: 0.8rem;
}
.reaccion__nombre { color: var(--tinta); }
.reaccion__pista {
height: 0.5rem;
border-radius: 3px;
background: color-mix(in srgb, var(--linea) 70%, transparent);
overflow: hidden;
}
.reaccion__pista > span { display: block; height: 100%; background: var(--marca-azul); }
.reaccion__valor { color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.reaccion__parte {
color: var(--tinta-tenue);
text-align: right;
font-variant-numeric: tabular-nums;
}
.reacciones__nota {
margin: 0.6rem 0 0;
font-size: 0.72rem;
line-height: 1.4;
color: var(--tinta-tenue);
}
/* Las palabras más repetidas.
Una lista y no una nube: la nube codifica la frecuencia en el tamaño de la
letra, que es lo peor que se puede comparar de un vistazo —una palabra larga
ocupa más que una corta con el mismo número—. Acá el número está escrito y la
barra lo dibuja contra una base común. */
.terminos {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
gap: 0.1rem 1.25rem;
}
.termino a {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: 0.5rem;
padding: 0.3rem 0.45rem;
border-radius: 4px;
text-decoration: none;
color: inherit;
}
.termino a:hover { background: color-mix(in srgb, var(--marca-azul) 8%, transparent); }
/* La barra va detrás del texto y no al lado: con cuarenta términos en tres
columnas, una barra propia por fila duplicaría el alto del bloque. */
.termino__pista {
position: absolute;
inset: 0.25rem 0.45rem auto;
height: 100%;
z-index: 0;
}
.termino__pista > span {
display: flex;
height: 100%;
border-radius: 3px;
overflow: hidden;
background: color-mix(in srgb, var(--marca-azul) 13%, transparent);
}
/* Los tramos: de qué lado se dice la palabra. Van muy tenues porque el texto de
* la palabra se lee encima; el largo de la barra sigue siendo el dato principal
* y el color es el segundo. Al revés, la lista se volvería un semáforo. */
.termino__barra > i {
display: block;
height: 100%;
opacity: 0.28;
}
.termino__palabra, .termino__valor { position: relative; z-index: 1; }
.termino__palabra { color: var(--tinta); }
.termino__valor {
color: var(--tinta-tenue);
font-size: 0.76rem;
font-variant-numeric: tabular-nums;
}
.terminos-caja { min-height: 3rem; }
.cuenta--pie { padding-top: 0.6rem; color: var(--tinta-tenue); }
/* --------------------------------------------------------------------------
Pestañas: publicaciones y comentarios
-------------------------------------------------------------------------- */
/* Van debajo del filtro de alerta y fechas, no encima. Ese filtro manda sobre
las dos y cruza de una a la otra, así que la pantalla se lee de arriba abajo
como una sola frase: «este cliente, en estas fechas → publicaciones /
comentarios». Con las pestañas arriba y el filtro adentro parecerían dos
herramientas distintas con dos filtros distintos.
Subrayado y no píldoras: las píldoras ya significan «filtro que prende y
apaga» en esta interfaz —las fichas de red, de polaridad, de orden— y una
pestaña no es eso. Cambiar de pestaña cambia qué se está mirando; prender
una ficha recorta lo que ya se está mirando. */
.pestanas {
display: flex;
gap: 0.15rem;
border-bottom: 1px solid var(--linea);
margin: -0.35rem 0 1.25rem;
}
.pestana {
padding: 0.5rem 0.9rem;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
font: 500 0.875rem var(--ui);
color: var(--tinta-suave);
text-decoration: none;
white-space: nowrap;
}
.pestana:hover { color: var(--tinta); border-bottom-color: var(--linea-fuerte); }
.pestana--activa,
.pestana--activa:hover { color: var(--tinta); border-bottom-color: var(--marca-azul); }
/* --------------------------------------------------------------------------
El cambio de una pantalla a la otra
--------------------------------------------------------------------------
Sin esto, cambiar de pestaña o mover un filtro es un parpadeo: la pantalla
entera se va y vuelve, y con tablas de alto distinto el salto se lee como un
error. Con esto, el encabezado, las casillas y las pestañas se quedan
quietos —son los mismos de los dos lados— y solo cruza lo de abajo.
Es del navegador, no nuestro: `@view-transition` y `startViewTransition` no
necesitan librería ni una línea de animación escrita a mano. Donde no exista
—Firefox por ahora— no pasa nada y se navega como siempre. */
@view-transition { navigation: auto; }
/* Solo dos nombres, y a propósito.
*
* `view-transition-name` convierte al elemento en un contexto de apilado. Le
* puse nombre a `.cabecera` y salió caro: el `z-index: 20` del desplegable de
* «Exportar» quedó encerrado ahí adentro, y a partir de ese momento el orden
* de pintado lo decidía quién viene después en el HTML. El recuadro de filtros
* tapaba el menú abierto por la mitad.
*
* Y no hacía falta: lo que no lleva nombre se captura junto en la raíz, así
* que el encabezado igual cruza de una pestaña a la otra. Como es casi el
* mismo de los dos lados, ese cruce no se ve. Lo que sí se ve es el subrayado
* pasando de una pestaña a la otra y el contenido de abajo cambiando, que es
* justo lo que estos dos nombres compran.
*
* Antes de ponerle nombre a algo: si adentro hay un desplegable, un tooltip o
* cualquier cosa que se sale de su caja, va a quedar atrapada. */
.pestanas { view-transition-name: pestanas; }
#resultados { view-transition-name: resultados; }
/* Corto a propósito. Una transición que se nota es una transición que estorba:
esto se usa decenas de veces por sesión. */
::view-transition-old(resultados) { animation-duration: 90ms; }
::view-transition-new(resultados) { animation-duration: 160ms; }
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation: none !important; }
}
/* Corregir el sentimiento, dentro de la lista de limpieza.
Los botones toman la forma de las fichas de filtro porque hacen lo mismo a
la vista —prender uno de tres— y el que ya está puesto va deshabilitado: es
el estado, no una opción. */
.corregir {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0.5rem 0 0;
}
.corregir__titulo {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--tinta-tenue);
margin-right: 0.15rem;
}
.corregir .ficha { cursor: pointer; font: inherit; font-size: 0.75rem; }
.corregir .ficha[disabled] { cursor: default; opacity: 1; }
/* Mientras el servidor contesta. Medio segundo, casi siempre — lo justo para
que no parezca que el clic se perdió. Los botones se apagan un poco y no se
aceptan más: dos correcciones a la misma fila en vuelo dejarían guardado lo
que llegue último, que no tiene por qué ser lo último que se pulsó. */
.corregir[aria-busy="true"] { opacity: 0.55; pointer-events: none; }
/* Lo que dijo el servidor cuando no se pudo. Ocupa su renglón para que no
empuje los botones, y se lee en el sitio: quien corrige está mirando esta
fila, no la parte de arriba de la pantalla. */
.corregir__aviso {
flex-basis: 100%;
font-size: 0.75rem;
color: var(--falla);
}
/* --- el aviso de descarga ---------------------------------------------------
*
* El informe tarda unos seis segundos y el CSV de un mes puede tardar minutos.
* Con un enlace pelado no pasa nada visible en ese rato y quien lo pulsa cree
* que falló, así que lo pulsa de nuevo.
*
* Abajo a la derecha y no en el medio: es un aviso de algo que ya está pasando,
* no una pregunta. No tapa nada ni pide que se le conteste. */
.descarga {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
z-index: 60;
width: min(20rem, calc(100vw - 2.5rem));
padding: 0.75rem 0.875rem 0.7rem;
background: var(--superficie);
border: 1px solid var(--linea);
border-radius: 8px;
box-shadow: 0 6px 24px rgb(0 0 0 / 0.12);
}
.descarga__texto {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.descarga__texto strong { font-size: 0.8125rem; font-weight: 600; }
.descarga__texto span {
font-size: 0.75rem;
color: var(--tinta-tenue);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.descarga__pista {
height: 4px;
border-radius: 2px;
background: var(--linea);
overflow: hidden;
}
.descarga__pista span {
display: block;
height: 100%;
width: 0;
border-radius: 2px;
background: var(--tinta);
transition: width 0.2s ease-out;
}
/* Sin `Content-Length` no hay porcentaje que mostrar —el CSV sale a medida que
* se genera—, así que la barra recorre en vez de llenarse. Mentir con un
* porcentaje inventado sería peor que no darlo. */
.descarga--sin-total .descarga__pista span {
width: 35%;
animation: descarga-recorre 1.1s ease-in-out infinite;
}
@keyframes descarga-recorre {
0% { transform: translateX(-100%); }
100% { transform: translateX(340%); }
}
.descarga--lista .descarga__pista span { background: var(--activa); }
.descarga--falla .descarga__pista span { background: var(--falla); width: 100%; }
.descarga--falla .descarga__texto a { color: inherit; }
@media (prefers-reduced-motion: reduce) {
.descarga__pista span { transition: none; }
.descarga--sin-total .descarga__pista span { animation: none; width: 100%; opacity: 0.5; }
}
/* La × de borrar un hito.
*
* Estaba en `opacity: 0` hasta pasar el mouse por encima de su fila. El
* razonamiento era que la lista se lee más de lo que se edita y una × en cada
* línea la vuelve un formulario. Suena bien y era falso: una acción que solo
* existe cuando el puntero ya está encima no se puede descubrir, porque para
* llegar ahí hay que estar buscándola y para buscarla hay que saber que está.
* En una pantalla táctil directamente no existe.
*
* Ahora se ve siempre, en gris tenue, y toma color al acercarse. Sigue sin
* competir con el texto del hito, que era lo que se quería cuidar. */
.hito__borrar { display: inline; }
.hito__borrar button {
border: 0;
background: none;
padding: 0 0.25rem;
cursor: pointer;
color: var(--tinta-tenue);
font-size: 0.95rem;
line-height: 1;
opacity: 0.55;
transition: opacity 0.12s ease-out, color 0.12s ease-out;
}
.hitos li:hover .hito__borrar button,
.hito__borrar button:focus-visible { opacity: 1; }
.hito__borrar button:hover { color: var(--falla); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.hito__borrar button { transition: none; }
}
/* Sin ratón —un teclado, una pantalla táctil— no hay «pasar por encima», así
* que ahí la × está siempre visible. */
@media (hover: none) {
.hito__borrar button { opacity: 1; }
}
/* ===========================================================================
Teléfono
===========================================================================
La herramienta se diseñó para una pantalla ancha —dos columnas de tablero,
tablas de ocho columnas— y en un teléfono eso obligaba a hacer zoom para leer
cualquier cosa.
La regla de todo lo que sigue: **reordenar, no esconder.** Nada desaparece en
móvil. Un dato que está en el escritorio y no en el teléfono convierte al
teléfono en una versión en la que no se puede confiar, y quien la use va a
terminar abriendo la computadora igual. Lo que cambia es el orden —primero lo
que se mira primero— y la forma de las tablas. */
@media (max-width: 48rem) {
/* --- lo general ------------------------------------------------------ */
.contenido, main { padding-left: 0.875rem; padding-right: 0.875rem; }
/* Un solo hilo de lectura: cifras, gráfico, repartos, listas. */
/* `minmax(0, 1fr)` y no `1fr` a secas. Son distintos: `1fr` es
`minmax(auto, 1fr)`, y ese `auto` significa «no me encojas por debajo de mi
contenido». Con un gráfico de 460 px adentro, la columna se plantaba en
460 px, la rejilla en 460 y la página entera en 460 sobre una pantalla de
390. Es la causa de que todo se viera corrido a la derecha. */
.tablero, .paneles, .paneles--mitades { grid-template-columns: minmax(0, 1fr); }
.tablero__lateral { grid-column: 1; grid-row: auto; }
/* `min-width: 0` en todo lo que sea hijo de una rejilla o de un flex.
Por omisión valen `auto`, que significa «no me encojas por debajo de mi
contenido»: un solo gráfico de 460 px o una tabla ancha ensanchaba su
columna, la columna ensanchaba la rejilla y la rejilla ensanchaba la
página entera. El síntoma era la pantalla corrida a la derecha con todo
cortado, y la causa estaba en un elemento que ni se veía. */
.tablero > *, .paneles > *, .indicadores > *, .tablero__lateral > * { min-width: 0; }
.panel, .indicador, .reparto-grupo { min-width: 0; }
/* Y el cinturón: pase lo que pase, la página no se mueve de lado. Lo que no
entre se resuelve dentro de su propio marco. */
html, body { overflow-x: hidden; }
/* Las cifras de arriba: dos por fila en vez de cuatro. Cuatro en 375 px
dejan cada número en 80 px y hay que entrecerrar los ojos. */
.indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.indicador dd { font-size: 1.5rem; }
.cabecera { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.cabecera h1 { font-size: 1.25rem; }
/* --- los filtros ----------------------------------------------------- */
/* Apilados y a todo el ancho. Los campos de fecha del sistema no se dejan
achicar por debajo de su contenido, así que en fila se salían de la
pantalla. */
.filtros { flex-direction: column; align-items: stretch; gap: 0.625rem; }
.filtros .campo { width: 100%; }
/* Un `flex: 1 1 12rem` que en fila reparte el ancho sobrante, al girar la
caja a columna reparte el **alto** sobrante: los dos campos de búsqueda de
limpieza se estiraban a 200 px cada uno y dejaban dos huecos enormes entre
el rótulo y el campo siguiente. Acá cada campo mide lo que mide. */
.filtros .campo--busca { flex: 0 0 auto; }
.filtros select,
.filtros input { width: 100%; box-sizing: border-box; }
.filtros .boton { width: 100%; }
/* El grupo de orden —«Ordenar por» y sus tres fichas— era el que se salía.
Medido: 51 px por fuera del borde derecho en una pantalla de 390, con
«Más antiguos» cortado a la mitad.
La causa es `flex: none` sobre `.orden`, que en la barra ancha es lo
correcto: dice «no me achiques, andá al extremo derecho». En una barra que
envuelve, ese mismo `none` lo obliga a medir lo que miden sus tres fichas
en una sola línea —unos 440 px— y no hay dónde ponerlo.
Acá pasa a ocupar su propio renglón entero y a envolver por dentro. Las
fichas caen a dos líneas y ninguna queda cortada.
Vale la pena decir cómo apareció: los tres intentos anteriores —`min-width`,
`minmax(0, 1fr)`, `overflow-x: hidden`— fueron a ciegas y no movieron una
sola línea de la captura. Salió a la primera midiendo qué elemento tenía el
borde derecho fuera del marco, en vez de suponer cuál sería. */
.barra-filtros__arriba .orden {
margin-left: 0;
flex: 1 1 100%;
flex-wrap: wrap;
min-width: 0;
}
/* El título y su cuenta, en dos renglones si hace falta. Sin esto, «Lo que se
está excluyendo» más su número se pasaban seis píxeles y el panel entero
ganaba una barra de desplazamiento horizontal por esos seis. */
.panel__cabecera { flex-wrap: wrap; gap: 0.25rem 1rem; }
.panel__cabecera .pista { text-align: left; }
/* Las dos mitades de la limpieza dejan de estar pegadas a la derecha —no hay
derecha cuando el encabezado ya está en columna— y caen debajo del texto. */
.mitades { margin-left: 0; }
/* --- las tablas ------------------------------------------------------ */
/* Ocho columnas no entran en 375 px de ninguna manera honesta: achicarlas
hasta que entren deja la letra ilegible, y esconder columnas es esconder
datos. Se deja rodar la tabla a lo ancho dentro de su propio marco, con la
página quieta —lo que nunca puede pasar es que se mueva la página entera—.
El aviso de que hay más a la derecha lo da el sombreado del borde. */
.panel { overflow-x: auto; }
table { min-width: 34rem; }
/* --- los gráficos ---------------------------------------------------- */
.lienzo--alto { height: 220px; }
/* --- las menciones --------------------------------------------------- */
.mencion { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.mencion .numero { align-self: flex-start; }
/* Sin ratón no hay «pasar por encima», así que las acciones de cada mención
están siempre a la vista. */
.mencion__acciones { opacity: 1; }
/* --- el aviso de descarga -------------------------------------------- */
/* De esquina a franja: en un teléfono una tarjeta flotante de 20 rem tapa
media pantalla. */
.descarga {
left: 0.875rem;
right: 0.875rem;
bottom: 0.875rem;
width: auto;
}
}
/* Teléfonos angostos. A partir de acá dos cifras por fila también aprietan. */
@media (max-width: 26rem) {
.indicadores { grid-template-columns: minmax(0, 1fr); }
.indicador { padding: 0.625rem 0.75rem; }
}
/* --- el encabezado: quién, cuándo, cómo se repartió -----------------------
*
* Franja oscura, título a la izquierda y el reparto de sentimiento a la
* derecha. La versión con una cifra de tres centímetros no funcionó por dos
* motivos que solo se ven en pantalla: repetía el número que ya está en la
* tarjeta «Sentimiento dominante», y un número solo no llena una franja de
* ancho completo, así que quedaba medio bloque oscuro vacío.
*
* La barra apilada llena el espacio con algo que ninguna tarjeta da —las tres
* proporciones a la vez— y de paso enseña los colores que usan todos los
* gráficos de más abajo. */
.cabecera--oscura {
flex-direction: column;
align-items: stretch;
gap: 1rem;
padding: 1.4rem 1.5rem;
margin-bottom: 1.25rem;
background: var(--oscuro);
border-radius: var(--radio);
/* La altura mayor de las tres: el encabezado flota sobre todo lo demás. */
box-shadow: var(--alto-encabezado);
color: #fff;
}
.cabecera--oscura .titular { min-width: 0; }
/* Sin barra de reparto, el encabezado es una sola fila.
*
* La disposición en columna existe para que la barra cruce el ancho. Donde no
* hay barra —comentarios— esa misma columna deja un hueco oscuro de tres
* centímetros entre el título y el botón, que no llena nada y hace ver el
* bloque como si le faltara contenido. */
.cabecera--simple {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
/* El título toma el espacio y empuja el botón contra el borde. Sin esto los dos
* quedan pegados a la izquierda, porque en fila `.titular` no crece solo. */
.cabecera--simple .titular { flex: 1; }
.cabecera--simple .cabecera__derecha { width: auto; flex: none; }
.titular__cliente {
margin: 0 0 0.35rem;
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.15;
color: #fff;
}
/* Blanco a media opacidad y no un gris fijo: así se apaga contra el fondo sin
* tener que elegir a mano un gris para este tono en particular. */
.titular__periodo { margin: 0; font-size: 0.875rem; color: rgb(255 255 255 / 0.6); }
/* La barra cruza el ancho y el botón se queda a su derecha, al pie.
*
* Es la decisión que hace de esta franja algo más que un rótulo: la barra deja
* de ser un adorno de la esquina y pasa a ser el elemento gráfico que se lee de
* lejos. A cambio la franja crece, que es lo que cuesta. */
.cabecera__derecha {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
width: 100%;
}
/* El botón se va al borde derecho aunque no haya barra que lo empuje. En el
* panel lo empuja el reparto; en comentarios, que no lo lleva, quedaría pegado
* a la izquierda sin esto. */
.cabecera__derecha .acciones { margin-left: auto; }
.reparto-titular { flex: 1; min-width: 0; }
.reparto-titular__barra {
display: flex;
width: 100%;
height: 12px;
border-radius: 6px;
overflow: hidden;
/* El fondo asoma cuando los tramos no llegan a cien —pasa si una categoría
* redondea a cero— en vez de dejar un hueco del color de la franja. */
background: rgb(255 255 255 / 0.15);
}
.reparto-titular__tramo { display: block; height: 100%; }
.reparto-titular__pies {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 1.25rem;
margin: 0.6rem 0 0;
font-size: 0.875rem;
color: rgb(255 255 255 / 0.7);
}
.reparto-titular__pie { display: inline-flex; align-items: center; gap: 0.35rem; }
.reparto-titular__pie .punto { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; }
.reparto-titular__pie b { font-weight: 660; color: #fff; font-variant-numeric: tabular-nums; }
/* Un chip translúcido, no un semáforo: la dirección la dice la flecha que
* `puntos()` trae adentro, y esa va sin color a propósito —ver `.variacion--sube`
* más arriba—. Que el sentimiento negativo suba tres puntos es una cosa mala,
* pero que suba el volumen no lo es, y el mismo chip dibuja las dos. */
.titular__delta {
font-size: 0.75rem;
font-weight: 600;
padding: 0.15rem 0.5rem;
border-radius: 3px;
background: rgb(255 255 255 / 0.12);
color: rgb(255 255 255 / 0.9);
white-space: nowrap;
}
/* La flecha y su cifra vienen con el color de la pantalla clara, que sobre este
* fondo no se lee. Acá heredan el blanco del chip. */
.titular__delta .variacion,
.titular__delta .variacion--sube,
.titular__delta .variacion--baja,
.titular__delta .variacion span { color: inherit; }
.cabecera--oscura .boton {
border-color: rgb(255 255 255 / 0.25);
background: rgb(255 255 255 / 0.08);
color: #fff;
}
.cabecera--oscura .boton:hover { background: rgb(255 255 255 / 0.16); }
@media (max-width: 48rem) {
.cabecera--oscura { padding: 1rem 1.25rem; }
/* El botón baja debajo de la barra: al lado, en un teléfono, deja la barra en
cuatro centímetros y deja de poderse comparar. */
.cabecera__derecha { flex-direction: column; align-items: stretch; gap: 1rem; }
}
/* --- las cuatro cifras, en oscuro ------------------------------------------
*
* Solo en las dos pestañas de Escucha. Las mismas tarjetas se usan en el
* tablero, en el detalle de alerta y en clientes, y ahí siguen claras: el
* modificador existe para no cambiar cuatro pantallas que nadie pidió.
*
* El fondo va en `.indicador` y no en el contenedor: el contenedor solo pinta
* el hueco de un píxel que hace de separador entre tarjetas, así que pintarlo a
* él deja texto blanco sobre tarjetas blancas. */
.indicadores--oscuras {
background: rgb(255 255 255 / 0.14);
border-color: transparent;
}
.indicadores--oscuras .indicador { background: var(--oscuro); }
.indicadores--oscuras .indicador:hover { background: #0d2c40; }
.indicadores--oscuras .indicador dt { color: rgb(255 255 255 / 0.55); }
.indicadores--oscuras .indicador dd { color: #fff; }
.indicadores--oscuras .indicador dd small { color: rgb(255 255 255 / 0.6); }
.indicadores--oscuras .pie,
.indicadores--oscuras .pie__marca,
.indicadores--oscuras .variacion,
.indicadores--oscuras .variacion span,
.indicadores--oscuras .variacion--sube,
.indicadores--oscuras .variacion--baja { color: rgb(255 255 255 / 0.66); }
.indicadores--oscuras .pie b { color: #fff; }
/* --- los títulos que separan secciones -------------------------------------
*
* La pantalla venía siendo una sucesión de cuadros sin jerarquía: el ojo no
* tenía dónde apoyarse para saber que a media página cambia el sujeto —arriba
* se cuentan menciones, abajo se cuentan cuentas—. La regla que cruza el ancho
* es lo que convierte «un cuadro más» en «acá empieza otra cosa». */
/* El título de sección es un rótulo con su filete, no un titular.
*
* Tuvo una barra de color al costado y compet¡a con el canto del cuadro de la
* serie, que es donde el acento tiene trabajo. Acá el filete que cruza el ancho
* hace el corte y el texto se mantiene chico: lo que separa dos secciones es la
* línea, no el tamaño de letra. */
.seccion {
display: flex;
align-items: center;
gap: 1rem;
margin: 2rem 0 1rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tinta-tenue);
}
.seccion::after {
content: "";
flex: 1;
height: 1px;
background: var(--linea);
}
/* El segundo nivel se distingue por peso y por color, no por otro tamaño: dos
* rótulos de tamaños casi iguales se leen como un error de maquetación. */
.seccion--menor {
margin: 1.5rem 0 0.875rem;
font-weight: 600;
color: var(--tinta-suave);
}
/* --- la serie, los dos gráficos en un cuadro -------------------------------
*
* Comparten el eje X y uno es la descomposición del otro, así que van pegados y
* alineados: un pico se lee en vertical, de la línea de volumen a la de colores.
* El rótulo de cada parte es un `h3` chico y no una cabecera de cuadro, porque
* no son dos temas: es el mismo mirado por fuera y por dentro. */
/* El canto de color, en un solo cuadro de toda la pantalla.
*
* Es el que se mira primero y el que da la lectura del período; los demás se
* callan. Repartir el acento entre todos lo anularía: si todo está señalado,
* nada lo está. */
.panel--serie {
margin-bottom: 1.25rem;
border-top: 3px solid var(--acento);
}
.serie__parte + .serie__parte { margin-top: 0.5rem; }
.serie__rotulo {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin: 0 0 0.35rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--tinta-tenue);
}
/* --- las lecturas de la serie, plegadas ------------------------------------
*
* Cerradas se leen como una línea más del cuadro; abiertas dan la misma rejilla
* de cuatro que las cifras de arriba. El triángulo de `summary` se reemplaza por
* uno propio para que apunte igual en todos los navegadores. */
.analisis { margin-top: 1rem; border-top: 1px solid var(--linea); padding-top: 0.75rem; }
.analisis > summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--tinta-tenue);
}
.analisis > summary::-webkit-details-marker { display: none; }
.analisis > summary::before {
content: "";
width: 0;
height: 0;
border-left: 4px solid currentColor;
border-top: 3.5px solid transparent;
border-bottom: 3.5px solid transparent;
transition: transform 120ms ease;
}
.analisis[open] > summary::before { transform: rotate(90deg); }
.analisis > summary:hover { color: var(--tinta); }
.indicadores--analisis { margin: 0.85rem 0 0.25rem; }
/* --- la concentración, dicha y no dibujada ---------------------------------
*
* Eran dos barras finas sueltas entre dos bloques grandes. Se leían como un
* adorno y para entenderlas había que leer sus rótulos igual, así que la frase
* hace el mismo trabajo sin el dibujo. */
/* --- los cuadros de análisis de la pestaña Resumen ---------------------------
*
* Los tres tienen la misma forma —titular, dibujo, nota al pie— y esa
* repetición es a propósito: son tres lecturas de la misma clase, y con tres
* maquetas distintas cada una habría que aprenderla por separado.
*
* Van en una rejilla de tres y no apilados: los tres contestan preguntas
* independientes, así que ninguno es continuación del anterior y ponerlos en
* columna sugeriría un orden de lectura que no existe. */
.analisis-tres {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
margin-bottom: 1.25rem;
/* A la misma altura, no a la natural. `.analisis__pie` se empuja al fondo con
* `margin-top: auto`, así que con las tres estiradas las tres advertencias
* quedan en la misma línea y la fila se lee como un juego. Con la altura
* natural, tres tarjetas hermanas terminaban en tres sitios distintos y
* parecía que a dos les faltaba algo. */
align-items: stretch;
}
@media (max-width: 78rem) { .analisis-tres { grid-template-columns: 1fr; } }
.panel--analisis { display: flex; flex-direction: column; }
/* --- el hueco mientras el dato viaja ----------------------------------------
*
* Las tres tarjetas llegan solas y por separado. Sin reservar el alto, la fila
* salta tres veces: `align-items: stretch` estira las tres a la más alta, así
* que cada bloque que aterriza reacomoda a sus dos vecinas y lo que alguien
* estaba leyendo se le mueve de debajo de los ojos.
*
* La reserva va en el cuerpo y no en la tarjeta porque la cabecera y el pie ya
* están puestos desde la primera pintada: lo único que falta es el medio, y es
* ese hueco el que hay que guardar.
*
* La medida no es a ojo, se suma. `.reparto__barra` tiene alto fijo, así que de
* las tres piezas del cuerpo solo una es variable:
*
* frase ~3 líneas x 1.6rem + 1rem de margen ~ 5.8rem
* grupo 1 h3 1.55 + barra 1.875 + leyenda 1.7 ~ 5.1rem
* grupo 2 + 1rem margen + 0.875 relleno + borde ~ 7.0rem
* --------
* ~17.9rem
*
* Reduce el salto; no lo elimina. La frase es lo único que puede desbordar
* —cuatro líneas en vez de tres— y eso está bien: es preferible quedarse corto
* por poco antes que fijar un alto que recorte el contenido. */
.analisis__cuerpo { min-height: 17.5rem; }
/* Lo que dice la tarjeta mientras cuenta.
*
* En tinta tenue y al tamaño de las notas al pie, que es donde vive todo lo
* secundario de esta interfaz. Sin animación y sin bloque gris: acá el color
* significa estado, y un rectángulo latiendo sería el único elemento de la
* pantalla que se mueve sin que nadie lo haya tocado.
*
* Cada bloque dice qué está contando y no «cargando». La espera se tolera mucho
* mejor cuando se sabe qué se está esperando, y además es la diferencia entre
* una pantalla que trabaja y una que se colgó. */
.analisis__esperando {
margin: 0;
font-size: 0.75rem;
line-height: 1.5;
color: var(--tinta-tenue);
}
/* El titular es lo que alguien repite en una reunión; el dibujo está abajo para
* comprobarlo. Al revés —dibujo primero— obliga a deducir la frase mirando dos
* barras, que es justo el trabajo que este cuadro existe para ahorrar. */
.analisis__frase {
margin: 0 0 1rem;
font-size: 1rem;
line-height: 1.6;
color: var(--tinta-suave);
}
.analisis__frase b {
color: var(--tinta);
font-weight: 640;
font-variant-numeric: tabular-nums;
}
/* La advertencia de cómo está medido, al pie y en tenue. No es una nota al
* margen: es lo que evita que alguien concluya de más. Pero si compitiera con
* el titular, el cuadro tendría dos voces. */
.analisis__pie {
margin: auto 0 0;
padding-top: 0.875rem;
font-size: 0.75rem;
line-height: 1.5;
color: var(--tinta-tenue);
}
.panel--analisis .reparto-grupo:first-of-type { margin-top: 0; }
/* Magnitudes que no suman un total. «8,7 comentarios por publicación» y «391»
* no son partes de nada, así que se miden contra la más grande y no contra el
* 100 %: una barra repartida acá diría que TikTok es «el 19 % de la
* conversación por publicación», que no significa nada. */
.magnitudes { display: flex; flex-direction: column; gap: 0.625rem; }
.magnitud {
display: grid;
grid-template-columns: 5.5rem minmax(0, 1fr) auto;
align-items: center;
gap: 0.15rem 0.75rem;
font-size: 0.8125rem;
}
.magnitud__et { color: var(--tinta); }
.magnitud__pista { height: 0.875rem; }
.magnitud__pista i {
display: block;
height: 100%;
min-width: 2px;
border-radius: 2px;
background: var(--acento);
}
.magnitud__valor { text-align: right; font-variant-numeric: tabular-nums; }
/* Debajo de la barra y no en otra columna: es contexto del dato, no otro dato.
* En una cuarta columna competía con la cifra por la misma mirada. */
.magnitud__nota {
grid-column: 2 / -1;
font-size: 0.6875rem;
color: var(--tinta-tenue);
font-variant-numeric: tabular-nums;
}
/* La tarjeta que abre la sección de cuentas. Angosta a propósito: es una frase
* para leer, y una frase que cruza mil quinientos píxeles se lee dos veces. */
.panel--corte { margin-bottom: 1.25rem; }
.panel--corte h2 { margin-bottom: 0.5rem; }
.concentracion__frase {
margin: 0;
max-width: 52rem;
font-size: 1.25rem;
font-weight: 500;
color: var(--tinta-suave);
/* Holgado porque adentro hay cifras al doble de tamaño: con el interlineado
* normal, la línea siguiente se le monta encima a los números. */
line-height: 1.55;
letter-spacing: -0.01em;
}
/* Las dos cifras, al doble del texto que las rodea. Es lo que convierte la
* oración en un dato que se ve antes de leerse. */
.concentracion__frase b {
font-size: 2rem;
font-weight: 640;
letter-spacing: -0.03em;
color: var(--tinta);
font-variant-numeric: tabular-nums;
/* El espacio del texto queda dibujado al cuerpo chico y contra dígitos de dos
* centímetros desaparece: se leía «1,1 %de las cuentas». El margen lo separa
* en proporción a la cifra y no al texto que la rodea. */
margin: 0 0.12em;
}
.concentracion__detalle {
margin: 0.5rem 0 0;
font-size: 0.875rem;
color: var(--tinta-tenue);
font-variant-numeric: tabular-nums;
}
/* --- la pantalla de inicio -------------------------------------------------
*
* Dónde se llega. Saludo, tres cifras, lo que necesita atención si lo hay, y
* abajo el pulso.
*
* **El pulso está siempre.** Es el estado de reposo: una pantalla de guardia
* que cuando todo anda bien es un cuadro que dice «todo al día» se abre dos
* veces y no se vuelve a abrir, porque no hay nada que mirar. Una chispa por
* alerta cambia todos los días aunque no pase nada, y eso es lo que hace que se
* siga abriendo un martes cualquiera.
*/
.saludo { margin-bottom: 1.25rem; }
.saludo h1 {
margin: 0;
font-size: 1.5rem;
font-weight: 620;
letter-spacing: -0.01em;
color: var(--tinta);
}
.saludo__estado {
margin: 0.25rem 0 0;
font-size: 0.9375rem;
color: var(--tinta-suave);
max-width: 60ch;
}
.tres-cifras {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: 0.625rem;
margin-bottom: 1.75rem;
}
.tres-cifras__dato {
background: var(--superficie);
border: 1px solid var(--linea);
border-radius: var(--radio-control);
box-shadow: var(--alto-ras);
padding: 0.75rem 0.875rem;
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.tres-cifras__cifra {
font-size: 1.5rem;
font-weight: 620;
color: var(--tinta);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.tres-cifras__rotulo {
font-size: 0.75rem;
color: var(--tinta-tenue);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.titulo-de-lista {
margin: 0 0 0.625rem;
font-size: 0.8125rem;
font-weight: 620;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--tinta-suave);
display: flex;
align-items: baseline;
gap: 0.625rem;
}
.titulo-de-lista__pie {
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--tinta-tenue);
}
.sintomas + .titulo-de-lista { margin-top: 1.75rem; }
/* --- lo que necesita atención ----------------------------------------------
*
* Dos renglones por alerta —qué le pasa y de qué tamaño— y la tarjeta entera es
* el enlace.
*
* La primera versión apilaba píldora, título, detalle y un «ver las corridas»
* al pie: cuatro filas y 138 píxeles para decir dos cosas. Con quince alertas
* caídas eso es una pantalla y media de desplazamiento para leer quince
* nombres, y esta es la pantalla que se mira con prisa.
*
* El rojo lo pone `urgente`, que es una regla sobre el dato: ya se perdió data,
* o nadie lo va a arreglar solo. Una corrida que la cadena reintenta en veinte
* minutos va en ámbar, que es lo que la casa usa para «esto todavía no es un
* problema pero mirálo». Sin esa distinción el rojo aparece todas las mañanas y
* deja de significar nada.
*/
.sintomas {
list-style: none;
margin: 0 0 0.5rem;
padding: 0;
display: grid;
gap: 0.5rem;
}
.sintoma {
background: var(--superficie);
border: 1px solid var(--linea);
border-radius: var(--radio-control);
box-shadow: var(--alto-ras);
/* La cinta de gravedad al borde izquierdo. Es el único adorno de la lista y
* no es adorno: con quince renglones, la píldora sola obliga a leer para
* saber cuáles son los graves. */
border-left: 3px solid var(--dormida);
}
.sintoma--urgente { border-left-color: var(--falla); }
.sintoma a {
display: grid;
grid-template-columns: 9rem 1fr;
align-items: baseline;
column-gap: 1rem;
row-gap: 0.15rem;
padding: 0.625rem 0.875rem;
text-decoration: none;
color: inherit;
border-radius: inherit;
}
.sintoma a:hover { background: var(--dormida-fondo); }
.sintoma a:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
/* La píldora no se estira a lo ancho de su columna: es una etiqueta, y un
* bloque de 9 rem con dos palabras adentro se lee como una celda vacía al lado. */
.sintoma .estado { font-size: 0.75rem; justify-self: start; }
.sintoma__titulo {
margin: 0;
font-size: 0.9375rem;
font-weight: 620;
color: var(--tinta);
}
.sintoma__detalle {
grid-column: 2;
margin: 0;
font-size: 0.8125rem;
color: var(--tinta-suave);
max-width: 70ch;
}
/* El ámbar de «todavía se arregla solo». Vive acá y no entre los estados
* generales porque solo esta pantalla distingue esos dos grados. */
.estado--espera { color: var(--sin-datos); }
/* En angosto la píldora deja de tener columna propia: con 9 rem fijos de
* etiqueta, al título le quedaban cuatro palabras por renglón. */
@media (max-width: 44rem) {
.sintoma a { grid-template-columns: 1fr; }
.sintoma__detalle { grid-column: 1; }
}
/* --- el pulso -------------------------------------------------------------- */
.pulsos td { vertical-align: middle; }
.pulsos__chispa { width: 40%; padding-top: 0.35rem; padding-bottom: 0.35rem; }
/* La chispa se estira a lo ancho de su celda y conserva el alto. El `viewBox`
* solo fija la proporción con la que se dibuja adentro; el tamaño real lo
* decide acá, que es donde se sabe cuánto lugar hay. */
.pulso {
display: block;
width: 100%;
height: 1.75rem;
}
/* La alerta con problemas se marca también en el pulso. Sin esto hay que
* cruzar dos listas con el dedo para saber cuál de las diez chispas es la que
* arriba estaba en rojo. */
.pulsos tr:has(+ tr) td { border-bottom: 1px solid var(--linea); }
/* --- cuánto trae cada red --------------------------------------------------
*
* Los topes de consumo, en el formulario de la alerta. Van adentro de un
* `fieldset` y no sueltos entre los demás campos porque son de otra especie:
* el término y la expresión dicen **qué** se busca y estos dicen **cuánto se
* gasta**, y confundirlos es cómo alguien sube Facebook a 5 000 creyendo que
* afina la búsqueda.
*/
.cuanto-trae {
margin: 1rem 0 0;
padding: 0.875rem;
border: 1px solid var(--linea);
border-radius: var(--radio-control);
background: var(--dormida-fondo);
}
/* Era un `