/* Generado desde design/tokens/*.css — no editar a mano (S222). */

/* Autoalojadas desde Google Fonts. El panel no depende de una CDN. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/source-sans-3-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/source-sans-3-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {

    /* colors */
    --ar-primary-50:            #E8F9F4;
    --ar-primary-100:           #C6F1E5;
    --ar-primary-200:           #93E6D2;
    --ar-primary-300:           #56D6B8;
    --ar-primary-400:           #00C49A;
    --ar-primary-500:           #00AE88;
    --ar-primary-600:           #00846C;
    --ar-primary-700:           #006E59;
    --ar-primary-800:           #0A574A;
    --ar-primary-900:           #0C4239;
    --ar-primary-950:           #06302A;
    --ar-neutral-0:             #FFFFFF;
    --ar-neutral-25:            #FAFBFC;
    --ar-neutral-50:            #F5F6FA;
    --ar-neutral-100:           #EEF1F5;
    --ar-neutral-200:           #E4E7EC;
    --ar-neutral-300:           #CDD3DC;
    --ar-neutral-400:           #9AA3B2;
    --ar-neutral-500:           #6B7280;
    --ar-neutral-600:           #4B5563;
    --ar-neutral-700:           #374151;
    --ar-neutral-800:           #1F2A37;
    --ar-neutral-900:           #131A24;
    --ar-neutral-950:           #0B1F33;
    --ar-danger-50:             #FEF2F2;
    --ar-danger-100:            #FEE2E2;
    --ar-danger-200:            #FECACA;
    --ar-danger-500:            #DC2626;
    --ar-danger-600:            #B91C1C;
    --ar-danger-700:            #991B1B;
    --ar-warning-50:            #FFFBEB;
    --ar-warning-100:           #FEF3C7;
    --ar-warning-200:           #FDE68A;
    --ar-warning-500:           #F59E0B;
    --ar-warning-600:           #D97706;
    --ar-warning-700:           #B45309;
    --ar-info-50:               #EFF6FF;
    --ar-info-100:              #DBEAFE;
    --ar-info-200:              #BFDBFE;
    --ar-info-500:              #3B82F6;
    --ar-info-600:              #2563EB;
    --ar-info-700:              #1D4ED8;
    --ar-tabla-alto:            420px;
    --ar-surface-page:          var(--ar-neutral-50);
    --ar-surface-card:          var(--ar-neutral-0);
    --ar-surface-sunken:        var(--ar-neutral-100);
    --ar-surface-hover:         var(--ar-neutral-50);
    --ar-surface-selected:      var(--ar-primary-50);
    --ar-surface-inverse:       var(--ar-neutral-950);
    --ar-surface-overlay:       rgba(11, 31, 51, 0.45);
    --ar-fg:                    var(--ar-neutral-800);
    --ar-fg-secondary:          var(--ar-neutral-600);
    --ar-fg-muted:              var(--ar-neutral-500);
    --ar-fg-soft:               var(--ar-neutral-400);
    --ar-fg-inverse:            var(--ar-neutral-0);
    --ar-fg-accent:             var(--ar-primary-600);

    /* Series de gráfico (S286). Validadas contra #FFFFFF: banda de luminosidad,
       suelo de croma, separación CVD 21,9 y contraste >= 3:1. NO se usan para
       estado: verde-bien y rojo-mal tienen sus propios tokens. */
    --ar-serie-1:               var(--ar-primary-600);
    --ar-serie-2:               var(--ar-info-600);
    --ar-fg-danger:             var(--ar-danger-600);
    --ar-fg-warning:            var(--ar-warning-700);
    --ar-fg-link:               var(--ar-primary-700);
    --ar-fg-link-hover:         var(--ar-primary-800);
    --ar-border:                var(--ar-neutral-200);
    --ar-border-subtle:         var(--ar-neutral-100);
    --ar-border-strong:         var(--ar-neutral-300);
    --ar-border-accent:         var(--ar-primary-200);
    --ar-ring:                  0 0 0 2px var(--ar-neutral-0), 0 0 0 4px var(--ar-primary-500);
    --ar-ring-danger:           0 0 0 2px var(--ar-neutral-0), 0 0 0 4px var(--ar-danger-500);
    --ar-ring-inset:            inset 0 0 0 1px rgba(11, 31, 51, 0.06);
    --ar-pattern-nodata:        repeating-linear-gradient( -45deg, var(--ar-neutral-100) 0 4px, var(--ar-neutral-0) 4px 8px );

    /* typography */
    --ar-font-display:          'Archivo', system-ui, -apple-system, sans-serif;
    --ar-font-body:             'Source Sans 3', system-ui, -apple-system, sans-serif;
    --ar-font-mono:             'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    /* Escala subida un paso el 06/09/2026 (S285). `sm` a 14 px pedido por
       Javier: es el tamaño de la mayoría de la interfaz y a 13 se leía
       apretado. Sube toda la rampa, no solo ese valor -- dejar `sm` en 14
       con `base` en 14 habría fundido dos escalones en uno. */
    --ar-text-2xs:              12px;
    --ar-text-xs:               13px;
    --ar-text-sm:               14px;
    --ar-text-base:             15px;
    --ar-text-md:               16px;
    --ar-text-lg:               18px;
    --ar-text-xl:               20px;
    --ar-text-2xl:              24px;
    --ar-text-3xl:              30px;
    --ar-text-4xl:              36px;
    --ar-leading-none:          1;
    --ar-leading-tight:         1.25;
    --ar-leading-snug:          1.4;
    --ar-leading-normal:        1.55;
    --ar-leading-relaxed:       1.7;
    --ar-track-tight:           -0.02em;
    --ar-track-snug:            -0.01em;
    --ar-track-none:            0;
    --ar-track-wide:            0.06em;
    --ar-weight-normal:         400;
    --ar-weight-medium:         500;
    --ar-weight-semibold:       600;
    --ar-weight-bold:           700;
    --ar-numeric:               tabular-nums;

    /* spacing */
    --ar-space-0:               0;
    --ar-space-1:               4px;
    --ar-space-2:               8px;
    --ar-space-3:               12px;
    --ar-space-4:               16px;
    --ar-space-5:               20px;
    --ar-space-6:               24px;
    --ar-space-8:               32px;
    --ar-space-10:              40px;
    --ar-space-12:              48px;
    --ar-space-16:              64px;
    --ar-pad-section:           var(--ar-space-6);
    --ar-pad-cell:              var(--ar-space-3);
    --ar-pad-page:              var(--ar-space-6);
    --ar-gap-stack:             var(--ar-space-6);
    --ar-gap-inline:            var(--ar-space-2);
    --ar-gap-field:             var(--ar-space-4);

    /* elevation */
    --ar-radius-xs:             4px;
    --ar-radius-sm:             6px;
    --ar-radius-md:             8px;
    --ar-radius-lg:             12px;
    --ar-radius-xl:             16px;
    --ar-radius-pill:           999px;
    --ar-shadow-xs:             0 1px 2px rgba(11, 31, 51, 0.04);
    --ar-shadow-sm:             0 1px 3px rgba(11, 31, 51, 0.06), 0 1px 2px rgba(11, 31, 51, 0.04);
    --ar-shadow-md:             0 4px 12px rgba(11, 31, 51, 0.08), 0 2px 4px rgba(11, 31, 51, 0.04);
    --ar-shadow-lg:             0 20px 40px rgba(11, 31, 51, 0.16);
    --ar-card:                  var(--ar-shadow-xs), var(--ar-ring-inset);
    --ar-border-width:          1px;
    --ar-ease:                  cubic-bezier(0.4, 0, 0.2, 1);
    --ar-duration-fast:         100ms;
    --ar-duration-normal:       150ms;
    --ar-duration-slow:         250ms;

    /* layout */
    --ar-sidebar-w:             288px;
    --ar-sidebar-w-collapsed:   88px;
    --ar-topbar-h:              64px;
    --ar-content-max:           1536px;
    --ar-content-pad:           24px;
    --ar-row-h:                 44px;
    --ar-row-h-compact:         36px;
    --ar-header-row-h:          40px;
    --ar-field-h:               38px;
    --ar-field-h-sm:            32px;
    --ar-control-h:             36px;
    --ar-panel-w:               640px;
    --ar-modal-w:               520px;
    --ar-z-sticky:              20;
    --ar-z-dropdown:            40;
    --ar-z-overlay:             50;
    --ar-z-toast:               60;
}

