/* Quilla — lo poco que hay que añadir encima del diseño de Komandesk.
   ==========================================================================

   Las cinco hojas anteriores vienen de Komandesk copiadas tal cual, igual que
   Komandesk copió las de `ops`. Aquí solo va lo que estas pantallas necesitan y
   allí no existe. **Ningún color se escribe aquí**: todos salen de los tokens
   del tema. Si hace falta un color nuevo, es que falta un token allí.

   Una clase por cosa, y cada clase declarada una sola vez. */

/* ═══ 1 · ARMAZÓN ══════════════════════════════════════════════════════════
   El layout de Komandesk usa `.ops-shell` y `h-[calc(100vh-2rem)]`, y ninguna
   de las dos existe en las hojas compiladas —tampoco allí—: en Komandesk el
   alto lo sostiene el contenido, que siempre lo hay. Aquí una pantalla puede
   quedarse corta y el armazón se colapsa, así que se declara. */

.ops-shell { height: calc(100vh - 2rem); }

@media (min-width: 48rem) {
  .ops-shell { height: calc(100vh - 2.5rem); }
}

/* El menú viene de `pantalla.css` con su ancho puesto; lo único que falta es
   que no se encoja cuando el panel de la derecha pide sitio. */
#sidebar { flex-shrink: 0; }

/* Las rejillas se miden **contra este envoltorio, no contra la ventana**. Con
   `@media` salían tres columnas de 196 px en una pantalla de 1280: el menú y el
   segundo rail se llevan 530 px, así que la ventana decía «ancha» mientras el
   sitio real era estrecho. Lo que tiene que decidir cuántas columnas caben es
   el hueco donde caen, y eso es lo que mide `@container`.

   Y va en un div propio, no en `.k-main-body`: ese es un hijo flex, y ponerle
   `container-type` lo dejó en 76 px de ancho. La contención del eje en línea y
   el reparto flex se estorban; en un bloque normal, no. */
.k-lienzo { container-type: inline-size; container-name: lienzo; }

.k-topbar-nombre { margin: 0; font-size: var(--k-t-lg); font-weight: 600; }
.k-topbar-bajo   { margin: 0; font-size: var(--k-t-xs); color: var(--fg-soft); }

.k-q-sello {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--k-t-xs);
  color: var(--fg-soft);
  white-space: nowrap;
}

.k-q-grupo { margin: 1.8rem 0 var(--k-gap-sm); color: var(--fg-soft); }
.k-q-grupo:first-child { margin-top: 0; }

.k-q-nota { margin-top: 2rem; padding-top: var(--k-gap-sm); border-top: 1px solid var(--border); }


/* ═══ 2 · EL MENÚ ES EL ORGANIGRAMA ════════════════════════════════════════
   En el segundo rail, cada departamento lleva debajo quién lo opera. Es la
   mitad de lo que define un departamento y esconderlo obliga a entrar para
   saberlo. */

.subpanel-item { display: flex; align-items: center; gap: var(--k-gap-xs); }

.k-q-sub { align-items: flex-start; }

.k-q-sub-texto { display: flex; flex-direction: column; min-width: 0; }

