/*
 * Nodo — capa de diseño sobre Filament.
 *
 * Dirección: instrumento de precisión. El logotipo de Nodo es geométrico, de
 * remates planos y contraformas rectas; Filament viene redondeado y blando, y
 * eso lo contradice. Acá se aplana todo, se cambia la sombra por la línea de
 * un cabo, y el dato de máquina —IDs, slugs, fechas— pasa a monoespaciada,
 * porque son cadenas que uno compara carácter por carácter.
 *
 * El rojo es bisturí: estado y acción. Nunca fondo.
 *
 * Se escribe a mano y sin build de npm a propósito: el despliegue es rsync más
 * `filament:assets`, y meterle un paso de compilación al hosting compartido
 * sería una carga que este panel no necesita.
 */

/* ─── Tipografía autohospedada ──────────────────────────────────────── */

@font-face {
    font-family: 'Archivo';
    src: url('/fonts/archivo-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Archivo';
    src: url('/fonts/archivo-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ─── Tokens ────────────────────────────────────────────────────────── */

:root {
    /* Casi cero. El 2px evita el borde perfectamente vivo, que en pantalla
       se ve accidental más que intencional. */
    --radius-sm: 1px;
    --radius-md: 2px;
    --radius-lg: 2px;
    --radius-xl: 3px;
    --radius-2xl: 3px;
    --radius-3xl: 4px;

    --nodo-linea: color-mix(in oklch, currentColor 12%, transparent);
    --nodo-tracking: 0.08em;
}

body,
.fi-body {
    font-feature-settings: 'ss01', 'cv05';
    letter-spacing: -0.006em;
}

/* ─── El dato de máquina va monoespaciado ───────────────────────────── */

.fi-ta-text-item-label:has(.fi-ta-text-item-icon-btn),
.fi-in-text-item-label,
code,
kbd,
samp,
.fi-fo-field-wrp-hint code {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 0.8125rem;
    letter-spacing: 0;
}

/* Identificadores: son el corazón de la pestaña de Accesos, y se comparan
   carácter por carácter. Van monoespaciados por función, no por adorno. */
.fi-ta-cell-identifier .fi-ta-text-item-label,
.fi-ta-cell-slug .fi-ta-text-item-label,
.fi-ta-cell-url .fi-ta-text-item-label,
.fi-ta-cell-fecha .fi-ta-text-item-label,
.fi-ta-cell-value .fi-ta-text-item-label,
.fi-ta-cell-categoria .fi-ta-text-item-label,
.fi-ta-cell-contact_email .fi-ta-text-item-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Las cifras de una tabla se comparan en vertical: tabulares siempre. */
.fi-ta-table td {
    font-variant-numeric: tabular-nums;
}

/* ─── Encabezados: legenda de plano ─────────────────────────────────── */

.fi-section-header-heading,
.fi-sc-section-label,
.fi-ta-header-cell,
.fi-fieldset-label {
    text-transform: uppercase;
    letter-spacing: var(--nodo-tracking);
    font-size: 0.6875rem;
    font-weight: 700;
}

.fi-header-heading {
    letter-spacing: -0.03em;
    font-weight: 700;
}

/* La bajada de una sección no compite con su título. */
.fi-section-header-description {
    letter-spacing: 0;
    text-transform: none;
    max-width: 68ch;
}

/* ─── La línea reemplaza a la sombra ────────────────────────────────── */

.fi-section,
.fi-ta-ctn,
.fi-wi,
.fi-modal-window,
.fi-dropdown-panel {
    box-shadow: none;
    border: 1px solid var(--nodo-linea);
}

/* ─── Botones: bloque, no pastilla ──────────────────────────────────── */

.fi-btn {
    letter-spacing: 0.01em;
    font-weight: 700;
    box-shadow: none;
}

/* ─── Badges: etiqueta técnica ──────────────────────────────────────── */

.fi-badge {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.6875rem;
    font-weight: 700;
    box-shadow: none;
}

/* ─── Barra lateral: menos decoración, más orden ────────────────────── */

.fi-sidebar-nav {
    letter-spacing: 0.01em;
}

.fi-sidebar-item-label {
    font-weight: 400;
}

.fi-sidebar-item-active .fi-sidebar-item-label {
    font-weight: 700;
}

/* La marca respira: es lo único curvo que queda en pantalla. */
.fi-logo {
    letter-spacing: 0;
}

/* ─── Campos ────────────────────────────────────────────────────────── */

.fi-input,
.fi-select-input {
    letter-spacing: -0.005em;
}

/* El borrador de un artículo y los campos largos de la ficha se leen como
   texto, no como formulario: interlínea de lectura y ancho de medida. */
textarea.fi-input {
    line-height: 1.6;
}

/* ─── Acceso ────────────────────────────────────────────────────────── */

.fi-simple-main {
    border: 1px solid var(--nodo-linea);
    box-shadow: none;
}


/* ─────────────────────────────────────────────────────────────────────
   El tablero
   ─────────────────────────────────────────────────────────────────────
   No usa componentes de Filament a propósito: es la única pantalla que
   se compone entera, y su forma —una rejilla de estado, densa y alineada
   a la línea de base— es lo que la hace legible de un vistazo.
   ───────────────────────────────────────────────────────────────────── */

.nodo-tablero {
    --nodo-rejilla: minmax(11rem, 1.4fr) 8.5rem 5rem 12rem 7.5rem minmax(12rem, 2fr);
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

/* Las cifras de arriba: pocas, grandes, sin caja. */
.nodo-tablero__cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1px;
    background: var(--nodo-linea);
    border: 1px solid var(--nodo-linea);
}

.nodo-cifra {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.1rem 1.25rem;
    background: var(--color-white, #fff);
}

.dark .nodo-cifra,
:where([data-theme='dark']) .nodo-cifra {
    background: #0a0a0a;
}

.nodo-cifra__n {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.nodo-cifra__r {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: var(--nodo-tracking);
    opacity: 0.5;
}

/* La tabla del tablero: reglas de un cabo, sin caja exterior. */
.nodo-tabla {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--nodo-linea);
}

.nodo-tabla__cabecera,
.nodo-fila {
    display: grid;
    grid-template-columns: var(--nodo-rejilla);
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 0.25rem;
    border-bottom: 1px solid var(--nodo-linea);
}

.nodo-tabla__cabecera {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: var(--nodo-tracking);
    font-weight: 700;
    opacity: 0.45;
    padding-block: 0.6rem;
}

.nodo-fila {
    color: inherit;
    text-decoration: none;
    transition: background-color 120ms linear, padding-inline 120ms ease-out;
}

/* El hover corre la fila un pelo: se siente mecánico, como un cajón. */
.nodo-fila:hover {
    background: color-mix(in oklch, currentColor 4%, transparent);
    padding-inline: 0.5rem 0;
}

.nodo-fila__nombre {
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* La ficha como barra segmentada: seis campos, seis segmentos. */
.nodo-ficha {
    display: flex;
    align-items: center;
    gap: 3px;
}

.nodo-ficha__seg {
    width: 0.5rem;
    height: 0.75rem;
    background: color-mix(in oklch, currentColor 14%, transparent);
}

.nodo-ficha__seg.is-on {
    background: var(--primary-500);
}

.nodo-ficha em {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    font-style: normal;
    opacity: 0.5;
    margin-inline-start: 0.4rem;
}

/* Las fuentes conectadas: rótulos que se encienden. */
.nodo-fuentes {
    display: flex;
    gap: 0.3rem;
}

.nodo-fuente {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.625rem;
    font-style: normal;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.35rem;
    border: 1px solid color-mix(in oklch, currentColor 14%, transparent);
    opacity: 0.35;
}

.nodo-fuente.is-on {
    opacity: 1;
    border-color: var(--primary-500);
    color: var(--primary-500);
}

.nodo-dato {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
}

.nodo-dato__de {
    opacity: 0.4;
}

.nodo-pendiente {
    font-size: 0.8125rem;
    opacity: 0.75;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nodo-pendiente.is-ok {
    opacity: 0.3;
}

/* En pantalla angosta la rejilla se cae: se apila y se ocultan las columnas
   que sólo tienen sentido comparadas en vertical. */
@media (max-width: 68rem) {
    .nodo-tablero {
        --nodo-rejilla: 1fr auto;
    }

    .nodo-tabla__cabecera,
    .nodo-fila > :nth-child(n + 3) {
        display: none;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   El borrador, previsualizado
   ─────────────────────────────────────────────────────────────────────
   Se lee para decidir si se publica, así que se compone como se leería
   publicado: una medida de lectura, interlínea generosa y jerarquía real.
   Un borrador revisado en la caja apretada de un formulario se aprueba
   por cansancio.
   ───────────────────────────────────────────────────────────────────── */

.nodo-articulo {
    max-width: 62ch;
    margin-inline: auto;
    padding-block: 0.5rem 1.5rem;
}

.nodo-articulo__cabecera {
    border-bottom: 1px solid var(--nodo-linea);
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

.nodo-articulo__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.45;
    margin-bottom: 1rem;
}

.nodo-articulo__meta span + span::before {
    content: '·';
    margin-inline-end: 0.75rem;
    opacity: 0.6;
}

.nodo-articulo h1 {
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.nodo-articulo__bajada {
    margin-top: 0.9rem;
    font-size: 1.0625rem;
    line-height: 1.5;
    opacity: 0.7;
    text-wrap: pretty;
}

.nodo-articulo__cuerpo {
    font-size: 1rem;
    line-height: 1.72;
}

.nodo-articulo__cuerpo > * + * {
    margin-top: 1.15em;
}

.nodo-articulo__cuerpo h2,
.nodo-articulo__cuerpo h3 {
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    /* Un subtítulo pertenece a lo que viene, no a lo que quedó atrás. */
    margin-top: 2.25em;
    margin-bottom: 0.6em;
}

.nodo-articulo__cuerpo h2 { font-size: 1.25rem; }
.nodo-articulo__cuerpo h3 { font-size: 1.0625rem; }

.nodo-articulo__cuerpo :is(h2, h3):first-child {
    margin-top: 0;
}

.nodo-articulo__cuerpo p {
    text-wrap: pretty;
}

.nodo-articulo__cuerpo :is(ul, ol) {
    padding-inline-start: 1.35em;
}

.nodo-articulo__cuerpo li + li {
    margin-top: 0.45em;
}

.nodo-articulo__cuerpo li::marker {
    color: var(--primary-500);
}

.nodo-articulo__cuerpo blockquote {
    border-inline-start: 2px solid var(--primary-500);
    padding-inline-start: 1.15em;
    font-size: 1.0625rem;
    opacity: 0.85;
}

.nodo-articulo__cuerpo a {
    color: var(--primary-500);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

.nodo-articulo__cuerpo strong {
    font-weight: 700;
}

.nodo-articulo__vacio {
    opacity: 0.45;
    font-style: italic;
}

/* El pie de la mesa de revisión: contra qué se compara el texto. */
.nodo-articulo__pie {
    margin-top: 3.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--nodo-linea);
    display: grid;
    gap: 1.5rem;
}

.nodo-articulo__pie h2 {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: var(--nodo-tracking);
    font-weight: 700;
    opacity: 0.45;
    margin-bottom: 0.4rem;
}

.nodo-articulo__pie p {
    font-size: 0.9375rem;
    line-height: 1.6;
    opacity: 0.8;
}

/* ─── El resumen semanal, nativo ────────────────────────────────────── */

.nodo-lectura {
    max-width: 68ch;
}

.nodo-lectura__rotulo,
.nodo-fuente-bloque h2 {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: var(--nodo-tracking);
    font-weight: 700;
    opacity: 0.45;
}

.nodo-lectura__apertura {
    margin-top: 0.75rem;
    font-size: 1.125rem;
    line-height: 1.6;
    text-wrap: pretty;
}

.nodo-lectura__puntos {
    margin-top: 1.75rem;
    display: grid;
    gap: 1.25rem;
}

.nodo-punto {
    padding-inline-start: 1rem;
    border-inline-start: 2px solid color-mix(in oklch, currentColor 15%, transparent);
}

/* El enfoque lo dice el borde, no un icono ni un fondo de color. */
.nodo-punto.is-atencion { border-inline-start-color: var(--primary-500); }
.nodo-punto.is-positivo { border-inline-start-color: color-mix(in oklch, currentColor 40%, transparent); }

.nodo-punto h3 {
    font-weight: 700;
    font-size: 0.9375rem;
    margin-bottom: 0.25rem;
}

.nodo-punto p {
    font-size: 0.9375rem;
    line-height: 1.6;
    opacity: 0.8;
    text-wrap: pretty;
}

.nodo-lectura__recomendacion {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--nodo-linea);
    font-size: 1rem;
    line-height: 1.6;
}

/* ─── Las cifras por fuente ─────────────────────────────────────────── */

.nodo-fuente-bloque > header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--nodo-linea);
    margin-bottom: 1.25rem;
}

.nodo-fuente-bloque > header span {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    opacity: 0.4;
}

.nodo-metricas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: 1px;
    background: var(--nodo-linea);
    border: 1px solid var(--nodo-linea);
}

.nodo-metrica {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.9rem 1rem;
    background: var(--color-white, #fff);
}

.dark .nodo-metrica,
:where([data-theme='dark']) .nodo-metrica {
    background: #0a0a0a;
}

.nodo-metrica__rotulo {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.5;
}

.nodo-metrica__valor {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.nodo-metrica__delta {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    opacity: 0.45;
}

.nodo-metrica__delta.is-buena { color: var(--success-500, #16a34a); opacity: 1; }
.nodo-metrica__delta.is-mala { color: var(--primary-500); opacity: 1; }

.nodo-metrica__delta em {
    font-style: normal;
    opacity: 0.55;
    margin-inline-start: 0.3rem;
}

/* ─── Configuración del cliente: se lee, no se llena ────────────────── */

.nodo-config > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--nodo-linea);
    margin-bottom: 1.1rem;
}

.nodo-config > header h2 {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: var(--nodo-tracking);
    font-weight: 700;
    opacity: 0.45;
}

.nodo-config__datos {
    display: grid;
    gap: 0.7rem;
}

.nodo-config__datos > div {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 1rem;
    align-items: baseline;
}

.nodo-config__datos dt {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.45;
}

.nodo-config__datos dd {
    font-size: 0.9375rem;
}

.nodo-config__datos dd.es-dato {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.8125rem;
    word-break: break-all;
}

.nodo-config__falta {
    font-size: 0.9375rem;
    opacity: 0.6;
    max-width: 62ch;
}

/* Los ejes con su peso dibujado: se ve el reparto sin leer los números. */
.nodo-ejes {
    display: grid;
    gap: 0.9rem;
}

.nodo-ejes li {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: 1rem;
    align-items: start;
}

.nodo-ejes__peso {
    position: relative;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
    text-align: end;
    background: linear-gradient(
        to right,
        color-mix(in oklch, var(--primary-500) 22%, transparent) var(--peso),
        color-mix(in oklch, currentColor 8%, transparent) var(--peso)
    );
}

.nodo-ejes strong {
    font-weight: 700;
    font-size: 0.9375rem;
}

.nodo-ejes p {
    font-size: 0.875rem;
    line-height: 1.55;
    opacity: 0.65;
    margin-top: 0.15rem;
    max-width: 68ch;
}

/* ─── El calendario editorial ───────────────────────────────────────── */

.nodo-calendario {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--nodo-linea);
}

.nodo-semana {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 1.5rem;
    padding: 0.9rem 0.25rem;
    border-bottom: 1px solid var(--nodo-linea);
}

/* La semana en curso se marca con la línea de la marca, no con un fondo. */
.nodo-semana.is-esta {
    box-shadow: inset 3px 0 0 var(--primary-500);
    padding-inline-start: 0.75rem;
}

.nodo-semana.is-pasada { opacity: 0.45; }

.nodo-semana > header {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 0.15rem;
}

.nodo-semana__fecha {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.6;
}

.nodo-semana__marca {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: var(--nodo-tracking);
    font-weight: 700;
    color: var(--primary-500);
}

.nodo-semana__ideas {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.nodo-nota {
    display: grid;
    grid-template-columns: 7.5rem 1fr auto;
    gap: 0.9rem;
    align-items: baseline;
    color: inherit;
    text-decoration: none;
    padding: 0.25rem 0;
}

.nodo-nota:hover .nodo-nota__titulo { text-decoration: underline; text-underline-offset: 0.16em; }

.nodo-nota__cliente {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.55;
}

.nodo-nota__titulo {
    font-size: 0.9375rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nodo-nota__estado {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.4;
}

/* El hueco es la información: una semana sin notas se ve como un hueco. */
.nodo-semana__hueco {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    opacity: 0.2;
}

/* La grilla de reportes reusa la del tablero, con sus propias columnas. */
.nodo-tabla--reportes {
    --nodo-rejilla: minmax(10rem, 1.2fr) 6rem 12rem minmax(10rem, 1fr) minmax(10rem, 1fr);
}

@media (max-width: 68rem) {
    .nodo-semana { grid-template-columns: 1fr; gap: 0.5rem; }
    .nodo-nota { grid-template-columns: 1fr; gap: 0.1rem; }
    .nodo-nota__titulo { white-space: normal; }
}

/* ─── Selector de cliente en la barra superior ──────────────────────── */

.nodo-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-inline-end: 0.75rem;
    margin-inline-end: 0.25rem;
    border-inline-end: 1px solid var(--nodo-linea);
}

.nodo-selector__rotulo {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: var(--nodo-tracking);
    font-weight: 700;
    opacity: 0.4;
}

.nodo-selector__select {
    appearance: none;
    background: transparent;
    border: 1px solid var(--nodo-linea);
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding: 0.35rem 1.75rem 0.35rem 0.6rem;
    /* La flecha se dibuja acá para no heredar la del sistema, que en oscuro
       se ve como un parche claro. */
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.nodo-selector__select:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 1px;
}

/* Con un cliente puesto el selector se enciende: no puede pasar inadvertido
   que lo que estás mirando está filtrado. */
.nodo-selector.is-activo .nodo-selector__select {
    border-color: var(--primary-500);
    color: var(--primary-500);
}

.nodo-selector.is-activo .nodo-selector__rotulo {
    opacity: 0.7;
}

@media (max-width: 48rem) {
    .nodo-selector__rotulo { display: none; }
}

/* Lo vencido o fallado se dice en el color de la marca, sin decoración. */
.nodo-vencido {
    color: var(--primary-500);
}

/* ─── El checklist previo a publicar ────────────────────────────────── */

.nodo-checklist {
    border: 1px solid var(--nodo-linea);
    border-inline-start: 3px solid var(--primary-500);
    padding: 1.1rem 1.25rem;
    max-width: 62ch;
    margin-inline: auto;
}

/* Cuando está todo, la marca roja se apaga: deja de pedir atención. */
.nodo-checklist.is-listo {
    border-inline-start-color: color-mix(in oklch, currentColor 25%, transparent);
}

.nodo-checklist h2 {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: var(--nodo-tracking);
    font-weight: 700;
    opacity: 0.5;
    margin-bottom: 0.8rem;
}

.nodo-checklist ul {
    display: grid;
    gap: 0.45rem;
}

.nodo-checklist li {
    display: grid;
    grid-template-columns: 1rem 1fr;
    gap: 0.55rem;
    align-items: baseline;
    font-size: 0.9375rem;
}

.nodo-checklist li:not(.is-ok) {
    font-weight: 700;
}

.nodo-checklist li.is-ok {
    opacity: 0.45;
}

.nodo-checklist__marca {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--primary-500);
}

.nodo-checklist li.is-ok .nodo-checklist__marca {
    color: inherit;
}

.nodo-checklist em {
    display: block;
    font-style: normal;
    font-weight: 400;
    font-size: 0.8125rem;
    opacity: 0.6;
    margin-top: 0.1rem;
}

.nodo-checklist__foto {
    margin-top: 1.1rem;
    max-height: 9rem;
    width: auto;
    border: 1px solid var(--nodo-linea);
}

/* ---------------------------------------------------------------------------
   Previsualización del post en LinkedIn.

   No imita al feed por decoración: el corte de tres líneas es la restricción
   real de LinkedIn, y verla acá es lo que evita aprobar un post cuyo gancho
   queda debajo del «ver más». Los colores salen de currentColor, como el resto
   del panel, para que el modo oscuro no necesite su propia tabla.
   --------------------------------------------------------------------------- */

.nodo-post {
    max-width: 62ch;
    margin: 1.5rem auto;
}

.nodo-post__titulo {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: var(--nodo-tracking);
    font-weight: 700;
    opacity: 0.5;
    margin-bottom: 0.8rem;
}

.nodo-post__vacio {
    border: 1px dashed var(--nodo-linea);
    padding: 1.1rem 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    opacity: 0.65;
}

.nodo-post__tarjeta {
    max-width: 34rem;
    border: 1px solid var(--nodo-linea);
    padding: 1rem 1rem 0;
}

.nodo-post__autor {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
}

.nodo-post__avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    object-fit: cover;
    flex: none;
}

.nodo-post__avatar--iniciales {
    display: grid;
    place-items: center;
    background: var(--primary-500);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 700;
}

.nodo-post__quien {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.nodo-post__quien strong {
    font-size: 0.9375rem;
    font-weight: 700;
}

.nodo-post__quien small {
    font-size: 0.75rem;
    opacity: 0.55;
}

.nodo-post__texto {
    font-size: 0.9375rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Tres líneas: lo que LinkedIn deja ver antes del «ver más». */
.nodo-post__texto.is-cortado {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nodo-post__mas {
    background: none;
    border: 0;
    padding: 0;
    margin-top: 0.3rem;
    font-size: 0.9375rem;
    opacity: 0.55;
    cursor: pointer;
}

.nodo-post__mas:hover {
    opacity: 1;
    text-decoration: underline;
}

.nodo-post__enlace {
    margin: 0.875rem -1rem 0;
    border-top: 1px solid var(--nodo-linea);
    background: color-mix(in oklch, currentColor 5%, transparent);
}

.nodo-post__enlace img {
    display: block;
    width: 100%;
    aspect-ratio: 1.91;
    object-fit: cover;
}

.nodo-post__sinfoto {
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary-500);
}

.nodo-post__enlace-pie {
    padding: 0.625rem 1rem 0.875rem;
    display: grid;
    gap: 0.15rem;
}

.nodo-post__enlace-pie small {
    font-size: 0.75rem;
    opacity: 0.55;
}

.nodo-post__enlace-pie strong {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.35;
}

.nodo-post__nota {
    max-width: 34rem;
    margin-top: 0.55rem;
    font-size: 0.75rem;
    opacity: 0.5;
}

/* ---------------------------------------------------------------------------
   La línea de datos bajo el titular, en la sala editorial.

   Cada dato tiene un peso distinto porque cumple un papel distinto: lo que
   falta pide una acción y va marcado; el eje y la categoría sólo ubican y van
   en bajo contraste; las cifras van en monoespaciada para poder compararlas
   entre filas sin leerlas.
   --------------------------------------------------------------------------- */

.nodo-ficha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.65rem;
    line-height: 1.5;
}

.nodo-ficha__cliente {
    font-weight: 700;
    opacity: 0.85;
}

.nodo-ficha__fecha {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.9em;
    opacity: 0.7;
}

/* Eje y categoría: pastillas. Ubican, no deciden, así que no compiten. */
.nodo-ficha__eje,
.nodo-ficha__cat {
    border: 1px solid var(--nodo-linea);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    font-size: 0.9em;
    opacity: 0.75;
}

.nodo-ficha__cat {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.8em;
    letter-spacing: 0.02em;
    opacity: 0.5;
}

.nodo-ficha__min {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.9em;
    opacity: 0.7;
}

/* Fuera del objetivo de lectura: deja de ser un dato y pasa a ser un aviso. */
.nodo-ficha__min.is-fuera {
    color: var(--primary-500);
    opacity: 1;
    font-weight: 700;
}

/* Lo que falta es lo único que exige hacer algo: es lo que más pesa. */
.nodo-ficha__falta {
    color: var(--primary-500);
    font-weight: 700;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: var(--nodo-tracking);
}