/* Komandesk — lo que ponemos encima del tema de ops.
   ==========================================================================

   Tres capas, en este orden:

     1 · TOKENS      los valores. Ningún número se escribe fuera de aquí.
     2 · PUENTE      lo que hay que corregir del tema de ops, junto y con su
                     motivo. No crece: si algo se corrige dos veces, es que
                     debería ser un componente.
     3 · COMPONENTES lo nuestro. Una clase por cosa, reutilizable en cualquier
                     pantalla.

   Las vistas usan clases, nunca `style=""`. Si para pintar algo hace falta
   escribir un estilo en una pantalla, es que falta un componente aquí. */


/* ═══ 1 · TOKENS ═══════════════════════════════════════════════════════════ */

:root {
  /* Espacio. Un solo relleno para todo lo que va dentro de una tarjeta: si
     cada sitio elige el suyo, la pantalla parece hecha por dos personas. */
  --k-pad:      1.4rem;
  --k-gap:      1.25rem;
  --k-gap-sm:   0.65rem;
  --k-gap-xs:   0.35rem;

  /* Escala de letra. El tema de ops mide casi todo por debajo de 0.85rem, que
     en pantalla grande no se lee. */
  --k-t-xs:     0.78rem;
  --k-t-sm:     0.9rem;
  --k-t-md:     1rem;
  --k-t-lg:     1.1rem;
  --k-t-titulo: 1.6rem;

  --k-control:  2.3rem;

  /* Lo descartado: gris apagado. No es un error ni un logro, es algo que dejo
     de estar en la lista. Cualquier color lo haria reclamar atencion, que es
     justo lo contrario de lo que significa. */
  --k-descartada:      #6b7280;
  --k-descartada-tinte: color-mix(in srgb, #6b7280 9%, transparent);
}

html { font-size: 19px; }


/* ═══ 2 · PUENTE CON EL TEMA DE OPS ════════════════════════════════════════ */

.sidebar-link,
.sidebar-link.sidebar-child,
.subpanel-item,
.k-casilla,
.k-flash,
.k-label,
.k-hint,
.k-segment a,
.k-segment button,
.ops-color-chip,
.task-status-select,
.k-btn-sm            { font-size: var(--k-t-sm); }

.sidebar-group-toggle,
#subpanel-title,
.k-section-label,
.k-stat-lbl,
.k-activity-cap,
.ops-table th,
.status-badge,
.kb-meta, .kb-pill   { font-size: var(--k-t-xs); }

.ops-table,
.ops-empty,
.k-input, .k-textarea,
.k-btn,
.kb-title            { font-size: var(--k-t-md); }

.btn-primary,
.btn-outline         { font-size: var(--k-t-sm) !important; }

/* Las cabeceras van en versalitas; lo que se mete dentro, no. */
.task-row-header .status-badge,
.task-row-header .k-tecnico { text-transform: none; letter-spacing: 0; }

/* El primer rótulo de una cabecera se queda el sitio libre, para no escribir
   `flex:1` en cada pantalla. */
.task-row-header > span:first-child { flex: 1; }

/* `.k-btn` nace a lo ancho porque en ops solo se usa en el login. */
.ops-panel .k-btn,
.k-topbar-acciones .k-btn,
.k-cajon-body .k-btn { width: auto; white-space: nowrap; }

/* En ops el segmento y el selector de días son botones de JS; aquí, enlaces. */
.k-segment a,
.k-activity-range a {
  background: var(--surface);
  color: var(--fg-soft);
  text-decoration: none;
  transition: background .12s, color .12s;
}

.k-segment a        { padding: 5px 13px; }
.k-activity-range a { padding: 3px 10px; }
.k-segment a + a,
.k-activity-range a + a { border-left: 1px solid var(--border); }
.k-segment a:hover,
.k-activity-range a:hover { background: var(--surface-2); color: var(--fg); }
.k-segment a.on,
.k-activity-range a.sel { background: var(--primary-soft); color: var(--primary); font-weight: 600; }

.k-stat-link { text-decoration: none; }

/* El desplegable nativo pega la flecha al borde si no se le hace sitio. */
select.k-input,
.k-filtros select,
#workspace-switcher {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 0.7rem;
  padding-right: 2.2rem;
}