.k-q-sub-agente {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.3;
  color: var(--fg-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.k-q-sub-punto     { margin-left: auto; align-self: center; }
.k-q-sub-pendiente { margin-left: auto; color: var(--fg-tenue, #9aa0a6); }


/* ═══ 3 · LA EMPRESA HOY ═══════════════════════════════════════════════════
   Tres cifras y ninguna más. La versión anterior abría con una franja de ocho
   números y un semáforo apilado, y hacían falta diez minutos para saber qué se
   estaba mirando. Lo que abre una pantalla tiene que caber en una ojeada. */

.k-q-hoy {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--k-r-md);
  overflow: hidden;
  margin-bottom: 1.6rem;
}

.k-q-hoy-dato {
  background: var(--surface);
  padding: var(--k-pad);
  display: flex;
  align-items: baseline;
  gap: var(--k-gap-sm);
}

.k-q-hoy-cifra {
  font-family: var(--font-mono);
  font-size: 2.2rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--fg-soft);
}

.k-q-hoy-dato.tiene .k-q-hoy-cifra { color: var(--primary); }
.k-q-hoy-dato.malo  .k-q-hoy-cifra { color: var(--bad); }

.k-q-hoy-lbl { font-size: var(--k-t-sm); color: var(--fg-muted); line-height: 1.25; }


/* ═══ 4 · EL ORGANIGRAMA: UN RECUADRO POR DEPARTAMENTO ═════════════════════
   Cada recuadro contesta cuatro cosas —quién lo lleva, su cifra, cómo va, qué
   espera— y el detalle está a un clic. Los que aún no tienen pantalla salen
   igual, en gris: ver el hueco es la única forma de saber lo que falta. */

.k-q-organigrama {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--k-gap);
}

.k-q-dep {
  display: flex;
  flex-direction: column;
  gap: var(--k-gap-sm);
  padding: var(--k-pad);
  border-left: 3px solid var(--border-strong);
  text-decoration: none;
  color: inherit;
}

.k-q-dep:hover { background: var(--surface-2); border-left-color: var(--primary); }

.k-q-dep-pendiente { opacity: .62; }

.k-q-dep-cabezal { display: flex; align-items: center; gap: var(--k-gap-sm); }

.k-q-dep-icono { display: inline-flex; color: var(--fg-muted); flex: 0 0 auto; }

.k-q-dep-nombre { font-size: var(--k-t-md); font-weight: 600; }

.k-q-dep-cabezal .k-punto { margin-left: auto; }

.k-q-dep-agente {
  display: flex;
  align-items: baseline;
  gap: .4em;
  font-size: var(--k-t-xs);
  color: var(--fg-soft);
  margin-top: -.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.k-q-dep-agente-lbl { text-transform: lowercase; }
.k-q-dep-agente code { font-family: var(--font-mono); color: var(--fg-muted); }

.k-q-dep-titular { display: flex; align-items: baseline; gap: var(--k-gap-sm); }

.k-q-dep-vacio { font-size: var(--k-t-sm); color: var(--fg-soft); line-height: 1.3; }

.k-q-dep-senales { display: flex; flex-direction: column; gap: var(--k-gap-xs); }

.k-q-dep-senal { font-size: var(--k-t-xs); color: var(--fg-muted); line-height: 1.35; }
.k-q-dep-senal strong { font-family: var(--font-mono); color: var(--fg); }
.k-q-dep-senal em { font-style: normal; font-family: var(--font-mono); }

.k-q-dep-urgente {
  display: flex;
  align-items: flex-start;
  gap: var(--k-gap-sm);
  font-size: var(--k-t-xs);
  line-height: 1.35;
  color: var(--fg-muted);
}

.k-q-dep-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-gap-sm);
  margin-top: auto;
  padding-top: var(--k-gap-sm);
  border-top: 1px solid var(--hair, var(--border));
  font-family: var(--font-mono);
  font-size: var(--k-t-xs);
  color: var(--fg-soft);
}

.k-q-dep-entrar { color: var(--primary); font-weight: 600; white-space: nowrap; }


/* ═══ 5 · LA PANTALLA DE UN DEPARTAMENTO ═══════════════════════════════════ */

.k-q-jefe {
  display: flex;
  align-items: center;
  gap: var(--k-gap);
  padding-bottom: var(--k-gap-sm);
  margin-bottom: 1.2rem;
  border-bottom: 2px solid var(--border-strong);
}

.k-q-jefe-icono { display: inline-flex; color: var(--fg-muted); flex: 0 0 auto; }

.k-q-jefe-quien strong { display: block; font-size: var(--k-t-lg); line-height: 1.2; }
.k-q-jefe-quien span {
  display: block;
  font-size: var(--k-t-xs);
  color: var(--fg-soft);
  margin-top: 2px;
}
.k-q-jefe-quien code { font-family: var(--font-mono); color: var(--fg-muted); }

