/* Panel de producto. Sobrio, denso y legible: la pantalla la mira alguien
   que va a tomar una decisión con esto, no alguien que la admira. */

:root {
  --tinta: #16191d;
  --tinta-2: #4a5159;
  --tinta-3: #79818a;
  --papel: #ffffff;
  --papel-2: #f6f7f9;
  --linea: #e3e6ea;
  --linea-2: #ccd2d9;
  --acento: #1f4e79;
  --acento-suave: #e8eef4;
  --alerta: #8a5a00;
  --alerta-suave: #fdf3e0;
  --cero: #9aa1a9;
  --marca-mencion: #fff3b8;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(20, 25, 30, .06), 0 4px 14px rgba(20, 25, 30, .05);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── El tile de marca ───────────────────────────────────────────────────
     Los 375 activos de `assets/logos/` son **todos 512×256**: logotipos
     apaisados, proporción 2:1, medidos uno por uno en la cabecera PNG. Un
     tile cuadrado con `object-fit: contain` los pintaba a la mitad de su
     altura —34×17 dentro de un cuadro de 34— y, como casi todos traen
     margen interno, lo que quedaba en pantalla era una hilacha o un cuadro
     en blanco: «Universidad de Chile» salía como una tira, y PUC, U. de
     Concepción, USACH y Adolfo Ibáñez salían vacías.

     Por eso el ancho se DERIVA del alto por la proporción del activo, en
     vez de escribirse como un segundo número suelto que la próxima vez se
     cambia en un sitio y se olvida en el otro.

     El alto pintado es 32 y no 34 para que la caja con su borde siga
     midiendo 34 de alto y la fila no cambie de altura. Y el tamaño va al
     **content-box** a propósito: `object-fit` encuadra la imagen dentro de
     la caja de contenido, así que si el borde se descontara del ancho la
     proporción pintada dejaría de ser 2:1 por dos píxeles y el logo
     volvería a tener franjas vacías, chicas pero vacías. */
  --logo-borde: 1px;
  --logo-alto: 32px;
  --logo-ancho: calc(var(--logo-alto) * 2);   /* 2:1, la del activo */
  --logo-caja-alto: calc(var(--logo-alto) + var(--logo-borde) * 2);
  --logo-caja-ancho: calc(var(--logo-ancho) + var(--logo-borde) * 2);

  /* El papel OSCURO del tile. 87 de los 375 activos son variantes de
     logotipo blanco sobre transparente —las que las marcas publican para
     fondos oscuros— y sobre `--papel-2` no se ven: la tinta y el papel
     tienen el mismo tono, así que el tile queda en blanco. Arreglar la
     geometría sólo agrandó el hueco.

     Cuál activo lo necesita NO se decide acá ni al pintar: lo decide
     `tinta_de_logo.py`, que mide cada archivo una vez y deja la medida como
     dato. El servidor manda `fondo` en el payload del logo y el front se
     limita a poner la clase. Por eso este color tiene que seguir siendo el
     mismo que `FONDO_OSCURO` de ese módulo: si cambia uno, cambia el otro y
     la tabla se regenera.

     Oscurecer el tile para TODOS no era opción: rompería los 288 logotipos
     de tinta oscura, que son la mayoría. */
  --papel-logo-oscuro: #22262c;
  --linea-logo-oscuro: #343a43;
  /* El papel CLARO fijo del cuadro: el del tema claro, también dentro del tema
     oscuro, para el logo que no se lee sobre el casi negro (sin versión para
     fondo oscuro). Coincide con `--papel-2` del tema claro. */
  --papel-logo-claro: #f6f7f9;
  --linea-logo-claro: #dde1e6;
  /* El borde discontinuo del `provisorio` sobre el papel oscuro. `--tinta-3`
     es el tono sobre papel claro y sobre el oscuro se apaga; este es el
     mismo gris subido hasta que la discontinuidad se siga viendo. */
  --tinta-3-sobre-oscuro: #9aa3ad;

  /* ── La araña por superficie ─────────────────────────────────────────
     Las dos series NO se separan sólo por opacidad: difieren en tono, en
     trazo —continuo contra discontinuo— y en la forma del vértice. Quien
     no distingue bien los colores las separa igual, y en una impresión en
     blanco y negro también.

     Los tonos salen de las variables de arriba y no de literales nuevos:
     el panel tiene hoy un solo tema, y el día que tenga otro la araña lo
     sigue sin que haya que acordarse de este bloque. Los dos rellenos son
     lo único con alfa propio, porque un relleno tiene que dejar ver la
     reja y la serie de atrás, y para eso no alcanza un color sólido. */
  --arana-propia: var(--acento);
  --arana-propia-relleno: rgba(31, 78, 121, .16);
  --arana-tenue: var(--tinta-2);
  --arana-tenue-relleno: rgba(74, 81, 89, .07);
  --arana-reja: var(--linea);
  --arana-borde: var(--linea-2);
}

* { box-sizing: border-box; }

/* `hidden` TIENE que ocultar. La hoja del navegador trae `[hidden]{display:
   none}`, pero es de origen UA: cualquier regla de autor que fije `display`
   con especificidad >= (0,1,0) le gana. Acá el caso vivo es `.login`
   (0,1,0, `display:grid`), que es el único elemento al que hoy `app.js` le
   pone `hidden`: sin esta regla el gate de login tapa el panel entero con
   un overlay `position:fixed;inset:0` aunque el atributo esté bien puesto.
   Pasó exactamente así en el panel de avance.

   Va GLOBAL y no en `.login[hidden]`: el defecto no es de ese elemento, es
   de cualquier elemento que combine `hidden` con una clase o un id que
   traiga `display`. Una regla por caso obliga a acordarse; esta no. Y hay
   un candidato latente a la vista: `#login-btn{display:flex}`, que hoy
   nunca lleva `hidden` pero lo llevaría en cuanto alguien replique el
   manejo de «sin client_id» del otro panel — y una `.login[hidden]` lo
   habría dejado roto.

   Y va con `!important` porque sin eso no alcanza: una `[hidden]{display:
   none}` de autor empata en especificidad con `.login` y pierde por orden,
   y pierde de plano contra `#login-btn`, que es (1,0,0). `!important` la
   hace inmune al orden y a la especificidad, que es justo lo que se espera
   de una regla base.

   Es seguro aunque este `app.js` SÍ use `style.display` (en `verMarca`,
   para la cabecera de la ficha): ese elemento se crea al vuelo y nunca
   lleva `hidden`. Y si algún día lo llevara, que `hidden` le gane al estilo
   inline es el comportamiento correcto, no un efecto colateral. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  color: var(--tinta);
  background: var(--papel-2);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */

.cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 14px 28px; background: var(--papel);
  border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 20;
}
.marca-app { display: flex; align-items: center; gap: 12px; }
.marca-app h1 { font-size: 16px; }
.punto {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--acento); flex: none;
}
.corrida { margin: 1px 0 0; font-size: 12px; color: var(--tinta-3); font-family: var(--mono); }

/* ── Con qué se está midiendo (DEC-029 (a)) ─────────────────────────────
   `matcher` y `pesos`, pegados bajo la línea de corrida —que ya declara el
   `run_id`— y presentes en todas las vistas.

   El tamaño es deliberado y va en las dos direcciones. Tiene que verse SIN
   buscarla: su función es que alguien note que el servicio quedó apuntando
   a otra medición, y un rótulo detrás de un menú o al pie de la página no
   lo nota nadie. Y no puede competir con el contenido: el panel es para
   leer marcas y puntajes, no versiones. De ahí 11px y `--tinta-3`, un paso
   por debajo de la línea de corrida, que ya es la más tenue del
   encabezado.

   El valor en monoespaciado porque es un identificador y se compara
   carácter a carácter contra lo que dice la configuración del despliegue.
   El subrayado punteado aparece SOLO cuando el valor va abreviado: es la
   señal de que falta texto y de que el resto está a un hover. Sin esa
   señal, un valor cortado se lee como el valor entero — que es peor que no
   mostrarlo. */
.medicion { margin: 2px 0 0; font-size: 11px; color: var(--tinta-3); }
.medicion .campo { white-space: nowrap; }
.medicion .rotulo-campo { color: var(--tinta-3); }
.medicion .valor-campo { font-family: var(--mono); color: var(--tinta-2); }
.medicion .valor-campo.abreviado { text-decoration: underline dotted var(--linea-2); text-underline-offset: 2px; cursor: help; }
/* `literal` es lo que NO es un identificador: hoy, el «sin revisar» de
   supresiones. En monoespaciado, al lado del matcher y de los pesos, se
   leería como una versión que se llama así y que alguien podría ir a
   comparar contra `service.panel.yaml`. Va en la letra del texto, en
   cursiva y en la tinta más tenue, que es como se escribe una ausencia. */
.medicion .valor-campo.literal { font-family: inherit; font-style: italic; color: var(--tinta-3); cursor: help; }
.medicion .sep { color: var(--linea-2); }

/* El chip del veredicto de la invariante. Va en la cabecera, debajo del
   bloque de medición y con el mismo peso tenue: declara de qué se
   comprobó el dato que se está mirando, no es contenido del panel.
   El `cursor: help` es la señal de que el alcance —qué comprueba y qué
   NO— está a un hover: un chip que afirma sin decir sobre qué predicado
   invita a leerlo más ancho de lo que es. */
.veredicto { margin: 3px 0 0; font-size: 11px; }
.veredicto .chip { font-size: 11px; cursor: help; white-space: normal; }

/* `margin-left:auto` y no un contenedor nuevo: la cabecera ya era
   `space-between` con dos hijos, y al entrar el tercero —el botón de salir—
   ese reparto dejaba las migas flotando en el MEDIO de la barra. El margen
   automático se come el espacio libre antes de las migas, así que la marca
   queda a la izquierda y migas y salida quedan juntas a la derecha. */
.migas { display: flex; align-items: center; gap: 6px; font-size: 13px; flex-wrap: wrap; margin-left: auto; }
.migas button {
  background: none; border: 0; color: var(--acento); cursor: pointer;
  font: inherit; padding: 4px 6px; border-radius: 6px;
}
.migas button:hover { background: var(--acento-suave); }
.migas .sep { color: var(--linea-2); }
.migas .aqui { color: var(--tinta-2); padding: 4px 6px; }

/* ── Estructura ───────────────────────────────────────────────────────── */

main { padding: 24px 28px 64px; max-width: 1180px; margin: 0 auto; }
.cargando, .vacio { color: var(--tinta-3); padding: 32px 0; }

