/* ═══ 0 · LA ESCALA DE LETRA ════════════════════════════════════════════════
   Las etiquetas de Komandesk se quedan pequeñas en una pantalla grande: AJ lo
   pidió el 31-ago y tenía razón. Se suben AQUÍ y no en `komandesk.css`, que es
   una copia y no se toca — si allí cambia algo, se vuelve a copiar encima.

   No es un capricho de estilo: una etiqueta que hay que acercarse a leer es una
   etiqueta que no se lee, y entonces la columna que ordena la pantalla deja de
   ordenar nada. */

:root {
  --k-t-xs: 0.85rem;
  --k-t-sm: 0.95rem;
}


/* Sagia — 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); }

/* Rejilla de tres columnas, no flex.
   ------------------------------------------------------------------------
   Con flex cada fila se alineaba por su cuenta: la etiqueta «esta semana»
   mide el doble que «ahora», así que el título de una fila empezaba dos
   centímetros más a la derecha que el de la de arriba, y la lista se leía
   como si estuviera desordenada.

   Con rejilla las tres columnas son las mismas para todas las filas: la
   etiqueta ocupa lo mismo siempre, todos los títulos arrancan en la misma
   vertical y todas las acciones acaban en la misma. El medio es `1fr`, así
   que la lista sigue siendo fluida y ocupa el ancho que haya. */
.k-q-propuesta {
  display: grid;
  grid-template-columns: var(--k-etiqueta) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--k-gap-sm) var(--k-gap);
  padding: var(--k-gap-sm) 0;
}

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

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

/* La columna de la acción: alineada a la derecha y siempre en la misma
   vertical. Cuando hay dos enlaces —lo del asesor son dos descargas— van uno
   detrás de otro sin partirse. */
.k-q-propuesta-ir {
  justify-self: end;
  text-align: right;
  display: flex;
  gap: var(--k-gap-sm);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.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)); }

/* La etiqueta de cuándo toca.
   ------------------------------------------------------------------------
   **Todas miden lo mismo**, y eso no es simetría por gusto: es lo que deja
   leer la columna de un vistazo sabiendo que lo rojo es lo urgente. Con
   anchos distintos hay que leer cada palabra para saber en qué grupo está.

   El ancho sale de la más larga —«esta semana»— y vive en una variable para
   que añadir una etiqueta nueva no obligue a buscar el número. */
.k-q-propuestas { --k-etiqueta: 6.5rem; }

.k-q-cuando {
  font-family: var(--font-mono);
  /* 11 px, no 9,5: por debajo de once una versalita en monoespaciada deja de
     leerse de un vistazo, que es lo único para lo que sirve esta columna. */
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
  white-space: nowrap;
  text-align: center;
  flex: 0 0 auto;
  /* El fondo es el mismo color a un 8 %: se ve el grupo de reojo sin que la
     etiqueta pese más que el título, que es lo que hay que leer. */
  background: color-mix(in srgb, currentColor 8%, transparent);
}

/* Ancho completo **solo dentro de la lista de propuestas**, que es donde hay
   una columna que respetar. En las tarjetas la misma etiqueta va en línea con
   el texto, y estirarla allí empujaría el título a la línea de abajo. */
.k-q-propuestas .k-q-cuando {
  display: block;
  width: 100%;
}

.k-q-cuando-ahora  { color: var(--bad); }
.k-q-cuando-semana { color: var(--primary); }
.k-q-cuando-cuando { color: var(--fg-soft); }
.k-q-cuando-asesor { 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)); }
}

/* En estrecho, tres columnas no caben: la etiqueta arriba, el texto debajo y
   la acción al final. Sigue alineado porque sigue siendo la misma rejilla. */
@container lienzo (max-width: 620px) {
  .k-q-propuesta {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--k-gap-xs);
  }

  .k-q-cuando { width: var(--k-etiqueta); }
  .k-q-propuesta-ir { justify-self: start; justify-content: flex-start; }
}

@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. */

/* ═══ 13 · LAS GRÁFICAS ═════════════════════════════════════════════════════
   **Las barras son HTML, no SVG.** Antes eran un SVG estirado al ancho del
   panel, y en una pantalla ancha eso ensancha todo por igual: las barras, los
   bordes redondeados y las letras. Los meses salían deformados a lo ancho.
   Una gráfica deformada no es un detalle de gusto: si las proporciones no
   valen, la gráfica no está diciendo lo que dice que dice.

   Con HTML no puede pasar: la altura va en porcentaje, el ancho lo reparte la
   rejilla y el texto es texto. Y sigue ocupando el ancho que haya. */

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