/* ─ Puente con Filament ────────────────────────────────────────────── */

/* Los badges pintan texto con el tono 600 sobre el fondo 50, y tres de los
   seis se quedan por debajo de 4,5:1. Filament inyecta `--c-600:var(--primary-600)`,
   así que redefinir el tono en el propio badge lo corrige sin tocar la rampa (S222). */
.fi-badge.fi-color-primary { --primary-600: 0, 110, 89; }
.fi-badge.fi-color-danger  { --danger-600: 185, 28, 28; }
.fi-badge.fi-color-warning { --warning-600: 180, 83, 9; }

/* Archivo solo en títulos de página; el cuerpo lo pone `->font()`. */
.fi-header-heading {
    font-family: var(--ar-font-display);
    letter-spacing: var(--ar-track-tight);
}

/* Sin cifras tabulares las columnas de números bailan en cada refresco de Livewire. */
.fi-ta-cell,
.fi-wi-stats-overview-stat-value {
    font-variant-numeric: var(--ar-numeric);
}

/* Un hueco de datos no es un error: no lleva color, lleva trama. */
.ar-sin-datos {
    background: var(--ar-pattern-nodata);
    color: var(--ar-fg-secondary);
}

/* ─ Acceso ─────────────────────────────────────────────────────────── */
/* Geometría de design/ui_kits/login/Login.jsx: 408 px, radius-lg, sombra
   media y 32 px de aire. Filament trae una tarjeta más ancha y más plana. */
.fi-simple-main {
    max-width: 408px;
    border-radius: var(--ar-radius-lg);
    box-shadow: var(--ar-shadow-md);
    padding: var(--ar-space-8);
}

.fi-simple-header .fi-simple-header-heading {
    font-family: var(--ar-font-display);
    font-size: var(--ar-text-2xl);
    letter-spacing: var(--ar-track-snug);
}

.ar-auth-pie {
    margin: var(--ar-space-6) 0 0;
    text-align: center;
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-soft);
}

.ar-auth-pie a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ─ Base: Filament doblado al diseño ───────────────────────────────────
   Esto se escribe UNA vez y lo heredan todas las pantallas. Cada regla
   existe porque el valor de serie de Filament no es el del diseño; lo que
   ya coincide no se toca. */

/* Botón — 38 px de alto y 14 px de aire; Filament da 36 y 12.
   El radio (8 px) y el semibold ya coinciden. */
.fi-btn {
    min-height: var(--ar-field-h);
    padding-inline: 14px;
    gap: var(--ar-gap-inline);
}

/* Campo — misma altura que el botón, para que un filtro y su botón
   queden alineados en la misma fila. */
.fi-input {
    min-height: var(--ar-field-h);
    padding-inline: 11px;
}

/* El select solo por la izquierda: Filament reserva `pe-8` a la derecha para
   el chevron, y tocar `padding-inline` se lo comía -- el número se montaba
   encima de la flecha. */
.fi-select-input {
    min-height: var(--ar-field-h);
    padding-inline-start: 11px;
}

/* Etiqueta de campo */
.fi-fo-field-wrp-label {
    font-size: var(--ar-text-sm);
    font-weight: var(--ar-weight-medium);
    color: var(--ar-fg-secondary);
}

/* Sección — el panel es plano: sombra mínima y anillo, no sombra media. */
.fi-section {
    box-shadow: var(--ar-shadow-xs);
}

/* Cabecera de tabla — 12 px sobre el gris hundido. Filament la pinta a
   14 px sobre casi blanco, y deja de leerse como cabecera. */
.fi-ta-header-cell {
    height: var(--ar-header-row-h);
    padding-block: 0;
    padding-inline: var(--ar-pad-cell);
    background: var(--ar-surface-sunken);
    font-size: var(--ar-text-xs);
    font-weight: var(--ar-weight-semibold);
    color: var(--ar-fg-secondary);
}

/* Fila de 44 px: cabe keyword + URL en dos líneas sin romper el ritmo.
   Por eso `->compact()` no se usa en ninguna tabla. */
