/* ═══════════════════════════════════════════════════════════════
   THEMIS · Consejo — shell de chat central.
   Toda receta sale de docs/diseno/TINTA-LINEA-OFICIAL.html; el selector
   de origen va anotado al lado. Los tokens los pone tinta-product.css:
   acá no se declara ni un hex.
   ═══════════════════════════════════════════════════════════════ */

.cs-shell {
  --cs-side: 268px;
  --cs-panel: 300px;
  --cs-rail: 52px;              /* riel de iconos, paridad con JVC */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font: 400 13.5px/1.55 var(--sans);   /* escala: interfaz 13.5 */
}
.cs-shell.side-off { --cs-side: var(--cs-rail); }
.cs-shell.panel-off { --cs-panel: var(--cs-rail); }
.cs-shell *, .cs-shell *::before, .cs-shell *::after { box-sizing: border-box; }

.cs-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.cs-skip { position: absolute; left: -9999px; }
.cs-skip:focus { left: 12px; top: 12px; z-index: 20; background: var(--paper-2); padding: 8px 12px; border: 1px solid var(--line-dark); border-radius: 4px; }
.cs-shell :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── cabecera ─────────────────────────────────────────────── */
.cs-head {
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px; height: 52px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.cs-brand { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.cs-brand strong { font: 500 17px/1 var(--serif); }            /* escala: H3 */
.cs-brand span { color: var(--gray); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-head-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.cs-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid transparent; border-radius: 4px;
  background: none; color: var(--muted); cursor: pointer;
}
.cs-icon:hover { background: var(--paper-3); }                  /* .btn.ghost:hover */
.cs-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* galería tinta-iconos.js: una sola receta de trazo para todo el Consejo */
.ti {
  flex: 0 0 auto; width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* .badge del canónico: punto de 7px + texto, sin cápsula */
.cs-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.cs-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--gray); }
.cs-badge.ok i { background: var(--success); }
.cs-badge.no i { background: var(--danger); }

/* ── cuerpo de tres columnas ──────────────────────────────── */
.cs-body {
  display: grid;
  grid-template-columns: var(--cs-side) minmax(0, 1fr) var(--cs-panel);
  min-height: 0;
}

.cs-side, .cs-panel { min-height: 0; overflow: hidden auto; background: var(--paper-2); }
.cs-side { border-right: 1px solid var(--line); }
.cs-panel { border-left: 1px solid var(--line); }
.cs-side-full, .cs-panel-full { padding: 14px 12px 20px; }
.side-off .cs-side-full, .panel-off .cs-panel-full { display: none; }
.cs-rail { display: none; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; }
.side-off .cs-side .cs-rail, .panel-off .cs-panel .cs-rail { display: flex; }

/* kicker: mono 10.5 uppercase tracking .12em */
.cs-k {
  font: 400 10.5px/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--gray);
  padding: 0 8px 8px;
}
.cs-k-sep { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }

.cs-group > button, .cs-area, .cs-matter {
  display: block; width: 100%; text-align: left;
  /* el ícono acompaña al nombre; el estado lo sigue diciendo el relleno */
  padding: 7px 9px; border: 1px solid transparent; border-radius: 4px;
  background: none; color: var(--ink); font: 400 13.5px/1.35 var(--sans); cursor: pointer;
}
.cs-group > button:hover, .cs-area:hover, .cs-matter:hover { background: var(--paper-3); }
/* selección por RELLENO — nunca borde, sombra ni barra de acento */
.cs-area[aria-current="page"], .cs-matter[aria-current="true"], .cs-group.on > button { background: var(--paper-3); }
.cs-group > button { display: flex; align-items: center; gap: 9px; }
.cs-group > button .t { flex: 1 1 auto; min-width: 0; }
.cs-group > button::after {
  content: "+"; color: var(--gray); font-size: 11px; line-height: 1;
}
.cs-group.on > button::after { content: "−"; }
.cs-areas { display: none; padding: 2px 0 6px 10px; }
.cs-group.on .cs-areas { display: block; }
.cs-area { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); }  /* escala: secundario */
.cs-area .ti { width: 16px; height: 16px; color: var(--gray); }
.cs-area:hover .ti, .cs-area[aria-current="page"] .ti { color: var(--muted); }
.cs-group > button .ti { color: var(--muted); }
.cs-matter { display: grid; gap: 2px; }
.cs-matter .n { font: 400 13px/1.3 var(--sans); color: var(--ink); }
.cs-matter .x { font: 400 10.5px/1 var(--mono); letter-spacing: .1em; color: var(--gray); } /* folio */
.cs-empty { padding: 10px 9px; color: var(--gray); font-size: 12.5px; }