/* Los controles que existen pero aún no hacen nada: se ven, no engañan. */
.btn-outline[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-outline[disabled]:hover { background: var(--surface); }


/* ═══ 3 · COMPONENTES ══════════════════════════════════════════════════════ */

/* ── Pila: lo que separa un panel del siguiente ──────────────────────────── */

.k-pila > * + * { margin-top: var(--k-gap); }

/* ── Panel: el relleno interior, uno para todos ──────────────────────────── */

.k-panel-body    { padding: var(--k-pad); }
.k-panel-borde   { border-top: 1px solid var(--border); }
.task-row-header { padding: 0.7rem var(--k-pad) !important; }
.ops-empty       { padding: 2.5rem var(--k-pad); }

/* ── Filas ───────────────────────────────────────────────────────────────── */

.k-rows > * + * { border-top: 1px solid var(--border); }

.k-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding: 0.85rem var(--k-pad);
  transition: background 0.15s;
}

.k-row:hover      { background: var(--surface-2); }
.k-row-arriba     { align-items: flex-start; }
.k-row-destacada  { background: var(--surface-2); }
.k-row-main       { flex: 1 1 18rem; min-width: 12rem; }
.k-row-title      { font-size: var(--k-t-md); color: var(--fg); }
.k-row-title a    { color: inherit; text-decoration: none; }
.k-row-title a:hover { color: var(--primary); }
.k-row-fuerte .k-row-title { font-weight: 600; }
.k-row-cifra      { font-size: var(--k-t-sm); font-weight: 600; flex: none; }
.k-row-avance     { flex: none; width: 9rem; }

/* ── Metadatos ───────────────────────────────────────────────────────────── */

.k-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-gap-xs);
  font-size: var(--k-t-sm);
  color: var(--fg-muted);
}

.k-meta > span + span::before {
  content: "·";
  margin-right: var(--k-gap-xs);
  color: var(--border-strong);
}

.k-meta-columna { flex-direction: column; align-items: flex-start; }
.k-meta-sep     { margin-top: var(--k-gap-xs); }

.k-tecnico { font-size: var(--k-t-xs); color: var(--fg-muted); font-weight: 400; }

.k-mal   { color: var(--bad); }
.k-bien  { color: var(--ok, #5f785d); }
.k-suave { color: var(--fg-soft); }
.k-tenue { color: var(--fg-muted); }

/* ── Dos columnas ────────────────────────────────────────────────────────── */

.k-split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--k-gap);
  align-items: start;
}

@media (max-width: 1100px) {
  .k-split { grid-template-columns: minmax(0, 1fr); }
}

/* ── Aviso ───────────────────────────────────────────────────────────────── */

.k-flash {
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  background: var(--surface-2);
  color: var(--fg);
  border-radius: var(--k-r-md);
  padding: var(--k-gap-sm) 1rem;
  margin-bottom: var(--k-gap);
}