.k-g {
  position: relative;
  /* 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ó. */
  height: var(--k-g-alto, 200px);
  padding-left: 3.4rem;
  padding-bottom: 1.5rem;
}

/* Las rayas de referencia y sus cifras. Sin ellas, la altura de una barra no
   dice nada. */
.k-g-rayas { position: absolute; inset: 0 0 1.5rem 3.4rem; }

.k-g-raya {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--border);
}

.k-g-raya span {
  position: absolute;
  right: calc(100% + .5rem);
  transform: translateY(-50%);
  font-size: var(--k-t-xs);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.k-g-barras {
  position: relative;
  height: 100%;
  display: flex;
  align-items: stretch;
  gap: .35rem;
}

.k-g-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }

/* El hueco donde vive la barra. La barra se coloca desde abajo, así que lo
   negativo puede colgar por debajo de la línea del cero. */
.k-g-hueco { position: relative; flex: 1 1 auto; }

.k-g-barra {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* Ancho tope: sin él, con cuatro barras en una pantalla ancha salían unos
     bloques enormes que parecían otra cosa. */
  width: min(78%, 3.2rem);
  background: var(--c-accent);
  border-radius: 3px 3px 0 0;
}

.k-g-barra.es-mala   { background: var(--bad); }
.k-g-barra.es-floja  { opacity: .3; }
.k-g-barra.es-segunda { background: var(--c-warning); }

/* Dos barras enfrentadas: una a cada lado del centro, sin pisarse. */
.k-g-par .k-g-barra           { width: min(38%, 1.6rem); transform: translateX(-105%); }
.k-g-par .k-g-barra.es-segunda { transform: translateX(5%); }

/* La raya del objetivo: cruza la columna a la altura que toque. Es una raya
   que cruzar, no otra serie que sumar. */
.k-g-meta {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(90%, 3.8rem);
  height: 0;
  border-top: 2.5px solid var(--c-warning);
  border-radius: 2px;
}

.k-g-etiqueta {
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  font-size: var(--k-t-xs);
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
}

/* La línea sí es SVG —una línea necesita coordenadas— pero con el grosor sin
   escalar y las etiquetas fuera, que era lo único que se deformaba. */
.k-g-trazo {
  position: absolute;
  inset: 0 0 1.5rem 3.4rem;
  width: calc(100% - 3.4rem);
  height: calc(100% - 1.5rem);
}

.k-g-etiquetas {
  position: absolute;
  left: 3.4rem;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
}

.k-g-etiquetas .k-g-etiqueta { flex: 1 1 0; }

/* La barra de reparto: cuánto pesa cada trozo del total, en una sola línea. */
.k-q-panel-reparto { padding: var(--k-pad); }

.k-g-reparto {
  display: flex;
  height: 1.4rem;
  border-radius: 4px;
  overflow: hidden;
  background: var(--c-surface-soft);
}

.k-g-trozo { display: block; height: 100%; }

.k-g-tono-1 { background: var(--c-accent); }
.k-g-tono-2 { background: var(--c-warning); }
.k-g-tono-3 { background: var(--fg-muted); }
.k-g-tono-4 { background: var(--border-strong); }
.k-g-tono-5 { background: var(--fg-soft); }

/* En estrecho caben menos etiquetas: se dejan una de cada dos en vez de
   apretarlas hasta que no se lean. */
@container lienzo (max-width: 560px) {
  .k-g-barras .k-g-col:nth-child(even) .k-g-etiqueta { visibility: hidden; }
  .k-g { padding-left: 2.6rem; }
  .k-g-rayas, .k-g-trazo, .k-g-etiquetas { left: 2.6rem; }
}

.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); }


/* ═══ 12 · PROSPECCIÓN ══════════════════════════════════════════════════════
   Las fichas de candidato, el filtro y los borradores de mensaje. */

.k-q-filtro {
  padding: var(--k-pad);
  display: flex;
  gap: var(--k-gap-sm);
  flex-wrap: wrap;
  align-items: flex-end;
}

.k-q-campo { display: flex; flex-direction: column; gap: .35rem; }
.k-q-campo label { font-weight: 600; font-size: var(--k-t-sm); }