/* tema: tres estados a la vista, el elegido marcado por relleno */
.cs-tema { display: flex; gap: 4px; padding: 0 4px; }
.cs-tema button {
  flex: 1 1 0; min-width: 0; min-height: 34px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 2px; border: 1px solid transparent; border-radius: 4px;
  background: none; color: var(--gray); cursor: pointer;
}
.cs-tema button .t { font: 400 10.5px/1 var(--sans); letter-spacing: .01em; }
.cs-tema button:hover { background: var(--paper-3); color: var(--muted); }
.cs-tema button[aria-pressed="true"] { background: var(--paper-3); color: var(--ink); }

.cs-rail button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 4px;
  background: none; color: var(--gray); cursor: pointer;
}
.cs-rail-sep { width: 20px; height: 1px; margin: 4px 0; background: var(--line-dark); }
.cs-rail button:hover { background: var(--paper-3); color: var(--ink); }
.cs-rail button[aria-current="true"] { background: var(--paper-3); color: var(--ink); }

/* ── centro: actos, conversación, compositor ──────────────── */
/* Columna flexible, no grid de filas fijas: con la barra de actos oculta
   (display:none) el grid se salta la celda y todo corría una fila. */
.cs-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* barra de actos: sólo con expediente abierto */
.cs-acts { flex: 0 0 auto; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.cs-acts-row, .cs-tabs-row { display: flex; gap: 2px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
.cs-acts-row::-webkit-scrollbar, .cs-tabs-row::-webkit-scrollbar { display: none; }
.cs-tabs-row { border-top: 1px solid var(--line); padding-block: 6px; }
/* .surface-tabs button: serif 15px peso 400, inactivo gris */
.cs-act {
  display: inline-flex; align-items: baseline; gap: 7px; flex: 0 0 auto;
  padding: 9px 13px; border: none; border-radius: 4px 4px 0 0;
  background: none; color: var(--gray); font: 400 15px/1.2 var(--serif); cursor: pointer;
}
.cs-act:hover { color: var(--ink); }
.cs-act[aria-selected="true"] { background: var(--paper-3); color: var(--ink); }
.cs-act .no { font: 400 10.5px/1 var(--mono); letter-spacing: .12em; color: var(--gray); }
.cs-tab {
  flex: 0 0 auto; padding: 5px 11px; border: none; border-radius: 4px;
  background: none; color: var(--muted); font: 400 12.5px/1.3 var(--sans); cursor: pointer;
}
.cs-tab:hover { background: var(--paper-3); }
.cs-tab[aria-selected="true"] { background: var(--paper-3); color: var(--ink); }

.cs-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 22px 20px 8px; display: flex; flex-direction: column; gap: 18px; }
.cs-turn { max-width: 74ch; width: 100%; margin: 0 auto; }
/* Un mini-app de seccion no es prosa: no se rige por la columna de lectura de
   74ch ni por el 92% de .cs-a. Ocupa el hilo completo, que es lo que se pidio. */
.cs-turn.ancho { max-width: 100%; }
.cs-turn.ancho > .cs-a { max-width: 100%; }
/* .msg-q del canónico */
.cs-q {
  max-width: 78%; margin-left: auto; width: fit-content;
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 6px 6px 2px 6px;
  background: var(--paper-3); font-size: 13px;
}
.cs-a { max-width: 92%; color: var(--muted); font-size: 13.5px; }
.cs-who { font: 400 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gray); margin-bottom: 5px; }
.cs-a p { margin: 0 0 9px; font: 400 14px/1.6 var(--serif); color: var(--ink); }  /* .msg-a p */
.cs-cites {
  margin-top: 9px; padding-top: 8px; border-top: 1px dotted var(--line-dark);
  display: flex; flex-direction: column; gap: 3px;
  font: 400 11px/1.4 var(--mono); color: var(--gray);
}
.cs-err { color: var(--danger); font-size: 12.5px; }