.k-flash-success { border-left-color: var(--ok, #5f785d); }
.k-flash-error   { border-left-color: var(--bad, #9a5b55); }

/* ── Barra de filtros ────────────────────────────────────────────────────── */

.k-filtros {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--k-gap-sm);
  padding: var(--k-pad);
}

.k-filtros > *      { margin: 0; }
.k-filtros .k-input { width: auto; height: var(--k-control); }
.k-filtros-busca    { flex: 1; min-width: 15rem; }
.k-filtros-grupo    { display: flex; align-items: center; flex-wrap: wrap; gap: var(--k-gap-sm); }
.k-filtros-derecha  { margin-left: auto; }

.k-filtros-puestos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 var(--k-pad) var(--k-pad);
}

/* ── Controles pequeños dentro de una fila ───────────────────────────────── */

.k-mini       { height: var(--k-control); padding: 0 0.6rem; font-size: var(--k-t-sm); width: auto; }
.k-mini-fecha { width: 10rem; }
.k-mini-ancho { max-width: 12rem; }

/* ── Tablas ──────────────────────────────────────────────────────────────── */

.k-tabla-scroll { overflow-x: auto; }
.k-tabla-scroll .ops-table { min-width: 54rem; }
.ops-table .k-textlink { display: inline; }
.k-celda-suave { font-size: var(--k-t-sm); color: var(--fg-soft); }
.k-celda-tenue { font-size: var(--k-t-sm); color: var(--fg-muted); }
.k-celda-num   { font-size: var(--k-t-xs); color: var(--fg-muted); }

/* El numero de la tarea: se ve, se lee y no compite con el titulo. */
.k-num {
  font-variant-numeric: tabular-nums;
  font-size: var(--k-t-xs);
  color: var(--fg-muted);
}

/* ── Cajones laterales ───────────────────────────────────────────────────── */

.k-cajon-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.2rem;
  padding: 0 var(--k-pad);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.k-cajon-title { flex: 1; margin: 0; font-size: var(--k-t-lg); font-weight: 600; color: var(--fg); }

.k-cajon-x {
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--fg-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.k-cajon-x:hover   { background: var(--surface-2); color: var(--fg); }
.k-cajon-body      { padding: var(--k-pad); }
body.cajon-abierto { overflow: hidden; }

/* ── Casilla con su texto ────────────────────────────────────────────────── */

.k-casilla {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--fg-soft);
  cursor: pointer;
  user-select: none;
}

.k-casilla input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.k-casilla:hover { color: var(--fg); }

/* ── Bloque de código dentro de un panel ─────────────────────────────────── */

.ops-panel pre {
  overflow-x: auto;
  max-width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--k-r-md);
  padding: 0.6rem 0.75rem;
  font-size: var(--k-t-xs);
}

/* ── Texto largo tal cual se escribió ────────────────────────────────────── */
/* El encargo de una tarea: se lee entero y se copia. Ajusta las líneas porque
   lo que lleva dentro son párrafos, no código, y una barra horizontal en un
   texto de dos pantallas no la usa nadie. */

.k-pre {
  overflow-x: auto;
  max-width: 100%;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--k-r-md);
  padding: 0.75rem;
  font-size: var(--k-t-xs);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Buscador de la barra de arriba ──────────────────────────────────────── */

.k-buscador       { display: flex; align-items: center; }
.k-input-sm       { font-size: var(--k-t-sm); padding: 0.35rem 0.6rem; max-width: 14rem; }

/* ── Formularios ─────────────────────────────────────────────────────────── */

.k-form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--k-gap-sm); }
.k-form-row .k-field { flex: 1; min-width: 11rem; margin: 0; }

/* ── Aviso centrado, para una pantalla que aún no existe ─────────────────── */

.k-centrado       { text-align: center; max-width: 34rem; margin: 0 auto; padding: 2.5rem var(--k-pad); }
.k-centrado-icono { color: var(--fg-muted); margin-bottom: 1rem; }
.k-centrado h3    { margin: 0 0 0.5rem; font-size: var(--k-t-lg); color: var(--fg); }
.k-centrado p     { margin: 0 0 1.25rem; font-size: var(--k-t-sm); color: var(--fg-soft); line-height: 1.6; }

/* ── Línea con icono y texto ─────────────────────────────────────────────── */

/* Se dobla cuando no cabe. Sin `wrap`, una linea con un titulo largo y una
   insignia al lado se sale de su caja en una columna estrecha. */
.k-linea        { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }
.k-linea > .k-row-main { min-width: 0; flex: 1 1 12rem; }
.k-linea-fuerte { font-weight: 600; color: var(--fg); }

/* ── Punto de color, para marcar la urgencia de un aviso ─────────────────── */