/* Los botones de una fila van juntos y no apilados: son alternativas de la
   misma decisión, no pasos de un formulario. */
.k-q-en-linea {
  display: flex;
  gap: var(--k-gap-xs);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--k-gap-sm);
}

/* Ficha por candidato en vez de fila de tabla: lo que hay que leer antes de
   llamar no cabe en una fila, y en una tabla el motivo de venta se quedaba
   cortado en una celda. */
.k-q-fichas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: var(--k-gap);
}

.k-q-ficha { padding: var(--k-pad); display: flex; flex-direction: column; gap: var(--k-gap-xs); }

.k-q-ficha-cab { display: flex; justify-content: space-between; gap: var(--k-gap-sm); align-items: flex-start; }
.k-q-ficha-cab h3 { margin: 0; font-size: var(--k-t-md); }
.k-q-ficha-cab p  { margin: .15rem 0 0; }

.k-q-ficha-puntos { text-align: right; flex-shrink: 0; }
.k-q-ficha-puntos .k-q-cifra-gorda { display: block; line-height: 1; }

.k-q-ficha-pie { margin-top: auto; padding-top: var(--k-gap-sm); display: flex; gap: var(--k-gap-xs); flex-wrap: wrap; align-items: center; }
.k-q-ficha-pie .k-q-en-linea { margin-top: 0; }

.k-q-venta { margin: var(--k-gap-xs) 0 0; }

.k-q-porques { margin: var(--k-gap-xs) 0 0 1.1rem; padding: 0; color: var(--fg-soft); font-size: var(--k-t-sm); }
.k-q-porques li + li { margin-top: .2rem; }

/* El borrador se puede seleccionar y copiar, pero no editar: lo que se edita es
   el mensaje ya pegado donde se vaya a mandar, no esta copia. */
.k-q-borrador {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--k-t-xs);
  line-height: 1.5;
  white-space: pre-wrap;
  resize: vertical;
}


/* ═══ 14 · LA AGENDA ════════════════════════════════════════════════════════
   Un día por tarjeta. En rejilla y no en lista larga: catorce días en una
   columna obligan a bajar hasta el final para ver la semana que viene, y lo
   que hace falta es ver de golpe dónde se amontona. */

.k-q-dias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--k-gap);
}

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

.k-q-dia h3 {
  margin: 0 0 var(--k-gap-sm);
  font-size: var(--k-t-sm);
  display: flex;
  align-items: center;
  gap: var(--k-gap-xs);
  text-transform: capitalize;
}

/* Hoy se marca con una barra al lado, no con un fondo: el fondo compite con
   las citas que lleva dentro, que es lo que hay que leer. */
.k-q-dia.es-hoy { border-left: 3px solid var(--c-accent); }

/* El fin de semana se apaga, no se esconde: hay entregas que caen en sábado y
   quitarlas del calendario es como se descubren el lunes. */
.k-q-dia.es-finde { opacity: .72; }

.k-q-cita {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: var(--k-gap-xs);
  align-items: baseline;
  padding: var(--k-gap-xs) 0;
}

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

.k-q-cita-hora {
  font-family: var(--font-mono);
  font-size: var(--k-t-xs);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

.k-q-cita-que { font-size: var(--k-t-sm); line-height: 1.35; }


/* ═══ 15 · EL ASISTENTE ═════════════════════════════════════════════════════
   Va en la barra de arriba y no en el menú: el menú es de los departamentos, y
   esto se usa desde cualquier pantalla. */

.k-q-barra-boton {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--k-r-sm, 5px);
  font-size: var(--k-t-xs);
  font-weight: 600;
  color: var(--fg-soft);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.k-q-barra-boton:hover,
.k-q-barra-boton.is-active { color: var(--primary); border-color: currentColor; }

.k-q-barra-boton svg { width: 14px; height: 14px; }

/* La respuesta se lee como un texto, no como una ficha de datos: líneas más
   separadas y ancho de lectura cómodo dentro del panel, que sigue siendo
   fluido. */
.k-q-respuesta { padding: var(--k-pad); }

.k-q-respuesta-texto {
  margin-top: var(--k-gap-sm);
  font-size: var(--k-t-md);
  line-height: 1.6;
}


/* ═══ 16 · LA PORTADA: LA EMPRESA EN COLUMNAS ══════════════════════════════
   Antes cada grupo era un título y una rejilla de tres columnas debajo. Con
   nueve grupos de dos o tres pantallas, **la mitad de la pantalla eran
   huecos**: la última fila de cada rejilla quedaba a medias y había que bajar
   mucho para ver la empresa entera.

   Ahora cada grupo es una columna con sus pantallas apiladas. Las columnas se
   reparten el ancho que haya, así que no sobra sitio en ninguna. */

.k-q-empresa {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--k-gap);
  align-items: start;
}