.k-q-jefe-espera {
  margin-left: auto;
  text-align: right;
  font-size: var(--k-t-xs);
  color: var(--fg-soft);
  white-space: nowrap;
}
.k-q-jefe-espera strong {
  font-family: var(--font-mono);
  font-size: var(--k-t-lg);
  color: var(--primary);
  display: block;
  line-height: 1;
}

/* Las señales del departamento, en franja ancha y sin borde de tarjeta. */
.k-q-senales-anchas { border: 1px solid var(--border); border-radius: var(--k-r-md); overflow: hidden; }

.k-q-mas { margin-top: var(--k-gap-xs); font-size: var(--k-t-xs); }

.k-q-propuestas { padding: var(--k-pad); }

.k-q-propuesta {
  display: flex;
  align-items: flex-start;
  gap: var(--k-gap-sm);
  padding: var(--k-gap-sm) 0;
}

.k-q-propuesta + .k-q-propuesta { border-top: 1px solid var(--hair, var(--border)); }

.k-q-propuesta-cuerpo { flex: 1 1 auto; min-width: 0; }

.k-q-propuestas .k-q-nota { margin-top: var(--k-gap-sm); }

/* El hueco: un departamento del organigrama que todavía no lee de ningún
   sitio. Dice qué falta en vez de dar un error. */
.k-q-hueco { padding: var(--k-pad); }
.k-q-hueco h3 { margin: 0 0 var(--k-gap-xs); font-size: var(--k-t-md); }
.k-q-hueco p  { margin: 0; font-size: var(--k-t-sm); color: var(--fg-soft); line-height: 1.45; }
.k-q-hueco code { font-family: var(--font-mono); }


/* ═══ 6 · LA TARJETA DE UNA APLICACIÓN ═════════════════════════════════════
   Tiene que contestar «cómo va esto» antes de que nadie lea una fila. De ahí
   el icono, que la identifica de reojo, y la cifra grande, que es UNA sola:
   dos cifras grandes en la misma tarjeta no son un titular, son dos cosas
   compitiendo. */