.k-punto       { flex: none; width: 8px; height: 8px; border-radius: 999px; margin-top: 0.5rem; background: var(--primary); }
.k-punto-grave { background: var(--bad); }
.k-punto-aviso { background: var(--warn, #8a7047); }
.k-punto-bueno  { background: var(--ok, #5f785d); }
.k-punto-normal { background: var(--primary); }

/* ── Lo que devolvió un comando ──────────────────────────────────────────────

   La salida de un intento del lanzador. Monoespaciada porque es texto de
   maquina, y **doblada en vez de cortada**: cortada, la linea que dice por que
   fallo es justo la que no se ve. */

.k-salida { margin: var(--k-gap-xs) 0 0; padding: var(--k-gap-sm) var(--k-gap);
            background: var(--surface-2); border-radius: 6px;
            font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
            font-size: var(--k-t-sm); color: var(--fg-soft);
            white-space: pre-wrap; word-break: break-word;
            max-height: 12rem; overflow-y: auto; }

/* ── Menú ────────────────────────────────────────────────────────────────── */

.sidebar-link.is-pendiente { opacity: 0.55; }
.sidebar-link.is-pendiente:hover { opacity: 0.85; }

.sidebar-link.is-pendiente .sidebar-label::after {
  content: "·";
  margin-left: var(--k-gap-xs);
  color: var(--primary);
  font-weight: 700;
}

/* Los rótulos del menú y del subpanel caben en una línea: partidos en dos, la
   columna deja de leerse de un vistazo. */
.sidebar-label,
.subpanel-item span,
.k-cajon-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

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

.k-topbar-actions { flex-wrap: nowrap; }
.k-topbar-actions button,
.k-topbar-actions a,
.k-topbar-actions select { white-space: nowrap; }
.k-topbar-inner > .min-w-0:not(.k-topbar-titulo) { flex: 1 1 auto; min-width: 0; }

/* El nombre de la pantalla vive aqui y solo aqui: por eso lleva su vuelta
   encima y sus botones al lado, y no hay un segundo encabezado debajo.
   Y no se encoge hasta desaparecer: es lo ultimo que sobra de esta barra. */
.k-topbar-inner > .k-topbar-titulo { flex: 1 1 auto; min-width: 10rem; }
.k-topbar-titulo .k-volver { display: inline-flex; align-items: center; gap: 4px;
                             font-size: var(--k-t-xs); color: var(--fg-soft); }
.k-topbar-titulo .k-volver:hover { color: var(--primary); }
.k-topbar-acciones { display: inline-flex; align-items: center; gap: var(--k-gap-xs); }
#workspace-switcher { min-width: 9rem; }

/* Como esta la aplicacion: se lee, no se pulsa. Por eso no lleva borde de
   boton ni sombra —lo que parece pulsable, se pulsa—. */
.k-estados { display: flex; flex-direction: column; gap: 5px;
             padding: var(--k-gap-sm) 0.85rem; border-top: 1px solid rgba(255,255,255,0.08); }
.k-estado { display: inline-flex; align-items: center; gap: var(--k-gap-xs);
            font-size: var(--k-t-xs); color: rgba(255,255,255,0.62); white-space: nowrap; }
.k-estado-punto { width: 7px; height: 7px; border-radius: 999px; background: var(--fg-tenue, #9aa0a6); }
.k-estado-bien   .k-estado-punto { background: var(--ok, #5f785d); }
.k-estado-mal    .k-estado-punto { background: var(--bad); }
.k-estado-quieto .k-estado-punto { background: var(--border); }
.k-estado-mal { color: #f0a9a9; font-weight: 600; }

/* Con el menu plegado no caben las palabras: se quedan los puntos, que siguen
   diciendo si algo va mal de un vistazo. */
.sidebar-collapsed .k-estados { align-items: center; padding-left: 0; padding-right: 0; }
.sidebar-collapsed .k-estado { font-size: 0; gap: 0; }

@media (max-width: 1150px) { .k-topbar-status { display: none; } }
@media (max-width: 900px)  { #workspace-switcher { display: none; } }

/* ── Bloques de texto dentro de un panel ─────────────────────────────────── */

.k-bloque     { margin: 0 0 0.75rem; }
.k-bloque-sm  { margin: 0.4rem 0 0; }
.k-bloque:last-child,
.k-bloque-sm:last-child { margin-bottom: 0; }
.k-texto-sm   { font-size: var(--k-t-sm); }
.k-nota-pie   { margin: 0.85rem var(--k-pad) var(--k-pad); }

/* Un grupo de filas con su separador al pie: las fases y sus tareas. */
.k-grupo { border-bottom: 1px solid var(--border); }
.k-grupo:last-of-type { border-bottom: 0; }

/* La columna del kanban sin tarjetas se marca apagando su punto. */
.kb-dot { background: var(--primary); }
.kb-dot-vacia { opacity: 0.3; }

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

.k-textarea-codigo { font-family: var(--font-mono); font-size: var(--k-t-sm); }
.k-input-codigo    { font-family: var(--font-mono); letter-spacing: 0.04em; }

/* ── Grupos en línea ─────────────────────────────────────────────────────── */

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

/* La barra de controles de una cabecera: se dobla en vez de salirse. Tres
   controles seguidos no caben en una columna estrecha, y lo que pasaba era
   que el ultimo quedaba cortado por el borde. */
.k-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-gap-sm);
           margin-top: var(--k-gap-sm); }
.k-barra > form { margin: 0; }

/* La tarjeta del kanban es un enlace: se comporta como bloque. */
.kb-card { display: block; text-decoration: none; cursor: pointer; }

/* ── Anchos de columna de la cola ────────────────────────────────────────── */

/* Anchos de columna. La de la tarea se queda con lo que sobre, y las demas
   ocupan lo justo: si el titulo se parte en tres lineas de tres palabras, se
   lee peor que en una linea larga. */
.k-col-num    { width: 3rem; }
.k-col-corta  { width: 6.5rem; }
.k-col-med    { width: 9rem; }
.k-col-estado { width: 9.5rem; }

/* La tabla de tareas: el interlineado de un parrafo no vale para una celda.
   Con lineas cortas, 1.5 de interlineado separa mas de lo que junta y la fila
   deja de leerse como una fila. */
.ops-table td { line-height: 1.35; }
.ops-table td .k-textlink { line-height: 1.35; }

/* Alineadas por arriba, no por el centro: cuando un titulo ocupa dos lineas y
   lo de al lado una, centrar deja los datos flotando a media altura. */
.ops-table td { vertical-align: top !important; }
.ops-table th { vertical-align: bottom; }

/* Y lo que son numeros, a la derecha: se comparan de un vistazo. */
.ops-table .k-celda-num,
.ops-table td.k-num { text-align: right; font-variant-numeric: tabular-nums; }

/* El recuento que acompaña a un chip de filtro, separado de su rótulo. */
.k-chip-cuenta { margin-left: var(--k-gap-xs); opacity: 0.6; }

/* La rejilla de dependencias: casillas centradas bajo su número. */
.k-celda-centro { text-align: center; }
.k-celda-centro input[type="checkbox"] { accent-color: var(--primary); cursor: pointer; }

/* Lo que algo decia antes: se consulta, no se lee a diario. Por eso va
   plegado y en gris — si pesara lo mismo que el resumen actual, competiria
   con el, y el resumen es lo que hay que leer. */
.k-detalle { margin-top: var(--k-pad); border-top: 1px solid var(--border); padding-top: var(--k-pad); }
.k-detalle > summary { cursor: pointer; color: var(--fg-soft); font-size: var(--k-t-sm); list-style: none; }
.k-detalle > summary::-webkit-details-marker { display: none; }
.k-detalle > summary::before { content: '▸ '; }
.k-detalle[open] > summary::before { content: '▾ '; }
.k-detalle > summary:hover { color: var(--fg); }
.k-version { margin-top: var(--k-pad); padding-left: var(--k-pad); border-left: 2px solid var(--border); }
.k-version .markdown-body { color: var(--fg-soft); }

/* ── El documento: PRD y especificaciones ─────────────────────────────────
   Lo que mas se lee y lo mas largo que hay en la aplicacion, asi que se
   trata como un texto, no como un trozo de interfaz: medida de lectura
   comoda, jerarquia que se ve de un vistazo y los mismos tokens que todo lo
   demas. Estaba escrito a mano con colores y tamaños sueltos, fuera del
   sistema; retirado de pantalla.css el 15-ago-2026. */
.markdown-body { color: var(--fg-soft); font-size: var(--k-t-md); line-height: 1.7; }

.markdown-body > *:first-child { margin-top: 0; }
.markdown-body > *:last-child  { margin-bottom: 0; }
.markdown-body p  { margin: 0 0 var(--k-gap); }
.markdown-body h1 { font-size: var(--k-t-titulo); font-weight: 700; line-height: 1.25;
                    margin: 0 0 var(--k-gap); color: var(--fg); }
.markdown-body h2 { font-size: var(--k-t-lg); font-weight: 700; line-height: 1.3;
                    margin: calc(var(--k-pad) * 1.6) 0 var(--k-gap-sm); color: var(--fg);
                    padding-bottom: var(--k-gap-xs); border-bottom: 1px solid var(--border); }
.markdown-body h3 { font-size: var(--k-t-md); font-weight: 700;
                    margin: var(--k-pad) 0 var(--k-gap-sm); color: var(--fg); }
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
                    font-size: var(--k-t-md); font-weight: 600;
                    margin: var(--k-gap) 0 var(--k-gap-xs); color: var(--fg); }

.markdown-body ul { list-style: disc;    padding-left: 1.4em; margin: 0 0 var(--k-gap); }
.markdown-body ol { list-style: decimal; padding-left: 1.4em; margin: 0 0 var(--k-gap); }
.markdown-body li { margin: var(--k-gap-xs) 0; }
.markdown-body li > ul, .markdown-body li > ol { margin: var(--k-gap-xs) 0 0; }

.markdown-body strong { font-weight: 700; color: var(--fg); }
.markdown-body a      { color: var(--primary); text-decoration: underline; }

.markdown-body code { background: var(--surface-2); color: var(--fg);
                      padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.88em;
                      font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.markdown-body pre  { background: var(--fg); color: var(--surface);
                      padding: var(--k-gap) var(--k-pad); border-radius: 8px;
                      overflow-x: auto; margin: 0 0 var(--k-gap); }
.markdown-body pre code { background: transparent; color: inherit; padding: 0; font-size: 0.85em; }

.markdown-body blockquote { margin: 0 0 var(--k-gap); padding: var(--k-gap-sm) 0 var(--k-gap-sm) var(--k-pad);
                            border-left: 3px solid var(--primary); color: var(--fg-soft); }
.markdown-body blockquote > *:last-child { margin-bottom: 0; }
.markdown-body hr { border: 0; border-top: 1px solid var(--border); margin: calc(var(--k-pad) * 1.6) 0; }

/* La tabla llena el ancho que haya; cuando no cabe, la que se desplaza es
   su envoltura. Si el desplazamiento fuera de la tabla, no podria estirarse
   —y una pagina ancha con una tabla encogida queda pobre—. */
.k-tabla { overflow-x: auto; margin: 0 0 var(--k-gap); }
.markdown-body table { width: 100%; border-collapse: collapse; font-size: var(--k-t-sm); }
.markdown-body th, .markdown-body td { border: 1px solid var(--border);
                                       padding: var(--k-gap-xs) var(--k-gap-sm);
                                       text-align: left; vertical-align: top; }
.markdown-body th { background: var(--surface-2); color: var(--fg); font-weight: 600; }

/* La tira: numeros a la izquierda, grafica a la derecha —la forma de ops—.
   Los numeros se encogen antes que empujar la grafica a la linea de abajo;
   con cinco cifras no cabian y la grafica se caia debajo. */
.k-statstrip .k-statnums { flex: 0 1 auto; min-width: 0; column-gap: var(--k-gap); }
.k-statstrip .k-stat-chart { flex: 0 1 21rem; min-width: 12rem; }

/* En pantalla ancha la grafica va al lado, no debajo: los numeros se
   reordenan solos si hace falta. En estrecho se dobla, que es lo correcto. */
@media (min-width: 60rem) {
  .k-statstrip { flex-wrap: nowrap; }
}

/* La fase que toca: un filo de color a la izquierda y un rotulo. Lo demas
   sigue igual — destacar una cosa es apagar el resto, no gritar mas. */
.k-grupo-toca { border-left: 3px solid var(--primary); }
.k-toca { font-size: var(--k-t-xs); font-weight: 600; color: var(--primary);
          text-transform: uppercase; letter-spacing: 0.04em; margin-left: var(--k-gap-sm); }

/* El pliegue de lo hecho no lleva el borde ni el hueco del contexto: aqui es
   una linea mas de la lista, no un apartado. */
.k-detalle-fases { margin: 0; border-top: 0; padding-top: 0; }
/* No es una nota al pie: son seis fases de trabajo. Se lee como el resto de
   la lista, no como algo sin importancia. */
.k-detalle-fases > summary { padding: var(--k-gap-sm) var(--k-pad);
                             font-size: var(--k-t-md); font-weight: 600; color: var(--fg); }
.k-detalle-fases > summary:hover { color: var(--primary); }

/* El rastro de vuelta: encima del titulo, gris y pequeño. No es un boton
   porque no es una accion — es saber de donde vienes. */
.k-volver { display: inline-flex; align-items: center; gap: 0.3em; margin-bottom: var(--k-gap-xs);
            font-size: var(--k-t-sm); color: var(--fg-soft); text-decoration: none; }
.k-volver:hover { color: var(--primary); }

/* Los botones de la cabecera, en una linea mientras quepan. */

/* El rotulo de la grafica va encima y en su linea: asi el dibujo se queda con
   todo el ancho. Antes el texto y el selector le comian la mitad. */
.k-statstrip .k-stat-chart { align-items: stretch; }
.k-statstrip .k-activity-head { display: flex; justify-content: space-between; align-items: baseline;
                                gap: var(--k-gap-sm); margin-bottom: var(--k-gap-xs); }
.k-statstrip .k-activity-cap { white-space: nowrap; }
.k-statstrip .k-activity-chart { width: 100%; }

/* Que se esta haciendo ahora mismo en esa fase. Va junto al nombre porque es
   lo que se busca al abrir el proyecto: no solo cual toca, sino en que anda. */
.k-ahora { font-size: var(--k-t-sm); color: var(--fg-soft); margin-left: var(--k-gap-sm); }
.k-ahora a { color: var(--fg); }
.k-ahora a:hover { color: var(--primary); }

/* La cifra arriba y su rotulo debajo. En linea, cada dato ocupaba el ancho del
   numero mas el de la palabra; apilados ocupan el del mas largo de los dos, y
   ese ancho se lo lleva la grafica. De altura sobra, porque la marca el dibujo. */
.k-statstrip .k-stat { flex-direction: column; align-items: flex-start;
                       gap: var(--k-gap-xs); padding: 0.15rem 0.7rem; }
.k-statstrip .k-stat + .k-stat::before { height: 2.4rem; }
.k-statstrip .k-stat-lbl { white-space: nowrap; }

/* Un recuadro que empieza bloque nuevo: mas aire por arriba que el resto. */
.k-bloque-arriba { margin-top: calc(var(--k-pad) * 1.6); }

/* Insignia de lo descartado. Sigue la forma de las de `base.css`, que vienen de
   ops y no se editan a mano; esta es nuestra y por eso vive aqui. */
.status-descartada {
  --chip-accent: var(--k-descartada);
  background: var(--k-descartada-tinte);
  color: var(--k-descartada);
}

/* Una fila de tarea descartada se lee, pero no compite con lo que si toca. */
.k-row-descartada .k-row-title a { color: var(--k-descartada); }
.k-row-descartada .k-row-title { text-decoration: line-through; }

/* Las listas de la ayuda: se leen seguidas, no como filas de una tabla. */
.k-lista-ayuda { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--k-gap-sm); }
.k-lista-ayuda li { line-height: 1.55; }