.k-q-area { padding: var(--k-gap-sm) var(--k-gap-sm) var(--k-gap-xs); }

.k-q-area-nombre {
  display: flex;
  align-items: center;
  gap: var(--k-gap-xs);
  margin: 0 0 var(--k-gap-xs);
  padding: 0 .35rem var(--k-gap-xs);
  border-bottom: 1px solid var(--border);
  font-size: var(--k-t-sm);
  font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

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

.k-q-pantalla {
  display: flex;
  align-items: center;
  gap: var(--k-gap-xs);
  padding: .4rem .35rem;
  border-radius: var(--k-r-sm, 5px);
  text-decoration: none;
  color: inherit;
}

.k-q-pantalla:hover { background: var(--surface-2); }

/* Lo que no existe se ve, pero no se pulsa: un enlace que lleva a un 404 pelado
   parece que la aplicación está rota, no que la pantalla está por hacer. */
.k-q-pantalla.es-pendiente { opacity: .5; cursor: default; }

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

.k-q-pantalla-nombre {
  font-size: var(--k-t-sm);
  font-weight: 600;
  line-height: 1.25;
}

.k-q-pantalla-quien {
  font-size: var(--k-t-xs);
  color: var(--fg-muted);
  line-height: 1.25;
}

/* El punto: el estado de un vistazo, sin leer.
   Verde NO es «va bien», es «tiene lo suyo y puedes entrar». */
.k-q-luz {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex: 0 0 auto;
  margin-top: 1px;
}

.k-q-luz-bien      { background: var(--ok, #5f785d); }
.k-q-luz-aviso     { background: var(--c-warning); }
.k-q-luz-mal       { background: var(--bad); }
.k-q-luz-pendiente { background: transparent; border: 1px solid var(--border-strong); }


/* Una tarjeta sola ocupa el ancho de la página.
   ------------------------------------------------------------------------
   `k-q-rejilla` reparte en tres columnas a propósito, para que dos grupos de
   tarjetas alineen entre sí. Con una sola tarjeta dentro, eso deja dos tercios
   de pantalla vacíos al lado — que es lo que se veía en el resumen de
   Finanzas. */
.k-q-ancho-completo { display: block; }
.k-q-ancho-completo > .k-q-tarjeta { width: 100%; }


/* ═══ 17 · EL CALENDARIO DEL MES ════════════════════════════════════════════
   Un mes de verdad, con sus semanas, y no una lista de días: para saber si la
   semana que viene está cargada hay que ver la forma, no leer catorce fichas.
   Empieza en lunes, que es como se lee un mes en España. */

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

.k-q-mes-barra {
  display: flex;
  align-items: center;
  gap: var(--k-gap-sm);
  flex-wrap: wrap;
  margin-bottom: var(--k-gap-sm);
}

/* El contador de cosas del mes se va al centro y los botones a los lados: así
   «mes siguiente» está siempre en el mismo sitio, se mire el mes que se mire. */
.k-q-mes-barra .k-q-apunte { margin-left: auto; margin-right: auto; }

.k-q-mes-rejilla {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--k-r-sm, 5px);
  overflow: hidden;
}

.k-q-mes-cabecera {
  background: var(--surface-2);
  padding: .35rem .5rem;
  font-size: var(--k-t-xs);
  font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
}

.k-q-mes-dia {
  background: var(--bg);
  /* Alto mínimo para que un mes con días vacíos siga pareciendo un mes: sin él,
     las semanas sin nada se aplastan y la rejilla deja de leerse como un
     calendario. */
  min-height: 5.5rem;
  padding: .3rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.k-q-mes-dia.es-de-otro { opacity: .38; }
.k-q-mes-dia.es-finde   { background: var(--surface-2); }

/* Hoy se marca con un borde, no con un fondo: el fondo compite con las citas
   que lleva dentro, que es lo que hay que leer. */
.k-q-mes-dia.es-hoy { box-shadow: inset 0 0 0 2px var(--c-accent); }

.k-q-mes-numero {
  font-size: var(--k-t-xs);
  font-weight: 700;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

.k-q-mes-dia.es-hoy .k-q-mes-numero { color: var(--c-accent); }

.k-q-mes-cita {
  display: block;
  font-size: var(--k-t-xs);
  line-height: 1.25;
  padding: 1px .3rem;
  border-radius: 3px;
  border-left: 3px solid var(--fg-muted);
  background: var(--surface-2);
  color: inherit;
  text-decoration: none;
  /* Una línea por cita: con dos, un día con tres cosas es más alto que la
     semana entera y la rejilla se descuadra. El texto completo va en el título
     y en la lista de abajo. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.k-q-mes-cita:hover { background: var(--bg); border-left-color: var(--primary); }

.k-q-mes-cita b { font-family: var(--font-mono); font-weight: 600; }

/* De dónde viene cada cosa, por el color de la barrita. */
.k-q-de-propio        { border-left-color: var(--c-accent); }
.k-q-de-finanzas      { border-left-color: var(--c-warning); }
.k-q-de-prospeccion   { border-left-color: var(--primary); }
.k-q-de-mantenimiento { border-left-color: var(--bad); }

/* En estrecho, un mes de siete columnas no cabe: se deja pasar el dedo por
   encima en vez de apretarlo hasta que no se lea. */
@container lienzo (max-width: 700px) {
  .k-q-mes-rejilla { min-width: 42rem; }
  .k-q-mes { overflow-x: auto; }
}

/* ── 18 · Productos ──────────────────────────────────────────────────────
   Una etiqueta pequeña al lado del nombre, para lo que está archivado. Va
   dentro de la misma celda a propósito: una columna entera para decir «no»
   trece veces es una columna desperdiciada. */
.k-q-etiqueta-mini {
  display: inline-block;
  margin-left: .4rem;
  padding: .1rem .4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: var(--k-t-xs);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ── 19 · Marca y voz ────────────────────────────────────────────────────
   El índice son fichas y no una lista de enlaces: cada documento necesita su
   frase de qué es, porque «06 visión e identidad» no dice nada por sí solo. */
.k-q-marca-indice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .75rem;
  margin-bottom: 1.25rem;
}

.k-q-marca-ficha {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--c-accent);
  border-radius: 8px;
  background: var(--panel);
  color: inherit;
  text-decoration: none;
}

a.k-q-marca-ficha:hover { background: var(--bg); border-left-color: var(--primary); }

.k-q-marca-ficha strong { font-size: var(--k-t-md); }

.k-q-marca-que { color: var(--text-muted); font-size: var(--k-t-sm); line-height: 1.4; }

/* Lo que falta se ve que falta: sin barra de color y sin ser un enlace. */
.k-q-marca-falta { border-left-color: var(--border); opacity: .75; }

/* Un documento largo se lee mejor en una columna estrecha, así que aquí NO se
   estira a todo lo ancho: pasados los 70 caracteres el ojo pierde el renglón
   al saltar de línea. */
.k-q-marca-texto { max-width: 46rem; line-height: 1.65; }

.k-q-marca-texto h1,
.k-q-marca-texto h2,
.k-q-marca-texto h3 { margin: 1.5rem 0 .6rem; line-height: 1.25; }

.k-q-marca-texto h1:first-child { margin-top: 0; }

.k-q-marca-texto p,
.k-q-marca-texto ul,
.k-q-marca-texto ol { margin: 0 0 .9rem; }

.k-q-marca-texto ul,
.k-q-marca-texto ol { padding-left: 1.4rem; }

.k-q-marca-texto li { margin-bottom: .35rem; }

.k-q-marca-texto blockquote {
  margin: 0 0 .9rem;
  padding: .6rem 1rem;
  border-left: 3px solid var(--c-accent);
  background: var(--bg);
  color: var(--text-muted);
}

.k-q-marca-texto table { width: 100%; border-collapse: collapse; margin-bottom: .9rem; }
.k-q-marca-texto th,
.k-q-marca-texto td { padding: .45rem .6rem; border-bottom: 1px solid var(--border); text-align: left; }
.k-q-marca-texto code { font-family: var(--font-mono); font-size: .92em; }
.k-q-marca-texto pre { overflow-x: auto; padding: .8rem; border-radius: 6px; background: var(--bg); }
.k-q-marca-texto hr { margin: 1.5rem 0; border: 0; border-top: 1px solid var(--border); }