/* estado inicial: documento, no dashboard */
.cs-hero { max-width: 62ch; margin: 6vh auto 0; }
.cs-hero h1 { margin: 8px 0 6px; font: 500 28px/1.15 var(--serif); }   /* escala: H1, uno por pantalla */
.cs-hero p { margin: 0; max-width: 65ch; color: var(--muted); font-size: 15px; }  /* lede */

/* ── la sección dentro del hilo ────────────────────────────────
   Estructura tomada de la maqueta de hilos (cabecera + filas + acciones),
   vestida con los tokens de Tinta: papel, línea de 1px y la misma escala
   tipográfica del resto. Ni tonos de color ni sombras: acá no se declara hex. */
.cs-card {
  display: grid; gap: 14px;
  padding: 16px 18px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.cs-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cs-card-kicker {
  font: 400 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gray);
}
.cs-card h2 { margin: 6px 0 0; font: 500 19px/1.2 var(--serif); color: var(--ink); }  /* escala: H2 */
.cs-card-icon { flex: 0 0 auto; color: var(--muted); }
.cs-card-icon .ti { width: 20px; height: 20px; }
.cs-card-summary { margin: 0; max-width: 62ch; color: var(--muted); font-size: 13px; line-height: 1.55; }

.cs-card-rows { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.cs-card-row {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; width: 100%; text-align: left;
  background: var(--paper); border: 0; cursor: pointer;
  font: 400 13px/1.35 var(--sans); color: var(--ink);
  min-width: 0; overflow: hidden;   /* sin esto el resumen se sale de la tarjeta */
}
.cs-card-row:hover { background: var(--paper-3); }
.cs-card-row .ti { flex: 0 0 auto; width: 15px; height: 15px; color: var(--muted); }
.cs-card-row strong { flex: 0 0 auto; font-weight: 500; }
.cs-card-row small { flex: 1 1 auto; min-width: 0; color: var(--gray); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cs-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-card-action {
  padding: 7px 13px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-dark); border-radius: 4px;
  font: 400 12.5px/1 var(--sans); text-decoration: none; cursor: pointer;
}
.cs-card-action:hover { background: var(--paper-3); }
.cs-card-action.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cs-card-action.primary:hover { opacity: .88; }
.cs-card-note { margin: 0; color: var(--gray); font-size: 11.5px; }
.cs-card-note strong { font-weight: 500; color: var(--muted); }

/* Acceso dentro del hilo: mismos campos y acciones Tinta, sin modal ni salto de dominio. */
.cs-access-form { display: grid; gap: 11px; max-width: 34rem; }
.cs-access-form label { display: grid; gap: 5px; color: var(--muted); font: 400 12px/1.3 var(--sans); }
.cs-access-form input {
  width: 100%; min-width: 0; padding: 9px 11px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-dark); border-radius: 4px;
  font: 400 13.5px/1.3 var(--sans);
}
.cs-access-form input:focus { outline: 0; background: var(--paper-3); }
.cs-access-form .cs-card-actions { margin-top: 2px; }
.cs-access-error { margin: 0; color: var(--danger); font: 400 12.5px/1.45 var(--sans); }
.cs-card-action:disabled { opacity: .58; cursor: default; }

/* El progreso del turno, en el hilo y no solo en el panel. */
.cs-card-pasos { display: grid; gap: 2px; margin: 2px 0 0 -8px; }

/* ficha de artefacto: folio en el margen, como el timeline foliado */
.cs-art { margin-top: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-2); box-shadow: var(--shadow); }
.cs-art-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.cs-art-h h4 { margin: 0; font: 500 14px/1.2 var(--serif); }
.cs-folio {                                                        /* .folio-no span */
  font: 400 10px/1 var(--mono); letter-spacing: .12em; color: var(--muted);
  border: 1px solid var(--line-dark); border-radius: 3px; padding: 3px 7px; background: var(--paper-2);
}
.cs-art-b { padding: 10px 14px; color: var(--muted); font-size: 12.5px; }