.fi-ta-row .fi-ta-cell {
    min-height: var(--ar-row-h);
}

/* ─ Cartera ────────────────────────────────────────────────────────────
   Celda de dos líneas de design/ui_kits/panel/Cartera.jsx: cifra arriba,
   variación debajo. La segunda línea nunca queda vacía — si no hay
   variación dice por qué — para que el ojo no lea un hueco como un cero. */
.ar-celda {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 0;
}

.ar-celda-cifra {
    font-family: var(--ar-font-mono);
    font-variant-numeric: var(--ar-numeric);
    font-size: var(--ar-text-base);
    font-weight: var(--ar-weight-medium);
    color: var(--ar-fg);
    line-height: 1.15;
    white-space: nowrap;
}

.ar-celda-unidad,
.ar-celda-palabra {
    font-family: var(--ar-font-body);
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-muted);
    margin-left: 3px;
}

.ar-celda-var {
    font-family: var(--ar-font-mono);
    font-variant-numeric: var(--ar-numeric);
    font-size: var(--ar-text-2xs);
    line-height: 1.2;
    white-space: nowrap;
}

/* Javier pidió el rojo en las caídas el 28/08 (S226). Va contra el
   `SKILL.md` del diseño —«Red is for what is broken»— y es su decisión:
   6,47:1 sobre blanco, así que pasa AA a 11 px. */
.ar-var-mejor { color: var(--ar-fg-accent); }
.ar-var-peor  { color: var(--ar-fg-danger); }
.ar-var-igual { color: var(--ar-fg-soft); }

.ar-celda-nota {
    font-size: var(--ar-text-2xs);
    color: var(--ar-fg-soft);
    line-height: 1.2;
    white-space: nowrap;
}

.ar-celda-revisar {
    display: inline-block;
    width: 13px;
    height: 13px;
    color: var(--ar-fg-warning);
    vertical-align: -1px;
    margin-right: 4px;
}

/* Un hueco de datos no lleva color, lleva trama. */
.ar-sin-datos-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--ar-pattern-nodata);
    border: 1px solid var(--ar-border);
    border-radius: var(--ar-radius-sm);
    padding: 3px 7px;
    font-family: var(--ar-font-body);
    font-size: var(--ar-text-2xs);
    color: var(--ar-fg-muted);
    white-space: nowrap;
    cursor: help;
}

.ar-sin-datos-icono {
    width: 12px;
    height: 12px;
    color: var(--ar-fg-soft);
}

/* Leyenda: el contrato de lectura de la tabla, bajo ella. */
.ar-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ar-space-2) var(--ar-space-5);
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-muted);
    line-height: 1.5;
}

.ar-leyenda span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.ar-leyenda-muestra {
    width: 22px;
    height: 12px;
    background: var(--ar-pattern-nodata);
    border: 1px solid var(--ar-border);
    border-radius: 3px;
}

/* La cadencia bajo el título de columna: sin ella, una variación mensual
   entre columnas semanales se lee como del mismo periodo. */
.ar-cadencia {
    display: block;
    font-family: var(--ar-font-body);
    font-size: var(--ar-text-2xs);
    font-weight: var(--ar-weight-normal);
    color: var(--ar-fg-soft);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;
    margin-top: 1px;
}

/* La cabecera crece a dos líneas: 40 px ya no vale. */
.fi-ta-header-cell:has(.ar-cadencia) {
    height: auto;
    padding-block: 7px;
}

/* ─ Segmentado ─────────────────────────────────────────────────────────
   design/ui_kits/panel/Dashboard.jsx: grupo con borde fuerte y radio md,
   opciones de 32 px separadas por una línea, y la activa sobre el fondo de
   selección con el verde accionable. */
.ar-segmentado {
    display: inline-flex;
    background: var(--ar-surface-card);
    border: 1px solid var(--ar-border-strong);
    border-radius: var(--ar-radius-md);
    overflow: hidden;
}

.ar-segmentado-opcion {
    height: 32px;
    padding: 0 14px;
    min-width: 64px;
    background: transparent;
    color: var(--ar-fg-secondary);
    font-family: var(--ar-font-body);
    font-size: var(--ar-text-sm);
    font-weight: var(--ar-weight-medium);
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--ar-duration-fast) var(--ar-ease),
                color var(--ar-duration-fast) var(--ar-ease);
}

.ar-segmentado-opcion + .ar-segmentado-opcion {
    border-left: 1px solid var(--ar-border);
}

.ar-segmentado-opcion:hover:not(.ar-segmentado-on) {
    background: var(--ar-surface-hover);
    color: var(--ar-fg);
}

.ar-segmentado-on {
    background: var(--ar-surface-selected);
    color: var(--ar-fg-accent);
    font-weight: var(--ar-weight-semibold);
}

.ar-segmentado-opcion:focus-visible {
    outline: none;
    box-shadow: var(--ar-ring);
    position: relative;
}

.ar-segmentado-opcion[disabled] {
    opacity: 0.55;
    cursor: default;
}

/* ─ Cabecera de la cartera ─────────────────────────────────────────────
   Una sola fila: título, ventanas y segmentado, todo a la misma altura. */
.ar-cartera-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ar-space-4);
    padding: var(--ar-space-4) var(--ar-space-6);
}

.ar-cartera-titulo {
    margin: 0;
    font-family: var(--ar-font-display);
    font-size: var(--ar-text-lg);
    font-weight: var(--ar-weight-semibold);
    color: var(--ar-fg);
    letter-spacing: var(--ar-track-snug);
}

.ar-cartera-controles {
    display: flex;
    align-items: center;
    gap: var(--ar-space-3);
    flex-wrap: wrap;
}

/* ─ Rango de fechas ────────────────────────────────────────────────────
   Dos badges y un «vs» en medio: se lee de un vistazo qué se compara con
   qué, que es lo que una frase corrida no consigue. */
.ar-rangos {
    display: inline-flex;
    align-items: center;
    gap: var(--ar-space-2);
    flex-wrap: wrap;
}