.tarjeta {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra); margin-bottom: 18px;
}
.tarjeta > header {
  padding: 14px 18px; border-bottom: 1px solid var(--linea);
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
.tarjeta > header h2 { font-size: 15px; }
.tarjeta > .cuerpo { padding: 6px 18px 16px; }

.sub { font-size: 12.5px; color: var(--tinta-3); margin: 3px 0 0; }
.nota { font-size: 12.5px; color: var(--tinta-2); }
.tenue { color: var(--tinta-3); }

/* ── La grilla de categorías ──────────────────────────────────────────────

   Una tarjeta por categoría, con el podio por delante y la categoría
   entera por detrás. Reemplaza al ranking unificado de las 427 marcas.

   **Las dos caras van en posición absoluta y la tarjeta lleva la altura.**
   Es lo que hace posible la vuelta: las dos caras ocupan el mismo hueco,
   una rotada 180°, y `backface-visibility: hidden` esconde la que mira para
   atrás. Si cada cara llevara su alto, el dorso —que tiene hasta 18 filas—
   estiraría la tarjeta y la vuelta saldría a los saltos. */

.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.tarjeta-cat {
  position: relative;
  height: 284px;
  perspective: 1400px;
  /* El alto cambia cuando la tarjeta se da vuelta, y ese cambio también es
     movimiento: va con la vuelta y se apaga con ella. */
  transition: height .45s ease;
}

/* La tarjeta dada vuelta ocupa la grilla entera: el gráfico de barras
   necesita ancho para que el nombre y la barra convivan, y es además la
   señal de que esta tarjeta es la pantalla y no una más de 55. */
.tarjeta-cat.volteada {
  grid-column: 1 / -1;
  height: 520px;
  z-index: 1;
}

.tarjeta-cat .cara {
  position: absolute;
  inset: 0;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform .45s ease;
}

.tarjeta-cat .cara.frente { transform: rotateY(0deg); }
.tarjeta-cat .cara.dorso { transform: rotateY(180deg); display: flex; flex-direction: column; }
.tarjeta-cat.volteada .cara.frente { transform: rotateY(-180deg); }
.tarjeta-cat.volteada .cara.dorso { transform: rotateY(0deg); }

/* ── La cara ── */

.tarjeta-cat .voltear {
  display: flex; flex-direction: column; align-items: stretch;
  width: 100%; height: 100%;
  padding: 16px 16px 18px;
  background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.tarjeta-cat .voltear:hover { background: var(--papel-2); }
/* El foco del teclado tiene que verse: la vuelta se puede hacer con tab y
   Enter, y un foco invisible la deja inutilizable para quien no usa mouse. */
.tarjeta-cat .voltear:focus-visible,
.tarjeta-cat .volver:focus-visible {
  outline: 2px solid var(--acento); outline-offset: -2px;
}

.cat-nombre { font-size: 14.5px; font-weight: 600; }
.cat-tamano { font-size: 12px; color: var(--tinta-3); margin: 2px 0 0; }

/* ── El podio ──
   Arriba el líder —o los dos que comparten el puesto 1, del MISMO tamaño—
   y abajo los que siguen, más chicos. El tamaño es la jerarquía, así que
   dos marcas arriba tienen que medir igual: una más grande que la otra
   afirmaría un orden que la medición niega. */

.podio { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.podio-fila { display: flex; align-items: flex-end; justify-content: center; gap: 14px; }
.podio-fila.abajo { gap: 18px; }

.podio-marca, .podio-empate {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 0; max-width: 50%;
}
.podio-nombre {
  font-size: 11px; color: var(--tinta-2); text-align: center;
  max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* El tile del líder es más grande que el de abajo. Las medidas derivan de
   `--logo-alto` por la misma razón que el tile de la fila: la proporción
   2:1 es la del activo, y escribir el ancho como un segundo número suelto
   es cambiarlo en un sitio y olvidarlo en el otro.

   **Las cuatro variables se vuelven a declarar juntas, a propósito.** Un
   `var()` dentro del valor de una custom property se sustituye en el
   elemento donde esa property se DECLARA, así que `--logo-ancho`, que vive
   en `:root`, ya llega resuelto con el `--logo-alto` de `:root`: pisar solo
   el alto acá daría un tile de 46 de alto y 64 de ancho —la proporción del
   tile de la fila— y el logo volvería a tener franjas vacías. */
.podio .protagonico .caja-logo {
  --logo-alto: 46px;
  --logo-ancho: calc(var(--logo-alto) * 2);
  --logo-caja-alto: calc(var(--logo-alto) + var(--logo-borde) * 2);
  --logo-caja-ancho: calc(var(--logo-ancho) + var(--logo-borde) * 2);
}
.podio .abajo .caja-logo {
  --logo-alto: 26px;
  --logo-ancho: calc(var(--logo-alto) * 2);
  --logo-caja-alto: calc(var(--logo-alto) + var(--logo-borde) * 2);
  --logo-caja-ancho: calc(var(--logo-ancho) + var(--logo-borde) * 2);
}
.podio .protagonico .monograma { font-size: 16px; }
.podio .abajo .monograma { font-size: 11px; }
.podio .protagonico .podio-nombre { font-size: 12.5px; color: var(--tinta); font-weight: 550; }

/* ── El ícono de empate ──
   Ocupa el casillero que el podio habría partido. No es un logo degradado
   ni un hueco: es un signo de igual, dos barras del mismo largo. */
.icono-empate { width: 34px; height: 34px; fill: var(--acento); }
.icono-empate .icono-empate-aro {
  fill: var(--acento-suave); stroke: #c4d5e6; stroke-width: 2;
}
.podio .protagonico .icono-empate { width: 52px; height: 52px; }
.podio-empate .podio-nombre { color: var(--acento); max-width: 140px; white-space: normal; }
/* Cuando la banda partida se lleva dos casilleros, el ícono ocupa los dos:
   dejar uno vacío al lado se leería como que ahí falta algo. */
.podio-empate.ancho { max-width: 100%; }

/* ── El dorso ── */

.dorso-cabecera {
  padding: 13px 18px; border-bottom: 1px solid var(--linea);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  flex: none;
}
.dorso-cabecera h2 { font-size: 15px; }
.volver {
  font: inherit; font-size: 12.5px; padding: 6px 10px; flex: none;
  border: 1px solid var(--linea-2); border-radius: 8px;
  background: var(--papel); color: var(--tinta); cursor: pointer;
}
.volver:hover { background: var(--acento-suave); }

/* El gráfico de barras scrollea DENTRO de la tarjeta. Hay categorías de 18
   marcas y la tarjeta no puede crecer con ellas: la grilla de atrás se
   reacomodaría cada vez que se abre una categoría larga. */
.barras { overflow-y: auto; flex: 1 1 auto; }

/* ── Movimiento ──
   La vuelta es decoración: dice lo mismo que el cambio de contenido. Quien
   pidió menos movimiento la recibe instantánea, no degradada. */
@media (prefers-reduced-motion: reduce) {
  .tarjeta-cat,
  .tarjeta-cat .cara { transition: none; }
}

@media (max-width: 760px) {
  .grilla { grid-template-columns: 1fr; }
  .tarjeta-cat.volteada { height: 560px; }
}

/* ── Controles ────────────────────────────────────────────────────────── */

.controles { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
select, .segmento button {
  font: inherit; font-size: 13px; padding: 7px 11px;
  border: 1px solid var(--linea-2); border-radius: 8px;
  background: var(--papel); color: var(--tinta); cursor: pointer;
}
.segmento { display: inline-flex; }
.segmento button { border-radius: 0; border-left-width: 0; }
.segmento button:first-child { border-radius: 8px 0 0 8px; border-left-width: 1px; }
.segmento button:last-child { border-radius: 0 8px 8px 0; }
.segmento button[aria-pressed="true"] {
  background: var(--acento); border-color: var(--acento); color: #fff;
}

/* ── Filas de marca ───────────────────────────────────────────────────── */

.fila {
  display: grid;
  grid-template-columns: var(--logo-caja-ancho) 1fr 186px 108px 124px;
  gap: 14px; align-items: center; padding: 11px 18px;
  border-top: 1px solid var(--linea); cursor: pointer; background: none;
  border-left: 0; border-right: 0; border-bottom: 0; width: 100%;
  text-align: left; font: inherit; color: inherit;
}
.fila:first-child { border-top: 0; }
.fila:hover { background: var(--papel-2); }

/* El cuadro del logo. El monograma usa EXACTAMENTE la misma caja que una
   imagen, para que una categoría entera sin logos se vea igual de
   terminada que una con todos. */
.logo, .monograma {
  box-sizing: content-box;
  width: var(--logo-ancho); height: var(--logo-alto);
  border-radius: 8px; flex: none;
  object-fit: contain; background: var(--papel-2);
  border: var(--logo-borde) solid var(--linea);
}
/* El monograma lleva el MISMO borde que la imagen, solo que invisible.
   Ponerlo en `0` lo dejaba dos píxeles más chico que el tile con imagen
   —el tamaño va al content-box— y la grilla bailaba según hubiera activo,
   que es justo lo que esta caja compartida existe para evitar. */
.monograma {
  display: grid; place-items: center; color: #fff;
  border-color: transparent;
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
}

/* El tile de papel oscuro. Va sobre `.logo` —la imagen— y no sobre la caja,
   porque lo que tiene que cambiar de fondo es el rectángulo que la imagen
   ocupa: el activo es transparente y lo que se ve por detrás es este color.
   El monograma NUNCA la lleva: trae su propio color de fondo y sus
   iniciales blancas, y pisárselo lo rompería. */
.logo.en-oscuro {
  background: var(--papel-logo-oscuro);
  border-color: var(--linea-logo-oscuro);
}
/* El papel claro fijo: gana sobre el papel del tema oscuro (que pinta `--papel-2`
   casi negro) para el logo sin versión propia para fondo oscuro. */
.logo.en-claro {
  background: var(--papel-logo-claro);
  border-color: var(--linea-logo-claro);
}

/* ── Logo sin confirmar ───────────────────────────────────────────────────
 *
 * Un logo `media` o `estimada` se muestra, pero no está confirmado. Tres
 * decisiones, y la primera no es negociable:
 *
 * 1 · NO depende solo del color. Una diferencia únicamente cromática
 *     desaparece para quien no distingue esos tonos, y desaparece entera en
 *     una captura en blanco y negro o en un PDF impreso — que es exactamente
 *     cómo va a circular este panel. La señal que manda es el **borde
 *     discontinuo** más la **esquina doblada**: las dos sobreviven sin color
 *     y sobreviven en escala de grises.
 *
 * 2 · Se lee como PROVISORIO, no como problema. Nada de rojo ni de ícono de
 *     advertencia: un logo estimado no es un error, es una hipótesis que
 *     alguien va a confirmar. Si se marcara en rojo, el panel se vería roto
 *     cuando en realidad está siendo honesto. Por eso el tono es el gris
 *     azulado de la tinta secundaria y no el de alerta.
 *
 * 3 · El motivo está a un hover, en el `title` de la caja.
 */
.caja-logo {
  position: relative; flex: none;
  width: var(--logo-caja-ancho); height: var(--logo-caja-alto);
}
.caja-logo.provisorio .logo,
.caja-logo.provisorio .monograma {
  border: var(--logo-borde) dashed var(--tinta-3);
  background: var(--papel-2);
  opacity: .88;
}
/* Un logo sin confirmar que ADEMÁS necesita papel oscuro. Son dos
   propiedades independientes —si está confirmado, y sobre qué se lee— y las
   dos tienen que sobrevivir juntas: el papel cambia, las dos señales de
   `provisorio` se quedan.

   La especificidad está contada: `.caja-logo.provisorio .logo` es (0,3,0) y
   le ganaba a `.logo.en-oscuro`, que es (0,2,0), así que los provisorios de
   tinta blanca volvían al papel claro y quedaban invisibles igual que
   antes. Esta regla es (0,4,0) y gana. El borde discontinuo se mantiene,
   sólo sube de tono para que la discontinuidad se siga viendo sobre el
   papel oscuro.

   Y la `opacity` NO se hereda acá: sobre papel claro bajarle el contraste a
   un logo oscuro lo deja «apagado», que es justo lo que se quiere decir;
   sobre papel oscuro, bajarle el contraste a una tinta blanca la empuja de
   vuelta hacia el fondo, que es el defecto que esta tanda arregla. La
   señal de «sin confirmar» ya la dan el borde y la esquina, que son
   geométricas y sobreviven en blanco y negro. */
.caja-logo.provisorio .logo.en-oscuro {
  background: var(--papel-logo-oscuro);
  border: var(--logo-borde) dashed var(--tinta-3-sobre-oscuro);
  opacity: 1;
}
/* Lo mismo para un logo sin confirmar sobre el papel claro fijo (tema oscuro): gana a
   `.caja-logo.provisorio .logo` (0,3,0), que le pone el papel casi negro del tema. */
.caja-logo.provisorio .logo.en-claro {
  background: var(--papel-logo-claro);
  border: var(--logo-borde) dashed #7a8594;
  opacity: 1;
}
/* La esquina doblada: segunda señal, puramente geométrica. */
.caja-logo.provisorio::after {
  content: ""; position: absolute; right: -1px; bottom: -1px;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-bottom: 8px solid var(--tinta-3);
  border-bottom-right-radius: 3px;
}
.marca-provisoria {
  font-size: 11px; color: var(--tinta-3); border: 1px dashed var(--linea-2);
  border-radius: 999px; padding: 1px 7px; white-space: nowrap;
}

.nombre { font-weight: 550; }
.donde { font-size: 12px; color: var(--tinta-3); }

/* La barra del puntaje. Continua a propósito: `puntaje` SÍ es una
   escala continua de 0 a 100. La que no se dibuja continua es `presencia`,
   que solo toma unos pocos valores: una por respuesta de la celda, más el
   cero. */
.barra { height: 7px; border-radius: 4px; background: var(--linea); overflow: hidden; }
.barra > i { display: block; height: 100%; background: var(--acento); }
.cifra { font-family: var(--mono); font-size: 13.5px; text-align: right; }
.cifra .unidad { color: var(--tinta-3); font-size: 11px; }

/* Un cero MEDIDO se dibuja distinto de un hueco: lleva su denominador
   pegado y un tono propio, en vez de una celda vacía. */
.cero-medido { color: var(--cero); }
.cero-medido .denominador { font-size: 11px; }
.sin-dato { color: var(--tinta-3); font-style: italic; }

.puesto { font-size: 12.5px; color: var(--tinta-2); text-align: right; white-space: nowrap; }
/* El percentil, deletreado. En la columna es más angosto que la frase que
   lo explica, así que baja un punto de tamaño antes que recortarse: una
   etiqueta cortada con «…» vuelve a ser una abreviatura, que es el defecto
   que esto vino a arreglar. */
.puesto .donde { font-size: 11.5px; }

/* ── Chips ────────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  padding: 2px 8px; border-radius: 999px; background: var(--papel-2);
  border: 1px solid var(--linea); color: var(--tinta-2); white-space: nowrap;
}
.chip.aviso { background: var(--alerta-suave); border-color: #eccb8e; color: var(--alerta); }
/* Las etiquetas que EXPLICAN dejaron de ser abreviaturas, así que algunas
   ya no caben en una línea de una pantalla angosta. `nowrap` las haría
   desbordar sobre la columna de al lado; acá se dejan partir. */

.fila .chip, .sup-cabecera .chip { white-space: normal; }

/* La explicación de la sensibilidad, dicha entera en la ficha de marca.
   Un `title` no existe para quien mira esto en una tablet ni para quien lo
   imprime, y es la etiqueta más accionable del panel. */
.nota.aviso {
  color: var(--alerta); background: var(--alerta-suave);
  border: 1px solid #eccb8e; border-radius: 8px;
  padding: 9px 12px; margin-top: 10px;
}
.chip.empate { background: var(--acento-suave); border-color: #c4d5e6; color: var(--acento); }

/* ── Superficies ──────────────────────────────────────────────────────── */

.superficie { border-top: 1px solid var(--linea); padding: 13px 18px; }
.superficie:first-child { border-top: 0; }
.sup-cabecera { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sup-nombre { font-weight: 550; min-width: 132px; }

/* Las pastillas, UNA POR RESPUESTA de la celda. `presencia` solo puede
   tomar unos pocos valores porque cada superficie aporta un puñado de
   respuestas —hoy 3: 1 reactivo × 3 repeticiones—, y cuántas son lo dice el
   dato, no esta hoja. Dibujarla como barra continua sugeriría una precisión
   que no existe. */
.pastillas { display: inline-flex; gap: 3px; }
.pastilla {
  width: 15px; height: 15px; border-radius: 4px;
  border: 1px solid var(--linea-2); background: var(--papel);
}
.pastilla.llena { background: var(--acento); border-color: var(--acento); }
.pastilla.sep { margin-left: 7px; }

.por-reactivo { display: flex; gap: 14px; margin-top: 7px; font-size: 12px; color: var(--tinta-2); flex-wrap: wrap; }
.por-reactivo b { font-family: var(--mono); font-weight: 600; }

.celdas-drill { margin-top: 9px; }
.celdas-drill button {
  font: inherit; font-size: 12.5px; padding: 5px 10px; cursor: pointer;
  border: 1px solid var(--linea-2); border-radius: 8px; background: var(--papel);
  color: var(--acento);
}
.celdas-drill button:hover { background: var(--acento-suave); }

.op { font-size: 17px; color: var(--tinta-3); }

/* ── El drill-down ────────────────────────────────────────────────────── */

.respuesta { border-top: 1px solid var(--linea); padding: 16px 18px; }
.respuesta:first-child { border-top: 0; }
.resp-cabecera { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-bottom: 9px; }
.resp-cabecera .id { font-family: var(--mono); font-size: 11px; color: var(--tinta-3); }

.texto-llm {
  font-size: 14.5px; line-height: 1.62; color: var(--tinta);
  border-left: 3px solid var(--linea); padding-left: 15px;
  max-height: 340px; overflow: auto;
}
.texto-llm.aparece { border-left-color: var(--acento); }
.texto-llm h2, .texto-llm h3, .texto-llm h4 { font-size: 14.5px; margin: 14px 0 5px; }
.texto-llm p { margin: 9px 0; }
.texto-llm ul, .texto-llm ol { margin: 9px 0; padding-left: 22px; }
.texto-llm li { margin: 3px 0; }
.texto-llm code {
  font-family: var(--mono); font-size: .88em; background: var(--papel-2);
  padding: 1px 4px; border-radius: 4px;
}
.texto-llm pre { background: var(--papel-2); padding: 11px; border-radius: 8px; overflow: auto; }
.texto-llm blockquote {
  margin: 9px 0; padding-left: 12px; border-left: 2px solid var(--linea-2);
  color: var(--tinta-2);
}
.texto-llm hr { border: 0; border-top: 1px solid var(--linea); margin: 14px 0; }
.texto-llm a { color: var(--acento); }
.tabla-scroll { overflow-x: auto; margin: 9px 0; }
.texto-llm table { border-collapse: collapse; font-size: 13px; }
.texto-llm th, .texto-llm td {
  border: 1px solid var(--linea); padding: 5px 9px; text-align: left; vertical-align: top;
}
.texto-llm th { background: var(--papel-2); font-weight: 600; }

/* La mención, resaltada en su `pos_char`. */
mark.mencion {
  background: var(--marca-mencion); color: inherit;
  border-radius: 3px; padding: 1px 2px; box-shadow: 0 0 0 1px #e8d268;
}

.fuentes { margin-top: 11px; font-size: 12px; color: var(--tinta-2); }
.fuentes a { color: var(--acento); }
.fuentes li { margin: 2px 0; }

/* ── Login ────────────────────────────────────────────────────────────── */

.login {
  position: fixed; inset: 0; background: var(--papel-2);
  display: grid; place-items: center; z-index: 50;
}
.caja-login {
  background: var(--papel); padding: 32px; border-radius: 14px;
  box-shadow: var(--sombra); max-width: 420px; text-align: center;
}
.caja-login h2 { margin-bottom: 10px; }
#login-btn { display: flex; justify-content: center; margin: 18px 0 14px; }
/* El botón del login. Antes lo dibujaba `google.accounts.id.renderButton`;
   con Firebase el botón es nuestro, así que su estilo vive acá. */
.btn-login {
  appearance: none; cursor: pointer; font: inherit; font-weight: 600;
  padding: 10px 18px; border-radius: 8px;
  border: 1px solid var(--acento); background: var(--acento); color: #fff;
}
.btn-login:hover:not(:disabled) { filter: brightness(1.15); }
.btn-login:disabled { cursor: progress; opacity: .6; }

/* ── Salir ──────────────────────────────────────────────────────────────
   Discreto a propósito. Es una SALIDA, no una acción del panel: el único
   botón con relleno sólido sigue siendo el de opinar, que es el que la gente
   del piloto tiene que encontrar sin buscarlo. Acá alcanza con que esté
   donde se lo busca —el extremo de la cabecera— y que se note al pasar por
   encima. */
.btn-salir {
  appearance: none; cursor: pointer; font: inherit; font-size: 13px;
  padding: 5px 12px; border-radius: 999px; flex: none;
  border: 1px solid var(--linea-2); background: none; color: var(--tinta-2);
}
.btn-salir:hover:not(:disabled) { border-color: var(--acento); color: var(--acento); }
.btn-salir:disabled { cursor: progress; opacity: .6; }

/* ── Tema ───────────────────────────────────────────────────────────────
   Tres botones chicos pegados, sin texto. Discreto como «Salir»: borde fino y
   tinta secundaria; el elegido se rellena con el color del panel. El foco se
   ve con anillo (no se quita el `outline`). Los íconos son máscaras que toman
   el color del texto, así siguen al tema sin un segundo juego de dibujos. */
.tema { display: inline-flex; flex: none; border: 1px solid var(--linea-2); border-radius: 999px; overflow: hidden; }
.tema-op {
  appearance: none; cursor: pointer; width: 30px; height: 28px; padding: 0; border: 0;
  background: none; color: var(--tinta-2); display: grid; place-items: center;
}
.tema-op::before {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat;
}
.tema-op:hover { color: var(--acento); }
.tema-op[aria-pressed="true"] { background: var(--acento-suave); color: var(--acento); }
.tema-op:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; border-radius: 999px; }
.tema-op[data-tema-op="sistema"] { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3h12v8H2zM1 3.5A1.5 1.5 0 0 1 2.500 2h11A1.500 1.500 0 0 1 15 3.500v7a1.500 1.500 0 0 1-1.500 1.500H9.500l.5 1.500h1.500v1h-7v-1H6l.5-1.500h-4A1.500 1.500 0 0 1 1 10.500z' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.tema-op[data-tema-op="claro"] { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Cpath d='M8 0.500v2M8 13.500v2M0.500 8h2M13.500 8h2M2.700 2.700l1.400 1.400M11.900 11.900l1.400 1.400M2.700 13.300l1.400-1.400M11.900 4.100l1.400-1.400' stroke='black' stroke-width='1.400' stroke-linecap='round'/%3E%3C/svg%3E"); }
.tema-op[data-tema-op="oscuro"] { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 1.500a6.500 6.500 0 1 0 8.500 8.500A5.500 5.500 0 0 1 6 1.500z'/%3E%3C/svg%3E"); }

@media (max-width: 760px) {
  main, .cabecera { padding-left: 16px; padding-right: 16px; }
  /* En el teléfono el selector de tema no ocupa ancho en la cabecera: va en la
     esquina de arriba a la derecha, sobre la fila del título, que es corta. */
  .tema { position: absolute; top: 10px; right: 16px; }
  .fila { grid-template-columns: 30px 1fr 84px; gap: 10px; }
  .fila .barra-celda, .fila .puesto { display: none; }
}

/* El estado de una fuente citada. `resuelta` es información de auditoría y
   va tenue; `sin_resolver` es una advertencia —ese enlace no se puede
   abrir— y tiene que notarse sin gritar. */
.fuentes .resolucion {
  font-size: 11px; padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--linea-2); color: var(--tinta-3);
}
.fuentes .resolucion[data-resolucion="sin_resolver"] {
  border-color: var(--alerta); color: var(--alerta);
}
/* Cuando la etiqueta de una fuente es un dominio y no un título. El
   contrato C12 avisa que `title` no siempre es un título: en Gemini la
   superficie pone ahí el dominio. Se muestra como lo que es, en vez de
   pasarlo por un título de artículo que nunca existió. */
.fuentes .dominio { font-family: var(--mono, ui-monospace, monospace); }


/* ── La araña por superficie ───────────────────────────────────────────
   El gráfico escala entero con su `viewBox`, así que acá no hay ni un
   tamaño de letra del SVG en píxeles: todo lo de adentro está en unidades
   del `viewBox` y el navegador las convierte. El tope de ancho existe para
   que en una pantalla grande el gráfico no se coma la tarjeta. */
.arana-caja {
  padding: 16px 18px 6px;
  display: grid; gap: 14px;
  grid-template-columns: minmax(0, 1fr);
  /* El bloque entero —gráfico, leyenda y tabla— va en una columna del
     ancho de una lectura. A todo el ancho de la tarjeta los valores de la
     tabla quedan a varios centímetros de su superficie y hay que seguir la
     fila con el dedo. */
  max-width: 620px; margin: 0 auto; width: 100%;
}
.arana { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }

.arana-reja .arana-anillo { fill: none; stroke: var(--arana-reja); stroke-width: 1.5; }
.arana-reja .arana-borde { stroke: var(--arana-borde); stroke-width: 2.5; }
.arana-reja .arana-radio { stroke: var(--arana-reja); stroke-width: 1.5; }

/* La serie de la marca: trazo continuo y vértice redondo. */
.arana-propia .arana-area {
  fill: var(--arana-propia-relleno);
  stroke: var(--arana-propia); stroke-width: 3; stroke-linejoin: round;
}
.arana-propia .arana-vertice { fill: var(--arana-propia); stroke: none; }
/* El eje donde la marca no apareció: el vértice queda en el centro —es un
   cero medido— y se dibuja HUECO para que no se lea igual que un valor
   bajo. El papel de adentro es el de la tarjeta, no blanco fijo. */
.arana-propia .arana-vertice-hueco {
  fill: var(--papel); stroke: var(--arana-propia); stroke-width: 2.5;
}
/* La serie de atrás: trazo discontinuo y vértice cuadrado. */
.arana-tenue .arana-area {
  fill: var(--arana-tenue-relleno);
  stroke: var(--arana-tenue); stroke-width: 2.5; stroke-linejoin: round;
  stroke-dasharray: 9 6;
}
.arana-tenue .arana-vertice { fill: var(--arana-tenue); stroke: none; }

.arana-ejes text { fill: var(--tinta-2); dominant-baseline: middle; }
.arana-ejes .arana-nombre { font-size: 19px; }
/* El ordinal sólo entra en pantalla angosta — ver el bloque de abajo. */
.arana-ejes .arana-ordinal { font-size: 24px; font-weight: 700; display: none; }

.arana-leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; }
.arana-entrada { display: inline-flex; align-items: center; gap: 7px; color: var(--tinta-2); }
/* El doble de ancho que de alto, para que se vea el punteado. */
.arana-muestra { width: 40px; height: 20px; flex: none; }
.arana-muestra .arana-area { fill: none; }
.ficha .arana-muestra.arana-comparada .arana-area, .ficha .arana-muestra.arana-tenue .arana-area { stroke-dasharray: 6 4; }

.arana-tabla { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.arana-tabla th, .arana-tabla td {
  text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--linea);
}
.arana-tabla thead th { color: var(--tinta-3); font-weight: 600; }
.arana-tabla .arana-val { text-align: right; font-variant-numeric: tabular-nums; }
.arana-tabla .tenue { color: var(--tinta-3); }
/* El ordinal es el puente entre la punta de un eje y su fila. En pantalla
   ancha el nombre está en las dos partes y la columna estorba; en angosta
   es lo único que las une. */
.arana-tabla .arana-ord { display: none; color: var(--tinta-3); width: 1px; }

@media (max-width: 760px) {
  /* El SVG escala entero, así que achicarlo achica la letra: a este ancho
     el nombre de la plataforma sale ilegible. En vez de recortarlo, el eje
     pasa a decir su ordinal y el nombre se lee en la tabla, que a este
     ancho es la que carga con todo. */
  .arana-caja { padding-left: 16px; padding-right: 16px; }
  .arana-ejes .arana-nombre { display: none; }
  .arana-ejes .arana-ordinal { display: block; }
  .arana-tabla .arana-ord { display: table-cell; }
}

/* ── Opinar: el botón flotante del piloto ─────────────────────────────────

   El botón vive FIJO abajo a la derecha y cuelga de `<body>`, así que está
   en las cuatro vistas sin que ninguna tenga que ponerlo. Su `z-index` es
   menor que el del gate de login (50): si alguna vez el gate aparece con el
   panel detrás, lo que tiene que estar adelante es el gate.

   El modal se oculta con `hidden`, que acá SÍ oculta gracias a la regla
   global `[hidden]{display:none !important}` de más arriba — exactamente el
   defecto que ese `!important` vino a cerrar, ahora con un segundo elemento
   que combina `hidden` con un `display` de autor. */

.opinar-btn {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  appearance: none; cursor: pointer; font: inherit; font-weight: 600;
  padding: 11px 20px; border-radius: 999px;
  border: 1px solid var(--acento); background: var(--acento); color: #fff;
  box-shadow: var(--sombra);
}
.opinar-btn:hover { filter: brightness(1.15); }

.opinar-panel {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(20, 25, 30, .38);
  display: grid; place-items: center; padding: 20px;
}
.opinar-caja {
  background: var(--papel); border-radius: 14px; padding: 24px;
  box-shadow: var(--sombra); width: min(560px, 100%);
  max-height: 88vh; overflow: auto;
}
.opinar-caja h2 { margin-bottom: 12px; font-size: 18px; }

/* La cita de lo que la persona tenía seleccionado. Se dibuja como cita
   —barra al costado, tipografía de texto citado— para que no se confunda
   con lo que ella escribe debajo. */
.opinar-cita {
  margin: 0 0 14px; padding: 8px 12px;
  border-left: 3px solid var(--acento); background: var(--acento-suave);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.opinar-cita-texto {
  margin: 0; font-size: 13px; color: var(--tinta-2);
  max-height: 120px; overflow: auto; white-space: pre-wrap;
}

.opinar-tipos { border: 0; padding: 0; margin: 0 0 12px; }
.opinar-tipos legend {
  padding: 0; font-size: 12px; font-weight: 600; color: var(--tinta-2);
  margin-bottom: 6px;
}
.opinar-tipo {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 14px 4px 0; font-size: 13px; cursor: pointer;
}

.opinar-texto {
  width: 100%; font: inherit; font-size: 14px; padding: 10px;
  border: 1px solid var(--linea-2); border-radius: var(--radio);
  resize: vertical; background: var(--papel); color: var(--tinta);
}
.opinar-cuenta {
  margin: 4px 0 12px; font-size: 11px; color: var(--tinta-3);
  text-align: right;
}
/* Pasado el tope no se recorta nada: se MARCA, y el envío lo rechaza con
   su mensaje. Recortar un pegado sin avisar deja un comentario que se lee
   como si la persona lo hubiera dejado a medias. */
.opinar-cuenta.pasado { color: var(--alerta); font-weight: 600; }

.opinar-foto { margin-bottom: 12px; }
.opinar-previa {
  margin: 10px 0 0; padding: 8px; border: 1px solid var(--linea);
  border-radius: var(--radio); background: var(--papel-2);
}
/* La previa se topa en alto. Sin tope, una captura apaisada empuja el pie
   del formulario fuera del pliegue y «Enviar» hay que ir a buscarlo
   scrolleando — medido en la pantalla el 2026-10-02, con la ventana de
   1280×900 del arnés. Lo que la previa tiene que contestar es «¿es esto lo
   que querés mandar?», y eso se contesta igual en 30vh. */
.opinar-previa img {
  display: block; width: 100%; height: auto; max-height: 30vh;
  object-fit: contain; border-radius: 6px;
  border: 1px solid var(--linea-2); background: var(--papel);
}
.opinar-previa-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 0 0 8px; font-size: 12px; color: var(--tinta-2);
}

.opinar-aviso { margin: 0 0 10px; font-size: 12px; color: var(--tinta-2); }
.opinar-aviso.malo { color: var(--alerta); font-weight: 600; }

/* El pie se queda PEGADO abajo de la caja. La caja scrollea por dentro
   —`max-height` más `overflow:auto`— así que sin esto «Enviar» puede
   quedar fuera de la vista con el formulario entero abierto. */
.opinar-pie {
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  position: sticky; bottom: -24px;
  padding: 12px 0 0; margin-bottom: -24px;
  background: linear-gradient(to bottom, transparent, var(--papel) 14px);
}
.btn-opinar {
  appearance: none; cursor: pointer; font: inherit; font-weight: 600;
  padding: 9px 18px; border-radius: 8px;
  border: 1px solid var(--acento); background: var(--acento); color: #fff;
}
.btn-opinar:hover:not(:disabled) { filter: brightness(1.15); }
.btn-opinar:disabled { cursor: progress; opacity: .6; }

.opinar-enlace {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; font-size: 12px; color: var(--acento);
  text-decoration: underline; cursor: pointer;
}
.opinar-enlace:disabled { cursor: progress; opacity: .6; }

/* El acuse. Va fuera del formulario, que para entonces ya se cerró. */
.opinar-gracias {
  position: fixed; right: 20px; bottom: 76px; z-index: 46;
  max-width: 320px; padding: 12px 16px;
  background: var(--tinta); color: var(--papel);
  border-radius: var(--radio); box-shadow: var(--sombra); font-size: 13px;
}
.opinar-gracias p { margin: 0; }
.opinar-gracias-aviso { margin-top: 6px !important; color: #ffd98a; }

/* El corte es 520 y no 760 porque lo que se aprieta es un botón flotante
   sobre el pulgar: a 760 el panel se reordena, pero el botón abajo a la
   derecha todavía cae bien. */
@media (max-width: 520px) {
  .opinar-btn { right: 12px; bottom: 12px; }
  .opinar-gracias { right: 12px; left: 12px; max-width: none; bottom: 68px; }
}

@media (max-width: 600px) {
}

/* ── La ficha de marca ────────────────────────────────────────────────────
   Una columna de secciones —cabecera, índice en tres tarjetas, fuentes, lo
   que dicen las IA— sobre el papel del panel. Las citas de las IA van en
   serif cursiva para separar su voz de la del sistema.

   Los tokens de la ficha son alias de los del panel más los propios de las
   escalas de color; el modo oscuro redefine los del panel y los alias lo
   siguen sin repetirse. */
:root {
  --papel-3: #eef2f6;
  --pos: #2a78d6;
  --neg: #d64545;
  --punto-franja: #b3bcc7;
  --privado: #7a4f00;
  --privado-suave: #fbf0d9;
  --resalte: #fbe9a6;
  --resalte-borde: #e8d268;
  /* Escalas de las tres métricas. Visibilidad: secuencial de casi blanco a
     azul profundo. Confiabilidad y Recomendación: divergente rojo · gris ·
     verde. Los extremos se alejan de los tonos de los tipos de fuente para
     que un color no signifique dos cosas; el gris del cero es el único
     parecido, por ser neutro. */
  --vis-0: #f1f5fa; --vis-100: #16467a;
  --div-neg: #9c1c2c; --div-0: #bcc3cb; --div-pos: #1a5e37;
  --pista-medidor: #e6ebf1;
  --contorno: rgba(18, 26, 36, .30);
  /* El marcador del promedio de la categoría: tinta fuerte con halo, para que
     se lea sobre cualquier color de la escala. */
  --prom: #121a24;
  --prom-halo: #ffffff;
  --tipo-corp_propia: #2a78d6; --tipo-corp_terceros: #eb6834; --tipo-main: #1baf7a; --tipo-esp: #eda100;
  --tipo-gob: #e87ba4; --tipo-acad: #008300; --tipo-wiki: #6250d6; --tipo-dir: #b8389f; --tipo-ugc: #e34948; --tipo-otro: #a3abb5;
  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  /* Las demás marcas de la cartera, sin color propio (gris). La comparada no
     tiene color propio: usa el de la marca al 50 %. */
  --serie-otra: #8d97a3;
}
/* El modo oscuro: UNA sola paleta. `data-tema` lo pone el script de `index.html`
   (el del sistema o el elegido), así que ni la media query ni el tema forzado
   la repiten. */
:root[data-tema="oscuro"] {
  --tinta: #e7ecf2; --tinta-2: #b3becb; --tinta-3: #8e9aaa;
  --papel: #151c25; --papel-2: #0d1218; --papel-3: #1c2530;
  --linea: #253140; --linea-2: #34424f;
  --acento: #8fbbe8; --acento-suave: #1a2a3c;
  --alerta: #f0c36d; --alerta-suave: #2e2512; --cero: #6b7684;
  --marca-mencion: #5a4a12;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3);
  --pos: #3987e5; --neg: #e66767; --punto-franja: #4a5664;
  --privado: #f0c36d; --privado-suave: #2e2512; --resalte: #5a4a12; --resalte-borde: #8a7224;
  --vis-0: #eef3f9; --vis-100: #2e64c4;
  --div-neg: #ff9a8f; --div-0: #9aa3ad; --div-pos: #8fd18a;
  --pista-medidor: #334052; --contorno: rgba(238, 243, 249, .22);
  --prom: #ffffff; --prom-halo: #0d1218;
  --tipo-corp_propia: #3987e5; --tipo-corp_terceros: #d95926; --tipo-main: #199e70; --tipo-esp: #c98500;
  --tipo-gob: #d55181; --tipo-acad: #2fa02f; --tipo-wiki: #9085e9; --tipo-dir: #cf63b9; --tipo-ugc: #e66767; --tipo-otro: #6b7684;
  --serie-otra: #6f7a87;
  color-scheme: dark;
}

.ficha, .f-resp, .globo {
  --surface: var(--papel); --surface-2: var(--papel-3);
  --ink: var(--tinta); --ink-2: var(--tinta-2); --ink-3: var(--tinta-3);
  --line: var(--linea); --line-2: var(--linea-2);
  --accent: var(--acento); --accent-soft: var(--acento-suave);
  --zero: var(--cero); --r: 12px;
  --privado-soft: var(--privado-suave);
}
.ficha { display: grid; gap: 40px; font-size: 15px; line-height: 1.5; }
.ficha *, .f-resp * { box-sizing: border-box; }
.ficha h1, .ficha h2, .ficha h3 { text-wrap: balance; margin: 0; }
.ficha p { margin: 0; }
.ficha button { font: inherit; color: inherit; }
.ficha .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ficha .muted { color: var(--ink-3); }
.ficha .small { font-size: 13px; }
.ficha .eyebrow { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }

/* Cabecera */
.ficha .cab { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.ficha .cab-texto { display: grid; gap: 8px; min-width: 0; flex: 1 1 280px; }
.ficha .cab h2 { font-size: clamp(26px, 4vw, 36px); line-height: 1.1; letter-spacing: -.02em; font-weight: 600; }
.ficha .chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ficha .f-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 10px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
}
.ficha button.f-chip { cursor: pointer; }
.ficha button.f-chip:hover:not(.on) { border-color: var(--accent); color: var(--ink); }
.ficha .f-chip.on { background: var(--accent); border-color: var(--accent); color: var(--papel-2); }
.ficha .f-chip .flecha { font-size: 12px; }
/* El logo de la cabecera usa la caja del panel, a otro tamaño: el ancho
   sigue saliendo del alto por la proporción 2:1 del activo. */
.ficha .f-logo {
  display: inline-flex; flex: none; --logo-alto: 32px;
  --logo-ancho: calc(var(--logo-alto) * 2);
  --logo-caja-alto: calc(var(--logo-alto) + var(--logo-borde) * 2);
  --logo-caja-ancho: calc(var(--logo-ancho) + var(--logo-borde) * 2);
}
.ficha .f-logo.lg { --logo-alto: 70px; }
.ficha .f-logo.sm { --logo-alto: 18px; }
.ficha .f-logo .caja-logo { flex: none; }

/* Secciones */
.ficha .sec { display: grid; gap: 18px; }
.ficha .sec-cab { display: grid; gap: 4px; border-top: 1px solid var(--line-2); padding-top: 18px; }
.ficha .sec-cab h2 { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.ficha .sec-cab p { color: var(--ink-2); max-width: 68ch; }
.ficha .f-sub {
  display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px; min-width: 0;
}
.ficha .f-sub > *, .ficha .sec > *, .ficha .card > * { min-width: 0; }
.ficha .sub-cab { display: grid; gap: 6px; }
.ficha .sub-cab h3 { font-size: 17px; font-weight: 600; }
.ficha .sub-cab p { color: var(--ink-2); font-size: 14px; max-width: 70ch; }
.ficha .badge { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
.ficha .badge.prelim { background: var(--accent-soft); color: var(--accent); }
.ficha .f-aviso { background: var(--surface-2); border-radius: 8px; padding: 12px 14px; font-size: 14px; color: var(--ink-2); max-width: 80ch; }
.ficha .f-vacio { color: var(--ink-3); font-size: 14px; padding: 8px 0; }
.ficha .nota-ocultos { color: var(--ink-3); font-size: 12px; margin: 8px 0 0; }
.ficha .mini-tit { font-size: 12px; color: var(--ink-3); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* Tarjetas del índice */
.ficha .indice { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.ficha .card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sombra); padding: 20px; display: grid; gap: 16px; align-content: start; min-width: 0;
}
.ficha .card-cab { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ficha .card-cab h3 { font-size: 15px; font-weight: 600; }
.ficha .card-def { font-size: 13px; color: var(--ink-3); margin-top: -10px; }
.ficha .frase { font-size: 14px; color: var(--ink-2); }
.ficha .f-puesto { display: grid; gap: 2px; }
.ficha .f-puesto b { font-weight: 600; font-size: 15px; }
.ficha .f-puesto span { font-size: 13px; color: var(--ink-3); }
.ficha details.f-ayuda summary { cursor: pointer; font-size: 13px; color: var(--accent); }
.ficha details.f-ayuda p { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.ficha .en-preparacion { display: grid; gap: 6px; padding: 28px 8px; text-align: center; color: var(--ink-2); }
.ficha .en-preparacion b { font-size: 17px; color: var(--ink); }
.ficha .en-preparacion span { font-size: 13.5px; }

/* El reloj: arco de 270° con puntas redondas que terminan en el valor; la
   escala en su borde exterior. */
.ficha .medidor { position: relative; width: 100%; max-width: 270px; margin: 0 auto; }
.ficha .medidor svg { display: block; width: 100%; height: auto; overflow: visible; }
.ficha .medidor .pista-m { fill: none; stroke: var(--pista-medidor); }
.ficha .medidor .contorno { fill: none; stroke: var(--contorno); }
.ficha .medidor .contorno-punto { fill: var(--contorno); }
.ficha .medidor .marca { stroke: var(--ink-3); stroke-width: 1; }
.ficha .medidor .marca.mayor { stroke: var(--ink-2); stroke-width: 1.5; }
.ficha .medidor .rot { fill: var(--ink-3); font-family: var(--mono); font-size: 10.5px; }
.ficha .medidor .hit { fill: transparent; }
.ficha .medidor .centro { position: absolute; left: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; text-align: center; }
.ficha .medidor .centro .n { font-variant-numeric: tabular-nums; font-size: 38px; line-height: 1; font-weight: 600; letter-spacing: -.03em; }
.ficha .medidor .centro .escala { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.ficha .medidor .n-fila { display: inline-flex; align-items: baseline; gap: 3px; }
.ficha .medidor .unidad { font-size: 11px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; font-family: inherit; }
/* El promedio en los relojes: una raya que cruza el arco, con halo, rotulada
   a su lado; la misma raya en la leyenda. */
.ficha .prom-raya { stroke: var(--prom); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.ficha .prom-halo { stroke: var(--prom-halo); stroke-width: 6; stroke-linecap: round; }
.ficha .medidor .prom-rot { fill: var(--ink-2); font-family: var(--mono); font-size: 10.5px; }
.ficha .medidor .prom-rot-v { font-weight: 600; fill: var(--ink); }
.ficha .medidor .prom-rot-u { font-size: 8.5px; font-weight: 400; fill: var(--ink-3); }
/* Bajo el reloj, la diferencia con el promedio (o con la comparada). */
.ficha .medidor .dif { position: absolute; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; line-height: 1.25; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.ficha .medidor .dif b { font-family: var(--mono); font-weight: 600; color: var(--ink); font-size: 13px; }
.ficha .medidor .dif .unidad { font-size: 10px; }
.ficha .medidor .dif .dif-ref { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.ficha .f-comp { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: 0; }
/* La tabla de puntos en «¿Cómo se lee?» */
.ficha .f-ayuda-tabla { border-collapse: collapse; width: 100%; font-size: 13px; margin: 4px 0 8px; }
.ficha .f-ayuda-tabla th, .ficha .f-ayuda-tabla td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--linea); }
.ficha .f-ayuda-tabla th { font-weight: 600; color: var(--ink-2); font-size: 12px; }
.ficha .f-ayuda-tabla td.num { text-align: right; font-family: var(--mono); }
.ficha .f-ley-prom { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 6px; font-size: 13px; color: var(--ink-2); }
.ficha .f-ley-prom b { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.ficha .muestra-prom { width: 14px; height: 14px; flex: none; }
.ficha .muestra-barra { position: relative; width: 14px; height: 14px; flex: none; display: inline-block; }
.ficha .sups > .f-ley-prom { justify-content: flex-start; }
.ficha .signo-ejes { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); font-family: var(--mono); }

/* Conteo de menciones juzgadas (Recomendación) */
.ficha .conteo { display: grid; gap: 4px; }
.ficha .cuenta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; color: var(--ink-2); }
.ficha .cuenta span { display: inline-flex; align-items: center; gap: 5px; }
.ficha .cuenta .k { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.ficha .cuenta .k.pos { background: var(--div-pos); } .ficha .cuenta .k.zero { background: var(--div-0); } .ficha .cuenta .k.neg { background: var(--div-neg); }

/* Barras por plataforma, con el cero al medio */
.ficha .sups { display: grid; gap: 7px; }
.ficha .f-sup { display: grid; grid-template-columns: 104px 1fr 44px; gap: 10px; align-items: center; font-size: 13px; }
.ficha .f-sup .nom { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ficha .f-sup .v { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.ficha .f-sup .sin { font-size: 12px; color: var(--ink-3); font-style: italic; }
.ficha .pista { position: relative; height: 8px; background: var(--surface-2); border-radius: 4px; }
.ficha .pista i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--pos); border-radius: 0 4px 4px 0; }
.ficha .pista.signo-p::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1.5px; background: var(--zero); }
.ficha .pista.signo-p i { left: auto; }
.ficha .pista i.esc { box-shadow: inset 0 0 0 1px var(--contorno); }
/* La marca del promedio en una barra: un trazo vertical más alto que la
   barra, con halo. Va sobre el cero y sobre el relleno. */
.ficha .pista i.prom, .ficha .muestra-barra i.prom {
  position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px;
  background: var(--prom); box-shadow: 0 0 0 1.5px var(--prom-halo); z-index: 2;
}
.ficha .muestra-barra i.prom { left: 50%; top: 0; bottom: 0; }

/* Franja de la categoría */
.ficha .franja svg { width: 100%; height: auto; display: block; overflow: visible; }
.ficha .franja .eje { stroke: var(--line-2); stroke-width: 1; }
.ficha .franja text { fill: var(--ink-3); font-family: var(--mono); font-size: 9px; }
.ficha .franja .anillo-marca { fill: none; stroke: var(--punto-franja); stroke-width: 1.8; }
.ficha .franja .yo { stroke: var(--ink-2); stroke-width: 1.5; }
.ficha .franja .hit { fill: transparent; cursor: pointer; }
/* Los rótulos de la marca y de la comparada, con su rayita hasta el círculo. */
.ficha .franja text.franja-rot { font-family: var(--mono); font-size: 9.5px; }
.ficha .franja text.rot-yo { font-weight: 600; }
.ficha .franja .franja-raya { stroke-width: 1; opacity: .55; }
/* El zoom: arrastre en horizontal; en el teléfono la página sigue moviéndose en vertical. */
.ficha .franja svg { touch-action: pan-y; }
.ficha .franja svg.arrastrando { cursor: grabbing; }
/* El globo propio de los gráficos de la ficha (franja, radar, barras):
   columnas alineadas entre filas con `display: contents`. */
.ficha .franja-caja { position: relative; }
.ficha .franja-globo { position: absolute; z-index: 5; pointer-events: none; background: var(--papel); border: 1px solid var(--linea-2); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16); padding: 6px 9px; display: grid; grid-template-columns: 10px auto auto auto auto;
  column-gap: 6px; row-gap: 3px; align-items: baseline; font-size: 12.5px; white-space: nowrap; }
.ficha .franja-globo .fg-fila { display: contents; }
.ficha .franja-globo .fg-tit, .ficha .franja-globo .fg-nota { grid-column: 1 / -1; }
.ficha .franja-globo i { width: 9px; height: 9px; border-radius: 50%; align-self: center; }
.ficha .franja-globo i.anillo { border: 1.6px solid var(--punto-franja); }
.ficha .franja-globo .fg-nom.yo { font-weight: 600; }
.ficha .franja-globo b { font-family: var(--mono); font-weight: 600; text-align: right; }
.ficha .franja-globo .fg-u { font-size: 10px; color: var(--ink-3); }
.ficha .franja-globo .fg-p { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.ficha .franja-globo .fg-nota { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* El radar: el panel conserva su geometría y sus clases; aquí solo se le
   dan los tonos de la escala y el marcador de golpe para la ayuda. */
.ficha .radar .arana-caja { padding: 0; max-width: 460px; }
.ficha .arana-anillo-v { fill: var(--ink-2); font-family: var(--mono); font-size: 20px; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.ficha .escala-ajustada { font-size: 13px; color: var(--ink-2); background: var(--surface-2); border-radius: 8px; padding: 8px 12px; }
.ficha .arana-propia .arana-area { fill: color-mix(in srgb, var(--vis-100) 16%, transparent); stroke: var(--vis-100); }
.ficha .arana-propia .arana-vertice { fill: var(--vis-100); stroke: var(--vis-100); stroke-width: 2; }
.ficha .arana-propia .arana-vertice-hueco { fill: var(--surface); }
.ficha .arana-tenue .arana-area { stroke: var(--prom); fill: color-mix(in srgb, var(--prom) 6%, transparent); }
.ficha .arana-tenue .arana-vertice { fill: var(--prom); }

/* Grupo */
.ficha .grupo-filas { display: grid; gap: 10px; }
.ficha .gfila { display: grid; grid-template-columns: 40px minmax(90px, 160px) 1fr 52px; gap: 10px; align-items: center; font-size: 14px; }
.ficha .gfila .v { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ficha .gfila button { border: 0; background: none; padding: 0; text-align: left; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ficha .gfila .nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha .gfila .pista { height: 10px; }
.ficha .gfila .donde { display: block; font-size: 12px; color: var(--ink-3); white-space: normal; }

/* Citas y conteos */
.ficha .cita { font-family: var(--serif); font-style: italic; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.ficha .cita::before { content: "«"; } .ficha .cita::after { content: "»"; }
.ficha .quien { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 12.5px; color: var(--ink-3); }
.ficha .ia { font-weight: 600; color: var(--ink-2); font-style: normal; }
.ficha .fte { display: inline-flex; align-items: center; gap: 4px; }
.ficha .fte::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--ink-3); }
.ficha .fte.si::before { background: var(--ink-3); }
.ficha .nm { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; color: var(--ink-2); }
.ficha .puntos { display: inline-flex; gap: 2px; }
.ficha .puntos i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
.ficha .puntos i.on { background: var(--accent); }
.ficha .atenuado { opacity: .62; }
.ficha .etq-aten { display: inline-block; font-size: 11px; font-weight: 600; color: var(--ink-3); border: 1px dashed var(--line-2); padding: 1px 6px; border-radius: 4px; font-style: normal; }
.ficha .bajada-2 { color: var(--ink-2); max-width: 68ch; font-size: 14px; }
.ficha .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.ficha .tabs button { border: 0; background: none; padding: 8px 12px; cursor: pointer; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; white-space: nowrap; }
.ficha .tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.ficha .tabs button:disabled { color: var(--ink-3); cursor: default; opacity: .7; }
.ficha .f-panel { display: grid; gap: 18px; }
.ficha .oraciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ficha .oracion { border-left: 2px solid var(--line-2); padding: 2px 0 2px 14px; display: grid; gap: 6px; align-content: start; }
.ficha .tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.ficha .tres ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ficha .tres li { display: grid; gap: 2px; }
.ficha .tres li .val { font-size: 14px; }

/* Cuadros que se apilan en teléfono */
.ficha .tbl-wrap { overflow-x: auto; }
.ficha table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
.ficha table.t th { text-align: left; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.ficha table.t th.der, .ficha table.t td.der { text-align: right; }
.ficha table.t td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ficha table.t tr:last-child td { border-bottom: 0; }
.ficha table.t td.c { white-space: nowrap; }
.ficha table.t td.c b { white-space: normal; display: inline-block; max-width: 210px; }
.ficha table.t td.ep { min-width: 320px; max-width: 520px; }
.ficha .ep-cita { margin-top: 8px; }
.ficha .ep-cita .cita { font-size: 14.5px; color: var(--ink-2); }
.ficha table.t td[data-l="Organismo"], .ficha table.t td[data-l="Monto"] { min-width: 120px; max-width: 200px; }
.ficha .signo-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.ficha .signo-chip i { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; font-weight: 700; font-size: 13px; color: #fff; }
.ficha .signo-chip.p i { background: var(--pos); } .ficha .signo-chip.n i { background: var(--neg); }
.ficha table.m td { min-width: 150px; max-width: 260px; font-size: 13.5px; }
.ficha table.m th.campo { text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--ink); white-space: normal; min-width: 110px; vertical-align: top; padding-top: 12px; }
.ficha table.m td.no { color: var(--ink-3); font-style: italic; }
.ficha table.m td.consenso { background: var(--surface-2); font-weight: 500; }

/* Fuentes */
.ficha .apilada { display: flex; gap: 2px; height: 30px; border-radius: 6px; overflow: hidden; }
.ficha .apilada i { display: block; height: 100%; min-width: 2px; }
.ficha .apilada.sm { height: 12px; border-radius: 3px; }
.ficha .leyenda { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 20px; }
.ficha .ley { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: baseline; font-size: 13.5px; }
.ficha .ley .k { width: 12px; height: 12px; border-radius: 3px; transform: translateY(2px); }
.ficha .ley .c { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 12.5px; white-space: nowrap; }
.ficha .cajas-propias { display: flex; flex-wrap: wrap; gap: 10px; }
.ficha .cajas-propias > div { flex: 1 1 200px; background: var(--surface-2); border-radius: 8px; padding: 12px 14px; display: grid; gap: 2px; }
.ficha .cajas-propias b { font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ficha .cajas-propias span { font-size: 13px; color: var(--ink-2); }
.ficha .por-sup { display: grid; gap: 10px; }
.ficha .psup { display: grid; grid-template-columns: 120px 1fr 64px; gap: 12px; align-items: center; font-size: 13.5px; }
.ficha .psup .v { text-align: right; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.ficha .doms { display: grid; gap: 6px; }
.ficha .dom { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 1fr 40px; gap: 12px; align-items: center; font-size: 13.5px; }
.ficha .dom .d { font-family: var(--mono); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha .dom .tp { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12.5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ficha .dom .tp i { position: static; width: 9px; height: 9px; border-radius: 2px; flex: none; }
.ficha .dom .v { text-align: right; font-family: var(--mono); font-size: 12.5px; }
.ficha .ofi { display: grid; gap: 10px; }
.ficha .ofi-fila { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.ficha details.mas summary { cursor: pointer; color: var(--accent); font-size: 13.5px; }
.ficha details.mas[open] summary { margin-bottom: 10px; }
.ficha .propias { display: grid; gap: 8px; }
.ficha .propia { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 1fr 44px; gap: 12px; align-items: center; font-size: 13.5px; }
.ficha .propia .d { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.ficha .propia .quien-es { color: var(--ink-2); font-size: 12.5px; }
.ficha .propia .v { text-align: right; font-family: var(--mono); font-size: 12.5px; }
.ficha .propia .sub-d { grid-column: 1 / -1; font-size: 12px; color: var(--ink-3); margin-top: -4px; overflow-wrap: anywhere; }
.ficha .propia .pista i { background: var(--tipo-corp_propia); }

/* Separador de la zona privada */
.ficha .zona { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding-top: 8px; }
.ficha .zona::before, .ficha .zona::after { content: ""; height: 0; border-top: 2px dashed var(--privado); opacity: .55; }
.ficha .zona-txt { display: grid; justify-items: center; gap: 4px; text-align: center; }
.ficha .zona-txt b { display: inline-flex; background: var(--privado-soft); color: var(--privado); font-size: 15px; font-weight: 600; padding: 6px 16px; border-radius: 999px; }
.ficha .zona-txt span { font-size: 13px; color: var(--ink-3); max-width: 44ch; }

/* Una cita que abre la respuesta completa */
.ficha .cita-btn { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: 4px; }
.ficha .cita-btn .cita { display: block; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .15s; }
.ficha .cita-btn:hover .cita, .ficha .cita-btn:focus-visible .cita { text-decoration-color: var(--line-2); }
.ficha .cita-btn .ver { display: inline-flex; font-family: inherit; font-style: normal; font-size: 12.5px; color: var(--accent); margin-top: 4px; }
.ficha .celda-btn { background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; text-decoration: underline dotted var(--line-2); text-underline-offset: 4px; }
.ficha .celda-btn:hover { text-decoration-color: var(--accent); }
.ficha .celda-btn.no { color: var(--ink-3); font-style: italic; }

/* La respuesta completa, en un modal */
dialog.f-resp {
  width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink);
  box-shadow: 0 12px 48px rgba(0, 0, 0, .28); overflow: hidden;
}
dialog.f-resp[open] { display: flex; flex-direction: column; }
dialog.f-resp::backdrop { background: rgba(10, 16, 24, .52); }
.f-resp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 8px; }
.f-resp-top h2 { font-size: 19px; font-weight: 600; }
.f-resp-meta { display: grid; gap: 8px; padding: 0 20px 12px; border-bottom: 1px solid var(--line); }
.f-resp-cuerpo { overflow-y: auto; padding: 14px 20px 20px; display: grid; gap: 12px; min-height: 0; }
.f-resp .cerrar { flex: none; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); border-radius: 8px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 500; }
.f-resp .cerrar:hover { border-color: var(--accent); }
.f-resp-cab { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.f-resp .f-chip { display: inline-flex; font-size: 12.5px; padding: 2px 9px; border-radius: 999px; background: var(--papel-2); border: 1px solid var(--line); color: var(--ink-2); }
.f-resp .f-aviso-chip { background: var(--alerta-suave); color: var(--alerta); border-color: transparent; }
.f-resp .id { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.f-resp .preg { font-size: 14px; color: var(--ink-2); margin: 0; }

/* El globo de ayuda */
.globo {
  position: fixed; z-index: 60; pointer-events: none; background: var(--ink); color: var(--papel-2);
  font-size: 12.5px; padding: 6px 9px; border-radius: 6px; max-width: 260px; line-height: 1.35; box-shadow: var(--sombra);
}

@media (max-width: 720px) {
  .ficha table.t.apila thead { display: none; }
  .ficha table.t.apila, .ficha table.t.apila tbody, .ficha table.t.apila tr, .ficha table.t.apila td { display: block; width: 100%; }
  .ficha table.t.apila tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
  .ficha table.t.apila td { border: 0; padding: 4px 0; display: grid; grid-template-columns: 112px 1fr; gap: 10px; }
  .ficha table.t.apila td::before { content: attr(data-l); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding-top: 2px; }
  .ficha table.t.apila td > * { grid-column: 2; }
  .ficha table.t td.ep, .ficha table.t td[data-l="Organismo"], .ficha table.t td[data-l="Monto"] { min-width: 0; max-width: none; }
  .ficha table.t td.c b { max-width: none; }
  .ficha table.t.apila td.full { grid-template-columns: 1fr; }
  .ficha table.t.apila td.full > * { grid-column: 1; }
  .ficha table.t.apila td.c { white-space: normal; }
  .ficha table.t.apila .nm { white-space: normal; flex-wrap: wrap; }
  .ficha table.t.apila td.full::before { display: none; }
}
@media (max-width: 560px) {
  .ficha .dom { grid-template-columns: minmax(0, 1fr) 36px; row-gap: 4px; }
  .ficha .dom .tp { grid-column: 1; grid-row: 2; }
  .ficha .dom .pista { grid-column: 1 / -1; grid-row: 3; }
  .ficha .dom .v { grid-column: 2; grid-row: 1; }
  .ficha .psup { grid-template-columns: 1fr 60px; }
  .ficha .psup .apilada { grid-column: 1 / -1; grid-row: 2; }
  .ficha .f-sup { grid-template-columns: 92px 1fr 40px; }
  .ficha .gfila { grid-template-columns: 40px minmax(0, 1fr) 52px; row-gap: 6px; }
  .ficha .gfila .f-logo.sm { grid-row: 1; grid-column: 1; }
  .ficha .gfila .nom { grid-row: 1; grid-column: 2; }
  .ficha .gfila .v { grid-row: 1; grid-column: 3; }
  .ficha .gfila .pista { grid-row: 2; grid-column: 1 / -1; }
  .ficha .propia { grid-template-columns: minmax(0, 1fr) 40px; row-gap: 4px; }
  .ficha .propia .quien-es { grid-column: 1; grid-row: 2; }
  .ficha .propia .pista { grid-column: 1 / -1; grid-row: 3; }
  .ficha .propia .v { grid-column: 2; grid-row: 1; }
  .ficha .propia .sub-d { grid-row: 4; margin-top: 0; }
  .ficha .zona { grid-template-columns: 1fr; }
  .ficha .zona::before, .ficha .zona::after { display: none; }
  .ficha .f-sub { padding: 16px; }
  .ficha .card { padding: 16px; }
}

/* ── Comparar con otra marca y la cartera ──────────────────────────────
   La marca comparada tiene un color propio en todos los gráficos (morado),
   distinto de las escalas de las métricas y de los tipos de fuente; se
   distingue además por la forma: arco y barra más delgados, vértice
   cuadrado en el radar. */

.ficha > .hueco { display: contents; }
.ficha[aria-busy="true"] .indice, .ficha[aria-busy="true"] .cartera { opacity: .6; transition: opacity .2s; }

/* Los controles, arriba a la derecha de la cabecera */
.ficha .comparar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: flex-end; margin-left: auto; align-self: flex-start; }
.ficha .f-toggle, .f-elegir .f-toggle {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); background: var(--surface);
  border-radius: 999px; padding: 6px 12px 6px 6px; cursor: pointer; font-size: 13.5px; color: var(--ink);
}
.ficha .f-toggle:hover { border-color: var(--accent); }
.ficha .f-toggle .interruptor {
  position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--line-2); flex: none; transition: background .2s;
}
.ficha .f-toggle .interruptor::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .2s;
}
.ficha .f-toggle.on .interruptor { background: var(--acento); }
.ficha .f-toggle.on .interruptor::after { transform: translateX(12px); }
.ficha .comparando { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--papel-3); }
.ficha .comparando .nom { font-weight: 600; }
/* Lo que no compara, oculto mientras se compara: `hidden` gana a cualquier display. */
.ficha [data-solo-marca][hidden] { display: none !important; }
/* La vista de cartera muestra solo sus cuatro paneles (Visibilidad,
   Confiabilidad, Recomendación y Fuentes citadas): se oculta lo que va
   después de la cabecera y la cartera (el índice, las fuentes y la zona
   cualitativa de la ficha). */
.ficha.con-cartera > :nth-child(n+3) { display: none !important; }
/* El logo solo, en un chip: un poco más alto que el de una fila, para que un
   logo que es el nombre escrito se lea. */
.ficha .f-logo.chip { --logo-alto: 22px; }
.ficha .comparando > .nom:first-child, .ficha .c-chip > .nom:first-child { padding-left: 6px; }
.ficha button.enlace, .f-elegir button.enlace { border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-size: 13.5px; }

/* Con comparación (sin cartera), la referencia del promedio se atenúa. */
.ficha.comparando:not(.con-cartera) .pista i.prom,
.ficha.comparando:not(.con-cartera) .arana-tenue,
.ficha.comparando:not(.con-cartera) .f-ley-prom .muestra-prom,
.ficha.comparando:not(.con-cartera) .f-ley-prom .muestra-barra { opacity: .35; }

/* El reloj: el arco de la comparada, por fuera, con su rótulo al final del
   arco; el nombre de la marca de la ficha, chico, sobre su cifra. */
.ficha .medidor .pista-vs { opacity: .7; }
.ficha.comparando .medidor .centro .n { font-size: 34px; }
.ficha .medidor .vs-rot { font-family: var(--mono); font-size: 10.5px; }
.ficha .medidor .vs-rot .prom-rot-v { font-weight: 600; }
.ficha .medidor .vs-rot .prom-rot-v, .ficha .medidor .vs-rot .prom-rot-u { fill: inherit; }
.ficha .medidor .vs-rot .prom-rot-u { opacity: .75; }
.ficha .medidor .propia-nom { font-family: var(--mono); font-size: 10.5px; font-weight: 400; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: -2px; }
.ficha .medidor .vs-cifra { display: inline-flex; align-items: baseline; gap: 4px; color: var(--ink-2); font-size: 12.5px; max-width: 120px; white-space: nowrap; }
.ficha .medidor .vs-cifra .vs-nom { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ficha .medidor .vs-cifra b { font-family: var(--mono); font-weight: 600; }
.ficha .f-ley-series { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: 13px; color: var(--ink-2); }
.ficha .f-ley-series > span { display: inline-flex; align-items: center; gap: 6px; }
.ficha .f-ley-series b { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.ficha .muestra-propia, .ficha .muestra-comparada { display: inline-flex; align-items: center; width: 18px; height: 12px; flex: none; }
.ficha .muestra-propia i { display: block; width: 18px; height: 7px; border-radius: 4px; background: var(--ink-2); }
.ficha .muestra-comparada i { display: block; width: 18px; height: 4px; border-radius: 2px; background: var(--ink-3); }

/* Barras por plataforma: la comparada debajo, del mismo grosor y más junta;
   quién es quién arriba; el globo de cada fila. */
.ficha .f-sup.con-otra { row-gap: 2px; }
.ficha .f-sup.con-otra > .v, .ficha .f-sup.con-otra > .nom { line-height: 1.15; }
.ficha .pista.comparada { height: 8px; }
.ficha .barras-quien { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; margin: 2px 0 6px; }
.ficha .barras-quien .bq-entrada { display: inline-flex; align-items: center; gap: 6px; }
.ficha .barras-quien i { width: 18px; height: 8px; border-radius: 4px; flex: none; }
.ficha .barras-quien .bq-nom { font-weight: 600; }
.ficha .sups-caja { position: relative; display: grid; gap: inherit; }
.ficha .barras-globo { z-index: 6; }
.ficha .barras-globo .fg-tit { font-weight: 600; margin-bottom: 2px; }
.ficha .barras-globo i.ag-prom { background: var(--prom); border-radius: 1px; width: 3px; height: 11px; justify-self: center; }
.ficha .pista i.esc.comparada { box-shadow: none; }
.ficha .f-sup .v-comparada { font-size: 12.5px; }

/* Radar y franja */
.ficha .arana-comparada .arana-area { fill: color-mix(in srgb, var(--vis-100) 8%, transparent); stroke: var(--vis-100); stroke-opacity: .5; stroke-width: 2.5; stroke-dasharray: 9 5; stroke-linejoin: round; }
.ficha .arana-comparada .arana-vertice { fill: var(--vis-100); fill-opacity: .5; }
.ficha .arana-tabla .comparada { color: var(--ink-2); }
/* El globo del radar: una cuña invisible por eje, el eje resaltado al pasar. */
.ficha .arana-caja { position: relative; }
.ficha .arana-golpe { fill: transparent; cursor: default; }
.ficha .arana-eje-resalte { stroke: var(--ink-2); stroke-width: 2; stroke-dasharray: 3 4; opacity: .6; pointer-events: none; }
.ficha .arana-globo .fg-tit { font-weight: 600; margin-bottom: 2px; }
.ficha .arana-globo .fg-nota { white-space: normal; max-width: 220px; }
.ficha .arana-globo i.ag-propia { background: var(--vis-100); }
.ficha .arana-globo i.ag-comparada { background: var(--vis-100); opacity: .5; border-radius: 2px; }
.ficha .arana-globo i.ag-prom { background: var(--prom); opacity: .6; border-radius: 2px; }
.ficha .franja .comparada { stroke: var(--surface); stroke-width: 1.5; }
.ficha .franja .anillo-marca.en-cartera { stroke: var(--ink-2); stroke-width: 3; }

/* Fuentes: una barra por serie */
.ficha .series-apiladas { display: grid; gap: 10px; }
.ficha .serie-apilada { display: grid; grid-template-columns: minmax(0, 170px) 1fr; gap: 12px; align-items: center; font-size: 13.5px; }
.ficha .serie-apilada .quien { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.ficha .serie-apilada.rol-propia .quien { color: var(--ink); font-weight: 600; }
.ficha .serie-apilada.rol-comparada .quien { color: var(--ink); font-weight: 600; }
.ficha .serie-apilada.rol-comparada .apilada { opacity: .5; }
.ficha .serie-apilada .apilada { height: 22px; }
.ficha .serie-apilada .sin { font-size: 12.5px; color: var(--ink-3); font-style: italic; }
.ficha .apilada.xs { height: 6px; border-radius: 2px; }
.ficha .psup.rol-comparada { margin-top: -6px; font-size: 12px; }
.ficha .psup.rol-comparada .apilada { opacity: .5; }
/* El filtro por tipo: un clic en un tipo de la barra principal o de su
   leyenda deja solo ese tipo; el elegido resaltado y los demás atenuados.
   En «Por plataforma», un hueco transparente guarda el largo de la barra. */
.ficha .fuentes-citadas .apilada:not(.sm) i[data-tipo], .ficha .fuentes-citadas .leyenda .ley { cursor: pointer; }
.ficha .fuentes-citadas .apilada i[data-tipo], .ficha .fuentes-citadas .leyenda .ley { transition: opacity .4s; }
.ficha .fuentes-citadas .apilada.filtrando i:not(.elegido) { opacity: .25; }
.ficha .fuentes-citadas .leyenda.filtrando .ley:not(.elegido) { opacity: .45; }
.ficha .fuentes-citadas .leyenda .ley.elegido { font-weight: 600; }
.ficha .apilada i.resto { background: transparent; min-width: 0; }
.ficha .apilada.filtrada { gap: 0; }
.ficha .apilada.filtrada i { min-width: 0; }
/* Por plataforma, comparando: la plataforma una vez a la izquierda y una
   línea por marca (nombre, barra y %); en el teléfono, la plataforma de
   título y las dos líneas debajo. */
.ficha .psup-grupo { display: grid; grid-template-columns: 120px minmax(0, 160px) 1fr 64px; column-gap: 12px; row-gap: 6px; align-items: center; font-size: 13.5px; }
.ficha .psup-grupo .plat { grid-row: 1 / span 2; grid-column: 1; align-self: center; }
.ficha .psup-linea { display: contents; }
.ficha .psup-linea .quien { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.ficha .psup-linea.rol-propia .quien { color: var(--ink); font-weight: 600; }
.ficha .psup-linea.rol-comparada .quien { color: var(--ink-2); }
.ficha .psup-linea .apilada, .ficha .psup-linea .sin { grid-column: 3; }
.ficha .psup-linea.rol-comparada .apilada { opacity: .5; }
.ficha .psup-linea .sin { font-size: 12px; color: var(--ink-3); font-style: italic; }
.ficha .psup-linea .v { grid-column: 4; text-align: right; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.ficha .psup-linea.rol-propia > * { grid-row: 1; }
.ficha .psup-linea.rol-comparada > * { grid-row: 2; }
@media (max-width: 560px) {
  .ficha .psup-grupo { grid-template-columns: minmax(0, 1fr) 56px; }
  .ficha .psup-grupo .plat { grid-row: 1; grid-column: 1 / -1; font-weight: 600; }
  .ficha .psup-linea .quien { grid-column: 1; }
  .ficha .psup-linea .v { grid-column: 2; }
  .ficha .psup-linea .apilada, .ficha .psup-linea .sin { grid-column: 1 / -1; }
  .ficha .psup-linea.rol-propia .quien, .ficha .psup-linea.rol-propia .v { grid-row: 2; }
  .ficha .psup-linea.rol-propia .apilada { grid-row: 3; }
  .ficha .psup-linea.rol-comparada .quien, .ficha .psup-linea.rol-comparada .v { grid-row: 4; }
  .ficha .psup-linea.rol-comparada .apilada, .ficha .psup-linea.rol-comparada .sin { grid-row: 5; }
}
.ficha .psup.rol-comparada .quien { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* El selector de marcas */
dialog.f-elegir { width: min(560px, calc(100vw - 24px)); }
.f-elegir .buscar-marca {
  width: 100%; font: inherit; font-size: 14px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--papel-2); color: var(--ink);
}
.f-elegir .f-resp-meta p { font-size: 14px; color: var(--ink-2); margin: 0; }
.f-elegir .opciones { display: grid; gap: 4px; }
.f-elegir .op-marca {
  display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; align-items: center; text-align: left; width: 100%;
  border: 1px solid transparent; background: none; border-radius: 8px; padding: 6px 8px; cursor: pointer; font: inherit; color: var(--ink);
}
.f-elegir button.op-marca { grid-template-columns: auto 1fr auto; }
.f-elegir .op-marca:hover, .f-elegir .op-marca:focus-within { background: var(--papel-2); border-color: var(--line); }
.f-elegir .op-marca.on { border-color: var(--acento); }
.f-elegir .op-marca input { width: 16px; height: 16px; accent-color: var(--acento); }
.f-elegir .op-marca .nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-elegir .small { font-size: 12.5px; }
.f-elegir .muted { color: var(--ink-3); }
.f-elegir .f-logo, .ficha .c-chip .f-logo:not(.chip) { display: inline-flex; flex: none; --logo-alto: 18px;
  --logo-ancho: calc(var(--logo-alto) * 2);
  --logo-caja-alto: calc(var(--logo-alto) + var(--logo-borde) * 2);
  --logo-caja-ancho: calc(var(--logo-ancho) + var(--logo-borde) * 2); }
.f-elegir-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); font-size: 13.5px; }
.f-elegir-pie:empty { display: none; }
.f-elegir-pie .pie-botones { display: flex; gap: 14px; align-items: center; margin-left: auto; }
.f-elegir-pie .aplicar { border: 0; background: var(--acento); color: var(--papel); border-radius: 8px; padding: 8px 16px; cursor: pointer; font: inherit; font-weight: 600; }

/* La cartera */
.ficha .c-chips { gap: 6px 8px; }
.ficha .c-chip { padding: 3px 8px 3px 3px; }
.ficha .c-chip.rol-propia { border-color: var(--ink-2); color: var(--ink); font-weight: 600; }
.ficha .c-chip.rol-comparada { border-color: var(--ink-3); color: var(--ink); }
.ficha .c-chip .quitar { border: 0; background: none; cursor: pointer; padding: 0 2px; font-size: 16px; line-height: 1; color: var(--ink-3); }
.ficha .c-chip .quitar:hover { color: var(--ink); }
.ficha .f-chip.agregar { border-style: dashed; color: var(--accent); }
.ficha .c-paneles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.ficha .c-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.ficha .c-panel h3 { font-size: 15px; font-weight: 600; }
.ficha .c-panel .f-ley-prom { justify-content: flex-start; }
.ficha .c-filas { display: grid; gap: 4px; }
.ficha .c-fila { display: grid; grid-template-columns: 44px minmax(0, 130px) 1fr 52px; gap: 10px; align-items: center; font-size: 13.5px;
  padding: 3px 4px; border-radius: 6px; transition: opacity .25s, transform .6s cubic-bezier(.2, .7, .2, 1); outline-offset: 1px; }
.ficha .c-fila .nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.ficha .c-fila .v { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.ficha .c-fila .sin { font-size: 12px; color: var(--ink-3); font-style: italic; }
.ficha .c-fila.rol-propia .nom { color: var(--ink); font-weight: 600; }
.ficha .c-fila.rol-comparada .nom { color: var(--ink); font-weight: 600; }
.ficha .c-fuentes .c-fila:not(.rol-propia):not(.c-promedio) .apilada { opacity: .5; }
.ficha .c-fila .pista { height: 10px; }
.ficha .c-barra { transition: left .6s cubic-bezier(.2, .7, .2, 1), width .6s cubic-bezier(.2, .7, .2, 1); }
.ficha .pista i.c-barra { background: var(--serie-otra); border-radius: 3px; }
.ficha .c-filas.con-prom { position: relative; padding-top: 40px; }
.ficha .c-prom-linea { position: absolute; top: 0; bottom: -4px; width: 0; z-index: 2; transition: left .6s cubic-bezier(.2, .7, .2, 1); }
.ficha .c-prom-linea::after { content: ""; position: absolute; top: 34px; bottom: 0; left: -1.5px; width: 3px; border-radius: 2px; background: var(--prom); box-shadow: 0 0 0 1.5px var(--prom-halo); }
.ficha .c-prom-rot { position: absolute; top: 0; left: 0; transform: translateX(-50%); display: grid; justify-items: center; line-height: 1.2; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.ficha .c-prom-v b { font-family: var(--mono); font-weight: 600; color: var(--ink); font-size: 12.5px; }
.ficha .c-prom-v .unidad { font-size: 10px; color: var(--ink-3); }
.ficha .c-eje { padding-top: 0; padding-bottom: 0; }
.ficha .c-eje .signo-ejes { grid-column: 3; }
.ficha .c-promedio { border-top: 1px dashed var(--line-2); padding-top: 8px; margin-top: 2px; }
.ficha .c-promedio .nom { color: var(--ink); font-weight: 600; white-space: normal; }
.ficha .nota-leyenda { font-size: 12.5px; color: var(--ink-3); }
.ficha .c-fila .apilada.sm { height: 12px; }
.ficha .c-tipos { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink-2); }
.ficha .c-tipos span { display: inline-flex; align-items: center; gap: 5px; }
.ficha .c-tipos .k { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
/* Una marca resaltada: las demás se apagan en los cuatro paneles. */
.ficha .cartera[data-resaltada] .c-fila[data-marca]:not(.resaltada) { opacity: .32; }
.ficha .cartera[data-resaltada] .c-chip[data-marca]:not(.resaltada) { opacity: .5; }
.ficha .c-fila.resaltada { background: var(--surface-2); }
.ficha .c-fila:focus-visible { outline: 2px solid var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .ficha .c-barra, .ficha .c-prom-linea, .ficha .c-fila, .ficha .f-toggle .interruptor, .ficha .f-toggle .interruptor::after { transition: none; }
}
/* Al cambiar de tema, los colores pasan de uno a otro en un instante corto en
   vez de saltar (`cambiando-tema` dura lo que la transición). Las series de
   los gráficos se mueven desde `app.js` con la misma curva de la cartera. */
@media (prefers-reduced-motion: no-preference) {
  html.cambiando-tema, html.cambiando-tema *, html.cambiando-tema *::before, html.cambiando-tema *::after {
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, fill .3s ease, stroke .3s ease !important;
  }
}
/* 47,5em = 760 px: el mismo corte del teléfono. Va en em para no ser el
   último bloque de 760 px de la hoja (ese es el del radar). */
@media (max-width: 47.5em) {
  .ficha .comparar { margin-left: 0; justify-content: flex-start; width: 100%; }
  .ficha .serie-apilada { grid-template-columns: 1fr; gap: 4px; }
  .ficha .c-fila { grid-template-columns: 40px minmax(0, 1fr) 48px; row-gap: 3px; }
  .ficha .c-fila .f-logo { grid-row: 1; grid-column: 1; }
  .ficha .c-fila .nom { grid-row: 1; grid-column: 2; }
  .ficha .c-fila .v { grid-row: 1; grid-column: 3; }
  .ficha .c-fila > .pista, .ficha .c-fila > .apilada, .ficha .c-fila > .sin { grid-row: 2; grid-column: 1 / -1; }
  .ficha .c-eje { display: block; }
  .ficha .c-eje > span:empty { display: none; }
  .ficha .c-panel { padding: 14px; }
}