/* compositor */
.cs-composer { flex: 0 0 auto; padding: 10px 20px 16px; }
.cs-composer-box {
  max-width: 74ch; margin: 0 auto;
  border: 1px solid var(--line); border-radius: 6px; background: var(--paper-2); box-shadow: var(--shadow);
}
.cs-composer textarea {
  display: block; width: 100%; max-height: 40vh; resize: none;
  padding: 11px 14px 6px; border: 0; border-radius: 6px 6px 0 0;
  background: none; color: var(--ink); font: 400 13.5px/1.5 var(--sans);
}
.cs-composer textarea:focus { outline: none; }
.cs-select:disabled { color: var(--gray); background: var(--paper-3); }
.cs-composer textarea::placeholder { color: var(--gray); }
.cs-composer-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px 10px; }
.cs-select {
  min-height: 30px; padding: 4px 9px; border: 1px solid var(--line-dark); border-radius: 4px;
  background: var(--paper-2); color: var(--ink); font: 400 12.5px var(--sans);
}
.cs-hint { flex: 1 1 12ch; min-width: 0; color: var(--gray); font-size: 11.5px; }
/* .btn del canónico: 12.5px peso 400, padding 6px 14px */
.cs-btn {
  min-height: 40px; padding: 6px 14px;
  border: 1px solid var(--line-dark); border-radius: 4px;
  background: var(--paper-2); color: var(--ink); font: 400 12.5px var(--sans);
  box-shadow: var(--shadow); cursor: pointer;
}
.cs-btn:hover { border-color: var(--gray); background: var(--paper-3); }
.cs-btn.primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.cs-btn.sm { min-height: 32px; padding: 4px 11px; font-size: 12px; }
.cs-btn:disabled { opacity: .45; cursor: default; }
.cs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
/* el botón de la derecha muta: micrófono cuando no hay texto, enviar cuando sí */
.cs-btn.cs-solo-icono { width: 40px; padding: 0; }
.cs-btn.grabando { position: relative; }
.cs-btn.grabando::after {
  content: ""; position: absolute; top: 6px; right: 6px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--danger);
  animation: cs-latido 1.6s ease-in-out infinite;
}
@keyframes cs-latido { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
/* voz en vivo: mismo peso que el resto, encendida se marca por relleno */
#cs-voz { width: 40px; padding: 0; color: var(--muted); }
#cs-voz.viva { background: var(--paper-3); border-color: var(--gray); color: var(--ink); }

/* ── panel de la tarea ────────────────────────────────────── */
.cs-sec + .cs-sec { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.cs-sec h3 { margin: 0 0 8px; padding: 0 8px; font: 500 17px/1.2 var(--serif); }
.cs-step { display: flex; gap: 8px; padding: 5px 8px; font-size: 12.5px; color: var(--muted); }
.cs-step > span:first-of-type { flex: 1 1 auto; min-width: 0; }
.cs-step .cs-folio { flex: 0 0 auto; align-self: flex-start; }
.cs-step i { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--gray); }
.cs-step.done i { background: var(--success); }
.cs-step.now i { background: var(--warning); }
.cs-opt { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 4px; font-size: 12.5px; cursor: pointer; }
.cs-opt:hover { background: var(--paper-3); }
.cs-opt input { margin-top: 3px; accent-color: var(--ink); }
.cs-panel-full .cs-btn { width: 100%; margin-top: 10px; }

.cs-scrim { display: none; }

/* ── móvil: los costados son cajones sobre la conversación ── */
@media (max-width: 900px) {
  .cs-shell { --cs-side: 0px; --cs-panel: 0px; }
  .cs-body { grid-template-columns: minmax(0, 1fr); }
  /* Las columnas de escritorio siguen siendo hijos del grid: en una sola columna
     el navegador las auto-colocaba antes del chat y lo desplazaba 68px a la
     derecha aun estando transformadas fuera de pantalla. En móvil se sacan del
     flujo por completo; los cajones ya son fixed. */
  .cs-main { grid-column: 1; grid-row: 1; width: 100%; overflow: hidden; }
  .cs-side, .cs-panel {
    position: fixed; z-index: 12; top: 52px; bottom: 0; width: min(86vw, 300px);
    border: 0; box-shadow: var(--shadow);
    transition: transform .18s ease;
  }
  .cs-side { left: 0; border-right: 1px solid var(--line); transform: translateX(-101%); }
  .cs-panel { right: 0; border-left: 1px solid var(--line); transform: translateX(101%); }
  .cs-shell:not(.side-off) .cs-side, .cs-shell:not(.panel-off) .cs-panel { transform: none; }
  .cs-side-full, .cs-panel-full { display: block; }
  .cs-rail { display: none !important; }
  .cs-scrim {
    display: block; position: fixed; z-index: 11; inset: 52px 0 0; border: 0;
    background: rgba(19, 20, 22, .28);
  }
  /* Sin esto el velo tapado sigue comiéndose los toques: display:block le gana a [hidden]. */
  .cs-scrim[hidden] { display: none; }
  .cs-log { padding: 16px 14px 4px; }
  .cs-composer { padding: 8px 12px 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .cs-hero { margin-top: 3vh; }
  .cs-hero h1 { font-size: 21px; }        /* H2 de la escala: el H1 de 28 no cabe en 390 */
  .cs-hero p { font-size: 13.5px; }
  /* En 390 el correo empujaba el botón del panel fuera de su propio botón:
     el punto de estado ya dice lo mismo sin robar ancho. */
  .cs-badge span { display: none; }
  .cs-head { gap: 8px; padding: 0 8px; }
  /* Con los costados cerrados, lo único que ubica es el expediente: la marca cede. */
  .cs-brand strong { display: none; }
  .cs-brand span { font-size: 13.5px; color: var(--ink); }
  .cs-icon, .cs-rail button { width: 44px; height: 44px; }   /* objetivo táctil */
  .cs-btn { min-height: 44px; }
  .cs-btn.cs-solo-icono, #cs-voz { width: 44px; }
  .cs-tema button { min-height: 44px; }
  .cs-select { min-height: 40px; }
  .cs-q { max-width: 88%; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-side, .cs-panel { transition: none; }
  .cs-btn.grabando::after { animation: none; }
}

/* ── el mini-app de la sección, dentro del turno del Consejo ──
   No es una tarjeta de resumen: es la sección trabajando en el hilo. Vive
   colgada del turno hablado, con su misma sangría. */
.cs-app {
  display: grid; gap: 12px;
  margin-top: 10px; padding: 14px 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.cs-app-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cs-app-head h2 { margin: 6px 0 0; font: 500 21px/1.2 var(--serif); color: var(--ink); }  /* escala: H2 */

/* las cifras de la sección: el número manda, la etiqueta acompaña */
.cs-app-cifras { display: flex; flex-wrap: wrap; gap: 22px; }
.cs-fig { display: grid; gap: 3px; }
.cs-fig b { font: 400 21px/1 var(--serif); color: var(--ink); }
.cs-fig span { font: 400 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gray); }

/* el buscador de la sección: una línea, sin caja propia */
.cs-app-buscar { display: flex; gap: 8px; }
.cs-app-buscar input {
  flex: 1 1 auto; min-width: 0;
  padding: 8px 11px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-dark); border-radius: 4px;
  font: 400 13px/1.3 var(--sans);
}
.cs-app-buscar input:focus { outline: 0; background: var(--paper-3); }
.cs-app-buscar button {
  flex: 0 0 auto; padding: 7px 13px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-dark); border-radius: 4px;
  font: 400 12.5px/1 var(--sans); cursor: pointer;
}
.cs-app-buscar button:hover { background: var(--paper-3); }
.cs-app-buscar button:disabled { color: var(--gray); cursor: default; }

/* las filas de datos: título, detalle y marca a la derecha */
.cs-app-rows { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.cs-app-row {
  display: flex; align-items: baseline; gap: 10px;
  width: 100%; padding: 10px 12px; text-align: left;
  background: var(--paper); border: 0; cursor: pointer;
  font: 400 13px/1.4 var(--sans); color: var(--ink);
  min-width: 0; overflow: hidden;
}
.cs-app-row:hover { background: var(--paper-3); }
.cs-app-row.estatico { cursor: default; }
.cs-app-row.estatico:hover { background: var(--paper); }
.cs-app-row strong { flex: 0 1 auto; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-app-row span { flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-app-row small { flex: 0 0 auto; color: var(--gray); font: 400 11.5px/1 var(--mono); }

.cs-app-res { display: grid; gap: 7px; }
.cs-app-res-k { font: 400 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gray); }
.cs-app-nota { margin: 0; max-width: 62ch; color: var(--muted); font-size: 13px; line-height: 1.55; }
.cs-app-pasos { display: grid; gap: 2px; margin-left: -8px; }