.ar-rango {
    display: inline-flex;
    align-items: center;
    /* 32 px: la misma altura que el segmentado, para que la fila no baile. */
    height: 32px;
    background: var(--ar-surface-sunken);
    border: 1px solid var(--ar-border);
    border-radius: var(--ar-radius-md);
    padding: 0 12px;
    font-family: var(--ar-font-mono);
    font-variant-numeric: var(--ar-numeric);
    font-size: var(--ar-text-2xs);
    color: var(--ar-fg-secondary);
    white-space: nowrap;
    cursor: help;
}

/* El periodo medido lleva el color de marca; el de comparación, no. */
.ar-rango-actual {
    background: var(--ar-surface-selected);
    border-color: var(--ar-border-accent);
    color: var(--ar-fg-accent);
    font-weight: var(--ar-weight-semibold);
}

.ar-rango-vs {
    font-size: var(--ar-text-2xs);
    color: var(--ar-fg-soft);
    text-transform: uppercase;
    letter-spacing: var(--ar-track-wide);
}

/* ─ Avisos del escritorio ──────────────────────────────────────────────
   «Pendiente de ti» y «Deberías de revisar». Lista y no tabla: son pocas
   filas y heterogéneas, y una tabla obligaría a columnas comunes que no
   existen. */
.ar-avisos {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ar-aviso {
    display: flex;
    align-items: flex-start;
    gap: var(--ar-space-3);
    padding: var(--ar-space-3) 0;
}

.ar-aviso + .ar-aviso {
    border-top: 1px solid var(--ar-border-subtle);
}

.ar-aviso-icono {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin-top: 1px;
}

.ar-aviso-danger  .ar-aviso-icono { color: var(--ar-fg-danger); }
.ar-aviso-warning .ar-aviso-icono { color: var(--ar-fg-warning); }
.ar-aviso-info    .ar-aviso-icono { color: var(--ar-info-600); }
.ar-aviso-primary .ar-aviso-icono { color: var(--ar-fg-accent); }
.ar-aviso-gray    .ar-aviso-icono { color: var(--ar-fg-soft); }

.ar-aviso-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.ar-aviso-titulo {
    font-size: var(--ar-text-base);
    font-weight: var(--ar-weight-medium);
    color: var(--ar-fg);
    line-height: var(--ar-leading-snug);
}

/* El motivo, en una línea. Una cuenta sin motivo al lado no la acciona nadie. */
.ar-aviso-detalle {
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-muted);
    line-height: var(--ar-leading-snug);
    text-wrap: pretty;
}

/* El enlace es lo que separa una tarea de una queja. */
.ar-aviso-accion {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    align-self: center;
    padding: 4px 10px;
    border: 1px solid var(--ar-border-strong);
    border-radius: var(--ar-radius-md);
    font-size: var(--ar-text-sm);
    font-weight: var(--ar-weight-medium);
    color: var(--ar-fg-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--ar-duration-fast) var(--ar-ease),
                color var(--ar-duration-fast) var(--ar-ease);
}

.ar-aviso-accion:hover {
    background: var(--ar-surface-selected);
    border-color: var(--ar-border-accent);
    color: var(--ar-fg-accent);
}

.ar-aviso-accion-icono {
    width: 14px;
    height: 14px;
}

/* Vacío es buena noticia, no un hueco: verde, no trama. */
.ar-aviso-vacio {
    display: flex;
    align-items: center;
    gap: var(--ar-space-2);
    margin: 0;
    font-size: var(--ar-text-sm);
    color: var(--ar-fg-secondary);
}

.ar-aviso-vacio-icono {
    width: 18px;
    height: 18px;
    color: var(--ar-fg-accent);
}

/* ─ Mi cuenta ──────────────────────────────────────────────────────────
   Dos formularios en paralelo que guardan por separado: un envío es una
   petición de Livewire, y mezclarlos obligaría a rellenar la contraseña
   para cambiarse el nombre. */
.ar-cuenta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--ar-gap-stack);
}

.ar-cuenta-pie {
    display: flex;
    align-items: center;
    gap: var(--ar-space-4);
    flex-wrap: wrap;
    margin-top: var(--ar-space-4);
}

.ar-cuenta-nota {
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-muted);
    line-height: var(--ar-leading-snug);
    text-wrap: pretty;
}

.ar-cuenta-datos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ar-space-8);
    margin: 0 0 var(--ar-space-4);
}

.ar-cuenta-datos dt {
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-muted);
    margin-bottom: 2px;
}

.ar-cuenta-datos dd {
    margin: 0;
    font-size: var(--ar-text-base);
    font-weight: var(--ar-weight-medium);
    color: var(--ar-fg);
}

.ar-cuenta-acciones {
    display: flex;
    gap: var(--ar-gap-inline);
    flex-wrap: wrap;
    margin-top: var(--ar-space-4);
}

/* Los códigos, en mono y en rejilla: se copian a mano o se leen en voz alta. */
.ar-codigos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--ar-space-2);
    margin: var(--ar-space-4) 0 var(--ar-space-2);
    padding: 0;
    list-style: none;
}

.ar-codigos li {
    background: var(--ar-surface-sunken);
    border: 1px solid var(--ar-border);
    border-radius: var(--ar-radius-sm);
    padding: 6px 10px;
    font-family: var(--ar-font-mono);
    font-size: var(--ar-text-sm);
    color: var(--ar-fg);
    letter-spacing: 0.04em;
}

/* ─ Ayuda «¿no aparece?» ───────────────────────────────────────────────
   La lista enseña las propiedades donde AriSEO está dado de alta, no todas
   las que existen. Sin decirlo, un desplegable al que le falta lo que
   buscas parece roto (S236). */
.ar-ayuda {
    display: flex;
    flex-direction: column;
    gap: var(--ar-space-4);
    font-size: var(--ar-text-base);
    color: var(--ar-fg-secondary);
}

.ar-ayuda p,
.ar-ayuda ol {
    margin: 0;
}

.ar-ayuda-intro {
    line-height: var(--ar-leading-normal);
    text-wrap: pretty;
}

/* El correo, en mono y de una pieza: se copia, no se lee. */
.ar-ayuda-correo {
    font-family: var(--ar-font-mono);
    font-size: var(--ar-text-sm);
    color: var(--ar-fg);
    background: var(--ar-surface-sunken);
    border: 1px solid var(--ar-border);
    border-radius: var(--ar-radius-md);
    padding: 10px 12px;
    overflow-wrap: anywhere;
    cursor: copy;
    user-select: all;
}