.k-q-rejilla {
  display: grid;
  /* Tres columnas fijas, no auto-fill. Con columnas automáticas cada grupo
     decidía su propio ancho según cuántas tarjetas tuviera, y dos grupos
     seguidos no alineaban entre sí. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--k-gap);
}

.k-q-tarjeta { display: flex; flex-direction: column; border-left: 3px solid var(--border); }

/* Una raya de color al canto: dice el estado antes de leer el rótulo. */
.k-q-tarjeta.k-q-vivo   { border-left-color: var(--ok, #5f785d); }
.k-q-tarjeta.k-q-aviso  { border-left-color: var(--primary); }
.k-q-tarjeta.k-q-parado { border-left-color: var(--bad); }
.k-q-tarjeta.k-q-fuera  { border-left-color: var(--border-strong); }

.k-q-tarjeta.k-q-ancho-2 { grid-column: span 2; }
.k-q-tarjeta.k-q-ancho-3 { grid-column: span 3; }

.k-q-cabezal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--k-gap-sm);
}

.k-q-marca { display: flex; align-items: flex-start; gap: var(--k-gap-sm); }

.k-q-icono-caja {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 2.1rem;
  border-radius: var(--k-r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--fg-muted);
}

.k-q-icono-vivo   { color: var(--ok, #5f785d); }
.k-q-icono-aviso  { color: var(--primary); }
.k-q-icono-parado { color: var(--bad); }
.k-q-icono-fuera  { color: var(--fg-soft); }

.k-q-quien {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--k-t-xs);
  color: var(--fg-soft);
  margin-top: var(--k-gap-xs);
}

/* Cuatro estados y no tres. «Sin configurar» no es lo mismo que «parado»: uno
   está roto y el otro es que nadie lo ha enchufado, y confundirlos hace perder
   una tarde buscando una avería que no existe. */
.k-q-pill        { white-space: nowrap; }
.k-q-pill-vivo   { color: var(--primary); }
.k-q-pill-aviso  { color: var(--fg-muted); }
.k-q-pill-parado { color: var(--bad); }
.k-q-pill-fuera  { color: var(--fg-soft); }

/* El titular. Alineado a la izquierda y no centrado: la vista baja por el
   canto izquierdo de la tarjeta y ahí es donde encuentra la cifra. */
.k-q-titular {
  display: flex;
  align-items: baseline;
  gap: var(--k-gap-sm);
  padding: var(--k-pad) var(--k-pad) 0;
}

.k-q-titular-cifra {
  font-family: var(--font-mono);
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.03em;
}

.k-q-titular-que { font-size: var(--k-t-sm); color: var(--fg-soft); line-height: 1.25; }

.k-q-tono-bueno  { color: var(--ok, #5f785d); }
.k-q-tono-aviso  { color: var(--primary); }
.k-q-tono-grave  { color: var(--bad); }
.k-q-tono-normal { color: var(--fg); }

/* La barra usa la del tema (project-progress-track), no una nueva. */
.k-q-medida { padding: var(--k-gap-sm) var(--k-pad) 0; }
.k-q-medida-lbl {
  display: flex;
  justify-content: space-between;
  gap: var(--k-gap-sm);
  font-size: var(--k-t-xs);
  color: var(--fg-soft);
  margin-top: var(--k-gap-xs);
}

/* Chips: nombres cortos que NO son una cifra. En la columna de la derecha
   —que es para números— una lista larga descuadraba la tarjeta entera. */
.k-q-chips { display: flex; flex-wrap: wrap; gap: var(--k-gap-xs); margin-top: var(--k-gap-xs); }

.k-q-chip {
  font-family: var(--font-mono);
  font-size: var(--k-t-xs);
  line-height: 1.6;
  padding: 0 .45em;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--fg-muted);
  background: var(--surface-2);
  white-space: nowrap;
}

/* Todas las filas con la misma altura mínima: sin esto, una con chips y otra
   sin ellos hacen que dos tarjetas contiguas no casen. Y la fila no se parte:
   con el titular ocupando ancho, la cifra de la derecha caía a la línea
   siguiente siempre. */
.k-q-tarjeta .k-row       { min-height: 2.6rem; align-items: center; flex-wrap: nowrap; }
.k-q-tarjeta .k-row-main  { min-width: 0; flex: 1 1 auto; }
.k-q-tarjeta .k-row-cifra { flex: 0 0 auto; margin-left: var(--k-gap-sm); text-align: right; white-space: nowrap; }
.k-q-tarjeta .k-row-title { font-size: var(--k-t-sm); }

.k-q-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-gap-sm);
  padding: var(--k-gap-sm) var(--k-pad);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--k-t-xs);
  color: var(--fg-soft);
  margin-top: auto;
}

.k-q-ir { color: var(--primary); text-decoration: none; white-space: nowrap; font-weight: 600; }
.k-q-ir:hover { text-decoration: underline; }


/* ═══ 7 · SEÑALES: LA CIFRA CON SU COMPARACIÓN ═════════════════════════════
   Una señal es una cifra que se puede comparar. Van en su propia franja, no
   mezcladas con las filas de detalle, porque son de otra categoría: las filas
   cuentan lo que hay y las señales cuentan cómo va. */

.k-q-senales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.k-q-senal { background: var(--surface); padding: var(--k-gap-sm) var(--k-pad); }

.k-q-senal-valor {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.02em;
  display: flex;
  align-items: baseline;
  gap: .3em;
}

.k-q-senal-lbl { font-size: var(--k-t-xs); color: var(--fg-muted); line-height: 1.25; margin-top: 2px; }

.k-q-senal-contra { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.3; margin-top: 1px; }

/* Verde y rojo según si esa tendencia es BUENA, no según si sube. Que suban
   los gastos no es verde. */