.ar-ayuda-correo:hover {
    border-color: var(--ar-border-accent);
}

.ar-ayuda-pasos {
    display: flex;
    flex-direction: column;
    gap: var(--ar-space-2);
    padding-left: 1.2em;
    line-height: var(--ar-leading-snug);
}

.ar-ayuda-nota {
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-muted);
    line-height: var(--ar-leading-snug);
    text-wrap: pretty;
}

/* ─ Borrar un proyecto ─────────────────────────────────────────────────
   El destrozo concreto delante, no un «¿estás seguro?» (regla 1, S238). */
.ar-borrar {
    display: flex;
    flex-direction: column;
    gap: var(--ar-space-3);
}

.ar-borrar-titulo {
    margin: 0;
    font-size: var(--ar-text-base);
    font-weight: var(--ar-weight-medium);
    color: var(--ar-fg);
}

.ar-borrar-lista {
    display: flex;
    flex-direction: column;
    gap: var(--ar-space-1);
    margin: 0;
    padding-left: 1.2em;
    font-family: var(--ar-font-mono);
    font-variant-numeric: var(--ar-numeric);
    font-size: var(--ar-text-sm);
    color: var(--ar-fg-secondary);
}

/* Lo que NO se borra y queda huérfano: es lo que nadie espera. */
.ar-borrar-huerfano {
    color: var(--ar-fg-warning);
    font-weight: var(--ar-weight-medium);
}

.ar-borrar-nota,
.ar-borrar-vacio {
    margin: 0;
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-muted);
    line-height: var(--ar-leading-snug);
    text-wrap: pretty;
}

/* El periodo medido son dos campos de fecha DENTRO del badge (S245): se
   pulsa y se abre el calendario del navegador, sin modal. */
.ar-fecha {
    border: 0;
    background: transparent;
    padding: 0;
    font-family: var(--ar-font-mono);
    font-variant-numeric: var(--ar-numeric);
    font-size: var(--ar-text-2xs);
    color: inherit;
    cursor: pointer;
    width: auto;
}

.ar-fecha:focus {
    outline: none;
}

.ar-rango-actual:focus-within {
    box-shadow: var(--ar-ring);
}

/* El icono del calendario, en el color del badge y no en el gris del sistema. */
.ar-fecha::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.55;
    filter: grayscale(1);
    padding: 0;
    margin-left: 2px;
}

.ar-fecha::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.ar-fecha-guion {
    margin: 0 4px;
    opacity: 0.6;
}

/* Quitar el rango a mano y volver al periodo. Solo aparece si hay rango. */
.ar-rango-quitar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: var(--ar-radius-pill);
    background: transparent;
    color: var(--ar-fg-muted);
    font-size: var(--ar-text-base);
    line-height: 1;
    cursor: pointer;
}

.ar-rango-quitar:hover {
    background: var(--ar-surface-sunken);
    color: var(--ar-fg);
}

/* ─ Indicador de carga ─────────────────────────────────────────────────
   Ocupa la zona donde está la información, en blanco y centrado (S249). La
   altura mínima es para cuando hay pocos proyectos: sin ella, una tabla de
   dos filas dejaría al aviso sin sitio donde centrarse. */
.ar-tabla-zona {
    position: relative;
}

.ar-tabla-zona .fi-ta-content {
    min-height: var(--ar-tabla-alto);
}

/* El velo TAPA los datos, no los quita: si se quitaran, la tabla perdería su
   altura y la página saltaría bajo el cursor justo mientras se espera. */
.ar-zona-velo {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: var(--ar-surface-card);
}

.ar-zona-cargando .ar-zona-velo {
    display: flex;
}

/* La cabecera queda POR ENCIMA del velo: taparla dejaría sin ver el control
   que se acaba de pulsar, que es lo único que explica la espera. */
.ar-tabla-zona .fi-ta-header-ctn {
    position: relative;
    z-index: 20;
    background: var(--ar-surface-card);
}

.ar-zona-aviso {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--ar-text-sm);
    font-weight: var(--ar-weight-medium);
    color: var(--ar-fg-muted);
}

.ar-cargando-rueda {
    width: 18px;
    height: 18px;
    animation: ar-girar 0.7s linear infinite;
}

@keyframes ar-girar {
    to { transform: rotate(360deg); }
}

/* Mientras corre, los controles se apagan: pulsar dos veces manda dos
   peticiones y la segunda pisa a la primera. */
.ar-fecha[disabled],
.ar-segmentado-opcion[disabled] {
    opacity: 0.55;
    cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
    .ar-cargando-rueda { animation-duration: 2s; }
}

/* ─ Analizar página (S250) ─────────────────────────────────────────────
   El pie del formulario: botón, nota y aviso de carga en una línea. */
.ar-pagina-pie {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.ar-pagina-nota {
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-muted);
}

/* ─ Perfil de enlaces (S257) ───────────────────────────────────────────
   Qué falta, y la tabla de lo subido. */
.ar-enlaces-faltan {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 4px;
}

.ar-enlaces-faltan li {
    font-size: var(--ar-text-sm);
    font-weight: var(--ar-weight-medium);
}

.ar-enlaces-faltan li span {
    font-weight: var(--ar-weight-normal);
    color: var(--ar-fg-muted);
    margin-inline-start: 8px;
}

.ar-tabla-simple {
    overflow-x: auto;
}

.ar-tabla-simple table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ar-text-sm);
}

.ar-tabla-simple th,
.ar-tabla-simple td {
    padding: 8px 10px;
    text-align: start;
    border-bottom: 1px solid var(--ar-border-subtle);
    white-space: nowrap;
}

.ar-tabla-simple th {
    font-size: var(--ar-text-xs);
    font-weight: var(--ar-weight-medium);
    color: var(--ar-fg-muted);
}

.ar-tabla-simple .ar-num {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

/* ─ Acciones de una oportunidad AEO (S263) ─────────────────────────────
   «Hecha» y «descartada» no son lo mismo y por eso son dos botones. */
.ar-aeo-acciones {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ar-border-subtle);
}

.ar-aeo-nota {
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-muted);
}

/* ─ El informe de canibalización (S267) ────────────────────────────────
   Ninguna herramienta del mercado decide quién gana: todas enseñan las
   cifras y te lo dejan a ti. Aquí se decide, y se dice por qué. */
.ar-cani-ganadora,
.ar-cani-plan,
.ar-cani-bien {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--ar-radius-md);
    background: var(--ar-surface-sunken);
    font-size: var(--ar-text-sm);
}

.ar-cani-bien {
    background: var(--ar-surface-selected);
    color: var(--ar-fg-accent);
}

.ar-cani-bien span {
    display: block;
    margin-top: 4px;
    color: var(--ar-fg);
}

.ar-cani-titulo {
    font-size: var(--ar-text-xs);
    font-weight: var(--ar-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ar-fg-muted);
    margin-bottom: 4px;
}

.ar-cani-url {
    font-family: var(--ar-font-mono);
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-accent);
    word-break: break-all;
}

.ar-cani-razones,
.ar-cani-pasos,
.ar-cani-enlaces {
    margin: 6px 0 0;
    padding-inline-start: 20px;
    display: grid;
    gap: 4px;
}

.ar-cani-pasos {
    list-style: decimal;
}

.ar-cani-enlaces {
    list-style: none;
    padding-inline-start: 0;
    font-size: var(--ar-text-xs);
}

.ar-cani-resumen {
    margin: 0 0 6px;
    color: var(--ar-fg-muted);
}

.ar-cani-bloque {
    margin-top: 10px;
    font-size: var(--ar-text-sm);
}

.ar-cani-bloque > summary {
    cursor: pointer;
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-muted);
}

.ar-cani-formato {
    margin-top: 8px;
    font-size: var(--ar-text-xs);
    font-weight: var(--ar-weight-medium);
}

.ar-cani-codigo {
    margin: 4px 0 0;
    padding: 8px 10px;
    border-radius: var(--ar-radius-sm);
    background: var(--ar-surface-sunken);
    font-size: var(--ar-text-xs);
    overflow-x: auto;
    white-space: pre;
}

.ar-cani-desde {
    font-family: var(--ar-font-mono);
}

.ar-cani-anchor {
    color: var(--ar-fg-muted);
    margin-inline-start: 6px;
}

.ar-cani-nofollow {
    margin-inline-start: 6px;
    padding: 0 5px;
    border-radius: var(--ar-radius-sm);
    background: var(--ar-surface-sunken);
    color: var(--ar-fg-muted);
    font-size: var(--ar-text-2xs);
    text-transform: uppercase;
}

.ar-cani-vacio {
    margin: 6px 0 0;
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-muted);
}

/* ─ Un documento del motor, maquetado (S269) ───────────────────────────
   Venía en un `<pre>`: tablas como texto alineado a mano y títulos con
   almohadillas. Es un informe, y se lee como un informe. */
.ar-doc {
    padding: 16px 18px;
    border-top: 1px solid var(--ar-border-subtle);
    font-size: var(--ar-text-sm);
    line-height: 1.65;
    color: var(--ar-fg);
    overflow-x: auto;
}

.ar-doc h1,
.ar-doc h2,
.ar-doc h3 {
    margin: 20px 0 8px;
    font-weight: var(--ar-weight-semibold);
    line-height: 1.3;
}

.ar-doc h1 { font-size: var(--ar-text-lg); }
.ar-doc h2 { font-size: var(--ar-text-base); }
.ar-doc h3 { font-size: var(--ar-text-sm); color: var(--ar-fg-secondary); }

.ar-doc > :first-child { margin-top: 0; }

.ar-doc p,
.ar-doc ul,
.ar-doc ol {
    margin: 0 0 10px;
}

.ar-doc ul,
.ar-doc ol {
    padding-inline-start: 22px;
}

.ar-doc li { margin-bottom: 3px; }

.ar-doc strong { font-weight: var(--ar-weight-semibold); }

.ar-doc code {
    padding: 1px 5px;
    border-radius: var(--ar-radius-sm);
    background: var(--ar-surface-sunken);
    font-family: var(--ar-font-mono);
    font-size: 0.9em;
}

.ar-doc pre {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: var(--ar-radius-md);
    background: var(--ar-surface-sunken);
    overflow-x: auto;
}

.ar-doc pre code {
    padding: 0;
    background: none;
}

.ar-doc table {
    width: 100%;
    margin: 0 0 14px;
    border-collapse: collapse;
    font-size: var(--ar-text-xs);
}

.ar-doc th,
.ar-doc td {
    padding: 6px 10px;
    text-align: start;
    border-bottom: 1px solid var(--ar-border-subtle);
    vertical-align: top;
}

.ar-doc th {
    font-weight: var(--ar-weight-semibold);
    color: var(--ar-fg-muted);
    white-space: nowrap;
}

.ar-doc hr {
    margin: 18px 0;
    border: 0;
    border-top: 1px solid var(--ar-border-subtle);
}

.ar-doc blockquote {
    margin: 0 0 12px;
    padding-inline-start: 12px;
    border-inline-start: 3px solid var(--ar-border);
    color: var(--ar-fg-secondary);
}

.ar-doc a {
    color: var(--ar-fg-accent);
    text-decoration: underline;
}

/* ─ La tarjeta de un caso de canibalización (S272) ─────────────────────
   Iba con utilidades de Tailwind escritas a mano y acabó con seis tamaños
   de texto distintos en la misma tarjeta. */
.ar-casos {
    display: grid;
    gap: 16px;
}

.ar-casos-intro,
.ar-caso-vacio {
    margin: 0;
    font-size: var(--ar-text-sm);
    color: var(--ar-fg-secondary);
}

.ar-casos-intro span {
    color: var(--ar-fg-muted);
}

.ar-caso {
    padding: 16px 18px;
    border: 1px solid var(--ar-border);
    border-radius: var(--ar-radius-lg);
    background: var(--ar-surface-card);
}

.ar-caso-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

/* La consulta ES el caso, así que manda en la tarjeta (S300). */
.ar-caso-que {
    margin: 0;
    min-width: 0;
}

.ar-caso-consulta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 4px;
    font-size: var(--ar-text-lg);
    font-weight: var(--ar-weight-semibold);
    color: var(--ar-fg);
}