.k-q-bien  { color: var(--ok, #5f785d); }
.k-q-mal   { color: var(--bad); }
.k-q-igual { color: var(--fg-soft); }

.k-q-flecha { font-size: .62em; line-height: 1; }

/* La línea de tendencia. Es un SVG diminuto: dice la forma, no el detalle. */
.k-q-linea { display: block; width: 100%; height: 1.6rem; margin-top: var(--k-gap-xs); overflow: visible; }
.k-q-linea path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }


/* ═══ 8 · ACCIONES: LO QUE SE PROPONE HACER ════════════════════════════════
   Con su porqué debajo y su cifra dentro, para que se pueda aceptar o
   rechazar mirando el dato. Sin el porqué sería una opinión. */

.k-q-acciones { padding: var(--k-gap-sm) var(--k-pad); border-top: 1px solid var(--hair, var(--border)); }

.k-q-acciones-tit {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-bottom: var(--k-gap-xs);
}

.k-q-accion { display: flex; gap: var(--k-gap-sm); align-items: flex-start; padding: var(--k-gap-xs) 0; }

.k-q-accion + .k-q-accion { border-top: 1px solid var(--hair, var(--border)); }

.k-q-cuando {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 6px;
  border: 1px solid currentColor;
  white-space: nowrap;
  flex: 0 0 auto;
  margin-top: 2px;
}

.k-q-cuando-ahora  { color: var(--bad); }
.k-q-cuando-semana { color: var(--primary); }
.k-q-cuando-cuando { color: var(--fg-soft); }

.k-q-accion-que    { font-size: var(--k-t-sm); line-height: 1.35; }
.k-q-accion-porque { font-size: var(--k-t-xs); color: var(--fg-soft); line-height: 1.35; margin-top: 2px; }


/* ═══ 9 · PANTALLAS ESTRECHAS ══════════════════════════════════════════════ */

/* Los cortes son distintos para las dos rejillas porque lo que llevan dentro
   no mide lo mismo: un recuadro de departamento son cuatro líneas y aguanta
   una columna estrecha; una tarjeta lleva la franja de señales y necesita más.
   Medido: con el menú y el segundo rail abiertos, una ventana de 1280 deja
   636 px de lienzo — dos columnas de departamento entran, tres no.

   Y van en **píxeles, no en `rem`**: el tema copiado de Komandesk pone la raíz
   en 19 px, así que un corte escrito en `rem` sale un 19 % más grande de lo que
   uno calcula y las columnas saltan donde no toca. El ancho que hay que
   comparar aquí es el que ocupa una columna en pantalla, y eso son píxeles. */

@container lienzo (max-width: 900px) {
  .k-q-organigrama { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container lienzo (max-width: 400px) {
  .k-q-organigrama { grid-template-columns: 1fr; }
  .k-q-hoy         { grid-template-columns: 1fr; }
}

@container lienzo (max-width: 1000px) {
  .k-q-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-q-tarjeta.k-q-ancho-3 { grid-column: span 2; }
}

@container lienzo (max-width: 460px) {
  .k-q-rejilla { grid-template-columns: 1fr; }
  .k-q-tarjeta.k-q-ancho-2,
  .k-q-tarjeta.k-q-ancho-3 { grid-column: span 1; }
}


/* ═══ 10 · LA PANTALLA DE ENTRADA ══════════════════════════════════════════
   Sola, centrada y sin menú: quien no ha entrado no tiene nada que navegar. */

.k-q-entrar { width: min(24rem, 100%); padding: var(--k-pad); }

.k-q-entrar-marca { font-size: var(--k-t-lg); font-weight: 700; margin-bottom: var(--k-gap); }

.k-q-entrar-lbl {
  display: block;
  font-size: var(--k-t-xs);
  color: var(--fg-soft);
  margin-bottom: var(--k-gap-xs);
}

.k-q-entrar .form > * + * { margin-top: var(--k-gap-sm); }

/* Las cajas usan `.k-input` del tema, no una propia. Sin esa clase se pintan
   transparentes y sin borde: se ve la etiqueta y no la caja, así que no hay
   dónde escribir. Pasó el 28-ago y solo se vio abriendo la pantalla. */
.k-q-entrar .k-input { width: 100%; }
.k-q-entrar .k-btn   { width: 100%; margin-top: var(--k-gap-sm); }

/* El motivo del rechazo se dice, pero sin decir cuál de los dos campos falla:
   eso le diría a quien prueba correos si esa cuenta existe. */
.k-q-entrar-error {
  color: var(--bad);
  font-size: var(--k-t-sm);
  margin-bottom: var(--k-gap-sm);
}


/* ═══ 11 · LAS PANTALLAS DE FINANZAS ═══════════════════════════════════════
   El año, los recurrentes, el IVA y los saldos. Ningún color escrito: todos
   salen de los tokens del tema, igual que en el resto de esta hoja. */

/* El SVG se dibuja en el servidor y se estira al ancho del panel. Alto fijo:
   una gráfica que cambia de alto al cambiar los datos se lee como si el dato
   hubiera cambiado más de lo que cambió. */
.k-q-panel-grafico { padding: var(--k-pad); overflow-x: auto; }
.k-q-grafico       { display: block; width: 100%; }

.k-q-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-gap-sm) var(--k-gap);
  margin-top: var(--k-gap-sm);
  font-size: var(--k-t-xs);
  color: var(--fg-muted);
}

.k-q-leyenda-item { display: inline-flex; align-items: center; gap: .4rem; }

.k-q-leyenda-item i {
  width: .75rem;
  height: .75rem;
  border-radius: 2px;
  display: inline-block;
}

/* Las tablas de dinero. `overflow-x` en el envoltorio y no en la tabla: con la
   segunda forma la cabecera se despega de las filas al desplazar. */
.k-q-tabla-envoltorio { overflow-x: auto; }

.k-q-tabla { width: 100%; border-collapse: collapse; }
.k-q-tabla th { text-align: left; font-size: var(--k-t-xs); color: var(--fg-muted); font-weight: 600; }
.k-q-tabla td, .k-q-tabla th { padding: .45rem .6rem; }
.k-q-tabla tbody tr + tr { border-top: 1px solid var(--border); }

/* Las cifras alineadas a la derecha y con los dígitos del mismo ancho: sin
   `tabular-nums` una columna de importes no se puede comparar de un vistazo,
   que es justo para lo que existe la columna. */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* El mes en curso se marca, no se esconde: hay que poder verlo sabiendo que
   está a medias. Y lo que aún no ha pasado se apaga. */
.k-q-en-curso { background: var(--c-surface-soft); }
.k-q-futuro   { color: var(--fg-muted); }
.k-q-malo     { color: var(--bad); }

.k-q-frase { padding: var(--k-pad); font-size: var(--k-t-md); }

.k-q-caja { padding: var(--k-pad); }
.k-q-caja h3 { margin: 0 0 var(--k-gap-sm); font-size: var(--k-t-sm); }

.k-q-cifra-gorda {
  margin: 0;
  font-size: var(--k-t-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.k-q-tabla-mini { width: 100%; border-collapse: collapse; }
.k-q-tabla-mini td { padding: .25rem 0; }

/* Un aviso no es una nota al pie: se ve, y el malo se ve más. Que la pantalla
   diga que la cifra no es de fiar tiene que costar más de ignorar que la
   propia cifra. */
.k-q-aviso, .k-q-aviso-malo { padding: var(--k-pad); margin-bottom: var(--k-gap); }
.k-q-aviso      { border-left: 3px solid var(--c-warning); }
.k-q-aviso-malo { border-left: 3px solid var(--bad); }
.k-q-aviso p, .k-q-aviso-malo p { margin: var(--k-gap-xs) 0 0; color: var(--fg-soft); }
.k-q-aviso ul, .k-q-aviso-malo ul { margin: var(--k-gap-xs) 0 0 1.1rem; color: var(--fg-soft); }

/* Va con `.k-q-nota` de más arriba, que es otra cosa —un pie con separador—.
   Esto es solo texto pequeño al lado de un dato. */
.k-q-apunte { font-size: var(--k-t-xs); color: var(--fg-muted); }