.ar-caso-termino {
    padding: 2px 10px;
    border: 1px solid var(--ar-border-accent);
    border-radius: var(--ar-radius-sm);
    background: var(--ar-surface-selected);
    color: var(--ar-primary-800);
}

.ar-caso-masq {
    align-self: center;
    font-size: var(--ar-text-xs);
    font-weight: var(--ar-weight-normal);
    color: var(--ar-fg-muted);
}

.ar-caso-sub {
    margin: 0;
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-secondary);
}

.ar-caso-valor {
    text-align: end;
}

.ar-caso-cifra {
    font-size: var(--ar-text-xl);
    font-weight: var(--ar-weight-semibold);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.ar-caso-unidad,
.ar-caso-sinvalor {
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-muted);
}

.ar-caso-aviso {
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: var(--ar-radius-md);
    background: var(--ar-surface-sunken);
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-secondary);
}

.ar-caso-lectura {
    margin: 0 0 12px;
    font-size: var(--ar-text-sm);
    color: var(--ar-fg-secondary);
}

.ar-caso-tabla {
    overflow-x: auto;
}

.ar-caso-tabla table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ar-text-sm);
}

.ar-caso-tabla th {
    padding: 6px 12px 6px 0;
    text-align: start;
    font-size: var(--ar-text-xs);
    font-weight: var(--ar-weight-medium);
    color: var(--ar-fg-muted);
    border-bottom: 1px solid var(--ar-border);
    white-space: nowrap;
}

.ar-caso-tabla td {
    padding: 7px 12px 7px 0;
    border-bottom: 1px solid var(--ar-border-subtle);
}

.ar-caso-tabla .ar-num {
    text-align: end;
    padding-inline-end: 0;
    font-variant-numeric: tabular-nums;
}

.ar-caso-tabla th.ar-num + th.ar-num,
.ar-caso-tabla td.ar-num + td.ar-num {
    padding-inline-start: 16px;
}

.ar-caso-url {
    font-family: var(--ar-font-mono);
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-accent);
    word-break: break-all;
}

.ar-caso-pos {
    font-weight: var(--ar-weight-semibold);
}

/* La ganadora, marcada donde se miran las cifras y no solo debajo. */
.ar-caso-gana td {
    background: var(--ar-surface-selected);
}

.ar-caso-gana td:first-child {
    box-shadow: inset 3px 0 0 var(--ar-fg-accent);
    padding-inline-start: 8px;
}

.ar-caso-consultas {
    margin: 10px 0 0;
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-secondary);
}

.ar-caso-consultas > span {
    font-weight: var(--ar-weight-medium);
    color: var(--ar-fg-muted);
    margin-inline-end: 4px;
}

.ar-caso-consultas em {
    color: var(--ar-fg-muted);
    font-style: normal;
}

.ar-caso-clase,
.ar-caso-pendiente {
    margin: 10px 0 0;
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-muted);
}

/* ─ Analizar página: filtros y borrado (S274) ──────────────────────────
   Con un análisis por URL y varios proyectos, una lista de cincuenta sin
   forma de acotarla no se lee. */
.ar-analisis-filtros {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ar-border-subtle);
}

/* El formulario de filtros ocupa el ancho y deja el aviso de carga al lado. */
.ar-analisis-filtros > form,
.ar-analisis-filtros > div:first-child {
    flex: 1 1 420px;
    min-width: 0;
}

.ar-analisis-vacio {
    margin: 0;
    font-size: var(--ar-text-sm);
    color: var(--ar-fg-muted);
}

.ar-analisis-borrar {
    margin-inline-start: auto;
}

/* ─ El estudio, a un tamaño que se lea (S274) ──────────────────────────
   Javier: «veo un poco pequeño el texto y los encabezados». Es un informe
   que se lee entero, no una nota al pie. */
.ar-doc {
    font-size: var(--ar-text-base);
    line-height: 1.7;
}

.ar-doc h1 { font-size: var(--ar-text-2xl); margin-top: 28px; }
.ar-doc h2 { font-size: var(--ar-text-xl); margin-top: 26px; }
.ar-doc h3 { font-size: var(--ar-text-md); margin-top: 20px; color: var(--ar-fg); }

.ar-doc p,
.ar-doc ul,
.ar-doc ol {
    margin-bottom: 12px;
}

.ar-doc table {
    font-size: var(--ar-text-sm);
}

.ar-doc th,
.ar-doc td {
    padding: 8px 12px;
}

.ar-doc code {
    font-size: 0.92em;
}

/* ─ La evolución del perfil de enlaces (S286) ──────────────────────────
   Dos gráficos con su propia escala en vez de uno con dos ejes: los
   enlaces son miles y los dominios cientos. */
.ar-enl {
    display: grid;
    gap: 18px;
}

.ar-enl-vacio {
    margin: 0;
    font-size: var(--ar-text-sm);
    color: var(--ar-fg-muted);
}

.ar-enl-vacio a {
    color: var(--ar-fg-accent);
    text-decoration: underline;
}

.ar-enl-hero {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.ar-enl-cifra {
    font-size: var(--ar-text-4xl);
    font-weight: var(--ar-weight-semibold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ar-enl-etiqueta {
    font-size: var(--ar-text-sm);
    color: var(--ar-fg-secondary);
}

.ar-enl-etiqueta span {
    display: block;
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-muted);
}

.ar-enl-graficos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.ar-enl-grafico {
    margin: 0;
}

.ar-enl-grafico figcaption {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-muted);
}

.ar-enl-punto {
    width: 9px;
    height: 9px;
    border-radius: var(--ar-radius-pill);
    flex: none;
}

.ar-enl-valor {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 2px 0 8px;
    font-size: var(--ar-text-xl);
    font-weight: var(--ar-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.ar-enl-delta {
    font-size: var(--ar-text-xs);
    font-weight: var(--ar-weight-medium);
    color: var(--ar-fg-muted);
}

.ar-enl-sube { color: var(--ar-fg-accent); }
.ar-enl-baja { color: var(--ar-fg-danger); }

.ar-enl-svg {
    width: 100%;
    height: 44px;
    display: block;
    overflow: visible;
}

.ar-enl-meses {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: var(--ar-text-2xs);
    color: var(--ar-fg-muted);
}

.ar-enl-sinlinea {
    margin: 0;
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-muted);
}

.ar-enl-tabla > summary {
    cursor: pointer;
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-muted);
}

.ar-enl-tabla table {
    width: 100%;
    margin-top: 8px;
    border-collapse: collapse;
    font-size: var(--ar-text-sm);
}

.ar-enl-tabla th,
.ar-enl-tabla td {
    padding: 6px 10px 6px 0;
    text-align: start;
    border-bottom: 1px solid var(--ar-border-subtle);
}

.ar-enl-tabla th {
    font-size: var(--ar-text-xs);
    font-weight: var(--ar-weight-medium);
    color: var(--ar-fg-muted);
}

.ar-enl-tabla .ar-num {
    text-align: end;
    font-variant-numeric: tabular-nums;
}
/* ─ La pestaña Auditoría (S289) ────────────────────────────────────────
   Las conclusiones primero, la lista después. */
.ar-aud {
    display: grid;
    gap: 16px;
}

.ar-aud-cabecera {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-muted);
}

.ar-aud-vacio,
.ar-aud-sinresumen {
    margin: 0;
    font-size: var(--ar-text-sm);
    color: var(--ar-fg-muted);
}

.ar-aud-resumen {
    padding: 16px 18px;
    border: 1px solid var(--ar-border-accent);
    border-radius: var(--ar-radius-lg);
    background: var(--ar-surface-selected);
}

.ar-aud-titular {
    margin: 0 0 12px;
    font-size: var(--ar-text-md);
    font-weight: var(--ar-weight-medium);
    line-height: 1.5;
    color: var(--ar-fg);
}

.ar-aud-bloque + .ar-aud-bloque {
    margin-top: 12px;
}

.ar-aud-bloque-titulo {
    font-size: var(--ar-text-xs);
    font-weight: var(--ar-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ar-fg-muted);
}

.ar-aud-bloque ul {
    margin: 4px 0 0;
    padding-inline-start: 20px;
    display: grid;
    gap: 4px;
    font-size: var(--ar-text-sm);
    line-height: 1.55;
}

/* Un filo de color por bloque: por dónde empezar es acción, lo pendiente
   es deuda y lo nuevo es aviso. Con etiqueta y no solo con color. */
.ar-aud-empezar { border-inline-start: 3px solid var(--ar-fg-accent); padding-inline-start: 10px; }
.ar-aud-pendiente { border-inline-start: 3px solid var(--ar-warning-600); padding-inline-start: 10px; }
.ar-aud-novedad { border-inline-start: 3px solid var(--ar-info-600); padding-inline-start: 10px; }

.ar-aud-cifras {
    display: flex;
    gap: 12px;
    align-items: baseline;
    font-size: var(--ar-text-sm);
    color: var(--ar-fg-secondary);
}

.ar-aud-cerrados {
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-accent);
}

.ar-aud-lista {
    display: grid;
    gap: 8px;
}

/* Cada hallazgo abre su ficha, y la tarjeta entera es el enlace (S290). */
.ar-aud-item {
    display: block;
    padding: 10px 12px;
    border: 1px solid var(--ar-border-subtle);
    border-radius: var(--ar-radius-md);
    background: var(--ar-surface-card);
    color: inherit;
    text-decoration: none;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.ar-aud-item:hover,
.ar-aud-item:focus-visible {
    border-color: var(--ar-primary-600);
    background: var(--ar-surface-hover);
}

.ar-aud-item:focus-visible {
    outline: 2px solid var(--ar-primary-600);
    outline-offset: 2px;
}

.ar-aud-item:hover .ar-aud-item-titulo {
    text-decoration: underline;
}

.ar-aud-item-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ar-aud-item-titulo {
    font-size: var(--ar-text-sm);
    font-weight: var(--ar-weight-medium);
}

.ar-aud-item-meta {
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-muted);
}

.ar-aud-item-obs {
    margin: 6px 0 0;
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-secondary);
    line-height: 1.55;
}

.ar-aud-mas {
    margin: 0;
    font-size: var(--ar-text-xs);
    color: var(--ar-fg-muted);
}

.ar-aud-mas a {
    color: var(--ar-fg-accent);
    text-decoration: underline;
}

/* ═══ La vida de un hallazgo y su hilo de anotaciones (S291) ═══ */

.ar-hall-linea {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ar-hall-paso {
    display: grid;
    gap: 1px;
    padding: 6px 10px;
    border: 1px solid var(--ar-border);
    border-left: 3px solid var(--ar-fg-soft);
    border-radius: var(--ar-radius-sm);
    background: var(--ar-surface-card);
}

/* El color dice el estado sin leerlo: verde cerrado, rojo abierto. */
.ar-hall-paso--resolved { border-left-color: var(--ar-primary-600); }
.ar-hall-paso--fixed { border-left-color: var(--ar-warning-600); }
.ar-hall-paso--deferred { border-left-color: var(--ar-warning-600); }
.ar-hall-paso--false_positive { border-left-color: var(--ar-fg-soft); }
.ar-hall-paso--new,
.ar-hall-paso--recurring,
.ar-hall-paso--worsened,
.ar-hall-paso--improved { border-left-color: var(--ar-danger-600); }

.ar-hall-ciclo {
    font-family: var(--ar-font-mono);
    font-size: var(--ar-text-2xs);
    color: var(--ar-fg-muted);
}

.ar-hall-estado {
    font-size: var(--ar-text-xs);
    font-weight: var(--ar-weight-medium);
}

.ar-hall-grav {
    font-size: var(--ar-text-2xs);
    color: var(--ar-fg-muted);
}

.ar-nota-hilo {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ar-nota {
    padding: 8px 12px;
    border: 1px solid var(--ar-border-subtle);
    border-radius: var(--ar-radius-md);
    background: var(--ar-surface-card);
}

.ar-nota-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.ar-nota-quien {
    font-size: var(--ar-text-xs);
    font-weight: var(--ar-weight-medium);
}

.ar-nota-fecha {
    font-size: var(--ar-text-2xs);
    color: var(--ar-fg-muted);
}

.ar-nota-cuerpo {
    margin: 0;
    font-size: var(--ar-text-sm);
    line-height: 1.55;
    color: var(--ar-fg-secondary);
}