/* ═══════════════════════════════════════════════════════════════
   KATALYST · Mesa de trabajo

   TIENE QUE VERSE IDÉNTICA al portal del cliente: es el mismo producto, no un
   primo. Los valores de abajo NO se eligen, se COPIAN de dbch-dashboard.css.
   Si algo se ve distinto, el que está mal es este archivo.

   El día de la unificación (PLAN.md hito 9) los dos archivos se funden y estos
   tokens quedan declarados una sola vez.

   Todo va bajo #kcore-root con `all:initial`, igual que #dbch-root, para que el
   tema activo no se meta.

   ── ESCALA DE BREAKPOINTS (15 sep 2026, decisión de David) ──
   La MISMA en la Mesa, el portal (dbch-dashboard.css, dbch-admin.css) y las
   hojas compartidas (kcore-vitrina.css, kcore-ficha.css). Ningún corte fuera
   de estos cuatro:

     max-width: 1180px   laptop chica
     max-width: 1024px   tablet  (y su pareja min-width: 1025px)
     max-width:  900px   APP     (la navegación cambia aquí: menú inferior)
     max-width:  480px   móvil chico

   ⚠️ EL CORTE DE LA APP SUBIÓ DE 768 A 900 (David, 16 sep 2026). El iPad en
   vertical mide 810 u 834, así que con el corte en 768 caía en tierra de nadie:
   sin menú inferior, pero con el sidebar de 230px dejándole al contenido ~490px
   — pestañas cortadas sin aviso, nombres con puntos suspensivos y, en el
   portal, el botón «Revisar» fuera de la pantalla. A 900 el iPad vertical
   estrena el layout de app; el iPad horizontal y los de 1024 siguen siendo
   escritorio, que es lo que él pidió.

   Ancho mínimo que tiene que verse bien: 360px. Prioridad: escritorio,
   móvil, tablet. Si algo no cabe en la escala, la discusión es la escala,
   no un corte suelto. Antes había once distintos (600, 640, 700, 760, 900,
   960, 1100…) y cada módulo cambiaba de forma a un ancho diferente.
   ═══════════════════════════════════════════════════════════════ */

/* MISMA fuente y MISMA línea que dbch-dashboard.css.
   Sin esto la Mesa cae a la tipografía del sistema en silencio y se ve de otro
   producto, que fue exactamente lo que pasó en la primera versión. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

#kcore-root {
  all: initial;
  display: flex;
  width: 100%;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;

  /* REGLA: la página no scrollea nunca. El alto lo fija el viewport y el scroll
     vive dentro del contenedor que lo necesite. Igual que #dbch-root.

     ⚠️ `dvh` y no `vh`, con `vh` de respaldo para navegadores viejos. En el
     iPad, `100vh` es el viewport GRANDE —el de las barras escondidas—, así que
     la Mesa medía más que la pantalla y se cortaba por arriba y por abajo: el
     logo del sidebar a medias y la última fila del contenido fuera. Lo reportó
     David con una captura del iPad en horizontal (16 sep 2026). */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;

  --lime: #CBF904;  --lime-hover: #BEEB00;  --ink: #1A1A1A;  --accent: #7A9800;
  --surface: #FFFFFF;  --surface-3: #F4F4F2;  --border: #ECECE8;
  --text-1: #0D1117;  --text-2: #6B7280;  --text-3: #9CA3AF;
  --green: #3AA377;  --red: #EF4444;  --amber: #F59E0B;  --purple: #8B5CF6;
  --tint: #F6FAE3;  --tint-2: #F1F7D6;
  --accent-dim: rgba(203,249,4,.16);   /* relleno del chip seleccionado, como el portal */
  --r-sm: 8px;  --r-md: 10px;  --r: 12px;  --r-lg: 16px;

  /*
   * ═══ LA ESCALA TIPOGRÁFICA (David, 31 ago 2026) ═══
   *
   * Medido antes de decidirla: **31 tamaños distintos en 381 declaraciones**, y
   * 290 de ellas agolpadas entre 10.5px y 13.5px — siete escalones dentro de
   * 3px. Eso no es jerarquía, es ruido: nadie distingue 12 de 12.5, pero cada
   * uno obliga a decidir. Y lo mismo arriba: el título de una pantalla o de una
   * ficha estaba escrito a 20, 21, 22, 23, 26, 27 y 29px.
   *
   * Ocho escalones, razón ~1.25 de --lg para arriba. **Todo tamaño nuevo sale
   * de aquí**; si algo no cabe en la escala, la discusión es la escala, no una
   * excepción suelta.
   *
   * ⚠️ MIGRACIÓN POR PARTES, a propósito. Hoy solo se aplicó a los TÍTULOS
   * (decisión de David): siete tamaños pasaron a tres. El grupo de 10.5–13.5 se
   * migra en otra pasada, porque el §3.b documenta que varias de esas medidas
   * se copiaron del portal a propósito (inputs 13.5, botón chico 11.5) y
   * moverlas sin mirar volvería a partir la Mesa del portal.
   *
   * ⚠️ Y el PORTAL todavía no la tiene: son 188 declaraciones y 24 tamaños en
   * `dbch-dashboard.css`, y es el plugin que factura. Va en su propio lote.
   */
  --fs-micro:   10.5px;  /* versalita de cabecera de tabla, chips             */
  --fs-sm:      12px;    /* metadatos, ayudas, pies                          */
  --fs-base:    13.5px;  /* texto de interfaz: filas, campos, párrafos       */
  --fs-md:      16px;    /* nombre destacado, título de tarjeta              */
  --fs-lg:      19px;    /* título de panel, cajón, hoja o chat              */
  --fs-xl:      24px;    /* encabezado de la SECCIÓN (hace de contexto)      */
  /* ⚠️ EL TÍTULO DE LA FICHA BAJÓ DE 30 A 19px, y por eso ya no se llama
     `--fs-2xl`: a 19 no es el escalón más grande de nada, y un nombre que dijera
     lo contrario haría que el próximo que lo lea lo suba por coherencia.

     Los 30 eran *"bastante grande"* (David, 4 sep 2026) y le quitaban aire a una
     cabecera que ya iba justa. Se probó primero el 50% que pidió —15px— y visto
     en el portal lo descartó él mismo: *"veo el título ya muy pequeño"*. A 15
     quedaba por debajo de `--fs-md` y a dos puntos del valor de las
     propiedades, así que la ficha se quedaba sin nada que hiciera de título.

     Se probó después en 19 —el valor de `--fs-lg`, *«título de panel, cajón,
     hoja o chat»*— y también se quedó corto viéndolo. **Queda en 24**, que es
     `--fs-xl`, el del encabezado de sección: no es un número escogido a ojo
     entre 19 y 30, es el siguiente escalón que el sistema ya tenía. No se
     escribe `var(--fs-xl)` para dejarlo suelto de la escala: si un día el
     encabezado de sección se mueve, el título de la ficha no tiene por qué irse
     detrás.

     ⚠️ A 24 el título SE RECORTA en casi todo el escritorio, y es a sabiendas.
     Medido: «Fenología de plátano para DVA» —un título corriente, ni corto ni
     largo— pide 370px a este tamaño, y el bloque mide 296 debajo de 1600 (su
     techo, ver más abajo) y 336 a 1700. Solo entra entero de ~1900 para arriba.
     A 19 cabía en todas las anchuras; a 24 se lee más grande y se lee menos
     título, y esa contrapartida es la que se eligió a ojo, viéndolo. El título
     completo sigue estando al tocarlo para editar.

     Es un token propio, y no un número repetido, porque lo comparten dos reglas
     —el h2 y el input con que se edita— y si se separan, al tocar el título el
     texto salta y la cabecera baila. */
  --fs-ficha:   24px;    /* título de la FICHA: lo que estás mirando         */
  --fs-display: 40px;    /* los números grandes de las KPI                   */

  /*
   * ⚠️ ESTOS CUATRO SE ESTABAN USANDO SIN DECLARAR, y por eso la ficha de
   * Clientes y el editor del brief no se veían como se habían escrito.
   *
   * Un `var()` sin declarar y sin respaldo no cae al valor de antes: hace que
   * la propiedad entera sea inválida en tiempo de cálculo, así que
   * `border: 1px solid var(--line)` no pinta NINGÚN borde y
   * `color: var(--text-0)` hereda. No hay error en consola y no se ve leyendo
   * el CSS: se ve comparando lo escrito con lo pintado.
   *
   * Lo que se veía en la tabla de solicitantes eran las líneas que pone ASTRA
   * en todo `<table>`, no las nuestras: la nuestra nunca llegó a aplicar y la
   * suya se quedó sin nada que la pisara. De ahí el «ese estilo no lo
   * manejamos» de David.
   *
   * `--line` es la línea INTERNA (más suave que `--border`, que es el contorno
   * de una tarjeta) y `--text-0` es el negro de los títulos.
   */
  --line: #F0F0ED;  --surface-2: #FAFAF8;  --text-0: #0D1117;
  /* Ancho del sidebar y margen de la tarjeta clara. La ficha se posiciona con
     ESTOS valores, no con números sueltos: si se tocan por separado la ventana
     deja de calzar con el área del dashboard y se nota al instante. */
  --kc-side-w: 230px;
  --kc-gap: 14px;
  /* Nombres y valores EXACTOS del portal. En la primera versión los tenía
     corridos: lo que aquí era --sh allá era --sh-sm, y las sombras no coincidían. */
  --sh-sm: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
  --sh: 0 4px 16px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);

  color: var(--text-1);
  background: var(--ink);
}
#kcore-root *, #kcore-root *::before, #kcore-root *::after { box-sizing: border-box; }

/* El tema deja su propio margen/scroll en el body: se apagan en esta página. */
body.kcore-mesa-page { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #1A1A1A !important; }

.kcore-gate { padding: 60px 20px; text-align: center; color: #6B7280; font-size: 14px; }

/* ── SIDEBAR ── */
#kcore-root .kc-side { width: var(--kc-side-w); flex: none; background: var(--ink); color: #fff;
  padding: 22px 14px; display: flex; flex-direction: column; gap: 22px;
  height: 100vh; height: 100dvh; }
/* El logo es el MISMO archivo que usa el portal (k-cos.png), con el mismo ancho.
   La caja lima con una "K" de la primera versión era invención mía. */
#kcore-root .kc-logo { margin-bottom: 2px; padding: 6px 2px 0; display: flex; justify-content: center; }
#kcore-root .kc-logo img { width: 112px; height: auto; display: block; }
#kcore-root .kc-side-lbl { font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #7A7A75; padding: 0 10px; margin-bottom: 7px; }
#kcore-root .kc-nav { display: flex; flex-direction: column; gap: 2px; }
/* Medidas de .dbch-nav-item: 9px 11px, radio 6, 13px, gap 10 */
#kcore-root .kc-nav button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 6px; cursor: pointer; color: rgba(255,255,255,.45); font-size: 13px;
  font-weight: 500; transition: background .16s, color .16s; }
#kcore-root .kc-nav button:hover { background: #262626; color: #fff; }
#kcore-root .kc-nav button:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; }
#kcore-root .kc-nav button.on { background: var(--lime); color: var(--ink); font-weight: 600; }
#kcore-root .kc-ic { width: 17px; height: 17px; flex: none; opacity: .8; display: block; }
#kcore-root .kc-nav button.on .kc-ic { opacity: 1; }
#kcore-root .kc-badge { margin-left: auto; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px;
  background: var(--amber); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
#kcore-root .kc-nav button.on .kc-badge { background: var(--ink); color: var(--lime); }
#kcore-root .kc-side-foot { margin-top: auto; display: flex; align-items: center; gap: 10px;
  padding: 11px; background: #242424; border-radius: 12px; }
#kcore-root .kc-av { width: 32px; height: 32px; border-radius: 50%; background: var(--lime); color: var(--ink);
  display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
#kcore-root .kc-side-foot b { font-size: 13px; display: block; color: #fff; font-weight: 600; }
#kcore-root .kc-side-foot small { font-size: 11px; color: #8A8A85; }

/* ── TARJETA CLARA ── */
#kcore-root .kc-card { flex: 1; background: var(--surface-3); border-radius: 22px;
  margin: var(--kc-gap) var(--kc-gap) var(--kc-gap) 0;
  overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
#kcore-root .kc-pane { display: none; flex-direction: column; min-height: 0; flex: 1; }
#kcore-root .kc-pane.on { display: flex; animation: kc-fi .3s cubic-bezier(.16,1,.3,1); }
@keyframes kc-fi { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#kcore-root .kc-head { padding: 24px 30px 17px; background: var(--surface); border-bottom: 1px solid var(--border); flex: none; }
#kcore-root .kc-head h1 { margin: 0; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--text-1); }
#kcore-root .kc-head p { margin: 5px 0 0; color: var(--text-2); font-size: 13.5px; }
#kcore-root .kc-body { padding: 20px 30px 28px; overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; }
#kcore-root .kc-body.kc-flush { padding: 0; display: flex; overflow: hidden; }

#kcore-root .kc-soon { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  padding: 34px; text-align: center; color: var(--text-2); font-size: 13.5px; }
#kcore-root .kc-soon strong { display: block; color: var(--text-1); margin-bottom: 5px; font-size: 15px; }

/* ── BOTONES ──
   Medidas copiadas del portal: .dbch-btn-cancel usa 11px 16px para los botones
   de modal, y .dbch-revisar-btn usa 6px 14px / 11.5px / radio 8 para los de
   acción dentro de listas. El lima lleva su glow, igual que .dbch-btn-approve. */
#kcore-root .kc-b { all: unset; box-sizing: border-box; cursor: pointer; padding: 11px 16px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform .12s, background .16s, box-shadow .16s; white-space: nowrap; font-family: inherit; }
#kcore-root .kc-b:active { transform: scale(.95); }
#kcore-root .kc-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#kcore-root .kc-b[disabled] { opacity: .5; cursor: default; }
#kcore-root .kc-b-lime { background: var(--lime); color: var(--ink); box-shadow: 0 1px 10px rgba(203,249,4,.4); }
#kcore-root .kc-b-lime:hover { background: var(--lime-hover); transform: translateY(-1px); }
#kcore-root .kc-b-ghost { background: #F7F8FA; color: var(--text-2); border: 1px solid var(--border); }
#kcore-root .kc-b-ghost:hover { background: #EFF1F5; color: var(--accent); border-color: var(--accent); }
#kcore-root .kc-b-red { background: #FDE5E3; color: #C0392B; }
#kcore-root .kc-b-red:hover { background: #FBD5D2; }
#kcore-root .kc-b-sm { padding: 6px 14px; font-size: 11.5px; border-radius: 8px; }
#kcore-root .kc-b-sm.kc-b-lime { box-shadow: none; }

/* ── MAESTRO-DETALLE ── */
#kcore-root .kc-md { display: flex; flex: 1; min-height: 0; }
#kcore-root .kc-md-list { width: 330px; flex: none; background: var(--surface);
  border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
/* La Bandeja tiene TRES pestañas desde el DM (24 ago 2026) y las tres tienen
   que caber sin scroll oculto: un riel que scrollea sin ninguna pista visual
   deja "DM" invisible por defecto, que es peor que el desborde que arregló el
   `overflow-x:auto` de `.kc-tabs` de arriba (esa regla queda como red de
   seguridad para cuando el ancho SÍ se acorta, ver la media query de abajo).
   Solo en desktop: por debajo de 1024px el ancho ya está apretado por diseño y
   el scroll interno es el comportamiento correcto, igual que en el resto del
   producto. */
@media (min-width: 1025px) {
  #kcore-root #kc-p-bandeja .kc-md-list { width: 380px; }
}
/* ══ TABS · ESTÁNDAR DE LA PLATAFORMA ══
   Copia exacta de .dbch-tabs / .dbch-tab del portal (Overview del cliente).
   TODO selector de pestañas de KATALYST usa este diseño, sin excepción: riel
   gris redondeado, pestaña activa en pastilla BLANCA con sombra suave, las
   demás en texto gris. Nunca pastilla oscura ni acento lima.  */
#kcore-root .kc-tabs-wrap { padding: 12px 14px; border-bottom: 1px solid var(--border); flex: none;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* ── La barra de la Bandeja (BD v17, 4 ago 2026) ──
   "Marcar leídas" y "Limpiadas". Van como enlaces y no como botones a propósito:
   son utilidades de la lista, no acciones sobre el trabajo, y con la forma de
   `.kc-b` competirían con Aceptar/Rechazar por el mismo peso visual. */
#kcore-root .kc-inbox-acts { margin-left: auto; display: flex; align-items: center; gap: 12px; }
#kcore-root .kc-inbox-act { all: unset; box-sizing: border-box; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-3);
  white-space: nowrap; transition: color .14s; }
#kcore-root .kc-inbox-act:hover { color: var(--text-1); text-decoration: underline; }
#kcore-root .kc-inbox-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
#kcore-root .kc-tabs { display: inline-flex; gap: 4px; background: var(--surface-3);
  border-radius: 22px; padding: 4px; max-width: 100%;
  /* El riel scrollea cuando no cabe, en vez de empujar el contenedor. Sin esto,
     una tercera pestaña (DM, 24 ago 2026) lo sacaba de los 330px de
     `.kc-md-list` y se veía encima del panel de detalle: el mismo defecto que
     `.kc-cv-ptabs` ya resolvió para la barra de publicaciones de la vitrina.
     `min-width:0` es lo que deja que un flex item se encoja por debajo de su
     contenido — sin eso, `overflow-x` no tiene nada que recortar. */
  min-width: 0; flex-shrink: 1; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none; }
#kcore-root .kc-tabs::-webkit-scrollbar { display: none; }
#kcore-root .kc-tab { all: unset; box-sizing: border-box; cursor: pointer; position: relative;
  background: transparent; color: #8A8A85; font-size: 12.5px; font-weight: 500; font-family: inherit;
  padding: 8px 16px; border-radius: 18px; transition: all .15s ease; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px; }
#kcore-root .kc-tab:hover { color: #0D1117; }
#kcore-root .kc-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#kcore-root .kc-tab.on { background: #FFFFFF; color: #0D1117; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
/* El contador va neutro en los dos estados: la pastilla blanca ya comunica cuál
   está activa, y meterle lima ahí le pelea a esa señal. */
#kcore-root .kc-tc { background: #E9E9E3; color: #6B7280; border-radius: 20px; padding: 1px 8px;
  font-size: 10.5px; font-weight: 700; }
#kcore-root .kc-tab.on .kc-tc { background: #EFF1F5; color: var(--text-1); }
#kcore-root .kc-md-scroll { overflow-y: auto; overflow-x: hidden; flex: 1; }
/* Cabecera fija con las acciones + cuerpo con scroll propio. El título y los
   botones no se pueden ir de pantalla al leer un brief largo, que es justo
   cuando hay que decidir. */
#kcore-root .kc-md-detail { flex: 1; min-width: 0; display: flex; flex-direction: column;
  overflow: hidden; background: var(--surface-3); }
#kcore-root .kc-dt-head { flex: none; padding: 22px 30px 16px; background: var(--surface);
  border-bottom: 1px solid var(--border); }
#kcore-root .kc-dt-head h2 { margin: 0; font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.2; color: var(--text-1); }
#kcore-root .kc-dt-row { display: flex; align-items: center; gap: 10px; margin-top: 13px; flex-wrap: wrap; }
#kcore-root .kc-dt-name { font-size: 13.5px; font-weight: 700; color: var(--text-1); }
#kcore-root .kc-dt-sent { font-size: 12.5px; color: var(--text-2); }
#kcore-root .kc-dt-acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
#kcore-root .kc-dt-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }

/* Tarjetas sueltas, no filas pegadas (diseño de David, 22 jul 2026). Cuestan
   más alto que una fila, así que se ven menos solicitudes de un vistazo; es el
   costo aceptado a cambio de que cada una se lea como una unidad. */
#kcore-root .kc-md-scroll { padding: 10px; }
#kcore-root .kc-it { background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--sh-sm); padding: 13px 14px; margin-bottom: 10px;
  cursor: pointer; transition: border-color .14s, background .14s; }
#kcore-root .kc-it:last-child { margin-bottom: 0; }
#kcore-root .kc-it:hover { border-color: #DCDCD6; }
#kcore-root .kc-it.on { background: var(--tint); border-color: var(--lime); }
/* ── SIN LEER (BD v17) ──────────────────────────────────────────────────────
   Punto lima a la izquierda y título en negrita, el lenguaje de cualquier
   cliente de correo.

   ⚠️ Deliberadamente NO se usa fondo de color: `.kc-it.on` (la fila abierta) ya
   lo lleva, y con dos fondos compitiendo deja de verse cuál está seleccionada,
   que es la información más útil de la lista.

   El punto se dibuja con `::before` sobre el contenedor y no con un elemento
   nuevo: así el JS puede quitar la marca con `classList.remove('kc-unread')` al
   abrir la fila, sin tocar el HTML de dentro. */
#kcore-root .kc-it.kc-unread { position: relative; }
#kcore-root .kc-it.kc-unread::before { content: ''; position: absolute; left: 5px; top: 18px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
#kcore-root .kc-it.kc-unread .kc-ti { font-weight: 700; }
#kcore-root .kc-it-top { display: flex; align-items: flex-start; gap: 10px; }
#kcore-root .kc-it-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#kcore-root .kc-it-id .kc-who { font-size: 13px; font-weight: 700; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kcore-root .kc-it-id .kc-ti { font-size: 12.5px; color: var(--text-1); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kcore-root .kc-it .kc-pv { font-size: 12px; color: var(--text-3); line-height: 1.45; margin-top: 8px;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#kcore-root .kc-it-foot { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 9px; }
#kcore-root .kc-it-foot .kc-ago { font-size: 11.5px; color: var(--text-3); white-space: nowrap;
  margin-left: auto; }
/* Chip de área: es DE DÓNDE viene el pedido, que es lo que ordena el triage. */
#kcore-root .kc-c-dept { background: #DCEAFE; color: #2563EB; font-size: 9.5px;
  letter-spacing: .05em; text-transform: uppercase; font-weight: 700; flex: none; }

/* ── DETALLE ──
   El ancho máximo es de LECTURA (el brief es texto corrido y a 1400px sería
   ilegible), pero 820px dejaba media pantalla muerta y se veía cortado.
   980px mantiene la línea legible sin que el panel parezca vacío. */
#kcore-root .kc-dt { padding: 26px 32px 34px; max-width: 980px; }
#kcore-root .kc-dt-h { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
#kcore-root .kc-dt-h h2 { margin: 0; font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.2; color: var(--text-1); }
#kcore-root .kc-dt-who { display: flex; align-items: center; gap: 9px; margin-top: 11px; font-size: 13px; color: var(--text-2); }
#kcore-root .kc-dt-who b { color: var(--text-1); }
#kcore-root .kc-dt-acts { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
#kcore-root .kc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 11px; margin: 20px 0; }
#kcore-root .kc-fact { background: var(--surface); border-radius: 11px; padding: 11px 13px; box-shadow: var(--sh-sm); min-width: 0; }
#kcore-root .kc-fact .kc-fl { font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-3); font-weight: 700; }
#kcore-root .kc-fact .kc-fv { font-size: 13.5px; font-weight: 600; margin-top: 4px; }
#kcore-root .kc-brief { background: var(--surface); border-radius: var(--r-lg); padding: 20px 23px; box-shadow: var(--sh-sm); }
#kcore-root .kc-brief h3 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-3); font-weight: 700; }
#kcore-root .kc-brief p { margin: 0 0 18px; font-size: 13.5px; line-height: 1.6; color: var(--text-1);
  max-width: 68ch; white-space: pre-wrap; }
#kcore-root .kc-brief p:last-child { margin-bottom: 0; }

/* ══ CHAT · ESTÁNDAR DE LA PLATAFORMA ══
   Mismo lenguaje que el hilo por pieza del portal (.dbch-th-*): burbujas al 82%
   como máximo, con la esquina de la cola cuadrada, el equipo a la derecha en
   verde-lima claro y el solicitante a la izquierda en gris. Nada de tarjetas
   blancas a lo ancho, que era lo que se veía roto.

   El chat OCUPA TODO el alto del panel: mensajes scrollean y el compositor
   queda fijo abajo, a lo ancho. Es lo que lo hace sentir un chat y no un
   formulario con historial encima. */
#kcore-root .kc-md-detail.kc-chatmode { display: flex; flex-direction: column; overflow: hidden; }
#kcore-root .kc-chat-head { padding: 22px 32px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface); flex: none; }
#kcore-root .kc-chat-head h2 { margin: 0; font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.02em; color: var(--text-1); }
#kcore-root .kc-chat-head .kc-dt-who { margin-top: 8px; }
/* Fondo casi blanco, como .dbch-thread-msgs del portal (#FBFCFD). NO se puede
   dejar el gris del panel: la burbuja ajena es #F1F3F5 y sobre #F4F4F2 queda
   prácticamente invisible. El contenedor es parte del componente, no decorado. */
#kcore-root .kc-chat-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 22px 32px; display: flex; flex-direction: column; gap: 12px; background: #FBFCFD; }

#kcore-root .kc-msg { max-width: 82%; display: flex; flex-direction: column; }
#kcore-root .kc-msg.kc-mine { align-self: flex-end; align-items: flex-end; }
#kcore-root .kc-msg.kc-theirs { align-self: flex-start; align-items: flex-start; }
/* ⚠️ `pre-wrap` SOLO cuando el cuerpo NO viene formateado (9 sep 2026). Desde
   que `KcoreTexto.formatea()` pinta párrafos y títulos, los saltos ya son `<br>`
   y `<p>`: con pre-wrap además, cada mensaje saldría con el doble de aire. Se
   mantiene para el cuerpo suelto —el que no trae ninguna marca no genera
   bloques— donde sin él todo saldría en un renglón. */
#kcore-root .kc-bub { display: inline-block; text-align: left; padding: 9px 13px; font-size: 13px;
  line-height: 1.5; word-break: break-word; }
#kcore-root .kc-bub:not(:has(.kc-fmt-p)):not(:has(.kc-fmt-h)) { white-space: pre-wrap; }
#kcore-root .kc-mine .kc-bub { background: #EFF8CE; color: #46530A; border-radius: 12px 12px 3px 12px; }
#kcore-root .kc-theirs .kc-bub { background: #F1F3F5; color: #0D1117; border-radius: 12px 12px 12px 3px; }
#kcore-root .kc-bw { font-size: 11px; color: var(--text-2); font-weight: 600; margin: 0 4px 3px; }
#kcore-root .kc-bt { font-size: 10.5px; color: var(--text-3); margin: 3px 4px 0; }
/* Mensajes seguidos del mismo autor: se agrupan y no repiten el nombre. */
#kcore-root .kc-msg.kc-cont { margin-top: -6px; }
#kcore-root .kc-msg.kc-cont .kc-bw { display: none; }

/* ── DM: la firma sobre la burbuja lleva FOTO (BD v39, 23 ago 2026) ──
   Pedido de David: *"se debe ver el nombre y la foto del usuario que responde o
   habla, tanto para el equipo como para el cliente"*. El hilo es del
   departamento y cada mensaje es de una persona; sin la cara, una conversación
   donde escriben tres se lee como si hablara la empresa.

   Hereda de `.kc-bw` (tamaño, color, peso) y solo añade la fila: así el nombre
   se ve idéntico en los dos chats de esta sección. */
#kcore-root .kc-bw-av { display: flex; align-items: center; gap: 6px; }
#kcore-root .kc-msg.kc-mine .kc-bw-av { flex-direction: row-reverse; }
#kcore-root .kc-bw-a { width: 20px; height: 20px; font-size: 8.5px; flex: none; }

/* El compositor apagado por plan. Ocupa el sitio del real para que el chat no
   cambie de forma, y DICE por qué en vez de desaparecer sin explicación. */
#kcore-root .kc-chat-off { justify-content: center; color: var(--text-3);
  font-size: 12.5px; }

/* `wrap` para que la barra de formato se lleve su propio renglón encima del
   campo: es un hijo más de esta fila y se manda arriba sola (ver `.kc-fmt-bar`
   en `kcore-texto.css`). Sin `wrap` se metería entre el campo y el botón. */
#kcore-root .kc-chat-bar { flex: none; padding: 14px 32px 18px; border-top: 1px solid var(--border);
  background: var(--surface); display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
/* El alto lo pone el JS (autoAlto) en cada tecla; aquí van el PISO y el TECHO.
   El techo subió de 120px a 168px (ajuste de David, 18 ago 2026): con 120 el
   campo dejaba de crecer a los cinco renglones, que es justo donde empieza a
   hacer falta. Pasado el techo el campo scrollea, que es lo correcto: un
   compositor que crece sin límite se come la conversación que se está
   respondiendo. `overflow-y` explícito porque el alto inline lo supera. */
/* ⚠️ CADA REGLA DEL COMPOSITOR NOMBRA LAS DOS FORMAS DEL CAMPO (9 sep 2026).
   Con `KcoreTexto.editor()` es un `div` editable —el que enseña la negrita en
   vez de los asteriscos— y sin él sigue siendo el `<textarea>` de siempre. Una
   regla que solo diga `textarea` deja el campo SIN borde, SIN relleno y sin
   `flex`, o sea invisible dentro de la fila: pasó al construirlo. */
#kcore-root .kc-chat-bar textarea,
#kcore-root .kc-chat-bar .kc-fmt-ed { flex: 1; min-width: 0; border: 1px solid #E5E7EB; border-radius: 10px;
  padding: 9px 12px; font-size: 13px; font-family: inherit; resize: none; color: var(--text-1);
  background: #fff; min-height: 38px; max-height: 168px; overflow-y: auto; line-height: 1.5; }
#kcore-root .kc-chat-bar textarea:focus,
#kcore-root .kc-chat-bar .kc-fmt-ed:focus { border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px rgba(203,249,4,.12); }
/* Botón circular lima, igual que #dbch-thread-send del portal. */
#kcore-root .kc-send { all: unset; box-sizing: border-box; width: 38px; height: 38px; flex: none;
  background: var(--lime); border-radius: 50%; color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  transition: transform .12s, background .16s; }
#kcore-root .kc-send:hover { background: var(--lime-hover); }
#kcore-root .kc-send:active { transform: scale(.93); }
#kcore-root .kc-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#kcore-root .kc-send[disabled] { opacity: .5; cursor: default; }
/* Astra colapsa los SVG de botones icon-only si no se declara explícito. */
#kcore-root .kc-send svg { width: 17px; height: 17px; display: block; flex-shrink: 0; fill: none; stroke: currentColor; }

/* ── CHIPS ── */
#kcore-root .kc-chip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
#kcore-root .kc-c-new { background: var(--tint-2); color: #5D7300; }
#kcore-root .kc-c-area { background: #EFF1F5; color: #5A6472; }
#kcore-root .kc-c-warn { background: #FDF0DA; color: #B45309; }
/* «Te mencionó» en la Bandeja. Morado y no lima: en la misma lista conviven la
   pregunta de un cliente y la mención de un compañero, y el lima ya es el color
   de lo resuelto («Respondido»). */
#kcore-root .kc-c-men { background: #EDE9FE; color: #5B21B6; }
#kcore-root .kc-c-blk { background: #FDE5E3; color: #C0392B; }
#kcore-root .kc-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* Avatar por defecto (decisión de David, 22 jul 2026): círculo negro con las
   iniciales en lima, el mismo lenguaje que .kc-av del pie del sidebar pero
   invertido. Cuando la persona tiene foto de perfil se muestra la foto. */
#kcore-root .kc-pav { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: var(--lime); flex: none; background: var(--ink);
  overflow: hidden; }
#kcore-root .kc-pav.kc-xs { width: 19px; height: 19px; font-size: 8.5px; }
#kcore-root .kc-pav-img { background: var(--surface-3); }
#kcore-root .kc-pav-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

#kcore-root .kc-empty { padding: 44px 24px; text-align: center; color: var(--text-3); font-size: 13px; }

/* ══ TABLERO ══ */
#kcore-root .kc-head-row { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
#kcore-root .kc-head-row .kc-monthnav { margin-left: auto; display: flex; align-items: center; gap: 9px; }
/* La acción principal del encabezado va pegada al borde DERECHO (mockups de
   David), no junto al título: sin esto queda flotando a media cabecera. */
#kcore-root .kc-head-row > .kc-b { margin-left: auto; }
/* Con DOS o más acciones, el auto lo lleva el grupo. Repartido botón por botón,
   el espacio libre se divide entre ellos y el primero queda flotando en el
   centro de la cabecera, que es lo que pasó al agregar la Papelera. */
#kcore-root .kc-head-acts { margin-left: auto; display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap; }
/* ── El grupo derecho de CUALQUIER cabecera ──────────────────────────────────
   Lo que la sección tenga (navegador de mes, riel de rangos, botón de crear) y,
   SIEMPRE al final, la identidad + campana (4 ago 2026).

   ⚠️ Es un envoltorio y no elementos sueltos, por la misma razón que existe
   `.kc-head-acts`: si dos hermanos directos llevaran `margin-left:auto` el
   espacio libre se reparte entre los dos y el primero queda flotando a media
   cabecera. Ese fallo ya ocurrió con la Papelera y está documentado.

   Los `margin-left:auto` de `.kc-monthnav` y `.kc-head-acts` siguen aplicando
   por descendencia, pero aquí adentro NO sobra espacio (el grupo se dimensiona
   a su contenido), así que resuelven a 0 y no hace falta anularlos. */
#kcore-root .kc-head-right { margin-left: auto; display: flex; align-items: center;
  gap: 16px; flex-wrap: wrap; }
#kcore-root .kc-mlabel { font-size: 13.5px; font-weight: 700; min-width: 128px; text-align: center; }

#kcore-root .kc-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
#kcore-root .kc-search { position: relative; flex: 1; max-width: 290px; min-width: 168px; }
#kcore-root .kc-search input { width: 100%; padding: 9px 12px 9px 34px; border: 1px solid #E5E7EB;
  border-radius: 10px; font-family: inherit; font-size: 13px; background: var(--surface); color: var(--text-1); }
#kcore-root .kc-search input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(203,249,4,.12); }
#kcore-root .kc-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--text-3); }

/* minmax(0,1fr) y no 1fr suelto: las tarjetas llevan texto que no envuelve y un
   1fr sin clamp ensancha las columnas hasta reventar la fila. */
#kcore-root .kc-board { display: grid; grid-template-columns: repeat(5, minmax(206px, 1fr));
  gap: 13px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
#kcore-root .kc-col-h { display: flex; align-items: center; gap: 8px; padding: 0 2px 11px; }
/* Pills TINTADOS (diseño de David, mockup Vista-Tablero): fondo claro de la etapa
   + texto de color en mayúsculas. Reemplaza a los sólidos con texto blanco. */
#kcore-root .kc-pill { font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .04em; }
#kcore-root .kc-pl-exec { background: #EDE9FB; color: #6D46D9; }
#kcore-root .kc-pl-int  { background: #E1F4EC; color: #1F8F63; }
#kcore-root .kc-pl-adj  { background: #FBEFD6; color: #B47913; }
#kcore-root .kc-pl-cli  { background: #FAE7D2; color: #C0790F; }
#kcore-root .kc-pl-blk  { background: #FBE3E1; color: #D0392C; }
#kcore-root .kc-pl-apr  { background: #E1F4EC; color: #1F8F63; }
/* Pendientes en gris neutro: la única columna que todavía no es trabajo. */
#kcore-root .kc-pl-pend { background: #EEF0F2; color: #6B7280; }
/* Dos tonos más para que las sub-etapas que cree un equipo tengan de dónde
   elegir (BD v29). Mismo PAR que los de arriba —fondo tintado y texto del mismo
   color oscurecido— y no un hex suelto: el contraste de la píldora está medido,
   y dejar elegir un color libre es como se acaba con texto ilegible sobre su
   propio fondo. Ver KCORE_Stages::TONOS. */
#kcore-root .kc-pl-azul { background: #E2ECFB; color: #2563C9; }
#kcore-root .kc-pl-rosa { background: #FAE4EF; color: #C2418C; }
#kcore-root .kc-col-h .kc-cnt { font-size: 12px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* Encabezado de columna en la vista por persona: avatar + nombre, no una pill
   de color, que ahí no significaría nada. */
#kcore-root .kc-colname { font-size: 13px; font-weight: 700; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kcore-root .kc-col-h .kc-pav { width: 24px; height: 24px; font-size: 9.5px; }
/* Qué le toca a esa persona en esta pieza */
#kcore-root .kc-mystep { display: flex; align-items: center; gap: 7px; margin-top: 9px; min-width: 0; }
#kcore-root .kc-pill.kc-mini { font-size: 10px; padding: 3px 9px; flex: none; }
#kcore-root .kc-mytxt { font-size: 11.5px; color: var(--text-2); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

#kcore-root .kc-tk { all: unset; box-sizing: border-box; display: block; width: 100%; text-align: left;
  background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-sm); padding: 12px 13px;
  margin-bottom: 10px; cursor: pointer; font-family: inherit;
  transition: transform .16s cubic-bezier(.16,1,.3,1), box-shadow .16s; }
#kcore-root .kc-tk:hover { transform: translateY(-2px); box-shadow: var(--sh); }
#kcore-root .kc-tk:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#kcore-root .kc-tk.kc-warn { background: #FFFBF3; }
/* Fila de arriba: el área a la izquierda, el atraso a la derecha.
   El área se encoge con puntos suspensivos y el badge NO (flex:none): un
   departamento largo puede recortarse, pero "Venció hace 12d" partido en dos
   renglones es exactamente lo que se estaba arreglando. */
#kcore-root .kc-tk .kc-tk-h { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 5px; }
#kcore-root .kc-tk .kc-who-t { font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-3);
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Más pequeño que la fecha de abajo a propósito: es una alarma, no un dato que
   se lea. El color rojo ya hace el trabajo y el tamaño evita que le gane el
   primer golpe de vista al nombre de la pieza. */
#kcore-root .kc-tk .kc-lateb { flex: none; font-size: 9.5px; font-weight: 700;
  letter-spacing: .01em; color: #C0392B; background: #FDE5E3; border-radius: 6px;
  padding: 2px 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
#kcore-root .kc-tk .kc-tt { font-weight: 600; font-size: 13px; line-height: 1.35; color: var(--text-1); }
#kcore-root .kc-tk .kc-ty { font-size: 11px; color: var(--text-3); margin-top: 2px; }
/* ── El reloj de la revisión del cliente (4 ago 2026) ──────────────────────
   Solo aparece mientras la pieza está en «Revisión del cliente». Arranca NEUTRO
   a propósito: los primeros días no hay nada que señalar, solo algo que
   informar, y un chip de alarma sobre una pieza que se envió ayer entrena al
   equipo a ignorarlo. Ámbar desde el día 3, rojo desde el 7.

   ⚠️ El nombre se buscó antes de escribirlo (§5.c.3): ya existían `.kc-rev-…`
   en ninguna parte y `.kc-tk .kc-ty*` es una familia entera de Plantillas
   (`kc-tyit`, `kc-tyic`, `kc-tyname`…), así que este NO podía llamarse
   `.kc-tyclock`. Es `.kc-revclock`. */
#kcore-root .kc-tk .kc-revclock { display: inline-flex; align-items: center; gap: 5px;
  margin-top: 7px; font-size: 10.5px; font-weight: 600; border-radius: 6px;
  padding: 3px 7px; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--text-2); background: var(--surface-3); }
#kcore-root .kc-tk .kc-revclock svg { width: 12px; height: 12px; display: block; flex: none; }
#kcore-root .kc-tk .kc-revclock.kc-rev-medio { color: #8A5A00; background: #FDF0D5; }
#kcore-root .kc-tk .kc-revclock.kc-rev-alto  { color: #C0392B; background: #FDE5E3; }
#kcore-root .kc-tk .kc-ft { display: flex; align-items: center; gap: 8px; margin-top: 11px; flex-wrap: nowrap; }
/* Responsable principal · línea sutil · quiénes más están metidos por los pasos.
   Comunica de un vistazo que la pieza ya tiene varias manos adentro.

   Las caras se MONTAN unas sobre otras con anillo blanco (pedido de David,
   imagen B): con 4 avatares + barra de pasos + fecha en el mismo renglón el
   grupo empujaba la fecha fuera de la caja y "17 jul" se partía en dos. Al
   solaparlas el grupo ocupa la mitad y la fecha vuelve a caber. La fecha y la
   barra van `flex:none` y la fecha `nowrap`: si algo tiene que ceder, cede el
   grupo de caras (que se recorta), nunca la fecha. */
#kcore-root .kc-tk .kc-asgs { display: flex; align-items: center; gap: 0; flex: 0 1 auto; min-width: 0; }
#kcore-root .kc-tk .kc-sep { width: 1px; height: 16px; background: var(--border); margin: 0 4px 0 7px; flex: none; }
#kcore-root .kc-tk .kc-asgs .kc-pav { width: 21px; height: 21px; font-size: 8.5px;
  margin-left: -6px; box-shadow: 0 0 0 2px #fff; position: relative; }
#kcore-root .kc-tk .kc-asgs .kc-pav:first-child,
#kcore-root .kc-tk .kc-sep + .kc-pav { margin-left: 0; }
#kcore-root .kc-tk .kc-plus { font-size: 10px; font-weight: 700; color: var(--text-3);
  background: var(--surface-3); border-radius: 50%; width: 21px; height: 21px;
  display: grid; place-items: center; flex: none;
  margin-left: -6px; box-shadow: 0 0 0 2px #fff; position: relative; }
#kcore-root .kc-tk .kc-dt2 { font-size: 11.5px; color: var(--text-2); margin-left: auto;
  font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
#kcore-root .kc-tk .kc-dt2.kc-late { color: var(--red); font-weight: 700; }
#kcore-root .kc-steps { display: flex; align-items: center; gap: 6px; font-size: 11.5px;
  color: var(--text-2); font-weight: 600; white-space: nowrap; flex: none; }
#kcore-root .kc-sbar { width: 46px; height: 5px; background: #EAEAE4; border-radius: 3px; overflow: hidden; }
#kcore-root .kc-sbar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
/* Estado vacío por columna (diseño de David, mockup Vista-Tablero): caja de
   borde punteado en el color de la etapa, con icono, título y una línea. */
#kcore-root .kc-col-empty { min-height: 340px; border: 1.5px dashed #DCDCD6; border-radius: 16px;
  background: var(--surface); display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 26px 18px; gap: 3px; }
#kcore-root .kc-ce-ic { width: 34px; height: 34px; margin-bottom: 9px; color: #C7C9CE; }
#kcore-root .kc-ce-ic svg { width: 100%; height: 100%; display: block; }
#kcore-root .kc-ce-t { font-size: 13.5px; font-weight: 700; color: var(--text-1); }
#kcore-root .kc-ce-s { font-size: 12px; color: var(--text-3); line-height: 1.5; max-width: 200px; }
/* Tinte, borde e icono por etapa, igual que la pill de su columna. */
#kcore-root .kc-ce-exec { border-color: #D8CEF5; background: #FBFAFF; } #kcore-root .kc-ce-exec .kc-ce-ic { color: #B9A9EE; }
#kcore-root .kc-ce-int  { border-color: #C9E9D9; background: #F6FCF9; } #kcore-root .kc-ce-int  .kc-ce-ic { color: #8FCBB0; }
#kcore-root .kc-ce-adj  { border-color: #F1DFB4; background: #FEFBF4; } #kcore-root .kc-ce-adj  .kc-ce-ic { color: #E0BE7E; }
#kcore-root .kc-ce-cli  { border-color: #F0D9B8; background: #FEFAF3; } #kcore-root .kc-ce-cli  .kc-ce-ic { color: #E0B37E; }
#kcore-root .kc-ce-blk  { border-color: #F3CFCB; background: #FEF6F5; } #kcore-root .kc-ce-blk  .kc-ce-ic { color: #E7A9A2; }
#kcore-root .kc-ce-apr  { border-color: #C9E9D9; background: #F6FCF9; } #kcore-root .kc-ce-apr  .kc-ce-ic { color: #8FCBB0; }
#kcore-root .kc-ce-pend { border-color: #DCDEE2; background: #FAFBFC; } #kcore-root .kc-ce-pend .kc-ce-ic { color: #C7C9CE; }

/* ══ CALENDARIO ══ */
/* El calendario LLENA el alto disponible: la sección no scrollea y las filas del
   grid se reparten lo que queda. Mismo fix que el portal necesitó en v4.22.2;
   sin el minmax(0,1fr) en las filas, la grilla mide lo que mida su contenido y
   queda cortada arriba con espacio muerto abajo. */
#kcore-root #kc-p-cal .kc-body { overflow: hidden; display: flex; flex-direction: column; }
#kcore-root .kc-cal-wrap { display: grid; grid-template-columns: minmax(0,1fr) 322px; gap: 14px;
  align-items: stretch; flex: 1; min-height: 0; }
#kcore-root .kc-cal-col { display: flex; flex-direction: column; min-height: 0; }
#kcore-root .kc-cal { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  padding: 14px; flex: 1; min-height: 0; display: flex; flex-direction: column; }
#kcore-root .kc-dow { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 5px;
  margin-bottom: 6px; flex: none; }
#kcore-root .kc-dow span { text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3); }
#kcore-root .kc-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr));
  grid-auto-rows: minmax(0, 1fr); gap: 5px; flex: 1; min-height: 0; }
#kcore-root .kc-cell { all: unset; box-sizing: border-box; cursor: pointer; min-height: 0; overflow: hidden; border-radius: 10px;
  padding: 7px; background: var(--surface-3); display: flex; flex-direction: column; gap: 4px;
  transition: background .14s; font-family: inherit; }
/* Valores COPIADOS de .dbch-cal-* del portal. El día seleccionado es tinte lima
   con borde y halo, NUNCA fondo tinta: en negro se ve como un hueco. Y "hoy" es
   blanco con borde oliva, no un círculo lima relleno. */
#kcore-root .kc-cell:hover { background: var(--tint); }
#kcore-root .kc-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#kcore-root .kc-cell.kc-out { background: transparent; cursor: default; }
#kcore-root .kc-cell.kc-today { background: #fff; border: 1.5px solid var(--accent); }
#kcore-root .kc-cell.kc-sel { background: #F7FBE4; border: 1.5px solid var(--lime);
  box-shadow: 0 0 0 3px rgba(203,249,4,.2); }
#kcore-root .kc-cn { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-3); }
#kcore-root .kc-cell.kc-today .kc-cn { color: var(--accent); font-weight: 700; }
#kcore-root .kc-cell.kc-sel .kc-cn { color: var(--text-1); font-weight: 700; }
#kcore-root .kc-ec { display: block; font-size: 11px; padding: 2px 5px; border-radius: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
#kcore-root .kc-e-work   { background: #EEEDFE; color: #3C3489; }
#kcore-root .kc-e-review { background: #FEF5E7; color: #854F0B; }
#kcore-root .kc-e-done   { background: #EAF7F1; color: #0F6E56; }
#kcore-root .kc-e-wish   { background: #fff; border: 1px dashed #C4CBD4; color: var(--text-3); }
#kcore-root .kc-more { font-size: 11px; color: var(--accent); font-weight: 600; padding: 0 5px; }
#kcore-root .kc-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 13px; padding: 0 3px; flex: none; }
#kcore-root .kc-lg { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-2); }
#kcore-root .kc-lg i { width: 9px; height: 9px; border-radius: 3px; display: block; }

#kcore-root .kc-dayp { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  overflow-y: auto; overflow-x: hidden; min-height: 0; }
#kcore-root .kc-dayp-h { padding: 15px 18px 13px; border-bottom: 1px solid var(--border); }
#kcore-root .kc-dayp-h .kc-dd { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
#kcore-root .kc-dayp-h .kc-ds { font-size: 12px; color: var(--text-3); margin-top: 2px; }
#kcore-root .kc-dev { padding: 12px 18px; }
#kcore-root .kc-dev + .kc-dev { border-top: 1px solid #F5F5F2; }
#kcore-root .kc-dev .kc-dn2 { font-weight: 600; font-size: 13.5px; }
#kcore-root .kc-dev .kc-dm { font-size: 11.5px; color: var(--text-3); margin-top: 3px;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
#kcore-root .kc-dev-acts { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }

/* ══ FICHA ══
   Ventana que ocupa el ÁREA DEL DASHBOARD, no un cajón lateral: como cajón se
   sentía apretado sin importar el ancho (decisión de David). Se posiciona sobre
   la tarjeta clara —respetando el sidebar y su mismo margen y radio— así que se
   lee como si la tarjeta se transformara en la ficha.

   Sin deslizamiento: a este tamaño, deslizar se siente pesado. */
#kcore-root #kc-dov { z-index: 100000; }
#kcore-root .kc-drawer { position: fixed; top: var(--kc-gap); right: var(--kc-gap);
  bottom: var(--kc-gap); left: var(--kc-side-w);
  background: var(--surface); border-radius: 22px; display: flex; flex-direction: column;
  z-index: 100001; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.28);
  animation: kc-fade .2s ease; }
/* Solo opacidad, sin scale. Un scale interrumpido a mitad de camino deja la
   ventana desalineada del área del dashboard, y a este tamaño no aportaba nada. */
@keyframes kc-fade { from { opacity: 0; } to { opacity: 1; } }
#kcore-root .kc-dr-head { background: var(--surface); padding: 22px 30px 16px;
  border-bottom: 1px solid var(--border); flex: none; }
/* ══════════ LA CABECERA, DOS FILAS FIJAS ══════════
 *
 * (Diseño de David, 4 sep 2026, después de rechazar dos intentos míos. Ver la
 * nota del marcado en `class-kcore-shortcode.php`, que explica la forma; aquí
 * está por qué se sostiene sola en cualquier anchura.)
 *
 *   fila 1 · `.kc-dr-ttl` (ruta + título)  ·······  `.kc-dr-acts` (estado, papelera, ×)
 *   fila 2 · `.kc-dr-mid` (las cinco propiedades + la prioridad)
 *
 * ⚠️ NO HAY UNA SOLA MEDIA QUERY QUE TOQUE ESTA ESTRUCTURA, y es el punto. Las
 * dos versiones anteriores cambiaban de forma según el ancho —una partía la
 * franja en 4+1, la otra bajaba la tarjeta al estrecharse— y las dos se vieron
 * mal en un portátil de 13". *"Que ese diseño sea fijo en cualquier tamaño de
 * pantalla de laptop"*. Lo único que se mueve es el AIRE entre propiedades.
 *
 * ═══ POR QUÉ AHORA SÍ CABE ═══
 *
 * La cuenta que hundía a las anteriores: cinco propiedades (611px) + prioridad
 * (86) + papelera (28) + × (32) + título (296) + huecos, todo en una fila, pide
 * ~1550px de ventana. Un 13" da 1440.
 *
 * Al subir la papelera y la × con el estado, la fila 2 se queda con las cinco
 * propiedades y la prioridad: **731px con los huecos en su mínimo**. A 1181 de
 * ventana —la anchura más estrecha antes de que el cajón cambie de forma por su
 * cuenta— la tarjeta dispone de 877. Sobran 146px, y por eso no hace falta que
 * nada se reacomode.
 *
 * Y la fila 1 nunca fue el problema: el grupo de acciones mide ~250px con el
 * estado más largo, así que al título le quedan 600 y pico hasta en la ventana
 * más estrecha. */
#kcore-root .kc-dr-head { display: flex; flex-direction: column; gap: 14px; }
/* `align-items: flex-start` y no `center`: el bloque de la izquierda son dos
   renglones (ruta y título) y el de la derecha uno solo. Centrados, las acciones
   quedaban a media altura del título, flotando; arriba se alinean con la ruta,
   que es como está dibujado. */
#kcore-root .kc-dr-top { display: flex; align-items: flex-start; gap: 16px; }
/* El título se lleva el hueco libre y RECORTA lo suyo: es el único de la fila
   que puede permitírselo, porque su versión entera sigue estando al tocarlo. */
#kcore-root .kc-dr-ttl { flex: 1 1 auto; min-width: 0; }
/* Las tres acciones, pegadas al borde derecho y sin ceder ancho. */
#kcore-root .kc-dr-acts { flex: none; display: flex; align-items: center; gap: 14px;
  /* Sube 3px para alinear su centro con el renglón de la ruta y no con el hueco
     que queda entre ésta y el título. Medido, no estimado. */
  margin-top: -3px; }
/* La píldora de estado ya no comparte renglón con la ruta, así que recupera su
   tamaño de siempre: aquí no compite con nada. */
#kcore-root .kc-dr-acts .kc-dr-move { flex: none; }
/* ⚠️ El menú de etapas se ALINEA A LA DERECHA aquí. Con `left: 0` (su regla
   base) se abría hacia la derecha desde una píldora que ahora vive pegada a ese
   borde, y con una sub-etapa de nombre largo se salía del cajón. Colgado del
   borde derecho crece hacia dentro, que es donde hay sitio. */
#kcore-root .kc-dr-acts .kc-st-menu { left: auto; right: 0; }
/* El filo entre la papelera y la ×: media separación a cada lado de la fila
   (`gap: 14px`), así que cae justo en medio sin números propios que sincronizar.
   Es lo que hace que una acción destructiva y otra inocua no se lean como dos
   iconos gemelos — la nota es del 2 sep 2026 y sigue valiendo. */
#kcore-root .kc-dr-acts .kc-x { margin-left: 0; position: relative; }
#kcore-root .kc-dr-acts .kc-x::before { content: ''; position: absolute; left: -7px;
  top: 50%; transform: translateY(-50%); width: 1px; height: 22px;
  background: var(--border); }
/* ⚠️ ESTAS REGLAS SE PERDIERON el 4 sep 2026 al borrar el bloque de la cabecera
   vieja, y David lo vio al instante: *"el icono de la caneca de eliminar ya no
   está, ahora solo se ve un cuadrado"*. Sin ellas el `<button>` que pinta el JS
   se queda con la apariencia NATIVA del navegador —caja con borde propio— y el
   SVG, sin medidas, no se ve. La papelera no desapareció: se quedó desnuda.

   Es el mismo error, del revés, que la nota de `.kc-dr-del` ya registra: allí
   sobraron estilos de un marcado borrado, aquí faltaron estilos de un marcado
   que sigue vivo. Al limpiar un bloque hay que mirar QUÉ MÁS vivía dentro.

   UNA sola caja, del tamaño del icono. Y en gris, roja solo al pasar por encima:
   es una acción destructiva, tiene que ser encontrable, no llamativa. En rojo
   fijo sería lo primero que se ve de la ficha. */
#kcore-root .kc-dr-trashw:empty { display: none; }
#kcore-root .kc-dr-trash { all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; color: var(--text-3);
  transition: color .15s, background .15s; }
#kcore-root .kc-dr-trash svg { width: 17px; height: 17px; display: block; }
#kcore-root .kc-dr-trash:hover { color: var(--red); background: rgba(239,68,68,.10); }
#kcore-root .kc-dr-trash:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── LA FILA 2: la tarjeta de propiedades ──
 *
 * Es una TARJETA con borde y fondo, no cinco datos sueltos sobre el blanco de la
 * cabecera (David, 2 sep 2026, contra su propio mockup de aquel día: sin caja
 * *"los cinco datos flotan sueltos y no se leen como un grupo"*). Sigue valiendo
 * con la tarjeta en su propia fila.
 *
 * Ocupa el ancho entero —es hija directa de `.kc-dr-head`, que es columna— y por
 * eso no necesita `flex`, `margin-left: auto` ni `min-width` para colocarse. Todo
 * aquello existía para repartirse una fila con el título; ya no hay reparto.
 *
 * El relleno es 14/20 y no 16/18 como el de la franja de la columna: aquí manda
 * el alto, porque cada píxel de cabecera se lo quita a la pieza en la vitrina. */
#kcore-root .kc-dr-mid { display: flex; align-items: center;
  justify-content: space-between; column-gap: 24px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); padding: 14px 20px; }
/* ⚠️ `display: contents` EN LOS DOS ENVOLTORIOS, y es lo que hace que los SEIS
   elementos se repartan por igual (David, 4 sep 2026: *"los elementos entre sí
   están muy separados… excesivamente… tanto que el entregable está muy pegado al
   tag de prioridad; tienen que verse más parejos"*).
 *
 * La versión anterior repartía el sobrante solo entre las CINCO propiedades y
 * dejaba la prioridad fuera del reparto, pegada al final: salían ~200px entre
 * propiedades y 26 antes de la prioridad. Los huecos eran matemáticamente
 * iguales entre sí, pero el conjunto se leía torcido porque el sexto elemento no
 * jugaba.
 *
 * `display: contents` disuelve las dos cajas intermedias —el hueco que el JS
 * rellena y la franja que pinta dentro— sin tocar el marcado ni el JS: sus hijos
 * pasan a ser hijos directos de la tarjeta, y el `space-between` reparte
 * entonces entre las cinco propiedades Y la prioridad. Un solo hueco para todos.
 *
 * Es el mismo recurso que ya usa el móvil del login para reordenar el panel de
 * marca sin duplicar nada en el DOM.
 *
 * ⚠️ Funciona porque estos dos envoltorios no pintan NADA: sin borde, sin fondo,
 * sin relleno. `display: contents` se los llevaría por delante sin avisar. Si
 * algún día alguno necesita caja propia, esto deja de valer. */
#kcore-root .kc-dr-props,
#kcore-root .kc-dr-props .kc-props { display: contents; }
/* Vacío no ocupa: gana a `contents` por especificidad, que es lo que se quiere. */
#kcore-root .kc-dr-props:empty { display: none; margin: 0; }
#kcore-root .kc-dr-mid .kc-dr-prio { flex: none; display: flex; align-items: center; }

/* ── Las cinco propiedades, dentro de la tarjeta ──
 *
 * ⚠️ UNA FILA, SIN ENVOLVER, EN TODO EL RANGO DE UN PORTÁTIL. Es la mitad del
 * «que sea fijo» que pidió David; la otra mitad es el marcado.
 *
 * ⚠️ Y ES FLEX, NO REJILLA, aunque `kcore-ficha.css` la defina como rejilla de
 * cinco. Se probó con la rejilla y NO cabe, por una razón que solo se ve
 * midiendo: las pistas `fr` reparten en PROPORCIÓN, no según lo que cada
 * columna necesita. A 1366 le daban 153px a una fecha que se conforma con 104 y
 * 145 al solicitante, que necesita 159 — y «DVA DE COLOMBIA» salía cortado
 * teniendo la tarjeta 120px libres. Midiendo cada celda su contenido, los cinco
 * datos suman 611 y a 1181 —la ventana más estrecha antes de que el cajón cambie
 * de forma solo— la tarjeta ofrece 723. Caben con 112px de sobra.
 *
 * La rejilla tenía sentido cuando la franja podía partirse en varias filas,
 * porque alineaba las columnas entre sí. Aquí nunca se parte, así que esa
 * ventaja no existe y solo queda su desperdicio.
 *
 * `space-between` reparte el sobrante ENTRE los cinco en vez de amontonarlo al
 * final: en un monitor grande quedan repartidos a lo ancho de la tarjeta, como
 * en el diseño, y no apelotonados a la izquierda con un vacío enorme antes de la
 * prioridad. El `column-gap` es entonces una separación MÍNIMA, no la real.
 *
 * ⚠️ Y ya no es una tarjeta dentro de otra: el borde, el fondo y el relleno se
 * apagan, porque quien los pone ahora es `.kc-dr-mid`, que la envuelve. */
/* La franja ya no reparte nada —eso lo hace `.kc-dr-mid` desde que estos
   envoltorios son `display: contents`— así que aquí solo queda apagarle la caja
   que trae de `kcore-ficha.css`, donde sí es una tarjeta suelta sobre la
   columna. Sin esto sería una tarjeta dentro de otra. */
#kcore-root .kc-dr-props .kc-props { border: 0; background: none; padding: 0; }
/* Cada celda mide lo suyo y cede solo si hiciera falta, recortando con su
   elipsis. Con `shrink: 0` no cedía nadie y la fila se salía de la tarjeta, que
   es peor que un nombre acortado: un solicitante con razón social larga bastaba.
   El tope de 200px evita que uno solo se coma el sitio de los otros cuatro. */
#kcore-root .kc-dr-props .kc-pc { flex: 0 1 auto; min-width: 0; max-width: 200px; }
/* ⚠️ El valor pide lo SUYO (`max-content`) y no lo que decida su hermano.
   Lleva `overflow:hidden` + elipsis, así que su aportación al ancho natural de
   la celda es CERO y sin esto la celda la acababa midiendo la ETIQUETA: salían a
   51-86px correlacionando con «Empieza» o «Responsable», nunca con el dato.
   El `max-width: 100%` es la red para cuando la celda sí tiene que ceder. */
#kcore-root .kc-dr-props .kc-pc-n { width: max-content; max-width: 100%; }
/* El rótulo, un punto más pequeño que abajo: aquí comparte caja con el título. */
#kcore-root .kc-dr-props .kc-pc-l { font-size: var(--fs-micro, 10.5px); }
/* ⚠️ EL ANCHO DEL HOVER HAY QUE COMPENSARLO. La regla base le da al botón
   `width: 100%` y `margin: -3px -5px`; ese 100% es el de la celda, no el de la
   celda más los márgenes, así que la caja no se ensancha: se DESPLAZA 5px a la
   izquierda y se queda corta por la derecha, justo encima de la última letra.
   `calc(100% + 10px)` devuelve los 5 de cada lado. */
#kcore-root .kc-dr-props .kc-pc-v { width: calc(100% + 10px); }

/* ⚠️ POR DEBAJO DE 1180 —y SOLO ahí— la fila se parte. No contradice el «que sea
   fijo»: 1180 es la anchura a la que el cajón ya cambia de forma por su cuenta
   desde antes de todo esto (la conversación se apila), o sea que ya no es un
   portátil sino una ventana a medio abrir o una tableta. La cuenta tampoco deja
   opción: la tarjeta ofrece 642px y los cinco datos piden 611 más los huecos.

   `flex-start` y no `space-between`: repartido entre dos filas de distinto
   número de celdas, el sobrante deja unas separadísimas y otras juntas. */
@media (max-width: 1180px) {
  /* ⚠️ `flex-start` TAMBIÉN en el eje vertical, y eso lo reportó David desde el
     celular: con `align-items: center` (la regla base, pensada para UNA fila),
     cada propiedad se centra contra la más alta de su fila, así que el rótulo
     de «Empieza» quedaba un peldaño más arriba que los de «Responsable» y
     «Solicitante», que llevan avatar. Alineados arriba, los rótulos de una fila
     arrancan todos en la misma línea. */
  #kcore-root .kc-dr-mid { flex-wrap: wrap; justify-content: flex-start;
    align-items: flex-start; column-gap: 28px; row-gap: 14px; }
}
/* ⚠️ `.kc-dr-kickrow` SE BORRÓ el 4 sep 2026 y su regla con él. Existía para
   sentar la ruta y la píldora de estado en el mismo renglón; con la píldora
   mudada al grupo de acciones no quedaba nadie a quien sentar. Dejar en la hoja
   los estilos de un marcado que ya no existe es exactamente cómo nació el fallo
   del doble sombreado de la papelera (ver `.kc-dr-del`).

   La ruta de la pieza, ahora sola encima del título.
   El gris es `--text-2` y no `--text-3`: a este tamaño y con interletra, el gris
   claro se leía como un elemento desactivado, y es la ruta de la pieza.
   ⚠️ Y vuelve a 11px, los que tenía antes del 2 de septiembre. Bajó a 10 el día
   que empezó a compartir renglón con la píldora, porque a 11 los dos pesos
   competían. Ya no comparte renglón con nadie, así que el motivo se fue con la
   píldora. Recorta con puntos suspensivos por si el nombre del cliente y el tipo
   de solicitud juntos no caben. */
#kcore-root .kc-kick { font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-2); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ⚠️ La píldora lleva TOPE DE ANCHO, y hace falta de verdad: `MOVES` sale de
   `kcoreCfg.moves` cuando la agencia configura sus sub-etapas, así que la
   etiqueta la escribe ella y no tiene techo. Las seis de fábrica llegan como
   mucho a 160px («Con el solicitante»); una escrita a mano puede ser el doble, y
   sin tope empuja el título fuera de la fila.

   El recorte vive en `.kc-st-l`, el envoltorio del texto: un nodo de texto suelto
   dentro de un `inline-flex` no acepta `text-overflow`, así que la etiqueta se
   envuelve en `statusHtml()`. Así el punto de color y el chevron se quedan
   siempre visibles y lo único que se acorta es el nombre. */
#kcore-root .kc-dr-acts .kc-st-btn { max-width: 340px; }
#kcore-root .kc-st-l { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
/* ⚠️ UNA SOLA LÍNEA, con recorte. Antes podía partirse en dos y ahí estaba el
   problema: la cabecera medía distinto según el largo del título, y el alto que
   la vitrina se reserva es un número fijo. Con un título de dos líneas se comía
   34px del presupuesto y la pieza volvía a salirse. Recortado, la cabecera mide
   siempre lo mismo; el título completo sigue estando al tocarlo para editar. */
#kcore-root .kc-dr-head h2 { margin: 4px 0 0; font-size: var(--fs-ficha); font-weight: 700;
  letter-spacing: -.025em; line-height: 1.18; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* El título se corrige al tocarlo, solo el admin (ajuste #2, 16 ago 2026). El
   INPUT tiene que calcar las medidas del h2 —tamaño, peso, interletra, alto de
   línea y margen— o al cambiar de modo el texto salta y la cabecera baila.
   Por eso NO se usa `all: unset`: además de resetear `box-sizing` (trampa 5 del
   CLAUDE.md), se llevaría por delante estas medidas. Se apaga solo lo que
   estorba de un input. */
/* ⚠️ El selector del h2 lleva `.kc-dr-head h2` a propósito, y no basta con
   `.kc-dt-ed`: la regla de arriba es `#kcore-root .kc-dr-head h2` (1,1,1) y le
   GANA por especificidad a `#kcore-root .kc-dt-ed` (1,1,0). Con la versión
   corta, el `margin: 7px 0 0` del h2 se imponía sobre el `margin-left: -5px` y
   solo se desplazaba el input: al pasar a edición el texto SALTABA 5px a la
   izquierda. Lo destapó medir los dos rectángulos, no leer el CSS. Es la sexta
   trampa del §5.c, esta vez del lado de "una regla nueva que no aplica". */
#kcore-root .kc-dr-head h2.kc-dt-ed { cursor: text; border-radius: 6px;
  margin-left: -5px; padding-left: 5px; transition: background .12s ease; }
#kcore-root .kc-dr-head h2.kc-dt-ed:hover { background: var(--surface-3); }
/* El input calca las medidas del h2 para que el intercambio no mueva nada. */
#kcore-root .kc-dr-ttl .kc-dt-title-e { display: block; width: 100%;
  /* ⚠️ 4px arriba, no 7: es el `margin: 4px 0 0` que el h2 tiene HOY. El 7
     era el del h2 de antes y se quedó aquí cuando aquél bajó, así que al
     entrar en edición el título daba un salto de 3px hacia abajo — justo lo
     que la nota de encima dice que no puede pasar. */
  box-sizing: border-box; margin: 4px 0 0 -5px; padding: 0 5px;
  font-family: inherit; font-size: var(--fs-ficha); font-weight: 700;
  letter-spacing: -.025em; line-height: 1.18; color: var(--text-1);
  background: var(--surface-3); border: 0; border-radius: 6px; outline: none; }
#kcore-root .kc-dr-ttl .kc-dt-title-e:focus { box-shadow: 0 0 0 2px var(--accent); }
#kcore-root .kc-x { all: unset; box-sizing: border-box; cursor: pointer; width: 32px; height: 32px;
  border-radius: 9px; display: grid; place-items: center; color: var(--text-3); font-size: 20px;
  line-height: 1; margin-left: auto; transition: background .14s; flex: none; }
#kcore-root .kc-x:hover { background: var(--surface-3); color: var(--text-1); }
#kcore-root .kc-x:focus-visible { outline: 2px solid var(--accent); }
/* ── Estado: un solo botón que abre una mini lista, como ClickUp ──
   Antes se veían los seis estados como etiquetas: ocupaba una franja entera y
   obligaba a leerlos todos para saber en cuál está. */
/* La fila del estado: píldora a la izquierda, ⋮ a la derecha. */
#kcore-root .kc-dr-status { margin-top: 14px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; }
#kcore-root .kc-dr-move { position: relative; }
#kcore-root .kc-dr-mw { flex: none; }
/* Píldora CLARA con punto de color, no un bloque sólido con letra blanca
   (11 ago 2026). Ver el comentario de `statusHtml()` en el JS: el color sólido
   competía con el título, que es lo que hay que leer primero. */
/* ⚠️ MÁS PEQUEÑA desde el 4 sep 2026 (David: *"el tag de «En ejecución» se ve
   más grande de lo que debería"*). De 12.5/7-14 a 11.5/5-11, y el punto de 8 a
   7: la píldora pasa de ~32px de alto a ~27 y de ~130 de ancho a ~112.

   Sus medidas se pusieron cuando vivía sola en una fila propia de la cabecera.
   Desde el 2 de septiembre comparte renglón con el breadcrumb, que va a 10px, y
   ahí las viejas la dejaban pesando más que el nombre del cliente. Sigue siendo
   la más grande de las dos, que es lo que toca —el estado es la respuesta a «¿en
   qué va esto?»—, pero por un escalón y no por dos.

   Y de paso devuelve ~18px a la línea del cliente, que es justo lo que le
   faltaba para no cortar «DVA DE COLOMBIA» en las anchuras medias.

   ⚠️ No baja de 11.5: es una zona de clic, y por debajo de eso el área que queda
   deja de ser cómoda de acertar con el ratón. */
#kcore-root .kc-st-btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex;
  align-items: center; gap: 7px; padding: 5px 11px; border-radius: 20px; font-size: 11.5px;
  font-weight: 600; color: var(--text-1); background: var(--tint-2);
  font-family: inherit; transition: background .14s; }
#kcore-root .kc-st-d { width: 7px; height: 7px; border-radius: 50%; flex: none; }
#kcore-root .kc-st-btn:hover { background: #E9F2C4; }
#kcore-root .kc-st-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#kcore-root .kc-st-btn .kc-caret { font-size: 9px; opacity: .8; }
#kcore-root .kc-st-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.16); padding: 6px; min-width: 218px;
  display: flex; flex-direction: column; gap: 2px; }
#kcore-root .kc-st-opt { all: unset; box-sizing: border-box; cursor: pointer; display: flex;
  align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px;
  font-weight: 600; color: var(--text-1); font-family: inherit; transition: background .14s; }
#kcore-root .kc-st-opt:hover { background: var(--surface-3); }
#kcore-root .kc-st-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#kcore-root .kc-st-opt.on { background: var(--tint); }
/* La regla se dice ANTES de elegir, dentro del mismo menú. Un aviso después de
   hacer clic enseña lo mismo, pero cobrando un paso en falso. */
#kcore-root .kc-st-note { font-size: 11.5px; line-height: 1.45; color: var(--text-2);
  background: var(--surface-3); border-radius: 8px; padding: 8px 10px; margin-bottom: 2px; }
#kcore-root .kc-st-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
#kcore-root .kc-st-opt .kc-chk { margin-left: auto; color: var(--accent); font-size: 12px; }

/* ── Adjuntos ──
   Fila de DOS líneas desde el 11 ago 2026: nombre arriba, tipo y tamaño abajo,
   y quién lo subió y cuándo en su propia columna. Esos dos datos (`by` y
   `created`) YA viajaban en el payload y no se estaban pintando. */
#kcore-root .kc-files { display: flex; flex-direction: column; gap: 8px; }
#kcore-root .kc-file { display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  font-size: 13px; transition: border-color .14s; }
#kcore-root .kc-file:hover { border-color: #DEDED8; }
#kcore-root .kc-file-0 { font-size: 13px; color: var(--text-3); padding: 4px 2px; }
#kcore-root .kc-file .kc-fx { width: 36px; height: 36px; border-radius: 9px;
  display: grid; place-items: center; font-size: 8.5px; font-weight: 800; color: #fff;
  flex: none; text-transform: uppercase; letter-spacing: .02em; }
/* Color por familia de archivo: un PDF rojo se distingue de reojo en una lista
   de doce. Lo desconocido cae a gris, que es lo correcto para un .psd: no se
   finge que se sabe qué es. */
#kcore-root .kc-fx-rojo   { background: #E5484D; }
#kcore-root .kc-fx-verde  { background: #3AA377; }
#kcore-root .kc-fx-verde2 { background: #2C7F5C; }
#kcore-root .kc-fx-azul   { background: #4C7FD1; }
#kcore-root .kc-fx-ambar  { background: #D98A0B; }
#kcore-root .kc-fx-gris   { background: #8A8A85; }
#kcore-root .kc-file .kc-fb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#kcore-root .kc-file .kc-fn { min-width: 0; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
#kcore-root .kc-file .kc-fm { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
/* Se esconde antes que nada al angostar: es contexto, no el archivo. */
#kcore-root .kc-file .kc-fw { flex: none; display: flex; flex-direction: column; gap: 1px;
  text-align: right; font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
#kcore-root .kc-file .kc-fopen { flex: none; text-decoration: none; }
#kcore-root .kc-fic { all: unset; box-sizing: border-box; cursor: pointer; width: 30px; height: 30px;
  border-radius: 8px; display: grid; place-items: center; color: var(--text-3); font-size: 15px;
  flex: none; transition: all .14s; padding: 0; }
#kcore-root .kc-fic svg { width: 15px; height: 15px; display: block; }
#kcore-root .kc-fic:hover { background: var(--surface-3); color: var(--text-1); }
#kcore-root .kc-fic:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 1180px) { #kcore-root .kc-file .kc-fw { display: none; } }
#kcore-root .kc-upload { all: unset; box-sizing: border-box; cursor: pointer; display: flex;
  align-items: center; gap: 9px; padding: 9px 11px; border-radius: 9px; border: 1px dashed #D9D9D2;
  font-size: 13px; font-weight: 600; color: var(--text-3); font-family: inherit; transition: all .14s;
  justify-content: center; }
#kcore-root .kc-upload:hover { border-color: var(--accent); color: var(--accent); background: var(--tint); }
#kcore-root .kc-upload:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Dos columnas de ALTO COMPLETO, cada una con su scroll: el contenido y la
   conversación se recorren por separado, como en ClickUp. Con el ancho del área
   del dashboard, el contenido central por fin respira. */
#kcore-root .kc-dr-body { flex: 1; min-height: 0; display: grid;
  grid-template-columns: minmax(0,1fr) minmax(340px, 30%); overflow: hidden; }
#kcore-root .kc-dr-main { overflow-y: auto; overflow-x: hidden; min-width: 0;
  padding: 24px 30px 34px; display: flex; flex-direction: column; gap: 26px; }
/* ⚠️ `flex: none` en TODOS los bloques de la columna, y no es cosmético.
   Esto es un flex column de ALTO FIJO (el cajón mide lo que la ventana), y en
   un flex column los hijos se ENCOGEN antes de que el contenedor decida
   scrollear. Resultado: con una ficha larga, cada sección se comprimía por
   debajo de su contenido y el texto se salía por abajo — medido, la tarjeta de
   «Qué pidió» quedaba en 127px con 177px de contenido dentro.

   Venía de antes de las tarjetas y no se veía porque sin borde el texto
   desbordado se confundía con el de la sección siguiente. El borde lo hizo
   evidente; el fallo ya estaba. */
#kcore-root .kc-dr-main > * { flex: none; }

/* ── La banda del reloj de revisión, arriba del todo en la ficha (4 ago 2026) ──
   Va PRIMERO y no entre las propiedades a propósito: es la respuesta a "¿por qué
   esto no ha salido?", y esa pregunta se hace antes de leer nada más. Neutra los
   primeros días, ámbar desde el 3, roja desde el 7, verde cuando ya se resolvió.

   `.kc-dr-main` es flex column con `gap:26px`, así que la banda ya queda
   separada del bloque de propiedades sin margen propio. */
#kcore-root .kc-relojf { display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border-radius: 10px; font-size: 13px;
  color: var(--text-2); background: var(--surface-3); border: 1px solid var(--border); }
#kcore-root .kc-relojf svg { width: 17px; height: 17px; display: block; flex: none; margin-top: 1px; }
#kcore-root .kc-relojf b { display: block; font-weight: 600; color: inherit; }
#kcore-root .kc-relojf small { display: block; margin-top: 2px; font-size: 11.5px; opacity: .85; }
#kcore-root .kc-relojf.kc-rf-medio { color: #8A5A00; background: #FDF0D5; border-color: #F4DFB2; }
#kcore-root .kc-relojf.kc-rf-alto  { color: #C0392B; background: #FDE5E3; border-color: #F6C9C4; }
#kcore-root .kc-relojf.kc-rf-ok    { color: #46530A; background: #EFF8CE; border-color: #DCEBA8; }

/* ── La franja de propiedades (11 ago 2026) ──
   Cinco datos en una tira, etiqueta arriba y valor abajo con foto o icono.
   Antes era una rejilla de etiqueta→valor con SEIS campos abiertos: la ficha
   empezaba con un formulario en vez de con la pieza.

   Cinco y no seis porque la PRIORIDAD se mudó a la cabecera: seis columnas en
   los ~777px de esta columna dan ~121px cada una, y «25 JUL 2026» con su teja
   pide ~137px. La fecha de inicio no se podía sacrificar (Mi trabajo cae a ella
   cuando un paso no tiene fecha propia), así que se sacó la que se lee de un
   vistazo.

   ⚠️ Cinco columnas EXPLÍCITAS, no `auto-fit`. Se probó con
   `minmax(140px,1fr)` y cabían cinco… en un banco de pruebas más ancho que la
   ficha real. La cuenta de verdad: la columna principal da 777px, menos los
   36px de padding de esta caja quedan 741 de ancho útil, y `auto-fit` mete
   n columnas mientras `n·140 + (n-1)·12 ≤ 741`, o sea CUATRO. La quinta se
   caía sola a una segunda fila y dejaba a «Entregable» huérfano debajo.

   Con `repeat(5, …)` la fila es la fila, y los saltos se deciden aquí abajo por
   ancho de ventana en vez de emerger de una cuenta que nadie ve.

   Los pesos NO son iguales, y cada uno está medido contra su contenido más
   largo en los 701px útiles (777 menos padding y huecos):

     · Responsable y Solicitante `1.05fr` → 90px de texto tras la foto de 30px.
       Con `1fr` daban 84 y «David Admin» salía «David Adm…» el primer día.
     · Empieza y Entrega `1fr` → 93px, y «25 JUL 2026» pide 88.
     · Entregable `1.2fr` → es la única cuyo valor puede ser un dominio entero,
       y su estado vacío («Pega el enlace») es el texto más largo de la franja. */

/* ⚠️ LA FRANJA Y EL ARMAZÓN DE SECCIÓN SE MUDARON A `kcore-ficha.css` (23 ago
   2026), que comparten la Mesa y el PORTAL. No se copiaron: se MOVIERON, así que
   aquí ya no están y hay UNA sola definición. Lo que se quedó es lo de EDITAR
   (`.kc-pc-v`, `.kc-sec-h`, `.kc-sec-b`), que en el portal no existe.
   Si algo de la franja se ve raro en la Mesa, el archivo a mirar es aquel. */

/* El valor en modo LECTURA. Es un <button> porque al tocarlo pasa a control:
   un <div> con onclick no llega por teclado ni se anuncia como accionable. */
#kcore-root .kc-pc-v { all: unset; box-sizing: border-box; cursor: pointer; display: flex;
  align-items: center; gap: 9px; min-width: 0; width: 100%; font-family: inherit;
  border-radius: 9px; padding: 3px 5px; margin: -3px -5px; transition: background .14s; }
#kcore-root .kc-pc-v:hover { background: var(--surface-3); }
#kcore-root .kc-pc-v:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* La teja del icono. Tono lima solo la fecha de ENTREGA: es la única de la
   franja que tiene consecuencia si se pasa. */
#kcore-root .kc-pc-x { width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center; }
#kcore-root .kc-pc-x svg { width: 15px; height: 15px; display: block; }
#kcore-root .kc-pc-x-gris { background: var(--surface-3); color: var(--text-2); }
#kcore-root .kc-pc-x-lima { background: var(--tint-2); color: #46530A; }

/* El control real, oculto hasta que se toca la celda.
   El selector va INVERTIDO por la misma razón que en .kc-fld: listaba solo
   `input`, así que al agregar el `select` de solicitante salió con la apariencia
   NATIVA del navegador — caja negra gruesa y letra enorme, sin nada que ver con
   el resto. Se estilan todos menos los que tienen forma propia, y el próximo
   elemento entra bien sin que nadie tenga que acordarse. */
#kcore-root .kc-pc-e { display: block; min-width: 0; }
#kcore-root .kc-pc-e input:not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]),
#kcore-root .kc-pc-e select,
#kcore-root .kc-pc-e textarea {
  border: 1px solid var(--accent); border-radius: 8px; padding: 8px 9px;
  font-family: inherit; font-size: 13px; background-color: #fff; color: var(--text-1);
  appearance: none; -webkit-appearance: none; width: 100%; outline: none;
  box-shadow: 0 0 0 3px rgba(203,249,4,.12); }

/* ── La prioridad, en la cabecera ── */
#kcore-root .kc-dr-prio { position: relative; flex: none; }
#kcore-root .kc-dr-prio .kc-pc-e { position: absolute; top: 0; right: 0; min-width: 150px; z-index: 5; }
#kcore-root .kc-pr-v { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex;
  align-items: center; gap: 7px; padding: 7px 13px; border-radius: 20px; font-family: inherit;
  font-size: 12.5px; font-weight: 600; background: var(--surface-3); color: var(--text-2);
  transition: filter .14s; }
#kcore-root .kc-pr-v:hover { filter: brightness(.97); }
#kcore-root .kc-pr-v:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#kcore-root .kc-pr-v svg { width: 14px; height: 14px; display: block; flex: none; }
/* Los MISMOS tonos que `.kc-prio-*` de las listas: la prioridad de una pieza no
   puede tener un color en el Tablero y otro en su ficha. */
#kcore-root .kc-pr-baja    { background: #EEF2F6; color: #5B6472; }
#kcore-root .kc-pr-normal  { background: var(--surface-3); color: var(--text-2); }
#kcore-root .kc-pr-alta    { background: #FDF0D5; color: #8A5A00; }
#kcore-root .kc-pr-urgente { background: #FDE5E3; color: #C0392B; }

/* ── Bloques de contenido ──
   Cada sección es una TARJETA con borde desde el 11 ago 2026. Antes eran
   títulos sueltos sobre el fondo: con cuatro bloques seguidos no se veía dónde
   terminaba uno y empezaba el siguiente, y la ficha se leía como una lista
   larga en vez de como cuatro cosas distintas. */
#kcore-root .kc-card { border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); padding: 18px 20px; gap: 14px; }
/* `.kc-sec` y `.kc-sec h3` se mudaron a `kcore-ficha.css`, compartido con el
   portal (con su nota sobre por qué el selector NO lleva `>`). Aquí se queda lo
   que solo existe en la Mesa: la cabecera con lápices. */
/* Cabecera de la tarjeta: el título a la izquierda y sus acciones a la derecha.
   El `margin-right:auto` va en el h3 y no un `justify-content:space-between` en
   la fila, para que la barra de progreso del plan quede pegada a su título y no
   flotando en medio del hueco. */
#kcore-root .kc-sec-h { display: flex; align-items: center; gap: 12px; }
#kcore-root .kc-sec-h > h3 { margin-right: auto; }
#kcore-root .kc-sec-b { all: unset; box-sizing: border-box; cursor: pointer; width: 30px; height: 30px;
  border-radius: 9px; border: 1px solid var(--border); display: grid; place-items: center;
  color: var(--text-2); flex: none; transition: all .14s; }
#kcore-root .kc-sec-b svg { width: 14px; height: 14px; display: block; }
#kcore-root .kc-sec-b:hover { border-color: var(--accent); color: var(--accent); background: var(--tint); }
#kcore-root .kc-sec-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#kcore-root .kc-sec p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.65; max-width: 68ch; white-space: pre-wrap; }
#kcore-root .kc-sec p:last-child { margin-bottom: 0; }

/* ── Qué pidió ──
   Sin caja gris propia: la tarjeta ya es la caja. Cada campo lleva su etiqueta
   en su propio renglón y el texto debajo, en vez de «Objetivo: …» en línea —
   con dos párrafos seguidos, la etiqueta en línea se perdía dentro del texto. */
#kcore-root .kc-desc { display: flex; flex-direction: column; gap: 14px; }
#kcore-root .kc-desc-b { display: flex; flex-direction: column; gap: 3px; }
#kcore-root .kc-desc-l { font-size: 12.5px; font-weight: 700; color: var(--text-1); }
#kcore-root .kc-desc-0 { font-size: 13.5px; color: var(--text-3); }
#kcore-root .kc-desc-ed { width: 100%; border: 1px solid var(--accent); border-radius: 9px;
  padding: 11px 12px; font-family: inherit; font-size: 13.5px; line-height: 1.65;
  color: var(--text-1); background: #fff; resize: none; overflow: hidden; outline: none;
  box-shadow: 0 0 0 3px rgba(203,249,4,.12); }

/* barra de progreso de los pasos, como en el mockup */
#kcore-root .kc-prog { flex: 1; display: flex; align-items: center; gap: 9px; }
#kcore-root .kc-prog .kc-pbar { flex: 1; max-width: 190px; height: 6px; background: #EAEAE4;
  border-radius: 4px; overflow: hidden; }
#kcore-root .kc-prog .kc-pbar i { display: block; height: 100%; background: var(--accent);
  border-radius: 4px; transition: width .3s cubic-bezier(.16,1,.3,1); }
#kcore-root .kc-prog .kc-pn { font-size: 11.5px; color: var(--text-2); font-weight: 700;
  letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }

/* ── Pasos editables ── */
#kcore-root .kc-stprow { display: flex; align-items: center; gap: 11px; padding: 8px 10px;
  font-size: 13.5px; border-radius: 9px; transition: background .14s; }
#kcore-root .kc-stprow:hover { background: var(--surface-3); }
#kcore-root .kc-ck { all: unset; box-sizing: border-box; width: 19px; height: 19px; border-radius: 6px;
  border: 1.5px solid #D5D5CE; flex: none; display: grid; place-items: center; font-size: 11px;
  color: #fff; cursor: pointer; transition: all .14s; }
#kcore-root .kc-ck:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#kcore-root .kc-ck.done { background: var(--accent); border-color: var(--accent); }
#kcore-root .kc-stprow.done .kc-sn { color: var(--text-3); text-decoration: line-through; }
#kcore-root .kc-sn { flex: 1; min-width: 0; border: 1px solid transparent; border-radius: 7px;
  padding: 4px 7px; font-family: inherit; font-size: 13.5px; background: transparent;
  color: var(--text-1); transition: all .14s; }
#kcore-root .kc-sn:hover { background: #fff; border-color: var(--border); }
#kcore-root .kc-sn:focus { background: #fff; border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px rgba(203,249,4,.12); }
#kcore-root .kc-sasg { all: unset; box-sizing: border-box; cursor: pointer; flex: none; border-radius: 50%; }
#kcore-root .kc-sasg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#kcore-root .kc-sasg .kc-pav { width: 22px; height: 22px; font-size: 9px; }
#kcore-root .kc-sasg .kc-noasg { width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed #D5D5CE;
  display: grid; place-items: center; color: var(--text-3); font-size: 11px; }
#kcore-root .kc-sdel { all: unset; box-sizing: border-box; cursor: pointer; width: 24px; height: 24px;
  border-radius: 7px; display: grid; place-items: center; color: var(--text-3); font-size: 15px;
  flex: none; opacity: 0; transition: opacity .14s, background .14s, color .14s; padding: 0; }
#kcore-root .kc-stprow:hover .kc-sdel, #kcore-root .kc-sdel:focus-visible { opacity: 1; }
#kcore-root .kc-sdel:hover { background: #FDE5E3; color: #C0392B; }
#kcore-root .kc-addstep { all: unset; box-sizing: border-box; cursor: pointer; display: flex;
  align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; font-size: 13px;
  font-weight: 600; color: var(--text-3); font-family: inherit; transition: all .14s; }
#kcore-root .kc-addstep:hover { background: var(--tint); color: var(--accent); }
#kcore-root .kc-addstep:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* El estado vacío del plan ES el botón, no un texto que explica que hay uno.
   Sin pasos no hay nada que mirar en la sección, así que el hueco entero se usa
   para lo único que se puede hacer ahí. */
#kcore-root .kc-step0 { all: unset; box-sizing: border-box; cursor: pointer; display: flex;
  width: 100%; align-items: center; gap: 12px; padding: 14px 15px; border-radius: var(--r);
  border: 1px dashed #D9D9D2; background: var(--surface-3); font-family: inherit;
  transition: border-color .15s, background .15s; }
#kcore-root .kc-step0:hover { border-color: var(--accent); background: var(--accent-dim); }
#kcore-root .kc-step0:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#kcore-root .kc-step0-x { width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border);
  color: var(--text-2); }
#kcore-root .kc-step0-x svg { width: 16px; height: 16px; display: block; }
#kcore-root .kc-step0-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
#kcore-root .kc-step0-b b { font-size: 13px; font-weight: 600; color: var(--text-1); }
#kcore-root .kc-step0-b span { font-size: 12px; color: var(--text-3); }

/* ── Menú flotante de los ⋮ (11 ago 2026) ──
   `fixed` porque lo abren botones que viven dentro de contenedores con scroll y
   `overflow: hidden`: en absoluto se recortaba contra el borde de la sección.
   El JS le pone top/left desde `getBoundingClientRect()`. */
#kcore-root .kc-mn { position: fixed; z-index: 100003; min-width: 190px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: 0 12px 34px rgba(0,0,0,.16); padding: 6px;
  display: flex; flex-direction: column; gap: 2px; }
#kcore-root .kc-mn-o { all: unset; box-sizing: border-box; cursor: pointer; display: flex;
  align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; font-size: 12.5px;
  font-weight: 600; color: var(--text-1); font-family: inherit; transition: background .14s; }
#kcore-root .kc-mn-o:hover { background: var(--surface-3); }
#kcore-root .kc-mn-o:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#kcore-root .kc-mn-d { color: #C0392B; }
#kcore-root .kc-mn-d:hover { background: #FDE5E3; }
/* El ⋮ de la cabecera de la ficha. */
#kcore-root .kc-dr-more { all: unset; box-sizing: border-box; cursor: pointer; width: 32px; height: 32px;
  border-radius: 9px; display: grid; place-items: center; color: var(--text-3); font-size: 18px;
  line-height: 1; transition: background .14s; }
#kcore-root .kc-dr-more:hover { background: var(--surface-3); color: var(--text-1); }
#kcore-root .kc-dr-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── Panel de conversación (columna derecha) ── */
#kcore-root .kc-dr-conv { border-left: 1px solid var(--border); background: #FBFCFD;
  display: flex; flex-direction: column; min-height: 0; }
/* La cabecera de la conversación lleva las DOS pestañas: con el solicitante y
   entre el equipo. Riel estándar de la plataforma, encogido para que quepan dos
   nombres en una columna angosta. */
#kcore-root .kc-conv-h { padding: 12px 16px; border-bottom: 1px solid var(--border);
  flex: none; background: var(--surface); }
#kcore-root .kc-conv-h .kc-tabs { display: flex; width: 100%; }
#kcore-root .kc-conv-h .kc-tab { flex: 1; min-width: 0; justify-content: center;
  padding: 7px 10px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* La pestaña interna avisa de qué lado está: lo que se escriba ahí no sale. */
#kcore-root .kc-conv-h .kc-tab[data-conv="internal"].on { color: #46530A; background: var(--tint-2); }

/* ── El punto de «te escribió el solicitante» (ajuste de David, 18 ago 2026) ──

   Va DENTRO de la pestaña y no encima de ella con `::before` absoluto —que es
   como se dibuja el sin-leer de la Bandeja (§ `.kc-it.kc-unread`)— por una
   razón concreta: esta pestaña lleva `overflow: hidden` para recortar con
   puntos suspensivos los nombres largos, y ese mismo recorte se habría comido
   un punto posicionado por fuera del texto. Como hijo flex convive con la
   elipsis en vez de pelearse con ella: el punto no se encoge (`flex: none`) y
   lo que cede es el NOMBRE, que es lo que ya cedía antes.

   El color es el mismo lima del sin-leer de la Bandeja, para que las dos
   señales de «hay algo nuevo» se lean como la misma cosa. El aro es lo único
   que se agrega: sobre la pastilla BLANCA de la pestaña activa, el lima solo
   casi desaparece. */
#kcore-root .kc-conv-h .kc-tab .kc-tabtx { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#kcore-root .kc-tabdot { flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 0 1px rgba(122,152,0,.55); }
/* La pestaña con deuda pierde el gris de «inactiva»: el punto dice que hay algo
   y el texto apagado decía lo contrario. */
#kcore-root .kc-conv-h .kc-tab.kc-tab-pend { color: var(--text-1); font-weight: 600; }

/* Utilidad de solo-lectores. El punto es una señal VISUAL y un `<i>` vacío no
   dice nada en voz alta; esto es lo que hace que la pestaña se anuncie como
   «Metaza — sin responder» y no solo como «Metaza». */
#kcore-root .kc-sr { position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; }
#kcore-root .kc-conv-s { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
#kcore-root .kc-conv-b { flex: none; padding: 12px 20px 16px; border-top: 1px solid var(--border);
  background: var(--surface); display: flex; gap: 8px; align-items: flex-end; position: relative; }

/* ── Tarjetas de comentario (11 ago 2026) ──
   Reemplazan a las burbujas con lado (`.kc-msgrow` / `.kc-msg.kc-mine`), que
   siguen vivas en el chat del Advisor pero ya no en la ficha.

   Las burbujas sirven cuando hablan DOS. Aquí escriben el responsable, el
   líder, el solicitante y a veces alguien más, y con cuatro personas alternando
   lados la columna se lee como un zigzag. La tarjeta pone a todos en la misma
   cuadrícula y deja que la foto, el nombre y el chip digan quién habla. */
#kcore-root .kc-cmt { border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }

/* El mensaje que ACABA de llegar sube a su sitio (ajuste #1, 16 ago 2026).
   David lo pidió "como WhatsApp, que se vea cómo la burbuja sube al chat".

   La lleva SOLO el mensaje nuevo, y la clase se quita a los 0.9s: si se quedara
   puesta, cualquier repintado posterior —cambiar de pestaña, editar— volvería a
   animar toda la columna y el movimiento dejaría de significar "esto es nuevo".

   No hace falta un guardia de `prefers-reduced-motion` aquí: el bloque global
   del final del archivo ya apaga toda animación de la Mesa. */
@keyframes kc-burbuja {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
#kcore-root .kc-cmt.kc-nuevo { animation: kc-burbuja .28s cubic-bezier(.2, .8, .2, 1); }

/* ── Lo PROPIO, al lado contrario y en verde (ajuste de David, 11 ago 2026) ──
   El mockup pintaba todos los mensajes iguales y al probarlo se vio que no
   funciona: sin color ni lado hay que leer el nombre para saber quién habla, y
   eso es justo lo que un chat resuelve de un vistazo.

   Va como WhatsApp: la tarjeta se corre a la DERECHA, se tiñe de lima suave y
   la foto y el nombre se van con ella. Lo que NO se mueve es el texto de
   dentro, que sigue alineado a la izquierda — un párrafo alineado a la derecha
   se lee mal en cuanto pasa de dos renglones.

   `margin-left: auto` y un tope de ancho, en vez de `align-self`: la columna es
   un flex column, así que `align-self` cambiaría el ancho del resto de las
   tarjetas al recalcularse. */
#kcore-root .kc-cmt.kc-mio { margin-left: auto; max-width: 92%;
  background: var(--tint); border-color: #E2EDBE; }
#kcore-root .kc-cmt.kc-mio .kc-cmt-h { flex-direction: row-reverse; }
/* Con la fila invertida, el `margin-left:auto` de la hora la mandaría al lado
   equivocado: aquí tiene que empujar desde el otro extremo. */
#kcore-root .kc-cmt.kc-mio .kc-cmt-d { margin-left: 0; margin-right: auto; }
#kcore-root .kc-cmt.kc-mio .kc-cmt-b { text-align: left; }
#kcore-root .kc-cmt.kc-mio .kc-attg { justify-content: flex-end; }
/* Mensajes seguidos de la misma persona se acercan, como hacía `.kc-cont` con
   las burbujas: son un turno de habla, no dos. */
#kcore-root .kc-cmt.kc-cont { margin-top: -6px; }
/* `flex-wrap`: si el nombre, el chip y la hora no caben en los ~300px útiles de
   la columna, la hora baja a su propio renglón en vez de estrujar el NOMBRE,
   que es el dato que dice quién habla. Sin esto «David Admin» se recortaba a
   «David Adm…» con una tarjeta medio vacía debajo. */
#kcore-root .kc-cmt-h { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
#kcore-root .kc-cmt-h .kc-cmt-av { width: 26px; height: 26px; font-size: 9.5px; flex: none; }
#kcore-root .kc-cmt-n { font-size: 12.5px; font-weight: 700; color: var(--text-1);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La hora empuja al resto a la izquierda y se queda pegada al borde. */
#kcore-root .kc-cmt-d { margin-left: auto; flex: none; font-size: 11px; color: var(--text-3); white-space: nowrap; }
#kcore-root .kc-cmt-b { font-size: 13px; line-height: 1.6; color: var(--text-1);
  white-space: pre-wrap; word-break: break-word; }

/* ═══ Los chulitos de lectura (23 ago 2026) ═══

   Van pegados a la hora, como en WhatsApp, y por eso NO llevan `margin-left`:
   `.kc-cmt-d` ya trae el `auto` que empuja a las dos al borde.

   ⚠️ El azul es `#2A96D4` y no el `#34B7F1` de WhatsApp: aquel da ~2.1:1 sobre
   blanco y este ~3.1:1, que es el mínimo que pide WCAG para un icono que
   COMUNICA algo (y aquí el color ES el dato: gris y azul son los dos estados).
   Es el mismo criterio que hizo tintados los pills del Tablero.

   `flex: none` porque la cabecera del mensaje es flex y el nombre del autor
   encoge: sin esto, un nombre largo aplastaría los chulitos hasta hacerlos
   ilegibles, que es el defecto que ya pagó el chip de «TE MENCIONARON». */
#kcore-root .kc-rd { flex: none; display: inline-flex; align-items: center;
  width: 16px; height: 12px; color: var(--text-3); }
#kcore-root .kc-rd svg { width: 100%; height: 100%; display: block; }
#kcore-root .kc-rd-on { color: #2A96D4; }

/* ═══ El enlace del portal, en Departamentos (23 ago 2026) ═══

   La URL puede ser larga y NO puede empujar el panel: `min-width: 0` en el
   flex hijo es lo que le permite encogerse por debajo de su contenido, que es
   la misma regla del `minmax(0,1fr)` del calendario (§5.c.1) y la que el chip
   de menciones ya necesitó. */
#kcore-root .kc-plink { margin: 12px 0 0; }
#kcore-root .kc-plink-r { display: flex; align-items: center; gap: 10px;
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: 10px; padding: 7px 8px 7px 11px; }
#kcore-root .kc-plink-u { min-width: 0; flex: 1; font-size: 12.5px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#kcore-root .kc-plink-r .kc-b { flex: none; }
#kcore-root .kc-plink-h { margin: 7px 0 13px; font-size: 12.5px; line-height: 1.5; color: var(--text-2);
  line-height: 1.5; }
/* El chip dice de qué LADO está quien escribió, no su cargo: en esta columna la
   pregunta es "¿esto lo dijo el cliente o nosotros?". */
#kcore-root .kc-mc { flex: none; font-size: 10px; font-weight: 600; padding: 2px 7px;
  border-radius: 20px; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
#kcore-root .kc-mc-yo { background: var(--tint-2); color: #46530A; }
/* Solo `flex:none` y el hover: la opacidad de reposo la pone `.kc-med` más
   abajo, y ahí vive también el `@media (hover: none)` que lo deja visible en
   táctil. Repetir aquí `opacity: 0` ganaba por especificidad y dejaba el lápiz
   INALCANZABLE en tableta, donde no hay hover que lo revele. */
#kcore-root .kc-cmt .kc-med { flex: none; }
#kcore-root .kc-cmt:hover .kc-med, #kcore-root .kc-cmt .kc-med:focus-visible { opacity: 1; }
/* La miniatura y su «Ver adjunto»: que una imagen sea clicable no se ve, y en
   una columna con varias seguidas nadie prueba a tocarlas. */
#kcore-root .kc-attp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#kcore-root .kc-attv { flex: none; }

/* ── Hilos de UN nivel, solo en la conversación del equipo (11 ago 2026) ──
   Ver el §5: en la del solicitante `visibility` ya hace el trabajo que allá
   haría anidar, así que allí no se ofrece.

   ⚠️ El hilo NO se despliega en la conversación general, se abre APARTE
   (modelo ClickUp, ajuste de David tras probar la primera versión). La versión
   con respuestas sangradas bajo su padre vivía aquí y se quitó entera: con dos
   hilos de cuatro mensajes había que bajar por conversaciones ajenas para
   encontrar el siguiente mensaje suelto. Lo que queda en la lista general es
   solo el pie de abajo. */

/* «Responder», cuando el mensaje todavía no tiene respuestas. Aparece al pasar
   por encima, como el lápiz de editar, y por lo mismo: en una columna de 340px
   un enlace fijo bajo cada mensaje es una segunda columna de ruido. En táctil
   no hay hover, así que se queda visible. */
#kcore-root .kc-cmt-r { all: unset; box-sizing: border-box; cursor: pointer;
  align-self: flex-start; font-size: 11.5px; font-weight: 600; color: var(--accent);
  padding: 2px 6px; margin: -2px -6px; border-radius: 6px; font-family: inherit;
  opacity: 0; transition: opacity .14s, background .14s; }
#kcore-root .kc-cmt:hover .kc-cmt-r, #kcore-root .kc-cmt-r:focus-visible { opacity: 1; }
#kcore-root .kc-cmt-r:hover { background: var(--tint); }
#kcore-root .kc-cmt.kc-mio .kc-cmt-r { align-self: flex-end; }
@media (hover: none) { #kcore-root .kc-cmt-r { opacity: 1; } }

/* El pie de «N respuestas», con las caras de quienes contestaron. Este SÍ va
   siempre visible, al revés que «Responder»: dice que hay una conversación que
   no estás viendo, y eso no puede depender de que alguien pase el ratón. */
#kcore-root .kc-cmt-h2 { all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; gap: 8px; width: 100%; font-family: inherit;
  margin-top: 2px; padding: 7px 9px; border-radius: 9px; background: var(--surface-3);
  transition: background .14s; }
#kcore-root .kc-cmt-h2:hover { background: #EDEDE8; }
#kcore-root .kc-cmt-h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Las caras se solapan, como en ClickUp: en 340px tres avatares en fila se
   comen el ancho del texto que los explica. */
#kcore-root .kc-cmt-h2c { display: flex; flex: none; }
#kcore-root .kc-cmt-h2c .kc-cmt-av { width: 20px; height: 20px; font-size: 8px;
  border: 2px solid var(--surface-3); }
#kcore-root .kc-cmt-h2c .kc-cmt-av + .kc-cmt-av { margin-left: -7px; }
#kcore-root .kc-cmt-h2n { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 600;
  color: var(--accent); text-align: left; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
#kcore-root .kc-cmt-h2g { flex: none; color: var(--text-3); font-size: 15px; line-height: 1; }

/* ── La vista del hilo, que reemplaza a la columna mientras está abierta ── */
#kcore-root .kc-hh { display: flex; align-items: center; gap: 8px; min-width: 0; }
#kcore-root .kc-hh-b { all: unset; box-sizing: border-box; cursor: pointer;
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  color: var(--text-2); flex: none; transition: background .14s; }
#kcore-root .kc-hh-b svg { width: 16px; height: 16px; display: block; }
#kcore-root .kc-hh-b:hover { background: var(--surface-3); color: var(--text-1); }
#kcore-root .kc-hh-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#kcore-root .kc-hh-t { font-size: 13px; color: var(--text-2); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#kcore-root .kc-hh-t b { color: var(--text-1); font-weight: 700; }

/* El mensaje raíz, arriba del todo: es de lo que trata el hilo, así que se
   distingue de las respuestas sin necesitar una etiqueta que lo diga. */
#kcore-root .kc-hilo-raiz .kc-cmt { border-color: #DEDED8; background: var(--surface); }
#kcore-root .kc-hilo-sep { display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3); margin: 2px 0; }
#kcore-root .kc-hilo-sep::before, #kcore-root .kc-hilo-sep::after {
  content: ''; flex: 1; height: 1px; background: var(--border); }

/* Burbujas del chat del Advisor. En la ficha ya no se usan. */
#kcore-root .kc-msgrow { display: flex; gap: 9px; align-items: flex-start; max-width: 100%; }
#kcore-root .kc-msgrow.kc-mine { flex-direction: row-reverse; }
#kcore-root .kc-msgrow .kc-pav { width: 26px; height: 26px; font-size: 9.5px; margin-top: 16px; }
#kcore-root .kc-msgrow.kc-cont .kc-pav { visibility: hidden; }
#kcore-root .kc-msgrow .kc-msg { max-width: calc(100% - 35px); }

/* Enlace dentro de un comentario: pegar un link de Drive es lo más común que
   hace un equipo, y tiene que ser clickeable y abrir en pestaña nueva. */
#kcore-root .kc-link { color: var(--accent); text-decoration: underline;
  text-underline-offset: 2px; word-break: break-all; }
#kcore-root .kc-link:hover { color: #5D7300; }

/* Previsualización del primer enlace, como en ClickUp/Asana. NO se piden
   metadatos remotos: un Drive está detrás de login y devolvería basura. Con el
   servicio y el dominio ya se entiende qué es. */
#kcore-root .kc-lcard { display: flex; align-items: center; gap: 10px; margin-top: 7px;
  padding: 9px 11px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; text-decoration: none; transition: all .14s; max-width: 100%; }
#kcore-root .kc-lcard:hover { border-color: var(--accent); background: var(--tint); }
#kcore-root .kc-lico { width: 28px; height: 28px; border-radius: 7px; flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; }
#kcore-root .kc-lmeta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
#kcore-root .kc-lname { font-size: 12.5px; font-weight: 700; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kcore-root .kc-lhost { font-size: 11px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kcore-root .kc-lgo { color: var(--text-3); font-size: 13px; flex: none; }

/* Aquí vivía `.kc-sdate`, la fecha del paso como campo abierto. La reemplazó
   `.kc-sc-v` (teja + «10 AGO», el control detrás) el 11 ago 2026. La nota que
   llevaba sigue siendo verdad y se muda con ella: las fechas del paso son
   internas y el solicitante NUNCA las ve. */

/* Mención dentro de un comentario */
#kcore-root .kc-mention { color: #4A5D00; font-weight: 700; background: var(--accent-dim);
  padding: 1px 5px; border-radius: 5px; }

/* Autocompletado de @menciones */
#kcore-root .kc-mentions { position: absolute; bottom: calc(100% + 6px); left: 20px; right: 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.16); padding: 6px; z-index: 30;
  max-height: 208px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
#kcore-root .kc-mopt { all: unset; box-sizing: border-box; cursor: pointer; display: flex;
  align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px;
  font-weight: 600; color: var(--text-1); font-family: inherit; }
#kcore-root .kc-mopt:hover, #kcore-root .kc-mopt.kc-active { background: var(--tint); }
#kcore-root .kc-mopt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ── MODAL ── */
/* Por ENCIMA de la ficha (100001). Sin esto, el modal de agregar paso se abre
   detrás de la ventana de la tarea y no se ve nada. */
#kcore-root .kc-ov { position: fixed; inset: 0; background: rgba(15,15,15,.55); z-index: 100010; }
#kcore-root .kc-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(560px, calc(100vw - 32px)); max-height: 88vh; max-height: 88dvh; background: var(--surface); border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.28); z-index: 100011; display: flex; flex-direction: column;
  animation: kc-pop .3s cubic-bezier(.34,1.4,.5,1); }
@keyframes kc-pop { from { opacity: 0; transform: translate(-50%,-46%) scale(.96); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
#kcore-root .kc-m-head { padding: 20px 23px 15px; border-bottom: 1px solid var(--border); flex: none; }
#kcore-root .kc-m-head h3 { margin: 0; font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; color: var(--text-1); }
#kcore-root .kc-m-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--text-2); }
#kcore-root .kc-m-body { padding: 19px 23px; overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; }
#kcore-root .kc-m-foot { padding: 15px 23px 20px; display: flex; gap: 9px; align-items: center;
  border-top: 1px solid var(--border); flex: none; }
#kcore-root .kc-m-note { font-size: 11.5px; color: var(--text-3); flex: 1; }

#kcore-root .kc-fld { margin-bottom: 16px; }
#kcore-root .kc-fld:last-child { margin-bottom: 0; }
#kcore-root .kc-fld label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--text-3); margin-bottom: 7px; }
/* Botones de seleccionar: MISMO patrón que .dbch-req-chip del portal — pill de
   borde suave, y al elegir NO se rellena de lima sólido sino del tinte
   --accent-dim con texto oliva. En la primera versión los hice rectangulares y
   con lima pleno, que es lo que más se notaba distinto. */
#kcore-root .kc-opts { display: flex; gap: 7px; flex-wrap: wrap; }
#kcore-root .kc-opt { all: unset; box-sizing: border-box; cursor: pointer; padding: 6px 12px; border-radius: 20px;
  border: 1px solid #E5E7EB; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 7px; transition: all .15s ease; font-family: inherit; }
#kcore-root .kc-opt:hover { border-color: var(--accent); color: var(--accent); }
#kcore-root .kc-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#kcore-root .kc-opt.sel { border-color: var(--accent); background: var(--accent-dim); color: #4A5D00; }
/* Aviso dentro de un modal: dice qué va a pasar ANTES de confirmar, cuando la
   acción tiene más consecuencias de las que su nombre sugiere. */
#kcore-root .kc-note { background: var(--surface-3); border-radius: 10px; padding: 11px 13px;
  font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
#kcore-root .kc-note b { color: var(--text-1); }
#kcore-root .kc-two { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
/* Inputs con las medidas de .dbch-req-input.
   Se listaba tipo por tipo (`text`, `email`, `date`) y se quedaban fuera los
   que fueran llegando: `password`, `number` y `month` salian a la mitad de
   ancho y sin borde, con las de al lado bien puestas. Se invierte el selector:
   se estilan TODOS menos los que tienen forma propia (archivo, casillas,
   selector de color), y asi el proximo tipo entra bien sin acordarse de nada. */
#kcore-root .kc-fld input:not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]),
#kcore-root .kc-fld select,
#kcore-root .kc-fld textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #E5E7EB; border-radius: 10px;
  font-family: inherit; font-size: 13.5px; background: #F7F8FA; color: var(--text-1);
  /* iOS ignora width:100% en un date mientras conserve su apariencia nativa. */
  appearance: none; -webkit-appearance: none; }
#kcore-root .kc-fld textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
/* `background-color`, no el atajo: ver la nota de .kc-pc-e sobre el chevron. */
#kcore-root .kc-fld input:focus, #kcore-root .kc-fld select:focus,
#kcore-root .kc-fld textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; background-color: #fff; }

#kcore-root .kc-plan { background: var(--surface-3); border-radius: 12px; padding: 13px 15px; }
#kcore-root .kc-plan-h { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); margin-bottom: 10px; }
#kcore-root .kc-plan-h .kc-tag { background: var(--tint-2); color: #5D7300; padding: 2px 8px;
  border-radius: 20px; letter-spacing: .02em; text-transform: none; }
#kcore-root .kc-stp { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; }
#kcore-root .kc-stp + .kc-stp { border-top: 1px solid #E9E9E3; }
#kcore-root .kc-num { width: 19px; height: 19px; border-radius: 50%; background: #DDDDD6; color: var(--text-2);
  font-size: 10.5px; font-weight: 700; display: grid; place-items: center; flex: none; }

/* ── TOAST (nunca alert() nativo) ──
   ⚠️ z-index 100030: POR ENCIMA DE TODO, y el número tampoco es decorativo.

   Iba en 100002, que le ganaba a la ficha (100001) y a nada más. El fondo del
   modal es 100010 y el modal 100011, así que TODO aviso disparado con un modal
   abierto salía detrás del velo oscuro y no se leía: los tres de «Configurar
   vitrina» («elige al menos una vista», «ese PDF tiene N páginas», «una vitrina
   admite hasta N publicaciones») avisaban en el vacío, y desde fuera eso se ve
   como un botón Guardar que no hace nada. Lo reportó David el 26 ago 2026:
   *"algunos mensajes de «archivo cargado» o cosas así aparecen detrás de la
   tarjeta, no encima"*.

   Va incluso por encima del visor (100020) a propósito: un aviso que no se lee
   es un aviso que no existe, y mientras se mira un archivo a pantalla completa
   siguen llegando («adjunto eliminado», «se cayó la conexión al subir»).

   La lección sigue siendo la de `.kc-lb`: en este archivo hay que MIRAR los
   z-index que ya existen antes de elegir uno. La escala, hoy: fondo de la ficha
   100000 · ficha 100001 · menú flotante 100003 · fondo del modal 100010 · modal
   100011 · visor 100020 · aviso 100030. */
#kcore-root .kc-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 11px; font-size: 13px;
  font-weight: 600; z-index: 100030; box-shadow: 0 8px 28px rgba(0,0,0,.3); max-width: calc(100vw - 40px); }

/* La barra de «Tu sesión venció» (8 sep 2026). Misma forma que el toast —es
   el mismo lenguaje: un aviso flotante abajo— pero NO se va sola y lleva
   acción, porque no es una confirmación sino un camino. Ver `sesionCaida()`.
   Va por encima del toast (100031): si las dos coinciden, la que hay que leer
   es esta. */
#kcore-root .kc-sesion { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  background: var(--ink); color: #fff; padding: 11px 12px 11px 20px; border-radius: 11px;
  font-size: 13px; font-weight: 600; z-index: 100031;
  box-shadow: 0 8px 28px rgba(0,0,0,.3); max-width: calc(100vw - 40px); }
#kcore-root .kc-sesion-b { background: var(--lime, #CBF904); color: var(--ink);
  border: 0; border-radius: 8px; padding: 8px 14px; font: inherit; cursor: pointer; }
#kcore-root .kc-sesion-b:hover { filter: brightness(.94); }

/* ══ MI TRABAJO ══
   Diseñada por David (`new design/Mi trabajo.psd`). Tres pestañas sobre UNA
   tabla, y a la derecha la actividad del mes y los mensajes sin responder.

   OJO CON EL NOMBRE: el contenedor es `.kc-mw`, no `.kc-mine`. `kc-mine` ya
   significa "mensaje propio" en el chat (`.kc-msg.kc-mine`), y llamar así a este
   grid le puso `display:grid` con una segunda columna de 320px a TODAS las
   burbujas verdes del hilo, que quedaron de un carácter de ancho. Antes de
   inventar un nombre de clase, buscarlo en el archivo.

   LA SECCIÓN CABE EN EL VIEWPORT, como el resto de la Mesa: el body NO scrollea
   y cada panel scrollea por dentro. Sin esto la columna derecha estira la página
   entera y el panel izquierdo termina en una caja corta con medio dashboard
   vacío debajo, que fue justo lo que se vio con datos reales. */
#kcore-root #kc-p-mine .kc-body { overflow: hidden; display: flex; flex-direction: column; gap: 16px; }

/* ── Identidad + campana. Va en la cabecera de TODAS las secciones (4 ago 2026),
   dentro de `.kc-head-right`, que es quien la empuja al borde. Ya no lleva
   `margin-left:auto` propio: con el envoltorio sería un segundo auto peleando
   por el mismo espacio libre. ── */
#kcore-root .kc-topright { display: flex; align-items: center; gap: 16px; }
#kcore-root .kc-topuser { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-1); }
#kcore-root .kc-av-sm { width: 34px; height: 34px; font-size: 12px; }
#kcore-root .kc-bell { all: unset; box-sizing: border-box; cursor: pointer; position: relative;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--text-1); background: var(--surface); transition: background .14s; }
#kcore-root .kc-bell:hover { background: var(--surface-3); }
#kcore-root .kc-bell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#kcore-root .kc-bell svg { width: 19px; height: 19px; display: block; }
#kcore-root .kc-bell-dot { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--red); border: 2px solid var(--surface); }

/* ── Las cuatro tarjetas de resumen. Forma de color, número grande, icono.
   NO son clic: son un dato (decisión de David). ── */
#kcore-root .kc-mw-stats { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px; }
#kcore-root .kc-stat { border-radius: var(--r-lg); padding: 16px 18px; min-height: 116px;
  display: flex; flex-direction: column; justify-content: space-between; color: #fff; }
#kcore-root .kc-stat-top { display: flex; align-items: flex-start; justify-content: space-between; }
#kcore-root .kc-stat-n { font-size: 40px; font-weight: 800; line-height: .9; letter-spacing: -.03em; }
#kcore-root .kc-stat-ic { opacity: .9; }
#kcore-root .kc-stat-ic svg { width: 26px; height: 26px; display: block; }
#kcore-root .kc-stat-l { font-size: 12.5px; line-height: 1.4; opacity: .95; }
#kcore-root .kc-stat-l b { font-weight: 700; }
/* Los colores del diseño de David. La primera oscura, luego verde, lila y roja. */
#kcore-root .kc-st-dark   { background: #3A3A3A; }
#kcore-root .kc-st-green  { background: #2FA36B; }
#kcore-root .kc-st-purple { background: #7C4DE0; }
#kcore-root .kc-st-red    { background: #F4655F; }

/* ── Panel de la campana ── */
#kcore-root .kc-bov { position: fixed; inset: 0; z-index: 40; background: transparent; }
#kcore-root .kc-bell-panel { position: fixed; z-index: 41; top: 92px; right: 34px; width: 360px;
  max-width: calc(100vw - 40px); max-height: 70vh; max-height: 70dvh; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.18);
  display: flex; flex-direction: column; overflow: hidden; }
#kcore-root .kc-bellhead { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border); flex: none; }
#kcore-root .kc-bellhead b { font-size: 14px; color: var(--text-1); }
#kcore-root .kc-bell-clear { all: unset; box-sizing: border-box; cursor: pointer; font-size: 12px;
  font-weight: 600; color: var(--accent); }
#kcore-root .kc-bell-clear:hover { text-decoration: underline; }
#kcore-root .kc-bell-list { overflow-y: auto; overflow-x: hidden; }
#kcore-root .kc-notif { all: unset; box-sizing: border-box; cursor: pointer; display: flex;
  flex-direction: column; gap: 3px; width: 100%; padding: 12px 16px; border-bottom: 1px solid #F5F5F2;
  transition: background .14s; position: relative; }
#kcore-root .kc-notif:hover { background: var(--surface-3); }
#kcore-root .kc-notif:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Sin leer: fondo tenue y un puntito lima a la izquierda. */
#kcore-root .kc-notif-new { background: var(--tint); }
#kcore-root .kc-notif-new::before { content: ''; position: absolute; left: 7px; top: 17px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
#kcore-root .kc-notif-k { font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-3); }
#kcore-root .kc-notif-t { font-size: 13px; font-weight: 600; color: var(--text-1); }
#kcore-root .kc-notif-b { font-size: 12px; color: var(--text-2); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#kcore-root .kc-notif-w { font-size: 11px; color: var(--text-3); }
#kcore-root .kc-mw { flex: 1; min-height: 0; display: grid;
  grid-template-columns: minmax(0,1fr) 340px; gap: 14px; align-items: stretch; }
#kcore-root .kc-mw-main { display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; }
#kcore-root .kc-mw-side { display: flex; flex-direction: column; gap: 14px;
  min-width: 0; min-height: 0; }

#kcore-root .kc-mw-tabs { padding: 16px 18px 12px; flex: none; }
/* El scroll vive AQUÍ, no en el body de la sección. */
#kcore-root .kc-mw-tablewrap { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 0 8px 12px; }

/* ── La tabla ──
   Grid por fila para que las columnas calcen sin <table>: cada pestaña declara
   las suyas porque no muestran lo mismo. minmax(0,1fr) siempre, o un título
   largo ensancha la columna hasta reventar la fila. */
#kcore-root .kc-tr { display: grid; align-items: center; gap: 14px;
  padding: 13px 14px; border-bottom: 1px solid #F2F2EE; }
#kcore-root .kc-t-steps .kc-tr { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) 130px 132px; }
/* "Por planear" lleva una columna más: el atajo para agregar pasos, que es la
   única acción de esta pestaña.
   Estado, Área y Fecha conservan EXACTAMENTE los anchos de .kc-t-mine, que es
   la tabla hermana: lo único nuevo es la columna de la acción. Apretarlas para
   ganarle ancho al título dejaría las mismas columnas midiendo distinto en dos
   pestañas que se alternan con un clic, y eso se nota más que el ancho. */
#kcore-root .kc-t-plan  .kc-tr { grid-template-columns: minmax(0,1.3fr) 168px 120px 132px 92px; }
#kcore-root .kc-t-mine  .kc-tr { grid-template-columns: minmax(0,1.3fr) 168px 116px 120px 132px; }
#kcore-root .kc-tr:last-child { border-bottom: 0; }

#kcore-root .kc-th { padding: 6px 14px 10px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface); z-index: 1; }
#kcore-root .kc-th span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3); }
#kcore-root .kc-ta-r { text-align: right; }

#kcore-root .kc-tr:not(.kc-th):hover { background: #FCFCFB; }

#kcore-root .kc-td-name { display: flex; align-items: center; gap: 11px; min-width: 0; }
#kcore-root .kc-td-t { font-size: 13.5px; font-weight: 600; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* La tarea madre es un enlace: abre su ficha. */
#kcore-root .kc-td-link { all: unset; box-sizing: border-box; cursor: pointer; min-width: 0;
  font-family: inherit; font-size: 13px; color: var(--text-2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; display: block; }
#kcore-root .kc-td-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
#kcore-root .kc-td-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
#kcore-root .kc-td-strong { font-size: 13.5px; font-weight: 600; color: var(--text-1); }
#kcore-root .kc-td-mut { font-size: 12.5px; color: var(--text-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
#kcore-root .kc-td-date { font-size: 12.5px; color: var(--text-2); text-align: right; white-space: nowrap; }
#kcore-root .kc-td-date.kc-late { color: #C0392B; font-weight: 600; }
#kcore-root .kc-td-date.kc-muted { color: var(--text-3); }
#kcore-root .kc-td-plan { display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--text-2); font-weight: 600; }

/* Fila completada: se queda tachada como acuse de recibo y mañana ya no está. */
#kcore-root .kc-tr.kc-done .kc-td-t { color: var(--text-3); text-decoration: line-through; }
#kcore-root .kc-tr.kc-done .kc-td-link,
#kcore-root .kc-tr.kc-done .kc-td-mut,
#kcore-root .kc-tr.kc-done .kc-td-date { color: var(--text-3); }

/* Chip de estado en tabla: fondo tenue y texto de color, como en el diseño de
   David. Es DISTINTO de .kc-pill del Tablero, que va en color sólido: allá la
   pill ES la columna y tiene que gritar; aquí es una celda entre varias y un
   bloque sólido le robaría la atención al nombre de la tarea. */
#kcore-root .kc-st { font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 20px;
  display: inline-block; white-space: nowrap; }
#kcore-root .kc-st-exec { background: #EDE9FE; color: #6D3FD1; }
#kcore-root .kc-st-int  { background: #E4F6EC; color: #2C7F5C; }
#kcore-root .kc-st-adj  { background: #FDF0DA; color: #B45309; }
#kcore-root .kc-st-cli  { background: #FDECD3; color: #A16207; }
#kcore-root .kc-st-blk  { background: #FDE5E3; color: #C0392B; }

#kcore-root .kc-mbar { flex: none; width: 46px; height: 5px; background: #EAEAE4;
  border-radius: 3px; overflow: hidden; }
#kcore-root .kc-mbar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
#kcore-root .kc-mempty { padding: 40px 24px; text-align: center; color: var(--text-3);
  font-size: 13px; line-height: 1.6; }

/* Estado vacío con icono (diseño de David, mockups de Ajustes): círculo tintado
   con un icono + título + una línea. En vertical por defecto; .kc-emptyx-row lo
   pone horizontal (icono a la izquierda) para las cajas anchas. */
#kcore-root .kc-emptyx { display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 34px 24px; gap: 4px; }
#kcore-root .kc-emptyx-row { flex-direction: row; gap: 18px; text-align: left; }
#kcore-root .kc-emptyx-ic { width: 64px; height: 64px; border-radius: 50%; flex: none;
  background: var(--tint); color: var(--green); display: grid; place-items: center; margin-bottom: 8px; }
#kcore-root .kc-emptyx-row .kc-emptyx-ic { margin-bottom: 0; }
#kcore-root .kc-emptyx-ic svg { width: 28px; height: 28px; display: block; }
#kcore-root .kc-emptyx-b { display: flex; flex-direction: column; gap: 3px; }
#kcore-root .kc-emptyx-t { font-size: 14px; font-weight: 500; color: var(--text-2); }
#kcore-root .kc-emptyx-s { font-size: 13px; color: var(--text-3); }

/* ── Paneles de la derecha ── */
#kcore-root .kc-mpanel { background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
/* El gráfico tiene alto propio; los mensajes se llevan el resto de la columna. */
#kcore-root .kc-mw-chart { flex: none; }
#kcore-root .kc-mw-side .kc-mpanel + .kc-mpanel { flex: 1 1 auto; }

/* La dona NO puede crecer sin límite: con ella suelta, Disponibilidad quedaba
   cortada abajo. Se le pone tope y su propio scroll, y el segundo panel se
   lleva lo que sobra. Es la misma regla de siempre: nada se sale de la caja. */
#kcore-root .kc-tm-cap { flex: 0 1 auto; max-height: 58%; }
#kcore-root .kc-tm-cap .kc-mpanel-b { overflow-y: auto; }
#kcore-root .kc-mw-side .kc-tm-cap + .kc-mpanel { flex: 1 1 auto; min-height: 148px; }
/* Dona más compacta, para que quepan las dos tarjetas sin apretar. */
#kcore-root .kc-dona { padding: 2px 18px 0; max-width: 236px; margin: 0 auto; }
#kcore-root .kc-dona-n b { font-size: 30px; }
#kcore-root .kc-caplist { padding: 12px 18px 2px; }
#kcore-root .kc-capleg { padding: 5px 0; }
#kcore-root .kc-mpanel-h { display: flex; align-items: center; gap: 8px; flex: none;
  padding: 15px 18px 13px; border-bottom: 1px solid var(--border); }
#kcore-root .kc-mpanel-h h2 { margin: 0; font-size: 13px; font-weight: 700; color: var(--text-1); }
#kcore-root .kc-mpanel-h .kc-cnt { font-size: 12px; font-weight: 700; color: var(--text-3);
  font-variant-numeric: tabular-nums; }
/* Icono al extremo derecho del encabezado del panel (mockups de Ajustes). */
#kcore-root .kc-mph-ic { margin-left: auto; color: var(--text-3); display: grid; place-items: center; }
#kcore-root .kc-mph-ic svg { width: 16px; height: 16px; display: block; }
/* Flechas de mes del gráfico. Van pegadas a la derecha con margin-left:auto y
   no con space-between en la cabecera, porque esa cabecera la comparten los
   otros paneles y ahí el contador tiene que quedar junto al título. */
#kcore-root .kc-mpanel-h .kc-chartnav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
#kcore-root .kc-chartnav .kc-b[disabled] { opacity: .3; cursor: default; }
#kcore-root .kc-mpanel-b { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }

/* ── Gráfico de actividad ── */
#kcore-root .kc-chart { display: flex; align-items: flex-end; gap: 6px; height: 150px;
  padding: 18px 18px 8px; }
#kcore-root .kc-bar { all: unset; box-sizing: border-box; cursor: default; flex: 1; min-width: 0;
  height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 7px; position: relative; font-family: inherit; }
#kcore-root .kc-bar-v { width: 100%; background: var(--tint-2); border-radius: 5px 5px 0 0;
  transition: background .16s; }
#kcore-root .kc-bar-hi .kc-bar-v { background: var(--lime); }
#kcore-root .kc-bar:hover .kc-bar-v { background: var(--accent); }
#kcore-root .kc-bar-l { font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-3); flex: none; }
/* Globo con el dato, como en el diseño. Aparece al pasar el mouse en vez de
   quedarse fijo: fijo tapa las barras vecinas. */
#kcore-root .kc-bar::after { content: attr(data-n) ' solicitudes · ' attr(data-bar);
  position: absolute; bottom: calc(100% - 16px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 600;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap; opacity: 0;
  pointer-events: none; transition: opacity .14s; z-index: 3; }
#kcore-root .kc-bar:hover::after, #kcore-root .kc-bar:focus-visible::after { opacity: 1; }

/* ── Mensajes sin responder ── */
#kcore-root .kc-msgit { display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 18px; border-bottom: 1px solid #F5F5F2; }
#kcore-root .kc-msgit:last-child { border-bottom: 0; }
#kcore-root .kc-msgic { position: relative; flex: none; color: var(--text-3); margin-top: 2px; }
#kcore-root .kc-msgic svg { width: 19px; height: 19px; display: block; }
#kcore-root .kc-msgdot { position: absolute; top: -1px; right: -2px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--red); border: 1.5px solid var(--surface); }
#kcore-root .kc-msgb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* La fila del título del panel: título que encoge + chip que no (ajuste #3).
   `min-width: 0` en las dos es obligatorio, o el hijo con `nowrap` se niega a
   bajar de su ancho de contenido y empuja el chip fuera de la tarjeta. Es la
   misma regla del `minmax(0,1fr)` de la grilla del calendario (§5.c.1). */
#kcore-root .kc-msgtop { display: flex; align-items: center; gap: 6px; min-width: 0; }
#kcore-root .kc-msgt { font-size: 13px; font-weight: 700; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* El chip de mención. Tinte del acento, no sólido: en una lista de tarjetas la
   señal tiene que verse sin gritar más que el propio título. */
#kcore-root .kc-mnt { flex: none; font-size: 9.5px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px;
  border-radius: 6px; background: var(--accent-dim); color: #4A5D00; }
#kcore-root .kc-msgw { font-size: 11.5px; color: var(--text-2); }
#kcore-root .kc-msgx { font-size: 11.5px; color: var(--text-3); font-style: italic; line-height: 1.45;
  margin-top: 3px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#kcore-root .kc-msgit .kc-b { flex: none; align-self: center; }
/* ══ REPORTES ══
   La defensa presupuestal. El bloque grande no es el volumen: es dónde se fue
   el tiempo, que es lo que termina la discusión de "por qué se demoran". */
/* El scroll vive DENTRO de la rejilla, no en el body de la sección.
   Con `overflow-y:auto` en `.kc-body` la última tarjeta quedaba pegada al borde
   y la sección se veía cortada: es la misma regla del hito 4, cada contenedor
   se queda dentro del espacio del dashboard y scrollea lo suyo. */
#kcore-root #kc-p-rep .kc-body { overflow: hidden; display: flex; flex-direction: column; }
#kcore-root .kc-rp { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0,1fr));
  align-content: start; flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  /* Aire abajo para que la última tarjeta no muera contra el borde. */
  padding-bottom: 8px; }
#kcore-root .kc-rp-wide { grid-column: 1 / -1; }
#kcore-root .kc-rpcard { background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); padding: 18px 20px 20px; min-width: 0; }
#kcore-root .kc-rpcard h2 { margin: 0 0 15px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--text-3); font-weight: 700; }
#kcore-root .kc-rplee { margin-top: 15px; padding: 12px 14px; background: var(--surface-3);
  border-radius: 12px; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
#kcore-root .kc-rplee b { color: var(--text-1); }
#kcore-root .kc-rpsub { font-size: 12px; color: var(--text-3); margin-top: 8px; }
#kcore-root .kc-bignum { font-size: 40px; font-weight: 700; letter-spacing: -.03em;
  color: var(--text-1); line-height: 1; display: flex; align-items: baseline; gap: 9px; }
#kcore-root .kc-bignum span { font-size: 12.5px; font-weight: 500; color: var(--text-3);
  letter-spacing: 0; }

/* La barra partida: equipo vs solicitante. Una sola barra y no dos, porque lo
   que se quiere leer es la PROPORCIÓN entre las dos, no cada una por su lado. */
#kcore-root .kc-split-bar { display: flex; height: 26px; border-radius: 9px; overflow: hidden;
  background: #EAEAE4; }
#kcore-root .kc-split-bar i { display: block; height: 100%; }
/* Colores de la imagen F de David. Verde el tiempo del equipo, lima el que se
   fue esperando; azul noche lo que entra, verde lo que sale.
   OJO: aquí el lima SÍ se usa, y no contradice la salvedad registrada. Aquella
   era sobre el color de una PERSONA en la dona de Mi Equipo compitiendo con el
   acento de la interfaz; esto es una serie de datos, no una identidad. */
#kcore-root .kc-sp-team { background: #2E9E63; }
#kcore-root .kc-sp-cli  { background: #D8E82A; }
#kcore-root .kc-v-in    { background: #1B1B5C; }
#kcore-root .kc-v-out   { background: #2E9E63; }
#kcore-root .kc-split-legs { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 13px; }
#kcore-root .kc-splitleg { display: flex; align-items: center; gap: 7px; font-size: 12px;
  color: var(--text-2); }
#kcore-root .kc-splitleg i { width: 10px; height: 10px; border-radius: 3px; flex: none; display: block; }
#kcore-root .kc-splitleg b { color: var(--text-1); font-weight: 700; margin-left: 3px; }

/* Volumen: dos barras por mes, entra y sale. */
#kcore-root .kc-vchart { display: flex; align-items: flex-end; gap: 10px; height: 100%;
  position: relative; z-index: 1; }
#kcore-root .kc-vcol { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; gap: 7px; position: relative; }
#kcore-root .kc-vbars { display: flex; align-items: flex-end; gap: 3px; width: 100%; height: 100%;
  justify-content: center; }
#kcore-root .kc-vbars i { display: block; width: 42%; max-width: 22px; border-radius: 4px 4px 0 0; }
#kcore-root .kc-vlab { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-3); }
#kcore-root .kc-vcol::after { content: attr(data-n); position: absolute; bottom: calc(100% - 14px);
  left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 10.5px;
  font-weight: 600; padding: 6px 10px; border-radius: 8px; white-space: nowrap; opacity: 0;
  pointer-events: none; transition: opacity .14s; z-index: 3; }
#kcore-root .kc-vcol:hover::after { opacity: 1; }

#kcore-root .kc-areas { display: flex; flex-direction: column; gap: 9px; }
#kcore-root .kc-arearow { display: grid; grid-template-columns: minmax(0,190px) minmax(0,1fr) 92px;
  align-items: center; gap: 12px; }
#kcore-root .kc-arean { font-size: 12.5px; font-weight: 600; color: var(--text-1);
  display: flex; align-items: center; gap: 10px; min-width: 0; }
/* El diseño trae un icono por área. Como los departamentos los escribe el
   equipo, no hay icono semántico posible para un nombre que aún no existe: va
   su INICIAL en el mismo cuadrado de color, que identifica igual. */
#kcore-root .kc-areaic { width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; }
#kcore-root .kc-arean > :not(.kc-areaic) { min-width: 0; }
#kcore-root .kc-areabar { height: 8px; background: #EDEEF0; border-radius: 4px; overflow: hidden; }
#kcore-root .kc-areabar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
#kcore-root .kc-areav { font-size: 11.5px; color: var(--text-3); text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; }

/* ── Icono de bloque: cuadrado redondeado de color, como en el diseño ── */
#kcore-root .kc-rpicon { width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: grid; place-items: center; color: #fff; overflow: hidden; }
#kcore-root .kc-rpicon svg { width: 19px; height: 19px; display: block; }
/* Las frases de lectura llevan su icono al lado, no encima del texto. */
#kcore-root .kc-rplee { display: flex; align-items: center; gap: 13px; }
#kcore-root .kc-lee-verde { background: #EAF6EF; color: #2C6B4A; }
#kcore-root .kc-lee-lila  { background: #EDECFA; color: #3D3480; }
#kcore-root .kc-rplee b { color: inherit; font-weight: 700; }
/* Las dos tarjetas chicas: icono a la izquierda, cifra y sub a la derecha. */
#kcore-root .kc-rprow { display: flex; align-items: center; gap: 14px; }
/* Solo el span de TEXTO va en columna; NO la cajita del icono (.kc-rpicon), que
   es otro span hijo y quedaba en flex-columna con el icono pegado arriba. */
#kcore-root .kc-rprow > span:not(.kc-rpicon) { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* ── Eje y líneas de referencia del gráfico de barras (pedido de David) ──
   Sin ellas dos barras vecinas se comparan entre sí pero no se puede leer
   CUÁNTAS son, y ese número es el argumento de la pantalla. */
#kcore-root .kc-vwrap { display: flex; gap: 10px; height: 178px; }
#kcore-root .kc-vaxis { display: flex; flex-direction: column; justify-content: space-between;
  flex: none; padding-bottom: 20px; text-align: right; min-width: 22px; }
#kcore-root .kc-vaxis span { font-size: 10px; color: var(--text-3); line-height: 1;
  font-variant-numeric: tabular-nums; }
#kcore-root .kc-vplot { position: relative; flex: 1; min-width: 0; }
/* La rejilla se posiciona sobre el ÁREA de barras, descontando el alto de las
   etiquetas de mes, o las líneas quedarían corridas respecto a las alturas. */
#kcore-root .kc-vgrid { position: absolute; inset: 0 0 20px 0; display: flex;
  flex-direction: column; justify-content: space-between; pointer-events: none; }
#kcore-root .kc-vgrid i { display: block; height: 0; border-top: 1px dashed #E1E3E6; }

/* ══ MI EQUIPO ══
   Misma base que Mi trabajo (regla de David): pestañas estándar sobre tabla con
   columnas, chips tenues, avatar negro+lima o foto, paneles con scroll propio.
   Reusa .kc-mw / .kc-table / .kc-tr / .kc-st, así que aquí solo va lo suyo. */
#kcore-root .kc-t-pers .kc-tr { grid-template-columns: minmax(0,1fr) 110px; }
#kcore-root .kc-weeknav { margin-left: auto; display: flex; align-items: center; gap: 9px; }

/* La columna izquierda scrollea entera aquí: son tarjetas + una tabla, no un
   solo panel. El resto de la regla se mantiene: nada se sale de la tarjeta. */
#kcore-root .kc-tm-main { background: transparent; box-shadow: none; overflow-y: auto;
  overflow-x: hidden; padding-right: 2px; }
#kcore-root .kc-tm-h { display: flex; align-items: center; gap: 9px; font-size: 10.5px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3);
  margin: 4px 2px 11px; }
#kcore-root .kc-tm-h:not(:first-child) { margin-top: 22px; }

/* ── Tarjetas de persona ── */
#kcore-root .kc-pcards { display: grid; gap: 11px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
#kcore-root .kc-pcard { position: relative; background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); padding: 18px 14px 0; display: flex; flex-direction: column;
  align-items: center; text-align: center; }
#kcore-root .kc-pcard.kc-pout { background: #F7F7F5; box-shadow: none; }
#kcore-root .kc-pout .kc-pname, #kcore-root .kc-pout .kc-pcargo { color: var(--text-3); }
#kcore-root .kc-pflag { position: absolute; top: 10px; left: 11px; font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-3);
  background: #E9E9E3; padding: 3px 8px; border-radius: 20px; }
#kcore-root .kc-pdots { all: unset; box-sizing: border-box; position: absolute; top: 8px; right: 9px;
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer; display: grid; place-items: center;
  color: var(--text-3); font-size: 16px; line-height: 1; }
#kcore-root .kc-pdots:hover { background: var(--surface-3); color: var(--text-1); }
#kcore-root .kc-pdots:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* El anillo es la CARGA (rojo al tope, verde holgada), no la identidad: por eso
   su color sale del nivel. El de la persona vive en la dona y la leyenda. */
#kcore-root .kc-pring { width: 62px; height: 62px; border-radius: 50%; display: grid;
  place-items: center; flex: none; }
#kcore-root .kc-pring .kc-pav { width: 52px; height: 52px; font-size: 16px;
  border: 3px solid var(--surface); }
#kcore-root .kc-pout .kc-pring .kc-pav { border-color: #F7F7F5; }
#kcore-root .kc-pname { font-size: 13.5px; font-weight: 700; color: var(--text-1); margin-top: 11px;
  line-height: 1.3; }
#kcore-root .kc-pcargo { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
#kcore-root .kc-pstate { font-size: 12px; font-weight: 700; margin-top: 13px; padding: 11px 0 14px;
  border-top: 1px solid var(--border); width: 100%; }
#kcore-root .kc-ls-tope     { color: #C0392B; }
#kcore-root .kc-ls-ajustado { color: #B45309; }
#kcore-root .kc-ls-margen   { color: var(--text-2); }
#kcore-root .kc-ls-holgada  { color: #2C7F5C; }
#kcore-root .kc-ls-fuera    { color: var(--text-3); }

#kcore-root .kc-pnew { all: unset; box-sizing: border-box; cursor: pointer; border: 1.5px dashed #D5D5CE;
  border-radius: var(--r-lg); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; color: var(--text-3); font-size: 12.5px; font-weight: 600;
  font-family: inherit; min-height: 168px; transition: border-color .16s, color .16s; }
#kcore-root .kc-pnew:hover { border-color: var(--accent); color: var(--accent); }
#kcore-root .kc-pnew:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#kcore-root .kc-pnew-i { font-size: 20px; }

#kcore-root .kc-pmenu { position: absolute; top: 36px; right: 9px; z-index: 5; min-width: 178px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--sh); padding: 5px; display: flex; flex-direction: column; }
#kcore-root .kc-pmenu button { all: unset; box-sizing: border-box; cursor: pointer; padding: 9px 11px;
  border-radius: 8px; font-size: 12.5px; font-family: inherit; color: var(--text-1); text-align: left; }
#kcore-root .kc-pmenu button:hover { background: var(--surface-3); }
#kcore-root .kc-pmenu .kc-danger { color: #C0392B; }
#kcore-root .kc-pmenu .kc-danger:hover { background: #FDE5E3; }

/* ── Pestañas por persona ── */
#kcore-root .kc-ptabs { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
#kcore-root .kc-ptab { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex;
  align-items: center; gap: 7px; padding: 6px 12px 6px 7px; border-radius: 22px;
  background: var(--surface); box-shadow: var(--sh-sm); font-size: 12.5px; font-weight: 600;
  color: var(--text-2); font-family: inherit; transition: background .15s, color .15s; }
#kcore-root .kc-ptab:hover { color: var(--text-1); }
#kcore-root .kc-ptab.on { background: var(--ink); color: #fff; }
#kcore-root .kc-ptab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#kcore-root .kc-pn { font-size: 11px; font-weight: 700; background: #EFF1F5; color: var(--text-2);
  min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; }
#kcore-root .kc-ptab.on .kc-pn { background: var(--lime); color: var(--ink); }
#kcore-root .kc-pbody { background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); overflow: hidden; min-height: 128px; }

/* ── Dona de capacidad ── */
#kcore-root .kc-capweek { font-size: 12px; color: var(--text-3); padding: 14px 18px 0; }
#kcore-root .kc-dona { position: relative; padding: 6px 18px 0; }
#kcore-root .kc-dona svg { width: 100%; height: auto; display: block; }
#kcore-root .kc-dona-n { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; }
#kcore-root .kc-dona-n b { display: block; font-size: 34px; font-weight: 700; letter-spacing: -.03em;
  color: var(--text-1); line-height: 1; }
#kcore-root .kc-dona-n span { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 4px; }
#kcore-root .kc-capchip { display: block; width: fit-content; margin: 12px auto 0; font-size: 11.5px;
  font-weight: 700; padding: 5px 12px; border-radius: 20px; background: var(--surface-3); }
#kcore-root .kc-caplist { padding: 16px 18px 4px; }
#kcore-root .kc-capleg { display: flex; align-items: center; gap: 9px; padding: 7px 0;
  border-bottom: 1px solid #F5F5F2; }
#kcore-root .kc-capleg:last-child { border-bottom: 0; }
#kcore-root .kc-legdot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
#kcore-root .kc-legn { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kcore-root .kc-legv { font-size: 12px; color: var(--text-3); white-space: nowrap; }
/* La lectura en palabras: es lo que convierte el gráfico en una decisión. */
#kcore-root .kc-caplee { margin: 6px 18px 18px; padding: 12px 14px; background: var(--surface-3);
  border-radius: 12px; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
#kcore-root .kc-caplee b { color: var(--text-1); }

#kcore-root .kc-ausdate { font-size: 11.5px; color: var(--text-3); white-space: nowrap; flex: none; }

/* ── Modal de persona ── */
#kcore-root .kc-photorow { display: flex; align-items: center; gap: 12px; }
#kcore-root .kc-photorow .kc-pav { width: 46px; height: 46px; font-size: 15px; }
#kcore-root .kc-swatch { all: unset; box-sizing: border-box; cursor: pointer; width: 28px; height: 28px;
  border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--border); }
/* ⚠️ El tamaño grande es SOLO el de la ficha de Clientes. `.kc-swatch` lo
   comparte el selector de color de una persona (modal de Mi Equipo), y subirlo
   suelto se lo cambiaba también a ese, que nadie pidió. */
#kcore-root .kc-depgrid .kc-swatch { width: 34px; height: 34px; }
#kcore-root .kc-swatch.sel { border-color: var(--surface); box-shadow: 0 0 0 2px var(--accent); }
#kcore-root .kc-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#kcore-root .kc-hint { font-size: 11.5px; color: var(--text-3); margin-top: 8px; line-height: 1.45; }
/* La casilla del Pulso en el perfil. Scoped a #kc-prf a propósito: `.kc-chk`
   nace sin estilo base y la del formulario de brief ya está donde tiene que
   estar — darle un estilo global movería una pantalla que nadie pidió tocar. */
/* ⚠️ `text-transform` y `letter-spacing` en `none`/`0` a propósito: la regla de
   `.kc-fld label` está pensada para la MICRO-ETIQUETA de un campo (11px, en
   versalitas), y heredada aquí convertía la frase de la casilla en un rótulo
   gritado que no se leía como algo que se marca. Medido en el banco del perfil. */
#kcore-root #kc-prf .kc-chk { display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--text-1); margin-bottom: 0; }
#kcore-root #kc-prf .kc-chk input { flex: none; width: 16px; height: 16px; margin: 0;
  accent-color: var(--lime); cursor: pointer; }

/* El medidor SIEMPRE con su denominador al lado: "16 de 24 pasos", nunca un
   porcentaje suelto. Un número sin denominador no se puede discutir, y la gente
   planea la semana sobre él. */
#kcore-root .kc-cap { display: flex; align-items: center; gap: 10px; min-width: 0; }
#kcore-root .kc-capbar { flex: 1; min-width: 40px; max-width: 130px; height: 7px;
  background: #EAEAE4; border-radius: 4px; overflow: hidden; }
#kcore-root .kc-capbar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
#kcore-root .kc-capn { font-size: 11.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
#kcore-root .kc-capn.kc-late { color: #C0392B; }
/* Los colores dicen si CABE más trabajo, no qué tan bien lo hace la persona. */
#kcore-root .kc-lv-baja i     { background: #3AA377; }
#kcore-root .kc-lv-media i    { background: var(--accent); }
#kcore-root .kc-lv-alta i     { background: #E39412; }
#kcore-root .kc-lv-excedido i { background: #DC4B41; }
/* Cuánto se le descontó por ausencia, junto al nombre. */
#kcore-root .kc-away { font-size: 10.5px; font-weight: 700; color: #B45309;
  background: #FDF0DA; padding: 2px 7px; border-radius: 20px; white-space: nowrap; flex: none; }

#kcore-root .kc-caphint { font-size: 12px; color: var(--text-3); line-height: 1.5;
  padding: 12px 18px 10px; border-bottom: 1px solid #F5F5F2; }
#kcore-root .kc-caprow { display: flex; align-items: center; gap: 10px; padding: 9px 18px;
  border-bottom: 1px solid #F5F5F2; }
#kcore-root .kc-caprow .kc-td-mut { flex: 1; min-width: 0; }
#kcore-root .kc-capin { width: 62px; flex: none; border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 8px; font-family: inherit; font-size: 13px; font-weight: 600; text-align: center;
  color: var(--text-1); background: #F7F8FA; }
#kcore-root .kc-capin:focus { border-color: var(--accent); background: #fff; outline: none;
  box-shadow: 0 0 0 3px rgba(203,249,4,.12); }

#kcore-root .kc-ausit { display: flex; align-items: flex-start; gap: 10px; padding: 12px 18px;
  border-bottom: 1px solid #F5F5F2; }
#kcore-root .kc-ausit .kc-sdel { opacity: 1; margin-left: auto; }

/* ══ PLANTILLAS ══
   Maestro-detalle, el mismo patrón de la Bandeja: reusa .kc-md / .kc-md-list /
   .kc-md-detail y solo agrega lo propio. La fila de tipo NO reusa .kc-it a
   propósito: comparten aspecto pero no comportamiento, y el handler de .kc-it
   de la Bandeja se dispararía también aquí. */
/* Lista de plantillas (mockup de David): buscador + botón "+", y cada plantilla
   como fila-tarjeta con icono, nombre, "N pasos" y chevron. Activa = borde lima. */
#kcore-root .kc-tpl-search { display: flex; gap: 8px; align-items: center; }
#kcore-root .kc-tpl-search .kc-search { flex: 1; max-width: none; min-width: 0; }
#kcore-root .kc-tpl-plus { flex: none; width: 38px; padding: 0; font-size: 18px; }

#kcore-root .kc-tyit { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 10px 12px; cursor: pointer; border: 1.5px solid var(--border); border-radius: 12px;
  margin-bottom: 8px; transition: all .14s; font-family: inherit; }
#kcore-root .kc-tyit:hover { border-color: #DDE0E4; background: #FCFCFB; }
#kcore-root .kc-tyit.on { background: #FBFEEF; border-color: var(--lime); }
#kcore-root .kc-tyit:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#kcore-root .kc-tyic { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid;
  place-items: center; background: #EEF6D6; color: #7A9800; }
#kcore-root .kc-tyic svg { width: 18px; height: 18px; display: block; }
#kcore-root .kc-tyb { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
#kcore-root .kc-tyname { font-size: 13.5px; font-weight: 600; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kcore-root .kc-tymeta { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
#kcore-root .kc-tychev { flex: none; color: var(--text-3); display: grid; place-items: center; }
#kcore-root .kc-tychev svg { width: 16px; height: 16px; display: block; }

#kcore-root .kc-tpl { padding: 26px 32px 34px; max-width: 760px;
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
#kcore-root .kc-tplhead { display: flex; align-items: center; gap: 8px; }
#kcore-root .kc-tytitle { flex: 0 1 auto; min-width: 0; max-width: 100%; border: 1px solid transparent; border-radius: 8px;
  padding: 6px 9px; font-family: inherit; font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.02em;
  color: var(--text-1); background: transparent; }
#kcore-root .kc-tytitle:hover { background: var(--surface-3); }
#kcore-root .kc-tytitle:focus { background: #fff; border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px rgba(203,249,4,.12); }
#kcore-root .kc-tyedit { all: unset; box-sizing: border-box; cursor: pointer; flex: none; width: 30px; height: 30px;
  border-radius: 8px; display: grid; place-items: center; color: var(--text-3); }
#kcore-root .kc-tyedit svg { width: 16px; height: 16px; display: block; }
#kcore-root .kc-tyedit:hover { background: var(--surface-3); color: var(--text-1); }
#kcore-root .kc-tplhead .kc-b-red { margin-left: auto; }
#kcore-root .kc-tplsub { font-size: 12.5px; color: var(--text-2); line-height: 1.55;
  margin: 8px 2px 22px; max-width: 62ch; }
#kcore-root .kc-tplh3 { margin: 0 0 10px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--text-3); font-weight: 700; }

/* Paso como TARJETA con agarrador, número y acciones (mockup de David). El
   agarrador arrastra; se reordena con swaps sucesivos contra el endpoint que
   ya existe (ver el handler de drag). */
#kcore-root .kc-tplrow { display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin-bottom: 10px; }
#kcore-root .kc-tplrow.kc-dragging { opacity: .4; }
#kcore-root .kc-tplrow.kc-dragover { border-color: var(--lime); box-shadow: 0 0 0 2px rgba(203,249,4,.35); }
#kcore-root .kc-drag { cursor: grab; color: #C7C9CE; flex: none; display: grid; place-items: center; touch-action: none; }
#kcore-root .kc-drag:active { cursor: grabbing; }
#kcore-root .kc-drag svg { width: 16px; height: 16px; display: block; }
#kcore-root .kc-tplnum { width: 28px; height: 28px; border-radius: 50%; background: #EEF6D6; color: #5C7000;
  font-size: 13px; font-weight: 700; display: grid; place-items: center; flex: none; }
#kcore-root .kc-tplact { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; }
#kcore-root .kc-tplib { all: unset; box-sizing: border-box; cursor: pointer; width: 30px; height: 30px;
  border-radius: 8px; display: grid; place-items: center; color: var(--text-3); }
#kcore-root .kc-tplib svg { width: 15px; height: 15px; display: block; }
#kcore-root .kc-tplib:hover { background: var(--surface-3); color: var(--text-1); }
#kcore-root .kc-tplib.kc-danger:hover { background: #FDE5E3; color: #C0392B; }
#kcore-root .kc-tplempty { font-size: 13px; color: var(--text-3); line-height: 1.6;
  background: var(--surface-3); border-radius: 12px; padding: 15px 17px; max-width: 62ch; }
/* "Agregar paso" como caja punteada + la nota de arrastrar debajo. */
#kcore-root .kc-addbox { all: unset; box-sizing: border-box; cursor: pointer; display: flex;
  align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px;
  border: 1.5px dashed #D5D5CE; border-radius: 12px; font-size: 13px; font-weight: 600;
  color: var(--accent); font-family: inherit; transition: all .14s; }
#kcore-root .kc-addbox:hover { border-color: var(--accent); background: var(--tint); }
#kcore-root .kc-addbox:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#kcore-root .kc-tplfoot { display: flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 12px; color: var(--text-3); }
#kcore-root .kc-tplfoot svg { width: 15px; height: 15px; flex: none; }

/* ══ DEPARTAMENTOS ══
   Mismo maestro-detalle que Plantillas, y por eso las medidas se COPIAN de allá
   en vez de elegirse otra vez: son la misma pantalla con otro contenido, y dos
   juegos de medidas para lo mismo se separan en cuanto alguien toque uno.

   La fila NO reusa .kc-tyit por el mismo motivo por el que .kc-tyit no reusa
   .kc-it: comparten aspecto pero no handler, y [data-tysel] se dispararía aquí. */
/* ═══ LA FILA DE LA LISTA (diseño de David, 29 ago 2026) ═══
 *
 * Teja | nombre | cuántos solicitantes | chevron. Va en GRID y no en flex para
 * que las cuatro cosas caigan en la misma columna en todas las filas: es lo que
 * permite leer la cartera de arriba abajo, y lo que las tarjetas no daban.
 * `minmax(0,1fr)` en el nombre y nunca un `1fr` suelto (§5.c.1). */
#kcore-root .kc-depit { all: unset; box-sizing: border-box; display: grid;
  grid-template-columns: 56px minmax(0,1fr) auto 22px; align-items: center; gap: 0 22px;
  width: 100%; padding: 13px 0; cursor: pointer;
  border-bottom: 1px solid var(--line); transition: background .14s; font-family: inherit; }
#kcore-root .kc-depit:hover { background: var(--surface-2); }
#kcore-root .kc-depit:hover .kc-depchev { color: var(--text-2); }
#kcore-root .kc-depit.on { background: var(--tint); }
#kcore-root .kc-depit:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* La cabecera de columnas, con la misma rejilla que las filas: si se declarara
   aparte, «SOLICITANTES» dejaría de caer sobre su columna en cuanto alguien
   toque una medida. */
#kcore-root .kc-deplisth { display: grid;
  grid-template-columns: 56px minmax(0,1fr) auto 22px; gap: 0 22px;
  padding: 0 0 11px; border-bottom: 1px solid var(--line);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 600; color: var(--text-3); }
#kcore-root .kc-deplisth > :first-child { grid-column: 1 / 3; }
#kcore-root .kc-deplisth-r { text-align: right; }

#kcore-root .kc-depchev { display: flex; align-items: center; justify-content: flex-end;
  color: var(--text-3); transition: color .14s; }
#kcore-root .kc-depchev svg { width: 18px; height: 18px; display: block; fill: none; }

/* Ni la plantilla ni el hueco del modelo son un cliente: teja neutra, sin color
   de identidad, porque no tienen ninguna que mostrar. */
#kcore-root .kc-depic-neutro { background: var(--surface-3) !important; color: var(--text-2); }
#kcore-root .kc-depic-hueco { background: transparent !important; color: var(--text-3);
  border: 1px dashed var(--border); }
/* "Sin departamento" no es un departamento: se separa con una línea y va en
   itálica gris, el mismo recurso con el que "Mi trabajo" marca una fecha
   prestada. Es un grupo residual, y tiene que verse como tal. */
#kcore-root .kc-depit-loose { border-top: 1px solid var(--border); }
#kcore-root .kc-depit-loose .kc-depname { font-style: italic; color: var(--text-3); font-weight: 500; }
#kcore-root .kc-depname { font-size: 16px; font-weight: 600; color: var(--text-0);
  letter-spacing: -.01em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kcore-root .kc-depmeta { font-size: 13px; color: var(--text-3); white-space: nowrap; text-align: right; }
/* La última fila no cierra con línea: una lista que termina en un borde parece
   cortada a media cartera. */
#kcore-root .kc-depit:last-child { border-bottom: 0; }

/* El scroll va AQUÍ, no en el panel.
   `.kc-md-detail` es una columna flex en overflow:hidden, y la Bandeja funciona
   porque su cuerpo interno scrollea aparte. Un bloque suelto adentro no scrollea:
   se recorta y la gente de abajo queda inalcanzable, que es lo que pasaba con 22
   solicitantes. Es la misma regla del hito 4: cada panel lleva su contenedor.
   El overflow-x explícito es obligatorio (ver CLAUDE.md 5.c.2): al dejar de ser
   `visible` un eje, el otro computa a `auto` solo y pinta una barra parásita. */
/* ── Identidad del departamento: cajita de color con icono ──
   Es lo que sale en Reportes, en "De dónde viene el trabajo". */
/* Cabecera y pie que solo existen en papel. Ver @media print al final. */
#kcore-root .kc-prt-head, #kcore-root .kc-prt-foot { display: none; }

#kcore-root .kc-depic { width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; color: #fff; overflow: hidden; }
/* display:block quita el baseline del svg inline, que lo corría hacia arriba. */
#kcore-root .kc-depic svg { width: 17px; height: 17px; display: block; }
#kcore-root .kc-depic-sm { width: 26px; height: 26px; border-radius: 8px; }
#kcore-root .kc-depic-sm svg { width: 14px; height: 14px; }

/* El selector: los 20 iconos en rejilla y los colores debajo. Rejilla y no una
   fila con scroll, porque hay que poder verlos todos a la vez para elegir. */
#kcore-root .kc-idbox { background: var(--surface-3); border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 14px; max-width: 62ch; }
/* ⚠️ UNA fila (diseño de David), y con `repeat(20, …)` en vez de `flex-wrap`.
   Con flex y un ancho fijo por teja, la fila se parte en dos en cuanto la
   columna baja de 1.030px —o sea SIEMPRE a 1440, que es donde se trabaja— y
   elegir un icono pasa a leerse en zigzag. Con veinte pistas fluidas, las tejas
   se encogen y la fila sigue siendo una a cualquier ancho. */
#kcore-root .kc-icgrid { display: grid; grid-template-columns: repeat(20, minmax(0,1fr)); gap: 8px; }
#kcore-root .kc-icopt { all: unset; box-sizing: border-box; cursor: pointer; aspect-ratio: 1;
  border-radius: 9px; display: grid; place-items: center; background: var(--surface);
  border: 1px solid var(--border); color: var(--text-2); transition: all .14s; }
#kcore-root .kc-icopt svg { width: 19px; height: 19px; }
#kcore-root .kc-icopt:hover { border-color: var(--accent); color: var(--accent); }
#kcore-root .kc-icopt.sel { background: var(--ink); border-color: var(--ink); color: var(--lime); }
#kcore-root .kc-icopt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#kcore-root .kc-swrow { display: flex; gap: 7px; flex-wrap: wrap; }
#kcore-root .kc-depgrid .kc-swrow { gap: 12px; }

/* ═══ LA LISTA Y LA FICHA NO CONVIVEN (David, 29 ago 2026) ═══
 *
 * Sin nada abierto se ve la LISTA a todo lo ancho, en tarjetas; con un cliente
 * abierto se ve solo su FICHA. La razón es de espacio: la ficha tiene tres
 * pestañas, una tabla y un editor de brief con vista previa al lado, y con la
 * lista de 330px al lado todo eso quedaba apretado contra el borde.
 *
 * Se hace con `display:none` y no moviendo nodos: el estado lo decide una clase
 * en un solo sitio, y el media query de móvil (donde `.kc-md` ya apila) sigue
 * valiendo tal cual para los dos casos.
 */
/* ⚠️ La ficha de Clientes va sobre el CLARO, no sobre el gris de `--surface-3`
   (David, 29 ago 2026: «lo dejaste gris, la referencia es el color claro»). El
   gris es el fondo del panel de detalle del resto de secciones —Bandeja,
   Plantillas—, donde el contenido va en tarjetas que necesitan despegarse de
   algo. Aquí el contenido ES la hoja, así que un gris debajo la parte en dos.
   Se acota a esta sección para no tocar las demás. */
#kcore-root #kc-dep-md .kc-md-detail { background: var(--surface); }

/*
 * ⚠️⚠️ TODAS ESTAS REGLAS VAN ACOTADAS A `#kc-dep-md`, Y NO ES DEFENSIVO.
 *
 * `.kc-md` es la clase del maestro-detalle de TODA la Mesa: Bandeja,
 * Plantillas, Cerebro AI, Etapas del tablero y Clientes. Escritas sueltas
 * —como salieron la primera vez— la de abajo le escondía el panel de detalle a
 * las CINCO, porque ninguna salvo Clientes lleva `kc-md-solo`:
 *
 *     .kc-md:not(.kc-md-solo) .kc-md-detail { display: none }
 *
 * Resultado en producción: la Bandeja mostraba la lista de comentarios y al
 * tocar uno no aparecía NADA, con el riel de pestañas recortado por el
 * `width:100%` de al lado. Lo reportó David al subir los ZIP.
 *
 * Se me pasó porque solo miré la sección que estaba rediseñando. **Un cambio
 * sobre una clase compartida hay que verlo en TODOS sus usuarios**, y aquí eran
 * cuatro secciones a un clic de distancia.
 */
#kcore-root #kc-dep-md.kc-md-solo .kc-md-list { display: none; }
#kcore-root #kc-dep-md:not(.kc-md-solo) .kc-md-detail { display: none; }
#kcore-root #kc-dep-md:not(.kc-md-solo) .kc-md-list { width: 100%; border-right: 0; }

/* La lista a todo lo ancho. El padding lateral es el MISMO que el del título de
   la sección: en el diseño, «Clientes», el botón, el buscador y la primera teja
   arrancan todos en la misma vertical. */
#kcore-root #kc-dep-md:not(.kc-md-solo) .kc-md-scroll { padding: 4px 30px 30px; }
#kcore-root #kc-dep-md:not(.kc-md-solo) .kc-md-list > .kc-tabs-wrap { padding-left: 30px; padding-right: 30px; }
/* ⚠️ MARGEN y no padding: con padding, el BORDE de la caja de búsqueda arranca
   30px antes que el botón y la primera teja, y la columna deja de tener una
   sola vertical. Medido (x=251 contra x=281), no supuesto. */
#kcore-root #kc-dep-md:not(.kc-md-solo) .kc-depsearch {
  margin: 14px 30px 26px; max-width: 400px; }

/* ⚠️ SIN TOPE DE ANCHO. El `max-width: 1180px` cortaba la ficha antes del borde
   del panel en cualquier pantalla más ancha que eso, y como el scroll vive aquí,
   la BARRA se quedaba a media tarjeta en vez de pegada al borde — que es por
   donde David lo detectó. A 1440 no se notaba porque el panel mide 1.154 y el
   tope no llegaba a morder: el defecto solo existe en pantallas grandes, que es
   justo donde no se estaba mirando.
   El tope de lectura se pone en el CAMPO que lo necesita, no en el contenedor:
   así el ancho lo aprovechan la fila de iconos y la tabla, y el input de texto
   sigue teniendo una medida legible. */
#kcore-root .kc-depbox { padding: 26px 34px 40px;
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }

/* La flecha de volver a la lista, pegada al título. */
/* ⚠️ El margen negativo alinea el GLIFO, no la caja. El botón mide 34px con el
   icono centrado, así que con la caja a ras del contenido la flecha queda 8px
   adentro y toda la cabecera se lee corrida respecto a lo de abajo. Es el
   ajuste que pidió David: la flecha, la teja y el título arrancan en la misma
   vertical que «Información general» y los campos. */
#kcore-root .kc-depback { all: unset; box-sizing: border-box; flex: none; width: 34px; height: 34px;
  margin-left: -8px;
  display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm);
  cursor: pointer; color: var(--text-2); font-family: inherit; }
#kcore-root .kc-depback:hover { background: var(--surface-3); color: var(--text-0); }
#kcore-root .kc-depback:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#kcore-root .kc-depback svg { width: 19px; height: 19px; display: block; fill: none; }
#kcore-root .kc-dephead { display: flex; align-items: center; gap: 10px; }
/* El nombre ya no crece a todo lo ancho: así "Activo" queda pegado a él y el
   botón de borrar se va al extremo derecho, como en el mockup. */
#kcore-root .kc-dephead .kc-b-red { margin-left: auto; }
/* El nombre se edita en su sitio, igual que el del tipo. Sirve para el <input>
   del departamento y para el <h2> de "Sin departamento", que no se edita. */
#kcore-root .kc-deptitle { flex: 0 1 auto; min-width: 0; max-width: 100%; margin: 0; border: 1px solid transparent;
  border-radius: 8px; padding: 6px 9px; font-family: inherit; font-size: 20px; font-weight: 700;
  letter-spacing: -.02em; color: var(--text-1); background: transparent; }
#kcore-root input.kc-deptitle:hover { background: var(--surface-3); }
#kcore-root input.kc-deptitle:focus { background: #fff; border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px rgba(203,249,4,.12); }
#kcore-root input.kc-deptitle[disabled] { color: var(--text-2); }
#kcore-root input.kc-deptitle[disabled]:hover { background: transparent; }
#kcore-root .kc-depsub { font-size: 12.5px; color: var(--text-2); line-height: 1.55;
  margin: 8px 2px 22px; max-width: 62ch; }
#kcore-root .kc-deph3 { margin: 0 0 10px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--text-3); font-weight: 700; }

/* Fila de solicitante como TARJETA (mockup de David): avatar + nombre + badge de
   rol a la izquierda, correo a la derecha, y un menú ⋮ con las acciones. */
#kcore-root .kc-reqrow { position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); margin-bottom: 8px; }
#kcore-root .kc-reqname { display: flex; align-items: center; gap: 9px; flex: 0 1 auto; min-width: 0; }
#kcore-root .kc-reqname b { font-size: 13.5px; font-weight: 600; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kcore-root .kc-reqrole { font-size: 10.5px; font-weight: 700; color: #5B6370; background: #EEF0F2;
  border-radius: 999px; padding: 3px 10px; letter-spacing: .02em; flex: none; }
#kcore-root .kc-reqmail { font-size: 12.5px; color: var(--text-3); margin-left: auto; flex: 0 1 auto;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kcore-root .kc-reqdots { all: unset; box-sizing: border-box; cursor: pointer; flex: none;
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  color: var(--text-3); font-size: 18px; }
#kcore-root .kc-reqdots:hover { background: var(--surface-3); color: var(--text-1); }
#kcore-root .kc-reqdots:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Badge de estado del departamento en la cabecera del detalle. */
#kcore-root .kc-depbadge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: #EAF6EF; color: #1a7f37; letter-spacing: .02em; flex: none; }
#kcore-root .kc-depempty { font-size: 13px; color: var(--text-3); line-height: 1.6;
  background: var(--surface-3); border-radius: 12px; padding: 15px 17px; max-width: 62ch; }

/* ── RESPONSIVE (van al final, en orden ancho → angosto) ── */
@media (max-width: 1180px) {
  #kcore-root .kc-cal-wrap { grid-template-columns: minmax(0,1fr); }
  /* El contexto baja debajo de lo que hay que hacer, que es lo que se viene a
     ver. Mismo criterio que la conversación de la ficha.

     Apilado ya no cabe en el viewport, así que el scroll vuelve al body y los
     paneles recuperan su alto natural: dos scrolls anidados en una columna
     angosta es peor que uno solo. */
  #kcore-root #kc-p-mine .kc-body { display: block; overflow-y: auto; }
  /* Las cuatro tarjetas pasan a 2x2 cuando no caben en fila. */
  #kcore-root .kc-mw-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #kcore-root .kc-mw { grid-template-columns: minmax(0,1fr); }
  #kcore-root .kc-mw-side .kc-mpanel { flex: none; }
  #kcore-root .kc-mw-tablewrap, #kcore-root .kc-mpanel-b { overflow: visible; }
  /* Sin el scroll propio, un encabezado sticky se pega al borde de la pantalla
     y queda flotando sobre el resto de la página. */
  #kcore-root .kc-th { position: static; }
  /* Área es lo primero que sobra cuando falta ancho: se deduce de la tarea. */
  /* ⚠️ Una celda en display:none NO OCUPA PISTA.
     Aquí había una pista en 0 para "absorber" la columna escondida, y no
     funciona así: el elemento oculto sale de la maquetación y todas las celdas
     que van detrás se corren una pista a la izquierda. La que caía en el 0 no
     era la escondida, era LA FECHA DE ENTREGA, que desaparecía sin dejar rastro
     por debajo de 1180px en las tres pestañas de Mi trabajo.
     Se declaran tantas pistas como celdas VISIBLES quedan. */
  #kcore-root .kc-t-steps .kc-tr { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) 124px; }
  /* En angosto se esconde el Área (la 3ª), no la acción: el atajo es el motivo
     de la pestaña, y el área ya se ve al abrir la pieza. */
  #kcore-root .kc-t-plan  .kc-tr { grid-template-columns: minmax(0,1.3fr) 150px 124px 92px; }
  #kcore-root .kc-t-mine  .kc-tr { grid-template-columns: minmax(0,1.3fr) 150px 104px 124px; }
  #kcore-root .kc-t-steps .kc-tr > *:nth-child(3),
  #kcore-root .kc-t-plan  .kc-tr > *:nth-child(3),
  #kcore-root .kc-t-mine  .kc-tr > *:nth-child(4) { display: none; }
  /* La conversación baja debajo del contenido y deja de tener alto propio. */
  #kcore-root .kc-dr-body { grid-template-columns: minmax(0,1fr); overflow-y: auto; }
  #kcore-root .kc-dr-main { overflow: visible; }
  #kcore-root .kc-dr-conv { border-left: 0; border-top: 1px solid var(--border); }
  #kcore-root .kc-conv-s { overflow: visible; }
}
@media (max-width: 1024px) {
  #kcore-root .kc-md-list { width: 268px; }
}
@media (max-width: 900px) {
  /* En móvil el alto lo pone el contenido y la página scrollea. */
  #kcore-root { flex-direction: column; height: auto; overflow: visible; }
  body.kcore-mesa-page { overflow: auto !important; }

  /* ══ MENÚ INFERIOR TIPO APP (15 sep 2026, aprobado por David sobre maqueta) ══
     El sidebar NO se duplica: los MISMOS botones de .kc-nav se reordenan en una
     píldora oscura fija abajo. Así el manejador de navegación, los badges y los
     que se pintan o no según el plan (Reportes) siguen siendo uno solo.
     Píldora #1A1A1A como el sidebar, activo en pastilla lima, solo íconos, 5.5
     íconos a la vista para que el sexto asome y se note que se desliza. */
  #kcore-root .kc-side {
    position: fixed; left: 12px; right: 12px; z-index: 99990;
    /* En tablet (768 vertical) la píldora no se estira: se queda del tamaño de
       un teléfono y centrada. Con left+right fijos y un tope de ancho, los
       márgenes auto la centran. 380 = 5.5 íconos de ~67px. */
    max-width: 380px; margin-inline: auto;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: auto; height: 64px; padding: 6px; gap: 0; border-radius: 999px;
    flex-direction: row; align-items: stretch;
    background: rgba(26,26,26,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 12px 30px rgba(14,14,14,.28), 0 0 0 1px rgba(255,255,255,.06);
    overflow-x: auto; overflow-y: hidden;
    /* ⚠️ SIN scroll-snap, a propósito. Con el imán (mandatory o proximity), al
       llevar a la vista un ícono del final el navegador lo devolvía al punto de
       arranque más cercano y la pastilla activa quedaba cortada en el borde
       derecho (visto y medido en el inventario del 15 sep 2026). El scroll con
       inercia del teléfono basta. */
    /* ⚠️ scroll-padding igual al padding: sin él el imán del scroll alinea el
       primer ícono contra el BORDE de la píldora (no contra su relleno) y la
       pastilla lima queda pegada a la izquierda con 6px arriba y abajo. David
       lo vio: el espacio alrededor del activo tiene que ser igual en los 4 lados. */
    scroll-padding-inline: 6px;
    scrollbar-width: none; overscroll-behavior-x: contain;
    /* ⚠️ Sin máscara de desvanecido en los bordes, a propósito: la píldora ES
       el contenedor que scrollea y una máscara recorta también su sombra, que
       es lo que la despega del contenido claro. La pista de «hay más» la da el
       ícono que asoma a medias. */
  }
  #kcore-root .kc-side::-webkit-scrollbar { display: none; }
  #kcore-root .kc-side > .kc-logo, #kcore-root .kc-side-lbl, #kcore-root .kc-side-foot { display: none; }
  /* Los grupos (Operación, Inteligencia, Configuración) se disuelven para que
     todos los botones sean hijos directos de la píldora y `order` los pueda
     acomodar. ⚠️ `:not()` y no `> div` a secas: con la especificidad de
     `> div` le ganaría al `display:none` del logo y del pie. */
  #kcore-root .kc-side > div:not(.kc-logo):not(.kc-side-foot), #kcore-root .kc-nav { display: contents; }
  #kcore-root .kc-nav button {
    flex: 0 0 calc(100% / 5.5); height: 100%; padding: 0; gap: 0; border-radius: 999px;
    justify-content: center; position: relative; order: 20;
    font-size: 0; color: rgba(255,255,255,.62);
  }
  /* El orden aprobado: los cinco del día primero, luego lo que se desliza. */
  #kcore-root .kc-nav button[data-p="mine"]    { order: 1; }
  #kcore-root .kc-nav button[data-p="bandeja"] { order: 2; }
  #kcore-root .kc-nav button[data-p="tablero"] { order: 3; }
  #kcore-root .kc-nav button[data-p="cal"]     { order: 4; }
  #kcore-root .kc-nav button[data-p="equipo"]  { order: 5; }
  #kcore-root .kc-nav button[data-p="rep"]     { order: 6; }
  #kcore-root .kc-nav button[data-p="cerebro"] { order: 7; }
  #kcore-root .kc-nav button[data-p="deps"]    { order: 8; }
  #kcore-root .kc-nav button[data-p="tipos"]   { order: 9; }
  #kcore-root .kc-nav button[data-p="etapas"]  { order: 10; }
  #kcore-root .kc-nav button[data-p="perfil"]  { order: 11; }
  /* En táctil el :hover se queda pegado tras tocar: sin esto el último ícono
     tocado conserva el fondo gris aunque ya no esté activo. */
  #kcore-root .kc-nav button:not(.on):hover { background: transparent; color: rgba(255,255,255,.62); }
  #kcore-root .kc-nav button .kc-ic { width: 24px; height: 24px; opacity: 1; }
  #kcore-root .kc-nav button.on { background: var(--lime); color: var(--ink); }
  /* El nombre de la sección no se ve (font-size 0) pero sigue en el botón, así
     que un lector de pantalla lo anuncia igual. El badge repone su tamaño. */
  #kcore-root .kc-nav .kc-badge,
  #kcore-root .kc-nav button.on .kc-badge {
    position: absolute; top: 6px; left: calc(50% + 4px); margin: 0;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--red); color: #fff; font-size: 10.5px; font-weight: 600;
  }
  /* ⚠️ Hija DIRECTA: `.kc-card` la comparten las tarjetas de sección de la
     ficha, y sin el `>` todas se quedaban sin margen, sin esquinas y con 92px
     de relleno abajo. */
  #kcore-root > .kc-card { margin: 0; border-radius: 20px 20px 0 0;
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  #kcore-root .kc-head, #kcore-root .kc-body { padding-left: 18px; padding-right: 18px; }
  #kcore-root .kc-md { flex-direction: column; }
  #kcore-root .kc-md-list { width: 100%; max-height: 292px; border-right: 0; border-bottom: 1px solid var(--border); }
  #kcore-root .kc-dt { padding: 20px 18px 28px; }
  /* En móvil el sidebar es barra superior: la ficha ocupa la pantalla completa. */
  #kcore-root .kc-drawer { inset: 0; border-radius: 0; }
  /* La cabecera ya es de dos filas por marcado, así que aquí no hay estructura
     que cambiar: solo la tarjeta se parte por dentro, con las propiedades a lo
     ancho y la prioridad debajo. Sin esto la prioridad se queda con media
     pantalla y a los cinco datos les tocan 94px. */
  #kcore-root .kc-dr-mid { padding: 12px 14px; column-gap: 20px; row-gap: 12px; }
  #kcore-root .kc-dr-head { padding: 16px 18px 12px; }
  #kcore-root .kc-dr-main { padding: 18px; }
  #kcore-root .kc-board { grid-template-columns: repeat(5, minmax(190px, 1fr)) !important; }
}
@media (prefers-reduced-motion: reduce) {
  #kcore-root *, #kcore-root *::before, #kcore-root *::after { animation: none !important; transition: none !important; }
}

/* ══ El paso 2 del REEL: enlace + portada (BD v24, 11 ago 2026) ══
   Vive en el CSS de la Mesa y no en el compartido porque es del modal de
   curación, que el cliente no ve. */
#kcore-root .kc-cv-vid { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
#kcore-root .kc-cv-vlbl { font-size: 12px; font-weight: 600; color: var(--text-1); }
#kcore-root .kc-cv-vlbl i { font-weight: 400; color: var(--text-3); font-style: normal; }
#kcore-root .kc-cv-vid .kc-in { width: 100%; }

/* El aviso de compartir. Ámbar y no rojo: no hay nada roto, hay algo que el
   equipo tiene que hacer en Drive antes de que el cliente pueda ver el video. */
#kcore-root .kc-cv-vwarn { display: flex; gap: 8px; align-items: flex-start;
  margin: 2px 0 0; padding: 9px 11px; border-radius: 9px;
  border: 1px solid #F0DFA8; background: #FDF8EA;
  font-size: 11.5px; line-height: 1.45; color: #8A6D1F; }
#kcore-root .kc-cv-vwarn svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
#kcore-root .kc-cv-vwarn b { font-weight: 600; color: #6B5410; }

#kcore-root .kc-cv-vport { display: flex; flex-direction: column; gap: 8px; }

/* ══ VA AL FINAL A PROPÓSITO ══
   A igual especificidad gana la última regla del archivo, y varias de arriba
   declaran display. Sin esto, .kc-hidden no oculta nada. Es la misma razón por
   la que .dbch-hidden va re-declarada al final de dbch-dashboard.css. */
#kcore-root .kc-hidden, #kcore-root.kc-hidden { display: none !important; }

/* ══ PERFIL Y EMPRESA ══
   Dos columnas como Reportes, y el mismo contenedor de scroll: la sección se
   queda dentro del dashboard y scrollea lo suyo. */
#kcore-root #kc-p-perfil .kc-body { overflow: hidden; display: flex; flex-direction: column; }
#kcore-root .kc-prf { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0,1fr));
  align-content: start; flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden; padding-bottom: 8px; }
#kcore-root .kc-prf-wide { grid-column: 1 / -1; }
/* La tarjeta de suscripcion: solo lectura, con el plan y su estado. */
#kcore-root .kc-plancard { gap: 8px; }
#kcore-root .kc-planrow { display: flex; align-items: center; gap: 12px; }
#kcore-root .kc-planname { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--text-1); }
#kcore-root .kc-planbadge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  letter-spacing: .02em; }
#kcore-root .kc-planok { background: #EAF6EF; color: #1a7f37; }
#kcore-root .kc-planoff { background: #FDE5E3; color: #b32d2e; }
#kcore-root .kc-planmeta { font-size: 12.5px; color: var(--text-3); }
#kcore-root .kc-prfcard { background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); padding: 18px 20px 20px; min-width: 0;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
#kcore-root .kc-prfcard h2 { margin: 0; font-size: 11px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--text-3); font-weight: 700; }
#kcore-root .kc-prfcard .kc-fld { width: 100%; margin: 0; }
#kcore-root .kc-prfcard .kc-note { width: 100%; }

#kcore-root .kc-prfrow { display: flex; align-items: center; gap: 14px; width: 100%; }
#kcore-root .kc-prfrow-b { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#kcore-root .kc-b-row { display: flex; gap: 7px; flex-wrap: wrap; }
#kcore-root .kc-pav-lg { width: 56px; height: 56px; font-size: 17px; flex: none; }

/* La cajita del logo se ve como en el PORTAL del solicitante: fondo claro con
   borde, no el negro de la Mesa. Así el admin ve de una cómo le quedará a su
   gente. */
#kcore-root .kc-logobox { flex: none; width: 132px; height: 56px; border-radius: 10px;
  display: grid; place-items: center; padding: 8px; }
#kcore-root .kc-logobox img { max-width: 100%; max-height: 100%; object-fit: contain; }
#kcore-root .kc-logobox-light { background: #fff; border: 1px solid var(--border); }
#kcore-root .kc-logobox-empty { color: var(--text-3); font-size: 12px; font-weight: 600; }

/* ══ HOJA DE IMPRESIÓN · TAMAÑO CARTA ══
   Diseño de David. Se descarga con "guardar como PDF" del navegador, sin
   librerías (regla de la sección 6: sin Composer ni npm).

   Va DESPUÉS de .kc-hidden a propósito: aquí se muestran cosas que en pantalla
   están ocultas, y a igual especificidad gana la última.

   Se imprime SOLO Reportes. La Mesa entera saldría con el sidebar negro a
   página completa y la sección que estuviera abierta detrás. */
@page { size: letter; margin: 12mm; }

@media print {
  /* El alto lo pone el papel, no el viewport: la regla de "la página no
     scrollea" es de pantalla y aquí recorta todo en la primera hoja. */
  html, body, body.kcore-mesa-page { height: auto !important; overflow: visible !important;
    background: #fff !important; margin: 0 !important; padding: 0 !important; }
  #kcore-root { display: block !important; height: auto !important; overflow: visible !important;
    background: #fff !important; width: 100% !important; }

  /* Fuera lo que no es el informe. Los botones de rango SÍ se quedan: dicen qué
     periodo se está mirando, que en papel es dato y no control. */
  /* La identidad + campana es un CONTROL de pantalla, no dato: en papel sería
     el nombre de quien mandó a imprimir dentro del informe que se le muestra al
     cliente. Se va, igual que el botón de Descargar. */
  #kcore-root .kc-side, #kcore-root .kc-toast, #kcore-root .kc-ov,
  #kcore-root .kc-modal, #kcore-root .kc-drawer, #kcore-root #kc-rp-print,
  #kcore-root .kc-topright, #kcore-root .kc-bell-panel {
    display: none !important; }
  #kcore-root .kc-pane:not(#kc-p-rep) { display: none !important; }

  #kcore-root .kc-card { margin: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; display: block !important; overflow: visible !important; }
  #kcore-root .kc-pane#kc-p-rep { display: block !important; overflow: visible !important; }
  #kcore-root .kc-body { padding: 0 !important; overflow: visible !important; display: block !important; }

  /* El logo en su caja negra, arriba a la izquierda, como en el diseño. */
  /* En el diseño la caja del logo sangra hasta la esquina del papel. NO se hace
     con márgenes negativos: eso la mete en el margen de @page, y ahí los
     navegadores la recortan o la tiran según cuál sea. Un logo cortado es peor
     que un logo a 12mm del borde, así que se queda en el origen del contenido
     con la misma esquina redondeada. */
  #kcore-root .kc-prt-head { display: block !important; margin: 0 0 4mm; }
  #kcore-root .kc-prt-logo { display: inline-flex; align-items: center; justify-content: center;
    background: #1A1A1A; border-radius: 3mm 3mm 5mm 3mm; padding: 4mm 7mm; }
  #kcore-root .kc-prt-logo img { height: 8mm; width: auto; }

  #kcore-root .kc-head { padding: 0 0 4mm !important; border: 0 !important;
    background: transparent !important; }
  #kcore-root .kc-head h1 { font-size: 21pt; }
  #kcore-root .kc-head p { font-size: 9pt; }
  /* El riel de pestañas se congela: sin hover ni foco, solo el que está activo. */
  #kcore-root #kc-rp-range .kc-tab { font-size: 8.5pt; padding: 2mm 4mm; }

  /* DOS columnas, como el diseño. La rejilla de pantalla ya es de dos, así que
     solo hay que quitarle el scroll propio y dejar que crezca.
     Las medidas de aquí abajo están apretadas a propósito: el informe TIENE que
     caber en UNA hoja carta. Con las de pantalla se pasaba por unos 25px y, con
     break-inside:avoid, la tarjeta de "De dónde viene el trabajo" se iba entera
     a una segunda página casi vacía. */
  #kcore-root .kc-rp { display: grid !important; overflow: visible !important;
    height: auto !important; flex: none !important; padding-bottom: 0 !important;
    gap: 4mm !important; }
  #kcore-root .kc-rpcard { border: 1px solid #E3E3DE; box-shadow: none !important;
    padding: 4mm 5mm; border-radius: 4mm;
    /* Ninguna tarjeta se parte entre dos hojas: media frase de lectura al pie
       de la página es peor que un hueco. */
    break-inside: avoid; page-break-inside: avoid; }
  #kcore-root .kc-rpcard h2 { font-size: 7.5pt; margin-bottom: 3mm; }

  /* Los colores AQUÍ son el dato, no decoración: sin esto el navegador los
     quita y las dos series del gráfico salen del mismo gris. */
  #kcore-root .kc-split-bar i, #kcore-root .kc-vbars i, #kcore-root .kc-areabar i,
  #kcore-root .kc-depic, #kcore-root .kc-rpicon, #kcore-root .kc-splitleg i,
  #kcore-root .kc-rplee, #kcore-root .kc-prt-logo, #kcore-root .kc-tab.on,
  #kcore-root .kc-tabs {
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  #kcore-root .kc-vwrap { height: 36mm; }
  /* El tooltip de hover no existe en papel. */
  #kcore-root .kc-vcol::after { display: none !important; }

  /* El pie, con el periodo y la fecha de generación. */
  #kcore-root .kc-prt-foot { display: flex !important; justify-content: space-between;
    gap: 8mm; margin-top: 4mm; padding-top: 3mm; border-top: 1px solid #E3E3DE;
    font-size: 8pt; color: #6B7280; break-inside: avoid; page-break-inside: avoid; }
}

/* Botón para activar el push del equipo, dentro del panel de la campana. Clase
   nueva al FINAL del archivo (convención 5.c.5): a igual especificidad gana la
   última. Usa el tinte de chip seleccionado del portal (--accent-dim + #4A5D00). */
#kcore-root .kc-bell-push {
  display: block; width: calc(100% - 24px); margin: 8px 12px 4px;
  padding: 9px 12px; border: 1px solid var(--accent);
  background: var(--accent-dim); color: #4A5D00;
  font-size: 12.5px; font-weight: 600; border-radius: 8px;
  cursor: pointer; text-align: center; transition: background .15s ease;
}
#kcore-root .kc-bell-push:hover { background: rgba(203,249,4,.28); }

/* Logo de la empresa dentro del avatar del pie del sidebar: llena el círculo. */
#kcore-root .kc-av-logo { padding: 0; overflow: hidden; }
#kcore-root .kc-av-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* Foto de perfil del departamento (Configuración → Departamentos). */
#kcore-root .kc-depfotobox { display: flex; flex-direction: column; align-items: flex-start;
  gap: 14px; margin: 4px 0 2px; }
#kcore-root .kc-depfoto { width: 132px; height: 132px; border-radius: 18px; overflow: hidden; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; background: var(--surface-3); }
#kcore-root .kc-depfoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sin foto se pinta el ICONO a tamaño completo, no una miniatura perdida en una
   caja de 132px: es la misma teja que el cliente ve como su marca. */
#kcore-root .kc-depfoto-none { background: transparent; }
#kcore-root .kc-depfoto-none .kc-depic { width: 100%; height: 100%; border-radius: 18px; }
#kcore-root .kc-depfoto-none .kc-depic svg { width: 56px; height: 56px; }
#kcore-root .kc-depfotoacts { display: flex; gap: 8px; flex-wrap: wrap; }
/* Astra le mete su padding a todo `button`, así que el icono declara el suyo. */
#kcore-root .kc-depfotoacts .kc-b svg { width: 14px; height: 14px; display: block;
  fill: none; flex-shrink: 0; margin-right: 6px; }
#kcore-root .kc-depfotoacts .kc-b { display: inline-flex; align-items: center; }
#kcore-root .kc-depfotohint { font-size: 12px; color: #6B7280; margin: 2px 0 10px; }

/* Menú de usuario en la Mesa: la foto de arriba a la derecha abre Perfil / Cerrar sesión. */
#kcore-root .kc-me { position: relative; }
#kcore-root .kc-me-btn { background: none; border: 0; margin: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
#kcore-root .kc-av-photo { padding: 0; overflow: hidden; }
#kcore-root .kc-av-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
#kcore-root .kc-me-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 184px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--sh);
  padding: 6px; display: flex; flex-direction: column; gap: 2px; }
#kcore-root .kc-me-item { display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 9px 11px; border-radius: 7px; font-size: 13px; color: var(--text-1); cursor: pointer; text-decoration: none; }
#kcore-root .kc-me-item:hover { background: var(--surface-3); }
#kcore-root .kc-me-logout { color: #C0392B; }

/* Selector de cliente del Tablero: tablero general (Todos) o por departamento. */
#kcore-root .kc-bdept { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text-1); font-size: 12.5px; font-weight: 500;
  cursor: pointer; max-width: 240px; }
#kcore-root .kc-bdept:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(203,249,4,.12); }

/* Pestañas de vista del Tablero (Sprint semanal / Solicitudes / Entregables).
   Diseño de David (mockup Vista-Tablero): SIN riel gris; la activa es una pastilla
   blanca con borde lima, las demás en texto. */
#kcore-root .kc-vtabs { margin-bottom: 16px; background: transparent; padding: 0; gap: 8px; }
#kcore-root .kc-vtabs .kc-tab { color: var(--text-2); padding: 9px 18px; }
#kcore-root .kc-vtabs .kc-tab:hover { color: var(--text-1); }
#kcore-root .kc-vtabs .kc-tab.on { background: #fff; color: var(--text-1); font-weight: 700;
  border: 1.5px solid var(--lime); box-shadow: 0 2px 8px rgba(0,0,0,.06); }

/* Vista ENTREGABLES: lista plana, no kanban. */
#kcore-root .kc-deliv { display: flex; flex-direction: column; gap: 8px; }
#kcore-root .kc-dvrow { display: flex; align-items: center; gap: 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; }
#kcore-root .kc-dvmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
#kcore-root .kc-dvtitle { font-size: 14px; font-weight: 600; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kcore-root .kc-dvmeta { font-size: 12px; color: var(--text-2); }
#kcore-root .kc-dvstars { font-size: 14px; color: #E39412; letter-spacing: 1px; flex: none; }
#kcore-root .kc-dvnorate { font-size: 12px; color: var(--text-3); letter-spacing: normal; }
#kcore-root .kc-dvnolink { font-size: 12px; color: var(--text-3); flex: none; }

/* Foto del departamento dentro de su cajita (Reportes, etc.): llena el cuadro. */
#kcore-root .kc-depphoto { padding: 0; overflow: hidden; background: var(--surface-3); }
#kcore-root .kc-depphoto img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* ── Ficha: entregable clicable y descripción editable (27 jul 2026) ──────────
   Aquí vivían `.kc-dlv` / `.kc-dlv-go` (el entregable con su input siempre
   abierto) y un SEGUNDO `.kc-desc-ed` que pintaba la descripción como un campo
   permanente sin borde. Los dos se fueron con el rediseño del 11 ago 2026: el
   entregable es ahora una celda de `.kc-props` y la descripción se lee como
   párrafo hasta que se toca el lápiz.

   ⚠️ El `.kc-desc-ed` de arriba (en el bloque «Qué pidió») es el bueno. Este
   estaba MÁS ABAJO en el archivo, así que ganaba por cascada y le devolvía al
   textarea el fondo transparente y el margen negativo del diseño viejo. */

/* ── Chevron de los <select> ──────────────────────────────────────────────────
   `appearance: none` (que hace falta para que iOS respete el ancho) se lleva la
   flecha nativa, así que se dibuja. Va en background-image, y por eso las reglas
   de hover/focus de arriba usan `background-color` y no el atajo `background`:
   el atajo la borraría justo al interactuar.

   El SVG va embebido y no como archivo: son 200 bytes contra una petición más,
   y el color tiene que salir del mismo gris del resto de la interfaz. */
/* ⚠️ `.kc-pc-e` y no `.kc-pv2`: la franja de propiedades cambió de clases el 11
   ago 2026 y esta regla se quedó apuntando a la vieja. Un `<select>` con
   `appearance:none` y SIN esta imagen no muestra ninguna flecha, así que el
   responsable y el solicitante se veían como texto plano que no parecía
   desplegable. Es la trampa de siempre: la regla que enumera contextos no falla
   cuando uno se renombra, simplemente deja de aplicar. */
#kcore-root .kc-pc-e select,
#kcore-root .kc-fld select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1.5L5 5l4-3.5' stroke='%238A8A85' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  cursor: pointer;
}
#kcore-root .kc-pc-e select { padding-right: 28px; background-position: right 10px center; }
#kcore-root .kc-fld select { padding-right: 34px; background-position: right 13px center; }

/* ═══ CEREBRO AI ═══════════════════════════════════════════════════════════
   Tres columnas: ámbitos · documentos · la hoja. Las medidas de las tarjetas
   salen de `.dbcha-nt-*` del Admin Portal (el componente de notas ya existente),
   no se inventan: es el mismo control y tiene que verse igual (CLAUDE.md §3.b).

   Cada columna scrollea LO SUYO y el contenedor va en overflow:hidden. Es la
   regla que ya nos mordió tres veces: un bloque suelto dentro de un panel
   recortado deja la mitad de la lista inalcanzable. */
#kcore-root .kc-ai-md { overflow: hidden; }
#kcore-root .kc-ai-md > .kc-md-list { width: 232px; }

/* Columna 1 · ámbitos */
#kcore-root .kc-aisc { display: flex; align-items: center; gap: 8px; width: 100%;
  border: none; background: transparent; text-align: left; cursor: pointer;
  padding: 9px 11px; border-radius: 8px; font-family: inherit; font-size: 13px;
  color: var(--text-1); transition: background .14s; }
#kcore-root .kc-aisc:hover { background: rgba(0,0,0,.04); }
#kcore-root .kc-aisc.on { background: var(--accent-dim); font-weight: 600; }
#kcore-root .kc-aisc-n { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
#kcore-root .kc-aisc-c { flex: none; font-size: 11px; font-weight: 600; color: var(--text-3);
  background: var(--surface-3); border-radius: 20px; padding: 1px 7px; }
#kcore-root .kc-aisc.on .kc-aisc-c { background: #FFFFFF; color: #4A5D00; }
/* La empresa se separa de los departamentos: son niveles distintos, no hermanos. */
#kcore-root .kc-aisc-co { font-weight: 600; }
#kcore-root .kc-aisc-co + .kc-aisc { margin-top: 10px; padding-top: 14px;
  border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; }

/* Columna 2 · documentos, como mini archivos */
#kcore-root .kc-ai-docs { width: 268px; flex: none; background: var(--surface);
  border-right: 1px solid var(--border); overflow-y: auto; overflow-x: hidden; min-height: 0; }
#kcore-root .kc-ai-docs-in { padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; }
#kcore-root .kc-ai-hint { font-size: 11.5px; line-height: 1.5; color: var(--text-2);
  background: var(--surface-3); border-radius: 9px; padding: 9px 11px; margin-bottom: 6px; }
/* En agencia, el ámbito de la empresa avisa fuerte: lo que se escriba ahí le
   llega al Advisor de TODOS los clientes. Es el error fácil de cometer. */
#kcore-root .kc-ai-hint-warn { background: #FFFBEB; color: #854F0B; }

#kcore-root .kc-aidoc { display: flex; flex-direction: column; gap: 3px; width: 100%;
  border: 1px solid var(--border); background: #FFFFFF; text-align: left; cursor: pointer;
  padding: 11px 12px; border-radius: 10px; font-family: inherit; transition: all .14s; }
#kcore-root .kc-aidoc:hover { border-color: #D8DAD2; box-shadow: var(--sh-sm); }
#kcore-root .kc-aidoc.on { border-color: var(--accent); background: #FCFFF2;
  box-shadow: 0 0 0 3px rgba(203,249,4,.14); }
#kcore-root .kc-aidoc-k { align-self: flex-start; font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 20px; }
#kcore-root .kc-aidoc-k-brand     { background: #EEEDFE; color: #3C3489; }
#kcore-root .kc-aidoc-k-knowledge { background: #E7F3EE; color: #0F6E56; }
#kcore-root .kc-aidoc-t { font-size: 13px; font-weight: 600; color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#kcore-root .kc-aidoc-m { font-size: 11px; color: var(--text-3); }

/* Columna 3 · la HOJA. Pedido de David: que se vea como un documento creado. */
#kcore-root .kc-ai-empty { flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 13px; font-style: italic; padding: 30px; text-align: center; }
#kcore-root .kc-sheet-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0;
  background: var(--surface-3); }
#kcore-root .kc-sheet-bar { display: flex; align-items: center; gap: 10px; flex: none;
  padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface); }
#kcore-root .kc-sheet-state { margin-left: auto; font-size: 11px; color: var(--text-3); }
#kcore-root .kc-sheet-del { border: none; background: transparent; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 5px 7px; border-radius: 7px; opacity: .55; }
#kcore-root .kc-sheet-del:hover { opacity: 1; background: #FDECEC; }

/* Barra de formato mínimo: negrita, cursiva, título, lista. */
#kcore-root .kc-fmt { display: inline-flex; gap: 2px; background: var(--surface-3);
  border-radius: 8px; padding: 3px; }
#kcore-root .kc-fmt button { border: none; background: transparent; cursor: pointer;
  width: 26px; height: 24px; border-radius: 6px; font-family: inherit; font-size: 12.5px;
  color: var(--text-2); transition: all .14s; }
#kcore-root .kc-fmt button:hover { background: #FFFFFF; color: var(--text-1); box-shadow: var(--sh-sm); }

/* La hoja: fondo gris, papel blanco centrado con márgenes de documento. */
#kcore-root .kc-sheet { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 22px 22px 40px; }
#kcore-root .kc-sheet > * { display: block; width: 100%; max-width: 720px; margin: 0 auto;
  background: #FFFFFF; border: none; font-family: inherit; color: var(--text-1); }
#kcore-root .kc-sheet-title { font-size: var(--fs-lg); font-weight: 700; line-height: 1.3;
  padding: 26px 34px 10px; border-radius: 14px 14px 0 0; box-shadow: var(--sh-sm); }
#kcore-root .kc-sheet-title:focus { outline: none; }
#kcore-root .kc-sheet-body { min-height: 420px; resize: none; font-size: 14px; line-height: 1.75;
  padding: 0 34px 34px; border-radius: 0 0 14px 14px; box-shadow: var(--sh-sm);
  white-space: pre-wrap; }
#kcore-root .kc-sheet-body:focus { outline: none; }

@media (max-width: 1180px) {
  /* Apilado: la hoja es lo que importa, así que las dos listas se acortan.
     ⚠️ Y el apilado SCROLLEA. Con `overflow: visible` dentro de `.kc-body`
     —que es `overflow: hidden`— el editor quedaba debajo del borde y no había
     forma de llegar a él: David lo reportó desde el iPad en horizontal como
     «entro a un doc y ni siquiera se ve algo». Con siete clientes, la lista y
     los documentos se comen el alto y la hoja cae fuera de la pantalla. */
  #kcore-root .kc-ai-md { flex-direction: column; overflow-y: auto; overflow-x: hidden;
    min-height: 0; }
  /* 190px eran exactamente cinco clientes, así que el quinto quedaba justo en
     el borde y se leía como cortado — David lo vio con sus cinco reales en el
     iPad. Con 260 caben seis y el corte, cuando llega, cae a mitad de una fila,
     que es lo que dice «esto sigue». */
  #kcore-root .kc-ai-md > .kc-md-list { width: 100%; max-height: 260px; }
  #kcore-root .kc-ai-docs { width: 100%; max-height: 250px; border-right: 0;
    border-bottom: 1px solid var(--border); }
  #kcore-root .kc-sheet { padding: 14px 12px 30px; }
  #kcore-root .kc-sheet-title { padding: 20px 22px 8px; }
  #kcore-root .kc-sheet-body { padding: 0 22px 22px; min-height: 300px; }
}

/* ═══ BASE DE TODOS LOS <select> DE LA MESA ════════════════════════════════
   Va al FINAL y sin id para que cualquier contexto (.kc-pc-e, .kc-fld) la refine
   con su especificidad mayor, pero NINGÚN select nuevo vuelva a salir con la
   apariencia nativa del navegador.

   Es la tercera vez que muerde: primero el de solicitante en la ficha, después
   el de departamento del modal, ahora el de tipo de documento. El patrón que
   falla siempre es el mismo — reglas que enumeran DÓNDE está el campo en vez de
   dar una base a todos. Esta es la base. */
#kcore-root select {
  font-family: inherit; font-size: 13px; color: var(--text-1);
  border: 1px solid #E5E7EB; border-radius: 8px; padding: 6px 26px 6px 9px;
  background-color: var(--surface-3); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1.5L5 5l4-3.5' stroke='%238A8A85' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
#kcore-root select:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(203,249,4,.14); }

/* Hoja en modo LECTURA: el markdown ya renderizado. Las medidas siguen a
   `.kc-sec p` (13.5px / 1.65) para que leer un documento se sienta como leer
   cualquier otro texto largo del producto. */
#kcore-root .kc-sheet-ro { cursor: default; }
#kcore-root .kc-sheet-md { padding: 4px 34px 34px; font-size: 14px; line-height: 1.75; }
#kcore-root .kc-sheet-md h2 { font-size: 15.5px; font-weight: 700; margin: 22px 0 8px; color: var(--text-1); }
#kcore-root .kc-sheet-md h3 { font-size: 14px; font-weight: 700; margin: 18px 0 6px; color: var(--text-1); }
#kcore-root .kc-sheet-md h4 { font-size: 13.5px; font-weight: 600; margin: 15px 0 5px; color: var(--text-2); }
#kcore-root .kc-sheet-md h2:first-child, #kcore-root .kc-sheet-md h3:first-child { margin-top: 4px; }
#kcore-root .kc-sheet-md p { margin: 0 0 12px; }
#kcore-root .kc-sheet-md ul { margin: 0 0 12px; padding-left: 20px; }
#kcore-root .kc-sheet-md li { margin-bottom: 4px; }
#kcore-root .kc-sheet-md b { font-weight: 700; color: var(--text-1); }
#kcore-root .kc-sheet-ph { color: var(--text-3); font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════
   ADJUNTOS EN EL CHAT (v1.0.6)

   Va al final del archivo a propósito: `.kc-conv-b` se redeclara aquí para
   pasar de fila a COLUMNA, y a igual especificidad gana la última regla. Es el
   mismo motivo por el que `.kc-hidden` vive donde vive (CLAUDE.md 5.c.5).
   ═══════════════════════════════════════════════════════════════════════ */

/* El compositor pasa a columna: arriba los elegidos, abajo la fila de siempre.
   `.kc-mentions` es position:absolute, así que este cambio no la mueve. */
#kcore-root .kc-conv-b { flex-direction: column; align-items: stretch; gap: 8px; }

/* La fila interna conserva el estilado de `.kc-chat-bar` (textarea y botón
   redondo) pero le devuelve el padding y el borde al contenedor de afuera. */
#kcore-root .kc-cbar { padding: 0; border-top: 0; background: transparent; }

/* Clip: mismo tamaño que el botón de enviar, pero neutro. El acento lima se
   reserva para la acción principal, que es enviar. */
#kcore-root .kc-clip { all: unset; box-sizing: border-box; width: 38px; height: 38px; flex: none;
  border-radius: 50%; color: var(--text-3); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; padding: 0; transition: all .14s; }
#kcore-root .kc-clip svg { width: 18px; height: 18px; }
#kcore-root .kc-clip:hover { background: var(--surface-3); color: var(--text-1); }
#kcore-root .kc-clip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Elegidos y sin enviar ── */
#kcore-root .kc-cfiles { display: flex; flex-wrap: wrap; gap: 6px; }
/* El aviso de que esto lo va a ver el solicitante (16 sep 2026). `flex-basis:100%`
   lo pone en su propia línea ENCIMA de las miniaturas, no colgando al lado de la
   primera: el orden de lectura tiene que ser «esto lo verá X» y después qué se
   manda, o se lee al revés. */
#kcore-root .kc-cf-w { flex: 0 0 100%; display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: #B45309; }  /* `--amber` a secas da ~2:1 sobre el blanco del compositor; este tono pasa AA */
#kcore-root .kc-cf-w::before { content: "👁"; font-size: 12px; }
#kcore-root .kc-cf { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 5px;
  background: var(--surface-3); border-radius: 9px; font-size: 12px; max-width: 100%; }
#kcore-root .kc-cf-t { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; flex: none; }
#kcore-root .kc-cf-x { width: 26px; height: 26px; border-radius: 6px; background: #fff; flex: none;
  display: grid; place-items: center; font-size: 8.5px; font-weight: 800; color: var(--text-2);
  text-transform: uppercase; }
#kcore-root .kc-cf-n { min-width: 0; max-width: 150px; font-weight: 600; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kcore-root .kc-cf-d { all: unset; box-sizing: border-box; cursor: pointer; width: 20px; height: 20px;
  border-radius: 6px; display: grid; place-items: center; color: var(--text-3); font-size: 14px;
  flex: none; padding: 0; transition: all .14s; }
#kcore-root .kc-cf-d:hover { background: #FDE5E3; color: #C0392B; }
#kcore-root .kc-cf-d:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── Ya enviados, dentro de la burbuja ── */
#kcore-root .kc-attg { display: flex; flex-direction: column; gap: 5px; margin-top: 5px; }
#kcore-root .kc-mine .kc-attg { align-items: flex-end; }

#kcore-root .kc-att { all: unset; box-sizing: border-box; cursor: pointer; display: flex;
  align-items: center; gap: 9px; padding: 7px 10px; border-radius: 10px; background: #fff;
  border: 1px solid var(--border); font-size: 12.5px; font-family: inherit; max-width: 260px;
  transition: all .14s; }
#kcore-root .kc-att:hover { border-color: #D9D9D2; box-shadow: var(--sh-sm); }
#kcore-root .kc-att:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#kcore-root .kc-att-x { width: 27px; height: 27px; border-radius: 7px; background: var(--surface-3);
  display: grid; place-items: center; font-size: 8.5px; font-weight: 800; color: var(--text-2);
  flex: none; text-transform: uppercase; }
#kcore-root .kc-att-b { min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; }
#kcore-root .kc-att-n { font-weight: 600; color: var(--text-1); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
#kcore-root .kc-att-m { font-size: 11px; color: var(--text-3); }

/* Audio: se escucha en la burbuja (ajuste #4, 16 ago 2026).
   Es la MISMA ficha que las demás —fondo blanco, borde, radio 10— pero en
   columna y sin `cursor: pointer`: aquí no se toca para abrir nada, los
   controles del `<audio>` son el objeto. Y por eso NO reusa `.kc-att`, que es
   un botón: heredar de ahí le pondría el cursor de mano a un reproductor y
   prometería un clic que no lleva a ninguna parte. */
#kcore-root .kc-atta { display: flex; flex-direction: column; gap: 5px;
  padding: 8px 10px; border-radius: 10px; background: #fff;
  border: 1px solid var(--border); max-width: 300px; box-sizing: border-box; }
/* `width: 100%` con el padding del contenedor: sin `box-sizing` heredado, el
   control nativo se sale de su ficha. Es la trampa 5 del §5.c, de la que el
   reset global protege salvo donde alguien haya usado `all: unset`. */
#kcore-root .kc-atta audio { width: 100%; height: 34px; display: block; }
#kcore-root .kc-atta-n { font-size: 11px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* La miniatura es el adjunto: sin ficha ni borde, la imagen habla sola. */
#kcore-root .kc-atti { padding: 0; border: 0; background: transparent; max-width: 220px; }
#kcore-root .kc-atti:hover { box-shadow: none; }
#kcore-root .kc-atti img { display: block; max-width: 100%; max-height: 200px; width: auto;
  border-radius: 10px; object-fit: cover; }

/* ── Visor ──
   ⚠️ z-index 100020, y el número NO es decorativo.

   La primera versión iba en 60 y el visor se abría DETRÁS de la ficha, o sea
   invisible justo donde se usa. Lo reportó David de inmediato. La escala de esta
   hoja no empieza donde uno supone: la ficha es 100001, su fondo 100000, el
   modal 100011 y el aviso flotante 100002. Un 60 no gana a nada de eso.

   El visor se abre DESDE la ficha, así que tiene que ganarle a la ficha; y va
   por encima del modal también, porque nada de lo que hay debajo sirve mientras
   se está mirando un archivo a pantalla completa.

   La lección para la próxima capa flotante: en este archivo hay que MIRAR los
   z-index que ya existen antes de elegir uno. */
#kcore-root .kc-lb { position: fixed; inset: 0; z-index: 100020; background: rgba(13,17,23,.82);
  display: flex; flex-direction: column; padding: 28px; gap: 12px; }
#kcore-root .kc-lb-h { display: flex; align-items: center; gap: 14px; flex: none; color: #fff; }
#kcore-root .kc-lb-n { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kcore-root .kc-lb-o { color: var(--lime); text-decoration: none; font-size: 12.5px; font-weight: 600; flex: none; }
#kcore-root .kc-lb-c { all: unset; box-sizing: border-box; cursor: pointer; width: 34px; height: 34px;
  border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 22px; flex: none;
  padding: 0; transition: background .14s; }
#kcore-root .kc-lb-c:hover { background: rgba(255,255,255,.14); }
#kcore-root .kc-lb-c:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
#kcore-root .kc-lb-b { flex: 1; min-height: 0; display: flex; align-items: center;
  justify-content: center; overflow: hidden; }
#kcore-root .kc-lb-b img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
#kcore-root .kc-lb-b iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; background: #fff; }
/* El .txt se lee, así que va sobre fondo claro y con ancho de lectura. */
#kcore-root .kc-lb-t { width: 100%; max-width: 820px; height: 100%; margin: 0; overflow: auto;
  background: #fff; border-radius: 8px; padding: 22px 26px; font-size: 13px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; color: var(--text-1);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

@media (max-width: 900px) {
  #kcore-root .kc-lb { padding: 14px; }
  #kcore-root .kc-att, #kcore-root .kc-atti { max-width: 100%; }
}

/* ── Prioridad (BD v15) ──────────────────────────────────────────────────────
 *
 * Es un chip TENUE de la familia de `.kc-st`, no un pill del Tablero. La regla
 * ya escrita vale igual aquí: allá la pill ES la columna y tiene que gritar;
 * esta es una señal entre otras dentro de una fila, y si compite le roba la
 * atención al nombre de la tarea.
 *
 * MEDIA NO TIENE REGLA a propósito: no se pinta nunca (ver prioPill() en el JS).
 * Es el valor por defecto y lo lleva casi todo, así que un chip en cada fila no
 * señala nada. Solo se ve lo que se sale del término medio.
 *
 * Urgente es el único que rompe el tono tenue, con borde: es el nivel que
 * existe para interrumpir, y si se ve igual que Alta no hacía falta crearlo.
 */
#kcore-root .kc-prio { font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 20px;
  display: inline-block; white-space: nowrap; flex: none; }
#kcore-root .kc-prio-baja    { background: #EEF1F4; color: #6B7280; }
#kcore-root .kc-prio-alta    { background: #FDF0DA; color: #B45309; }
#kcore-root .kc-prio-urgente { background: #FDE4E4; color: #C02626;
  box-shadow: inset 0 0 0 1px #F5B9B9; }

/* ── Planeación del paso: inicio, entrega y prioridad (BD v15) ───────────────
 *
 * Los tres van agrupados y con `flex-wrap`, no sueltos en la fila. Sueltos, a
 * partir del tercero el nombre del paso se queda sin ancho, y el nombre es lo
 * único que de verdad hay que poder leer de un vistazo.
 *
 * Al pasar a tejas (11 ago 2026) el ancho dejó de fijarse: «10 AGO» ocupa lo
 * que ocupa, que es la mitad que el `dd/mm/aaaa` nativo que había antes.
 */
#kcore-root .kc-stpm { display: flex; align-items: center; gap: 6px; flex: none;
  flex-wrap: wrap; justify-content: flex-end; }

/* ── Las fechas y la prioridad del paso, con el lenguaje de la ficha ──
   Ajuste de David (11 ago 2026): «el diseño se ve muy diferente a lo que
   tenemos». Eran un `<input type=date>` y un `<select>` crudos, o sea el
   `dd/mm/aaaa` nativo del navegador dentro de la fila — justo el formulario que
   la ficha acababa de dejar de ser.

   Son las MISMAS piezas de la franja (`.kc-pc-x` de teja, `.kc-pr-*` de
   píldora) en versión chica: 22px de teja contra 30, 11px de letra contra 13.
   La escala cambia; el lenguaje no. Si mañana la franja cambia de color, esto
   tiene que cambiar con ella, y por eso reusa sus clases de tono. */
#kcore-root .kc-sc { position: relative; flex: none; }
#kcore-root .kc-sc .kc-pc-e { position: absolute; top: -4px; right: 0; z-index: 5; min-width: 132px; }
/* Las medidas están apretadas a propósito: la fila del paso medía 40px y con la
   teja a 22px se fue a 46. «Un poco más pequeños para que queden del mismo
   tamaño que tienen actualmente los pasos» (David). Teja 20, sin padding
   vertical: el alto de la fila lo sigue poniendo `.kc-stprow`, no esto. */
#kcore-root .kc-sc-v { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex;
  align-items: center; gap: 6px; padding: 0 8px 0 0; border-radius: 20px;
  font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-1);
  white-space: nowrap; transition: background .14s; }
#kcore-root .kc-sc-v:hover { background: var(--surface-3); }
#kcore-root .kc-sc-v:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#kcore-root .kc-sc-x { width: 20px; height: 20px; border-radius: 6px; flex: none;
  display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
#kcore-root .kc-sc-x svg { width: 11px; height: 11px; display: block; }
/* Sin fecha se ve como un hueco, no como un dato. */
#kcore-root .kc-sc-0 { color: var(--text-3); font-weight: 500; }

/* La píldora de prioridad, hermana chica de `.kc-pr-v` de la cabecera. Hereda
   sus mismos `.kc-pr-baja/normal/alta/urgente`, así que el color de una
   prioridad es uno solo en toda la Mesa.
 *
 * ⚠️ SIN `all: unset`, y esto no es estilo: `all` incluye `background`, y como
 * esta regla va 1.600 líneas DESPUÉS de `.kc-pr-alta` y con la misma
 * especificidad, le borraba el color a la píldora — salía transparente, medido.
 * Se resetea a mano lo que estorba de un `<button>` y se deja en paz lo que
 * viene de la clase de tono. Misma familia que las trampas de cascada de este
 * lote, pero al revés: aquí el problema no era un selector que dejó de aplicar
 * sino uno que aplicó de más. */
#kcore-root .kc-sc-p { box-sizing: border-box; cursor: pointer; display: inline-flex;
  align-items: center; gap: 5px; padding: 3px 9px; border: 0; border-radius: 20px;
  font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.4;
  white-space: nowrap; transition: filter .14s; }
#kcore-root .kc-sc-p:hover { filter: brightness(.96); }
#kcore-root .kc-sc-p:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#kcore-root .kc-sc-p svg { width: 11px; height: 11px; display: block; flex: none; }

/* En angosto la fila del paso se apila: el nombre arriba a lo ancho y la
 * planeación debajo. Es preferible a tres controles de 40px cada uno. */
@media (max-width: 1024px) {
  #kcore-root .kc-stprow { flex-wrap: wrap; }
  #kcore-root .kc-stprow .kc-sn { flex: 1 1 100%; order: -1; }
  #kcore-root .kc-stpm { flex: 1; justify-content: flex-start; }
}

/* ── Grupos de "Asignado a mí": Vencidas / Hoy / Más adelante (ajuste #5) ────
 *
 * Encabezado de grupo, no una pestaña ni una tarjeta: la lista sigue siendo una
 * sola y estos solo la parten. Por eso es tipografía pequeña sobre el mismo
 * fondo y no un bloque con borde, que la rompería en tres tablas sueltas.
 *
 * El primero no lleva margen arriba: pegado al borde del panel se ve como parte
 * de la cabecera de la sección y no como un grupo suelto.
 */
#kcore-root .kc-gh { display: flex; align-items: center; gap: 8px; font-size: 11.5px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3);
  padding: 4px 2px; margin: 18px 0 6px; }
#kcore-root .kc-gh:first-child { margin-top: 2px; }
#kcore-root .kc-gh .kc-gn { background: #E9E9E3; color: var(--text-2); border-radius: 20px;
  padding: 1px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0; }
/* Vencidas es el único grupo que se pinta: es el que exige una decisión hoy. */
#kcore-root .kc-gh-late { color: #C0392B; }
#kcore-root .kc-gh-late .kc-gn { background: #FDE4E4; color: #C0392B; }

/* ── Progreso de subida (ajuste #10) ─────────────────────────────────────────
 *
 * Dos sitios, misma idea: mientras un archivo viaja tiene que verse DÓNDE va a
 * quedar, no un aviso flotante que se va solo a los tres segundos.
 *
 * 1) La lista de adjuntos de la tarjeta: una fila fantasma con la MISMA forma
 *    que una fila real, para que al terminar no haya salto de layout.
 * 2) El compositor del chat: la barra va encima de la miniatura que ya está en
 *    pantalla, que es exactamente el archivo que está viajando.
 */
#kcore-root .kc-file-up { opacity: .62; position: relative; }
#kcore-root .kc-upbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: #E9E9E3; border-radius: 0 0 9px 9px; overflow: hidden; }
#kcore-root .kc-upbar i { display: block; height: 100%; background: var(--accent);
  width: 0; transition: width .2s ease; }

/* La barra del compositor solo existe visualmente mientras se envía: fuera de
 * ese momento ocupa cero y no ensucia la miniatura. */
#kcore-root .kc-cf-p { display: none; position: absolute; left: 5px; right: 5px; bottom: 3px;
  height: 3px; background: rgba(0,0,0,.10); border-radius: 3px; overflow: hidden; }
#kcore-root .kc-cf-p i { display: block; height: 100%; background: var(--accent);
  width: 0; transition: width .2s ease; }
#kcore-root .kc-subiendo .kc-cf { position: relative; opacity: .72; }
#kcore-root .kc-subiendo .kc-cf-p { display: block; }
/* Durante el envío no se puede quitar un archivo: la × quitaba la miniatura pero
 * el archivo se subía igual, y el mensaje salía con un adjunto que ya no se veía. */
#kcore-root .kc-subiendo .kc-cf-d { pointer-events: none; opacity: .35; }

/* Zona de soltar del chat (ajuste #8). Borde punteado en lima por DENTRO, con
 * `inset`: un borde real cambiaría la caja y movería el chat entero un par de
 * píxeles justo al arrastrar encima. */
#kcore-root .kc-dr-conv.kc-drop { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 12px; }
#kcore-root .kc-dr-conv.kc-drop::after { content: 'Suelta para adjuntar'; position: absolute;
  left: 50%; top: 50%; transform: translate(-50%,-50%); background: #0D1117; color: #fff;
  font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 20px;
  pointer-events: none; z-index: 100021; }
#kcore-root .kc-dr-conv { position: relative; }

/* ── Evento del sistema en el chat del equipo (ajuste #6, BD v15) ────────────
 *
 * Ni burbuja ni lado: una marca centrada en la línea de tiempo. Es lo que lo
 * distingue de lo que escribió una persona, y esa distinción es todo el valor
 * del registro. Si se pareciera a un mensaje, con el tiempo nadie sabría cuál
 * de las dos cosas está leyendo.
 */
#kcore-root .kc-ev { display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap; padding: 4px 12px; margin: 2px 0; text-align: center; }
#kcore-root .kc-ev-t { font-size: 11.5px; color: #6B7280; background: var(--surface-3);
  border-radius: 20px; padding: 5px 12px; max-width: 100%; }
#kcore-root .kc-ev-d { font-size: 10.5px; color: #9CA3AF; white-space: nowrap; }

/* ── Editar un mensaje (ajuste #4) ───────────────────────────────────────────
 *
 * El lápiz vive en la línea del AUTOR, encima de la burbuja, y no dentro: la
 * burbuja se dimensiona a su contenido (§3.b) y meterle un control la estira,
 * así que un mensaje de dos palabras saldría con el ancho del botón.
 *
 * Aparece al pasar por encima. En táctil no hay hover, así que ahí se queda
 * visible siempre: es preferible a un control inalcanzable.
 */
#kcore-root .kc-med { all: unset; box-sizing: border-box; cursor: pointer; font-size: 11px;
  color: var(--text-3); padding: 0 4px; border-radius: 5px; opacity: 0;
  transition: opacity .14s, color .14s, background .14s; }
#kcore-root .kc-msg:hover .kc-med, #kcore-root .kc-med:focus-visible { opacity: 1; }
#kcore-root .kc-med:hover { color: var(--text-1); background: var(--surface-3); }
@media (hover: none) { #kcore-root .kc-med { opacity: .55; } }

/* «editado» va junto al nombre, en el mismo tono que él: es un matiz del autor,
 * no una alarma. El título del elemento dice cuándo. */
#kcore-root .kc-edm { font-size: 10.5px; font-weight: 500; color: #9CA3AF;
  font-style: italic; margin-left: 5px; cursor: help; }

/* ── Papelera (ajuste #7) ────────────────────────────────────────────────────
 *
 * Vive dentro del modal, así que su lista lleva SU PROPIO scroll: el cuerpo del
 * modal está en overflow:hidden y una lista larga suelta ahí se recorta por
 * abajo sin forma de alcanzarla. Es la misma regla que ya mordió tres veces en
 * Bandeja, Plantillas y Reportes.
 */
#kcore-root .kc-trlist { display: flex; flex-direction: column; gap: 6px;
  max-height: 46vh; max-height: 46dvh; overflow-y: auto; overflow-x: hidden; }
#kcore-root .kc-tritem { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 10px; background: var(--surface-3); }
#kcore-root .kc-trmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#kcore-root .kc-trt { font-size: 13.5px; font-weight: 600; color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#kcore-root .kc-trm { font-size: 11.5px; color: var(--text-3); }
#kcore-root .kc-tract { display: flex; gap: 6px; flex: none; }

/* Rojo solo aquí, y solo en el borrado definitivo: es la única acción del
 * producto que no se puede deshacer. Repartir rojo por otras acciones le
 * quitaría a esta lo único que la distingue. */
#kcore-root .kc-b-del { background: #FDE4E4; color: #C02626; }
#kcore-root .kc-b-del:hover { background: #C02626; color: #fff; }

/* Eliminar en la cabecera de la ficha: discreto, al lado de la ×. Va en texto y
 * no en botón lleno porque no es la acción principal de esa pantalla. */
/* ⚠️ El `margin-left:auto` lo lleva EL GRUPO, no la ×.
 *
 * `.kc-x` se empujaba sola al borde con su propio auto-margen. Al meterla en
 * este contenedor junto a "Eliminar", ese auto pasó a repartir espacio DENTRO
 * del grupo (donde no sobra nada) y el grupo entero se quedó pegado al título:
 * la × y Eliminar salían a media cabecera. Es la misma familia que la trampa ya
 * documentada de envolver algo y romper los selectores de hermano: al envolver,
 * hay que mirar de qué se estaba encargando el elemento envuelto. */
/* ⚠️ `.kc-dr-acts` SE BORRÓ el 4 sep 2026: la × se metió dentro de la tarjeta de
   propiedades y el envoltorio se quedó con un solo hijo y un `margin-left: auto`
   que ya no tenía a qué empujar. La lección de arriba NO se va con él —al
   envolver algo hay que mirar de qué se encargaba lo envuelto—, y esta vez se
   aplicó al revés: al DESenvolver, hay que mirar de qué se encargaba el
   envoltorio. Era el `auto`, y está reemplazado donde le toca. */
/* ⚠️ AQUÍ VIVÍA `.kc-dr-del`, y se borró el 2 sep 2026 por CÓDIGO MUERTO.
   Era el botón «Eliminar» suelto de la cabecera, que el ⋮ jubiló en su día; el
   marcado se fue y sus estilos se quedaron. No molestó hasta que la papelera
   nueva reusó ese mismo nombre para su contenedor y heredó de golpe su relleno,
   su radio y su `:hover` rosa: el resultado eran DOS sombreados concéntricos al
   pasar por encima, el del contenedor huérfano y el del botón de verdad.

   Por eso se borra en vez de dejarla: una clase que ya no pinta nada no es
   inofensiva, es una trampa esperando a que alguien repita su nombre. */

/* ═══ LA PRUEBA GRATUITA (1.3.0) ═══ */

/* La franja del contador. Primer hijo de `.kc-card`, que es una columna flex:
 * `flex: none` es lo que impide que se estire y le robe alto a los paneles, que
 * son los que tienen que quedarse con el espacio y su propio scroll. */
#kcore-root .kc-trialbar { flex: none; display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; padding: 11px 20px; background: var(--ink); color: #fff;
  border-radius: 22px 22px 0 0; font-size: 13px; }
#kcore-root .kc-trialbar-t { font-weight: 500; }
#kcore-root .kc-trialbar-t b { color: var(--lime); font-weight: 700; }
#kcore-root .kc-trialbar-s { color: rgba(255,255,255,.55); font-size: 12.5px; }
/* El botón empujado al borde con el mismo recurso que las acciones de
 * encabezado (`.kc-head-row > .kc-b`), para que el patrón sea uno solo. */
#kcore-root .kc-trialbar-b { margin-left: auto; flex: none; text-decoration: none;
  background: var(--lime); color: var(--ink); font-size: 12.5px; font-weight: 600;
  padding: 7px 14px; border-radius: 8px; transition: filter .14s;
  border: 0; cursor: pointer; font-family: inherit; }
#kcore-root .kc-trialbar-b:hover { filter: brightness(.94); }
#kcore-root .kc-trialbar-b:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
#kcore-root .kc-trialbar-b:disabled { opacity: .6; cursor: default; }

/* Los últimos tres días. El ámbar es el token de "requiere atención" del
 * sistema, el mismo del badge de la Bandeja: aquí el aviso deja de ser un dato
 * y pasa a ser una fecha límite. */
#kcore-root .kc-trialbar-urge { background: var(--amber); color: #3D2800; }
#kcore-root .kc-trialbar-urge .kc-trialbar-t b { color: #3D2800; }
#kcore-root .kc-trialbar-urge .kc-trialbar-s { color: rgba(61,40,0,.62); }
#kcore-root .kc-trialbar-urge .kc-trialbar-b { background: var(--ink); color: #fff; }

/* En angosto la franja se apila y el botón pierde su `margin-left:auto`, que sin
 * espacio sobrante lo pegaría al texto en vez de empujarlo. */
@media (max-width: 900px) {
  #kcore-root .kc-trialbar { flex-direction: column; align-items: flex-start; gap: 7px; }
  #kcore-root .kc-trialbar-b { margin-left: 0; }
}

/* La pantalla de bloqueo. NO cuelga de `#kcore-root`: reemplaza a la Mesa
 * entera, así que no existe ese contenedor ni sus variables, y las medidas van
 * literales a propósito.
 *
 * `.kcore-gate-page` es la caja OSCURA de fondo, con el logo de KATALYST
 * arriba y la tarjeta del mensaje flotando encima, mismo lenguaje de la
 * pantalla de login (`KCORE_Login_Brand`). NO se toca `.kcore-gate` (a
 * secas): esa clase la usa también `render()` para el aviso "Esta página es
 * del equipo" (un párrafo suelto, no una pantalla), y volverla oscura y a
 * pantalla completa se lo habría roto.
 *
 * ⚠️ `position: fixed; inset: 0` y NO `min-height: 70vh`. Con `min-height`
 * el negro solo cubría el alto de SU PROPIO contenido: si el tema (Astra)
 * mete cabecera o márgenes alrededor del shortcode, esos huecos se quedaban
 * claros y el fondo se veía "cortado". `fixed` + `inset: 0` saca la caja del
 * flujo normal de la página entera y la pone edge-to-edge sobre TODO,
 * cabecera incluida: es una pantalla de bloqueo, tiene que bloquear la
 * pantalla completa. `overflow-y: auto` por si el mensaje no cabe en una
 * pantalla baja, con `overflow-x: hidden` explícito al lado (CLAUDE.md
 * §5.c.2: el primero enciende el segundo solo, y sin decirlo aparece una
 * barra horizontal parásita). */
.kcore-gate-page { position: fixed; inset: 0; z-index: 999999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #1A1A1A; padding: 56px 20px; box-sizing: border-box;
  overflow-y: auto; overflow-x: hidden; }
.kcore-gate-logo { display: block; width: 148px; height: auto; margin: 0 0 32px; flex: none; }
.kcore-gate-logo-txt { color: #fff; font-size: 21px; font-weight: 700;
  letter-spacing: 3px; margin: 0 0 32px; font-family: 'Poppins', sans-serif; flex: none; }
.kcore-gate-box { max-width: 460px; width: 100%; margin: 0 auto; padding: 48px 32px;
  box-sizing: border-box; background: #fff; border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,.35); flex: none;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; }
.kcore-gate-box h2 { margin: 0 0 10px; font-size: 24px; font-weight: 700;
  color: #1A1A1A; line-height: 1.25; }
.kcore-gate-box p { margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: #6B7280; }
/* La fila de botones, siempre CENTRADA, con o sin el de Bold: si Bold no
   está activo y tampoco hay `payment_url`, "Cerrar sesión" queda solo y
   centrado igual, en vez de pegado a una esquina. */
.kcore-gate-actions { display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; align-items: center; }
.kcore-gate-b { display: inline-block; text-decoration: none; background: #CBF904;
  color: #1A1A1A; font-size: 14px; font-weight: 600; padding: 12px 22px; border-radius: 10px;
  border: 0; cursor: pointer; font-family: inherit; }
.kcore-gate-b:hover { filter: brightness(.94); }
.kcore-gate-b:disabled { opacity: .6; cursor: default; }
/* El botón de Bold es un <button>, no un <a>: la lista de arriba ya cubre lo
   visual, esto solo repone lo que un botón nativo no hereda. */
/* «Cerrar sesión»: mismo tamaño que el botón primario para que la fila se
   vea como un par, pero neutro, para que la mirada siga yendo al lima. */
.kcore-gate-b2 { background: #F7F8FA; color: #374151; border: 1px solid #E5E7EB; }
.kcore-gate-b2:hover { background: #EFF1F5; filter: none; }
.kcore-gate-msg { margin: 14px 0 0; font-size: 13px; line-height: 1.5; min-height: 1em; }
.kcore-gate-msg.err { color: #E2574C; }

/* ══ El formulario de la PUERTA (8 sep 2026) ══
   Sin sesión, `.kcore-gate-box` deja de ser un mensaje y pasa a ser el login de
   la Mesa (`KCORE_Login::form_html`). Los campos van AQUÍ y no en un `<style>`
   inline del PHP: los colores del producto se declaran una sola vez.

   ⚠️ `!important` en los campos y en el botón, y no es paranoia: esta caja NO
   cuelga de `#kcore-root`, así que no hereda su `all: initial`, y Astra estila
   `input[type=…]` y `button` por su cuenta (CLAUDE.md §5.c). Sin esto los
   campos salen con el padding y el borde del tema, que es justo el aspecto de
   "pantalla rota" del que venimos.

   Caja BLANCA, tinta oscura: la Mesa es clara y esta pantalla también. */
.kcore-gate-form { text-align: left; margin: 4px 0 0; }
.kcore-gate-lbl { display: block; margin: 0 0 6px; font-size: 12.5px;
  font-weight: 600; color: #374151; }
/* El selector se INVIERTE (CLAUDE.md §5.c.4): se estilan todos los campos menos
   los que tienen forma propia, para que el próximo tipo que alguien use entre
   bien sin acordarse de nada. */
.kcore-gate-form input:not([type="checkbox"]):not([type="radio"]) {
  width: 100% !important; box-sizing: border-box !important; margin: 0 0 14px !important;
  background: #fff !important; border: 1px solid #E5E7EB !important;
  border-radius: 10px !important; padding: 11px 12px !important;
  font-size: 14px !important; font-family: inherit !important; color: #1A1A1A !important; }
.kcore-gate-form input:not([type="checkbox"]):not([type="radio"]):focus {
  outline: none !important; border-color: #1A1A1A !important; }
.kcore-gate-chk { display: flex; align-items: center; gap: 8px;
  margin: 0 0 18px; font-size: 12.5px; color: #6B7280; cursor: pointer; }
/* El botón de enviar ocupa el ancho: es la única acción de la pantalla, y una
   pastilla suelta a la izquierda se lee como secundaria. */
.kcore-gate-form .kcore-gate-b { display: block; width: 100%;
  padding: 12px 22px !important; font-family: inherit !important;
  font-size: 14px !important; box-sizing: border-box; }
.kcore-gate-err { margin: 0 0 16px; padding: 10px 12px; border-radius: 10px;
  background: #FDECEA; color: #A32B21; font-size: 13px; }
.kcore-gate-alt { display: inline-block; margin: 16px 0 0; font-size: 12.5px;
  color: #6B7280; text-decoration: none; }
.kcore-gate-alt:hover { color: #1A1A1A; }


/* ══ «Configurar vitrina»: el modal de tres pasos (11 ago 2026) ══
   Contra los mockups E, F y G. El paso 2 cambia de forma según el formato,
   porque cada uno pregunta una cosa distinta: qué archivos, qué vistas, o de
   dónde salen las páginas. Ver la cabecera de `abrirVitrina()` en el JS. */
#kcore-root .kc-cv { display: flex; flex-direction: column; gap: 26px; }

/* ══ LA PARRILLA: la barra de publicaciones (12 ago 2026, BD v25) ══

   PESTAÑAS y no flechas, y con las medidas del estándar de la plataforma
   (`.kc-tabs` / `.kc-tab`, §5.b): riel de radio 22 con padding 4, pestaña de
   12.5px y radio 18, y la activa en pastilla BLANCA con sombra, nunca en lima.
   Se copian en vez de reusar la clase porque esta pestaña lleva dos líneas
   —el número y el formato— y `.kc-tab` es de una sola con `nowrap`.

   ⚠️ Con UNA publicación la barra no se pinta (ver `vitPubBar()`), y por eso
   existe `.kc-cv-pbar-solo`: ahí solo queda el botón de añadir, y el riel vacío
   a su lado sería una caja gris sin contenido. */
#kcore-root .kc-cv-pbar { display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; row-gap: 10px; }
#kcore-root .kc-cv-pbar-solo { justify-content: flex-start; }
/* ── El RIEL y sus flechas (David, 4 sep 2026) ──
 * *"no hay cómo navegar a las otras publicaciones… es un bloqueo"*.
 *
 * La tira siempre pudo desplazarse (`overflow-x: auto`, abajo), pero con el
 * scrollbar oculto nada lo decía: seis publicaciones dejaban 415px de contenido
 * escondido detrás de un corte limpio que se lee como el final de la lista.
 *
 * ⚠️ Las flechas van SUPERPUESTAS y no en la fila. En la fila le robarían ~60px
 * de ancho a la tira SIEMPRE, incluso con dos publicaciones donde no hacen
 * falta, y encima moverían el riel cada vez que aparecen o desaparecen. Encima
 * no ocupan nada cuando sobran, que es el caso normal.
 *
 * Y cada una sale solo si LLEVA a algún sitio: en el extremo izquierdo no hay
 * flecha izquierda. Una flecha que no hace nada es peor que ninguna — se pulsa,
 * no pasa nada, y se deja de confiar en la otra. Lo decide `vitPubBarFlechas()`
 * con las medidas reales, no la hoja. */
#kcore-root .kc-cv-prail { position: relative; display: flex; min-width: 0; max-width: 100%; }
#kcore-root .kc-cv-pnav { all: unset; box-sizing: border-box; cursor: pointer;
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: none; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: #FFFFFF; color: var(--text-2); font-size: 17px; line-height: 1;
  font-family: inherit; box-shadow: 0 1px 6px rgba(0,0,0,.16);
  transition: color .15s, background .15s; }
#kcore-root .kc-cv-pnav:hover { background: var(--surface); color: var(--text-1); }
#kcore-root .kc-cv-pnav-prev { left: 3px; }
#kcore-root .kc-cv-pnav-next { right: 3px; }
#kcore-root .kc-cv-prail-izq .kc-cv-pnav-prev,
#kcore-root .kc-cv-prail-der .kc-cv-pnav-next { display: grid; }
/* El desvanecido bajo la flecha: sin él la pestaña que pasa por debajo se ve
   cortada a medias contra el círculo blanco y parece un defecto de pintado. */
#kcore-root .kc-cv-prail::before,
#kcore-root .kc-cv-prail::after { content: ''; position: absolute; top: 0; bottom: 0;
  width: 44px; z-index: 1; pointer-events: none; display: none; border-radius: 22px; }
#kcore-root .kc-cv-prail::before { left: 0;
  background: linear-gradient(to right, var(--surface-3), rgba(244,244,242,0)); }
#kcore-root .kc-cv-prail::after { right: 0;
  background: linear-gradient(to left, var(--surface-3), rgba(244,244,242,0)); }
#kcore-root .kc-cv-prail-izq::before,
#kcore-root .kc-cv-prail-der::after { display: block; }

/* ⚠️ `min-width: 0`, y no es decorativo: sin él un elemento flex NO encoge por
   debajo de su contenido (`min-width: auto` es lo que trae de fábrica), así que
   la tira se quedaría en su ancho entero, el `overflow-x` de abajo no tendría
   nada que recortar y el desbordamiento se lo comería el modal. Es la misma
   trampa de siempre con `overflow` dentro de flex. */
#kcore-root .kc-cv-ptabs { display: inline-flex; gap: 4px; background: var(--surface-3);
  border-radius: 22px; padding: 4px; max-width: 100%; min-width: 0; flex: 1 1 auto;
  /* ⚠️ SIN `scroll-behavior: smooth`, y no es por gusto. Con él puesto, ni
     `scrollLeft += n` ni `scrollTo({behavior:'smooth'})` movían la tira en el
     banco: quedaba en 11px de 415. Solo `behavior: 'instant'` funcionaba.
     Puede que fuera el panel de pruebas, que no anima, y no el navegador de
     verdad — pero eso es justo el problema: es un fallo que no puedo distinguir
     de un renderizado que no anima, y el modo de fallar es que la flecha no haga
     NADA, que es la queja que este arreglo viene a resolver. Un salto se ve
     peor y se comprueba; el suavizado se veía mejor y no se podía. */ 
  /* La tira scrollea cuando hay muchas: doce publicaciones no caben en el ancho
     del modal, y sin esto empujarían la barra fuera y arrastrarían la página
     entera a scroll horizontal, que es un defecto que este archivo ya pagó. */
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
#kcore-root .kc-cv-ptabs::-webkit-scrollbar { display: none; }
#kcore-root .kc-cv-ptab { all: unset; box-sizing: border-box; cursor: pointer;
  flex: none; background: transparent; color: #8A8A85; font-family: inherit;
  padding: 6px 14px; border-radius: 18px; transition: all .15s ease;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
#kcore-root .kc-cv-ptab:hover { color: #0D1117; }
#kcore-root .kc-cv-ptab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#kcore-root .kc-cv-ptab.on { background: #FFFFFF; color: #0D1117;
  box-shadow: 0 2px 8px rgba(0,0,0,.08); }
/* El número va NEUTRO en los dos estados, por lo mismo que el contador de
   `.kc-tab`: la pastilla blanca ya dice cuál está activa. */
#kcore-root .kc-cv-pn { flex: none; width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; background: #E9E9E3; color: #6B7280;
  font-size: 10.5px; font-weight: 700; }
#kcore-root .kc-cv-ptab.on .kc-cv-pn { background: #EFF1F5; color: var(--text-1); }
#kcore-root .kc-cv-pl { font-size: 12.5px; font-weight: 500; }
#kcore-root .kc-cv-ptab.on .kc-cv-pl { font-weight: 600; }
#kcore-root .kc-cv-pacts { display: flex; align-items: center; gap: 8px;
  margin-left: auto; flex: none; }
#kcore-root .kc-cv-padd { all: unset; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
  font-size: 12px; font-weight: 600; color: #46530A; background: var(--tint-2);
  padding: 7px 13px; border-radius: 8px; }
#kcore-root .kc-cv-padd svg { width: 14px; height: 14px; flex: none; }
#kcore-root .kc-cv-padd:hover { filter: brightness(.96); }
#kcore-root .kc-cv-padd:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Quitar va en texto y no en botón rojo: no borra nada todavía, solo saca la
   publicación del borrador, y cancelar el modal la devuelve entera. Un botón
   destructivo prometería una gravedad que la acción no tiene. */
#kcore-root .kc-cv-pdel { all: unset; box-sizing: border-box; cursor: pointer;
  font-family: inherit; font-size: 12px; color: var(--text-3);
  padding: 7px 10px; border-radius: 8px; }
#kcore-root .kc-cv-pdel:hover { color: #C0392B; background: rgba(192,57,43,.08); }
#kcore-root .kc-cv-pdel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

#kcore-root .kc-cv-p { display: flex; flex-direction: column; gap: 14px; }
/* Cada paso se separa del anterior con una línea, como en el mockup: son tres
   decisiones, no un formulario de once campos. */
#kcore-root .kc-cv-p + .kc-cv-p { border-top: 1px solid var(--border); padding-top: 24px; }
#kcore-root .kc-cv-h { display: flex; align-items: flex-start; gap: 12px; }
#kcore-root .kc-cv-n { flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700; margin-top: 1px; }
#kcore-root .kc-cv-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#kcore-root .kc-cv-t b { font-size: 15px; font-weight: 700; color: var(--text-1); }
#kcore-root .kc-cv-t span { font-size: 12.5px; color: var(--text-2); }
#kcore-root .kc-cv-e { margin: 0; font-size: 12.5px; color: var(--text-3); }
#kcore-root .kc-cv-hint { margin: 0; font-size: 12px; color: var(--text-3);
  display: flex; align-items: center; gap: 7px; }
#kcore-root .kc-cv-info { margin: 0; font-size: 12px; color: var(--text-2);
  background: var(--surface-3); border-radius: 10px; padding: 11px 13px; }
/* El contador del paso, a la derecha de su cabecera. */
#kcore-root .kc-cv-cnt { flex: none; display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; padding: 5px 11px; border-radius: 20px; background: var(--surface-3); }
#kcore-root .kc-cv-cnt b { color: #46530A; background: var(--tint-2);
  padding: 2px 8px; border-radius: 20px; font-weight: 600; }
#kcore-root .kc-cv-cnt span { color: var(--text-3); }

/* ── Paso 1: las tarjetas de formato ── */
#kcore-root .kc-cv-fs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1024px) { #kcore-root .kc-cv-fs { grid-template-columns: repeat(3, minmax(0,1fr)); } }
#kcore-root .kc-cv-f { all: unset; box-sizing: border-box; cursor: pointer; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  padding: 18px 8px; border-radius: var(--r); border: 1px solid var(--border);
  background: var(--surface); font-family: inherit; transition: all .15s; }
#kcore-root .kc-cv-f svg { width: 22px; height: 22px; display: block; color: var(--text-2); }
#kcore-root .kc-cv-f span { font-size: 12.5px; font-weight: 600; color: var(--text-1); text-align: center; }
#kcore-root .kc-cv-f:hover { border-color: #D5D5CE; }
#kcore-root .kc-cv-f.sel { border-color: var(--accent); background: var(--tint);
  box-shadow: 0 0 0 1px var(--accent); }
#kcore-root .kc-cv-f.sel svg { color: #46530A; }
#kcore-root .kc-cv-f:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Apagado: se PINTA y no se puede elegir. Reel espera al video.
   La opacidad baja el CONTENIDO de la tarjeta pero no su etiqueta: si el
   «Pronto» se atenuara con todo lo demás quedaría ilegible, y es justo lo que
   explica por qué esa tarjeta no responde. */
#kcore-root .kc-cv-off { cursor: not-allowed; background: var(--surface-3); }
#kcore-root .kc-cv-off svg, #kcore-root .kc-cv-off > span { opacity: .5; }
#kcore-root .kc-cv-off:hover { border-color: var(--border); }
#kcore-root .kc-cv-soon { position: absolute; top: 7px; right: 7px; font-style: normal;
  font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-2); background: var(--surface); border: 1px solid var(--border);
  padding: 2px 7px; border-radius: 20px; }

/* ── Paso 2 (post / carrusel / story): la rejilla de archivos ── */
#kcore-root .kc-cv-as { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px; }
#kcore-root .kc-cv-a { border-radius: var(--r); border: 1px solid var(--border);
  background: var(--surface); overflow: hidden; transition: all .15s; }
#kcore-root .kc-cv-a.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); cursor: grab; }
#kcore-root .kc-cv-a.kc-dragging { opacity: .45; }
#kcore-root .kc-cv-a.kc-dragover { border-color: var(--accent); background: var(--accent-dim); }
#kcore-root .kc-cv-ab { all: unset; box-sizing: border-box; cursor: pointer; display: block;
  width: 100%; font-family: inherit; padding: 8px; }
#kcore-root .kc-cv-ab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#kcore-root .kc-cv-am { position: relative; display: block; }
#kcore-root .kc-cv-am .kc-vitm-th { width: 100%; height: 92px; border-radius: 9px; }
/* La marca: círculo vacío sin elegir, y con el NÚMERO de orden al elegirlo.
   El número es lo que hace que arrastrar tenga sentido — sin él, reordenar una
   rejilla es mover cosas sin saber qué cambió. */
#kcore-root .kc-cv-ac { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px;
  border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700;
  border: 2px solid #fff; background: rgba(255,255,255,.85); color: transparent;
  box-shadow: 0 1px 4px rgba(0,0,0,.18); transition: all .15s; }
#kcore-root .kc-cv-a.sel .kc-cv-ac { background: var(--accent); color: #fff; }
#kcore-root .kc-cv-an { display: block; margin-top: 7px; font-size: 11.5px; font-weight: 600;
  color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#kcore-root .kc-cv-az { display: block; font-size: 11px; color: var(--text-3); }

/* ── Paso 2 (web): las tres vistas ── */
#kcore-root .kc-cv-vs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { #kcore-root .kc-cv-vs { grid-template-columns: minmax(0,1fr); } }
#kcore-root .kc-cv-v { display: flex; flex-direction: column; gap: 10px; padding: 14px;
  border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); }
#kcore-root .kc-cv-v.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
#kcore-root .kc-cv-vh { display: flex; align-items: center; gap: 8px; }
#kcore-root .kc-cv-vh svg { width: 17px; height: 17px; display: block; color: var(--text-2); flex: none; }
#kcore-root .kc-cv-vh b { flex: 1; font-size: 13px; font-weight: 700; color: var(--text-1); }
#kcore-root .kc-cv-vck { flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--border); display: grid; place-items: center;
  font-size: 11px; color: transparent; }
#kcore-root .kc-cv-v.sel .kc-cv-vck { background: var(--accent); border-color: var(--accent); color: #fff; }
#kcore-root .kc-cv-vth { display: block; }
#kcore-root .kc-cv-vth .kc-vitm-th { width: 100%; height: 118px; border-radius: 9px; }
/* El nombre se PARTE en vez de recortarse con puntos suspensivos: en 3 columnas
   `metaza-home-desktop.jpg` salía como `metaza-home-des…` y las tres vistas se
   veían iguales, que es justo lo que hay que poder distinguir. */
#kcore-root .kc-cv-vn { font-size: 11.5px; color: var(--text-1); line-height: 1.4;
  word-break: break-all; }
/* ⚠️ En COLUMNA, no en fila. «Cambiar imagen» y «Eliminar» lado a lado no caben
   en una tarjeta de tres columnas: el segundo se salía y quedaba cortado
   («Elimi…»), que fue lo que David vio. El mockup los pinta en fila porque allí
   las tarjetas son más anchas; aquí el ancho lo manda la rejilla de tres.

   Apilados, además, la acción destructiva deja de estar pegada a la normal. */
#kcore-root .kc-cv-vacts { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
#kcore-root .kc-cv-vacts .kc-b { justify-content: center; }
#kcore-root .kc-cv-vdel { all: unset; box-sizing: border-box; cursor: pointer; text-align: center;
  font-size: 11.5px; font-weight: 600; color: #C0392B; padding: 6px; border-radius: 8px;
  font-family: inherit; }
#kcore-root .kc-cv-vdel:hover { background: #FDE5E3; }
#kcore-root .kc-cv-vdel:focus-visible { outline: 2px solid #C0392B; outline-offset: 1px; }
#kcore-root .kc-cv-vempty { all: unset; box-sizing: border-box; cursor: pointer; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 118px; border-radius: 10px; border: 1px dashed #D9D9D2;
  background: var(--surface-3); font-family: inherit; text-align: center; padding: 10px;
  transition: all .15s; }
#kcore-root .kc-cv-vempty:hover { border-color: var(--accent); background: var(--accent-dim); }
#kcore-root .kc-cv-vempty:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#kcore-root .kc-cv-vempty b { font-size: 12.5px; font-weight: 600; color: var(--text-1); }
#kcore-root .kc-cv-vempty span { font-size: 11px; color: var(--text-3); }
/* El selector, DENTRO de la tarjeta. Un modal encima de otro se lleva el
   Escape, el foco y el fondo, y la lista de imágenes de una pieza cabe aquí. */
#kcore-root .kc-cv-vpick { display: flex; flex-direction: column; gap: 6px;
  max-height: 230px; overflow-y: auto; }
#kcore-root .kc-cv-vopt { all: unset; box-sizing: border-box; cursor: pointer; display: flex;
  align-items: center; gap: 8px; padding: 6px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); font-family: inherit; transition: all .15s; }
#kcore-root .kc-cv-vopt:hover { border-color: var(--accent); background: var(--accent-dim); }
#kcore-root .kc-cv-vopt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#kcore-root .kc-cv-vopt .kc-vitm-th { width: 34px; height: 34px; }
#kcore-root .kc-cv-vopt .kc-cv-an { margin: 0; }
#kcore-root .kc-cv-vcancel { all: unset; box-sizing: border-box; cursor: pointer;
  text-align: center; font-size: 11.5px; font-weight: 600; color: var(--text-3);
  padding: 6px; border-radius: 8px; font-family: inherit; }
#kcore-root .kc-cv-vcancel:hover { background: var(--surface-3); color: var(--text-1); }

/* ── Paso 2 (PDF): de dónde salen las páginas ── */
#kcore-root .kc-cv-srcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { #kcore-root .kc-cv-srcs { grid-template-columns: minmax(0,1fr); } }
#kcore-root .kc-cv-src { display: flex; flex-direction: column; gap: 12px; padding: 16px;
  border-radius: var(--r); border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; transition: all .15s; }
#kcore-root .kc-cv-src.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
#kcore-root .kc-cv-srch { display: flex; align-items: flex-start; gap: 10px; }
#kcore-root .kc-cv-srch .kc-cv-t b { font-size: 13.5px; }
#kcore-root .kc-cv-srch .kc-cv-t span { font-size: 12px; }
#kcore-root .kc-cv-radio { flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #D5D5CE; margin-top: 2px; transition: all .15s; }
#kcore-root .kc-cv-radio.on { border-color: var(--accent); border-width: 5px; }
#kcore-root .kc-cv-files { display: flex; flex-direction: column; gap: 6px; }
#kcore-root .kc-cv-file { all: unset; box-sizing: border-box; cursor: pointer; display: flex;
  align-items: center; gap: 9px; padding: 8px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-3); font-family: inherit;
  transition: all .15s; }
#kcore-root .kc-cv-file:hover { border-color: var(--accent); }
#kcore-root .kc-cv-file.sel { border-color: var(--accent); background: var(--tint); }
#kcore-root .kc-cv-file:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#kcore-root .kc-cv-file .kc-cv-an { flex: 1; margin: 0; }
#kcore-root .kc-cv-pgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px; }
#kcore-root .kc-cv-pg { position: relative; border-radius: 10px; border: 1px solid var(--border);
  overflow: hidden; background: var(--surface); }
#kcore-root .kc-cv-pg.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); cursor: grab; }
#kcore-root .kc-cv-pg.kc-dragging { opacity: .45; }
#kcore-root .kc-cv-pg.kc-dragover { border-color: var(--accent); background: var(--accent-dim); }
#kcore-root .kc-cv-pg button { all: unset; box-sizing: border-box; cursor: pointer; display: block;
  width: 100%; position: relative; }
#kcore-root .kc-cv-pg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#kcore-root .kc-cv-pg .kc-vitm-th { width: 100%; height: 76px; border-radius: 0; }
#kcore-root .kc-cv-pg .kc-cv-ac { top: 4px; right: 4px; width: 19px; height: 19px; font-size: 10px; }
#kcore-root .kc-cv-pg.sel .kc-cv-ac { background: var(--accent); color: #fff; }

/* ── El fondo del escenario del flipbook (BD v41), dentro del paso 2 ──
 * Mismo lenguaje visual que `.kc-cv-pgs`/`.kc-cv-pg` (rejilla de miniaturas
 * de 78px con borde de acento al elegir), solo que aquí las tarjetas son
 * cuadradas y de una sola pieza: no hay número de orden que pintar. */
#kcore-root .kc-cv-bg { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
/* La cabecera lleva el botón «Subir fondo» aparte de la rejilla (David, 24
 * ago 2026: la primera versión lo escondía como una tarjeta más y no lo
 * encontró). `.kc-cv-padd` es EL MISMO componente de «＋ Añadir
 * publicación», reusado a propósito. */
#kcore-root .kc-cv-bg-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#kcore-root .kc-cv-bg h4 { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--text-1); }
#kcore-root .kc-cv-bg .kc-cv-hint { margin-top: 4px; }
#kcore-root .kc-cv-bglist { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px; margin-top: 10px; max-width: 420px; }
#kcore-root .kc-cv-bgit { position: relative; aspect-ratio: 16 / 9; border-radius: 8px;
  border: 1px solid var(--border); overflow: hidden; cursor: pointer;
  background: var(--surface-3); transition: border-color .15s, box-shadow .15s; }
#kcore-root .kc-cv-bgit.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
#kcore-root .kc-cv-bgit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#kcore-root .kc-cv-bgit img { width: 100%; height: 100%; object-fit: cover; display: block; }
#kcore-root .kc-cv-bgnone { display: flex; align-items: center; justify-content: center; }
#kcore-root .kc-cv-bgnone span { font-size: 9.5px; color: var(--text-3); }
/* La × de quitar de la BIBLIOTECA. Declara su propio contexto de revelado
 * (`.kc-cv-bgit:hover`), no lo hereda de ningún otro sitio — la lección
 * dejada por `.kc-fdel`, que se quedó invisible al mudarse de contexto. */
#kcore-root .kc-cv-bgx { all: unset; box-sizing: border-box; position: absolute; top: 3px; right: 3px;
  width: 16px; height: 16px; border-radius: 50%; cursor: pointer; opacity: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6); color: #fff; font-size: 9px; transition: opacity .15s; }
#kcore-root .kc-cv-bgit:hover .kc-cv-bgx, #kcore-root .kc-cv-bgx:focus-visible { opacity: 1; }

/* ── Paso 3: el copy ── */
/* ── El NOMBRE de la publicación, debajo de las tarjetas del paso 1 (BD v45) ──
 * Hereda el foco del `textarea` del copy —mismo borde, mismo halo lima— porque
 * es el otro campo de escritura libre del modal y dos tratamientos distintos
 * para lo mismo se notan. Lo que no hereda es el tamaño: 13px contra 13,5, con
 * el rótulo encima, porque es un dato de una línea y no un texto que se redacta.
 *
 * El `(opcional)` va DENTRO del rótulo y en cursiva ligera, no como un aviso
 * aparte: si estuviera en la ayuda de abajo, quien mira el campo por encima lo
 * leería como obligatorio y se pararía a inventarse un nombre. */
#kcore-root .kc-cv-nom { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
#kcore-root .kc-cv-nom label { font-size: 12px; font-weight: 600; color: var(--text-2); }
#kcore-root .kc-cv-nom label i { font-style: italic; font-weight: 500; color: var(--text-3); }
#kcore-root .kc-cv-nom input { width: 100%; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 10px 12px; font-family: inherit; font-size: 13px; line-height: 1.4;
  color: var(--text-1); background: var(--surface); outline: none;
  transition: border-color .15s, box-shadow .15s; }
#kcore-root .kc-cv-nom input:focus { border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(203,249,4,.12); }
#kcore-root .kc-cv-nom input::placeholder { color: var(--text-3); }
#kcore-root .kc-cv-nom-h { font-size: 11.5px; color: var(--text-3); }

#kcore-root .kc-cv-copy { position: relative; }
#kcore-root .kc-cv-copy textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--r);
  padding: 13px 14px 26px; font-family: inherit; font-size: 13.5px; line-height: 1.6;
  color: var(--text-1); background: var(--surface); resize: vertical; outline: none;
  transition: border-color .15s, box-shadow .15s; }
#kcore-root .kc-cv-copy textarea:focus { border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(203,249,4,.12); }
#kcore-root .kc-cv-cc { position: absolute; right: 12px; bottom: 10px; font-size: 11px;
  color: var(--text-3); font-variant-numeric: tabular-nums; pointer-events: none; }
#kcore-root .kc-cv-over { color: #C0392B; font-weight: 700; }

/* ── El modal de curación (piezas que siguen vivas del diseño anterior) ── */
#kcore-root .kc-vitm-n { font-size: 12.5px; color: var(--text-1); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* `.kc-fdel` (la × de quitar de la vitrina) se fue con el modal viejo el 11
 * ago 2026: allá la reemplazó el toggle de la rejilla, y en Adjuntos ya la
 * había reemplazado el ⋮ con menú. Se documenta la trampa que dejó por si
 * alguien vuelve a escribir algo así: nacía en `opacity: 0` y la ÚNICA regla
 * que la revelaba era `.kc-file:hover .kc-fdel`, o sea el contexto de
 * Adjuntos. En cualquier otra lista el botón estaba ahí, el puntero lo
 * encontraba, y era invisible. Un control que se esconde tiene que declarar
 * DÓNDE se ve, no heredarlo de quien lo estrenó. */

/* `minmax(0,1fr)` y no `1fr`: con hijos que no se encogen, un `1fr` suelto no
 * baja del ancho de su contenido y revienta la grilla. Ya pasó con el
 * calendario y está documentado como la primera trampa de CSS del proyecto. */

#kcore-root .kc-vitm-th { flex: none; width: 38px; height: 38px; border-radius: 7px;
  overflow: hidden; background: var(--surface-3); display: flex;
  align-items: center; justify-content: center; }
#kcore-root .kc-vitm-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
#kcore-root .kc-vitm-doc { font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: var(--text-3); }

/* ── La portada en la tarjeta del Tablero ──
 * Solo aparece si esa pieza publicó algo: una tarjeta sin vitrina se ve
 * exactamente como antes de este cambio, sin marco gris de relleno. */
#kcore-root .kc-tk .kc-tk-cvr { position: relative; display: block; margin: -12px -13px 10px;
  border-radius: var(--r) var(--r) 0 0; overflow: hidden; background: var(--surface-3);
  height: 116px; }
#kcore-root .kc-tk .kc-tk-cvr img { width: 100%; height: 100%; object-fit: cover; display: block; }
#kcore-root .kc-tk .kc-tk-cvrn { position: absolute; right: 7px; bottom: 7px;
  background: rgba(13,17,23,.72); color: #fff; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px; }

/* En angosto la ficha colapsa a una columna y el cuerpo scrollea entero, así
 * que la vitrina queda arriba y la conversación debajo, que es el orden
 * correcto. Solo se bajan las alturas, que en móvil se comen la pantalla. */
@media (max-width: 900px) {
  /* Las dos alturas de la vitrina se mudaron a `kcore-vitrina.css` con el
     resto del visor: son de las dos superficies, y en el portal pesan más
     porque el cliente mira desde el teléfono. Aquí queda lo del Tablero, que
     es de la Mesa. */
  #kcore-root .kc-tk .kc-tk-cvr { height: 96px; }
}

/* ══════════ EL VISOR DE PDF, UNA HOJA A LA VEZ (pdf.js, 10 ago 2026) ══════════
 *
 * Pedido de David: *"que se vea una sola hoja y permita pasar las hojas de
 * derecha a izquierda y que se vea fluido, no trabado, parecido al preview del
 * carrusel"*. El visor nativo del navegador no puede hacer eso (no se le puede
 * pedir una página desde fuera), y por eso entró pdf.js.
 *
 * La página se pinta en un `<canvas>` a la resolución REAL de la pantalla; ver
 * `pintarPagina()` en el JS. Los controles son gemelos de los del carrusel a
 * propósito: es el mismo gesto sobre otra cosa, y darle otra forma obligaría a
 * aprender dos.
 */
#kcore-root .kc-pdfv { position: relative; display: flex; align-items: center;
  justify-content: center; min-height: 320px; padding: 12px;
  background: var(--surface-3); }
#kcore-root .kc-pdfv-c { display: block; max-width: 100%; border-radius: 3px;
  box-shadow: 0 4px 18px rgba(0,0,0,.14); background: #fff;
  /* Invisible hasta que hay algo pintado: un lienzo vacío con sombra parece una
   * hoja en blanco, o sea un documento roto. */
  opacity: 0; transition: opacity .18s ease; }
#kcore-root .kc-pdfv-listo .kc-pdfv-c { opacity: 1; }
#kcore-root .kc-pdfv-load { position: absolute; font-size: 12.5px; color: var(--text-3); }
#kcore-root .kc-pdfv-listo .kc-pdfv-load { display: none; }

#kcore-root .kc-pdfv-nav { all: unset; box-sizing: border-box; position: absolute; top: 50%;
  transform: translateY(-50%); z-index: 2; cursor: pointer; font-family: inherit;
  width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.94);
  box-shadow: var(--sh-sm); color: var(--text-1); font-size: 19px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: opacity .15s, background .15s; }
#kcore-root .kc-pdfv-nav:hover { background: #fff; }
#kcore-root .kc-pdfv-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Apagada en los extremos. Un botón que no hace nada y no lo dice es la forma
 * más rápida de que alguien crea que el visor se trabó. */
#kcore-root .kc-pdfv-nav[disabled] { opacity: .28; cursor: default; box-shadow: none; }
#kcore-root .kc-pdfv-prev { left: 10px; }
#kcore-root .kc-pdfv-next { right: 10px; }
#kcore-root .kc-pdfv-n { position: absolute; bottom: 10px; right: 12px;
  background: rgba(13,17,23,.72); color: #fff; font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 20px; }

/* En el marco Documento la hoja ocupa el alto de una carta; en los demás, una
 * caja más contenida para que el PDF no se coma la ficha entera. */
#kcore-root .kc-pdfv { height: 560px; }
#kcore-root .kc-vdoc .kc-pdfv { height: 760px; }
@media (max-width: 900px) {
  #kcore-root .kc-pdfv, #kcore-root .kc-vdoc .kc-pdfv { height: 420px; }
}


/* ── ETAPAS DEL TABLERO (BD v29) ───────────────────────────────────────────────
 *
 * Configuración → Etapas del tablero. Cada fase es un bloque, y sus columnas van
 * en FILA y con la misma píldora del Tablero: esta pantalla sirve para decidir
 * cómo va a quedar el tablero, así que enseñar aquí otro componente obligaría a
 * ir a comprobar allá cómo quedó.
 */
#kcore-root .kc-stg-intro { background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); padding: 14px 18px; margin-bottom: 16px;
  font-size: 13px; line-height: 1.6; color: var(--text-2); }

#kcore-root .kc-stg-fase { background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); padding: 16px 18px; margin-bottom: 14px; }
#kcore-root .kc-stg-fh { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
#kcore-root .kc-stg-ftitle { margin: 0; font-size: 15px; font-weight: 600;
  letter-spacing: -.01em; color: var(--text-1); }
#kcore-root .kc-stg-fija { font-size: 11px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .04em; }
/* Empuja la acción al borde derecho, el mismo patrón que `.kc-head-row > .kc-b`. */
#kcore-root .kc-stg-add { margin-left: auto; }

/* `auto-fit` con `minmax(0,...)`: un `1fr` suelto no se achica por debajo de su
 * contenido y la fila desbordaría con ocho columnas. Es la primera trampa del
 * §5.c, la del calendario. */
#kcore-root .kc-stg-cols { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

#kcore-root .kc-stgcol { position: relative; background: var(--surface-3);
  border: 1px solid var(--border); border-radius: var(--r); padding: 12px 12px 10px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
/* La columna de la fase se ve FIJA: sin agarrador, sin acciones y con el borde
 * marcado. Que no se pueda arrastrar tiene que verse antes de intentarlo. */
#kcore-root .kc-stgcol-fase { background: var(--surface); border-style: dashed; }
#kcore-root .kc-stgcol[draggable="true"] { cursor: grab; }
#kcore-root .kc-stgcol.kc-dragging { opacity: .45; }
#kcore-root .kc-stgcol.kc-dragover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }

#kcore-root .kc-stg-grip { position: absolute; top: 9px; right: 10px;
  color: var(--text-3); font-size: 13px; line-height: 1; letter-spacing: -1px; }
#kcore-root .kc-stg-n { font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* Las acciones aparecen al pasar por encima, como en las filas de plantillas.
 * En táctil no hay hover, así que ahí van siempre visibles: sin esta regla, en
 * un teléfono no habría forma de editar ni borrar una etapa. */
#kcore-root .kc-stg-acts { display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
#kcore-root .kc-stgcol:hover .kc-stg-acts,
#kcore-root .kc-stgcol:focus-within .kc-stg-acts { opacity: 1; }
@media (hover: none) { #kcore-root .kc-stg-acts { opacity: 1; } }

#kcore-root .kc-stg-ic { all: unset; box-sizing: border-box; cursor: pointer;
  width: 26px; height: 26px; border-radius: var(--r-sm); display: flex;
  align-items: center; justify-content: center; color: var(--text-2); }
#kcore-root .kc-stg-ic svg { width: 14px; height: 14px; }
#kcore-root .kc-stg-ic:hover { background: #E9E9E3; color: var(--text-1); }
#kcore-root .kc-stg-ic.kc-danger:hover { background: #FBE3E1; color: #D0392C; }
#kcore-root .kc-stg-ic:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

#kcore-root .kc-stg-vacia { margin-top: 10px; font-size: 12.5px; color: var(--text-3); line-height: 1.55; }

/* La paleta del modal. Cada opción se pinta CON SU PROPIO PAR fondo/texto
 * (`.kc-pl-*`), que es lo que se va a ver en el tablero: un cuadradito de color
 * no dice si el texto encima va a leerse, y el par está medido justamente para
 * eso. Ver KCORE_Stages::TONOS. */
#kcore-root .kc-stgtones { display: flex; flex-wrap: wrap; gap: 6px; }
/* ⚠️ SIN `all: unset`, y no es un descuido. Estos botones llevan además su clase
 * de tono (`.kc-pl-*`), declarada 2.700 líneas más arriba con la MISMA
 * especificidad; `all` incluye `background`, así que a igual especificidad ganaría
 * esta regla por ir después y las ocho opciones saldrían transparentes. Es
 * exactamente lo que le pasó a `.kc-sc-p` con la píldora de prioridad el 11 de
 * agosto. Se resetea a mano lo que estorba de un <button> y se deja en paz lo
 * que trae la clase de tono. */
#kcore-root .kc-stgtone { -webkit-appearance: none; appearance: none; cursor: pointer;
  font-family: inherit; margin: 0;
  font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .04em;
  border: 2px solid transparent; }
#kcore-root .kc-stgtone.sel { border-color: var(--text-1); }
#kcore-root .kc-stgtone:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

@media (max-width: 900px) {
  #kcore-root .kc-stg-cols { grid-template-columns: minmax(0, 1fr); }
  /* Con la cabecera en una sola fila, «＋ Nueva etapa» se sale y arrastra la
   * página a scroll horizontal. Es el defecto que el marco web ya pagó una vez. */
  #kcore-root .kc-stg-fh { flex-wrap: wrap; row-gap: 8px; }
}

/* ── Arrastrar una tarjeta a otra columna del Tablero (BD v29) ────────────────
 *
 * Con sub-etapas un tablero puede tener ocho columnas, y mover una pieza
 * abriendo su ficha y eligiendo en un menú deja de servir.
 */
/* ⚠️ NOVENA TRAMPA DE CSS, Y ES LA DEL §5.c.5 OTRA VEZ CON OTRA PROPIEDAD.
 *
 * Lo reportó David probándolo: *"se ve la manito que agarra la tarjeta pero no
 * se puede mover"*. El cursor salía (es esta misma regla) y el arrastre no
 * arrancaba nunca. Medido: `mousedown: 1, dragstart: 0`.
 *
 * La causa NO es el atributo `draggable` ni el tipo de elemento. Chrome y Safari
 * implementan `draggable="true"` como un **hint de presentación**, o sea como si
 * pusieran `-webkit-user-drag: element`; y un hint de presentación lo pisa
 * cualquier regla de hoja de autor. `.kc-tk` abre con `all: unset`, que incluye
 * esa propiedad, así que la tarjeta se quedaba en `auto` y el navegador no
 * iniciaba ningún arrastre.
 *
 * Medido en el navegador, con los cuatro casos, que es lo que cerró el
 * diagnóstico (el primer intento culpó al `<button>` y estaba equivocado):
 *
 *     div    suelto            → element      div    + all:unset → auto
 *     button suelto            → element      button + all:unset → auto
 *
 * O sea que el elemento da igual: manda `all: unset`. Firefox no implementa esta
 * propiedad y tampoco mapea `draggable` a CSS, así que allá funciona solo y esta
 * línea le es indiferente.
 *
 * La regla ya estaba escrita en el §5.c.5 para `box-sizing`; aquí muerde con
 * `-webkit-user-drag`. **Cualquier `all: unset` de este archivo hay que mirarlo
 * contra lo que el elemento necesite del navegador.**
 */
#kcore-root .kc-tk[draggable="true"] { -webkit-user-drag: element; cursor: grab; }
#kcore-root .kc-tk[draggable="true"]:active { cursor: grabbing; }
#kcore-root .kc-tk.kc-dragging { opacity: .4; }

/* ⚠️ El realce va con `outline` y NO con `border`, a propósito: un borde de 2px
 * cambia la caja y empujaría las tarjetas de la columna justo mientras se está
 * apuntando a ella, o sea que el sitio donde vas a soltar se mueve solo. El
 * outline no ocupa espacio. `outline-offset` negativo lo mete dentro de la
 * columna para que no pise a la vecina. */
#kcore-root .kc-col.kc-colover { outline: 2px dashed var(--accent);
  outline-offset: -4px; border-radius: 16px; background: var(--accent-dim); }
/* El estado vacío ya tiene su propio borde punteado: dos punteados anidados se
 * leen como un error de pintado. */
#kcore-root .kc-col.kc-colover .kc-col-empty { border-color: transparent; }

/* ══════════ LA FICHA DE CONFIGURACIÓN DEL CLIENTE (29 ago 2026) ══════════
 *
 * Rediseño de David. La pantalla resolvía tres cosas a la vez —administrar,
 * configurar identidad, y configurar quién pide y qué se le pregunta— en un
 * plano único. Ahora es una ficha con cabecera y tres pestañas.
 *
 * ⚠️ Va ANTES de los bloques responsive y de la re-declaración final de
 * `.kc-hidden`: a igual especificidad gana la última regla, y un estilo base
 * escrito después pisaría el responsive entero. */

/* ── Cabecera ── */
#kcore-root .kc-dephead { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 6px; }
#kcore-root .kc-depic-lg { width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0; }
#kcore-root .kc-depic-lg svg { width: 26px; height: 26px; }
#kcore-root .kc-depic-xl { width: 72px; height: 72px; border-radius: 18px; flex-shrink: 0; }
#kcore-root .kc-depic-xl svg { width: 34px; height: 34px; }
/* ⚠️ El título manda sobre el enlace del portal, y hay que decirlo con
   `flex`: `.kc-plink` no declara ancho, así que como hijo del flex se comía 422
   de 600px y dejaba el nombre en 90 — partido en dos líneas de tres letras.
   Medido, no supuesto. */
#kcore-root .kc-dephmain { flex: 1 1 auto; min-width: 220px; }
/* Tarjeta al costado. `flex: 0 1 <ancho>` y NO `flex: 1`: sin base declarada se
   comía 422 de los 600px de la cabecera y dejaba el título en 90px partido en
   dos líneas (defecto ya pagado una vez). */
#kcore-root .kc-dephead .kc-plink { margin: 0 0 0 auto; flex: 0 1 470px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px 18px; }
#kcore-root .kc-plink-t { display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--text-0); }
#kcore-root .kc-plink-t svg { width: 16px; height: 16px; display: block; fill: none; flex-shrink: 0;
  color: var(--text-2); }

/* `.kc-search` trae `flex: 1`, pensado para una barra horizontal. En la columna
   de clientes eso lo estiraba a 239px de alto y dejaba la lupa flotando sola en
   medio de la nada. Es la sexta trampa de este archivo: una regla que sirve en
   un contexto no sirve en el siguiente. */
#kcore-root .kc-depsearch { flex: none; max-width: none; width: 100%; }
#kcore-root .kc-dephmeta { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
#kcore-root .kc-dephppl { display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-2); }
#kcore-root .kc-dephppl svg { width: 15px; height: 15px; display: block; fill: none; flex-shrink: 0; }

/* El título se lee; se vuelve campo al tocarlo. */
/* ⚠️ `--fs-xl` y NO `--fs-ficha` (que se llamaba `--fs-2xl`), aunque sea el
 * título de una ficha.
 *
 * `--fs-ficha` es para una ficha que vive en un CAJÓN: tapa la pantalla, no
 * compite con nada y puede ser lo más grande que haya. Esta va EN LÍNEA, con el
 * encabezado de la sección encima, así que con 30px la pantalla de Clientes
 * tenía un elemento un 25% más grande que lo más grande de cualquier otra y se
 * leía desproporcionada al lado del resto. Lo reportó David.
 *
 * La regla que deja: **nada renderizado en línea pasa de `--fs-xl`**, que es el
 * techo del encabezado de sección. El `--fs-ficha` se lo gana solo lo que se
 * adueña del viewport. */
#kcore-root h2.kc-deptitle { margin: 0; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.15; color: var(--text-0); cursor: text; }
#kcore-root .kc-deptitle-in { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.15; width: 100%; }
#kcore-root .kc-c-you { background: var(--accent-dim); color: #4A5D00; }

/* Las pestañas de la ficha usan el ESTÁNDAR de la plataforma (§5.b): pastilla
   blanca sobre riel gris, la misma del Overview del cliente. Aquí solo se
   separa del contenido de arriba. */
#kcore-root .kc-deptabs { margin: 26px 0 0; }

/* ── Secciones del cuerpo ── */
#kcore-root .kc-depsec { margin-bottom: 26px; padding-top: 34px; }
#kcore-root .kc-depsech-row { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 16px; }
#kcore-root .kc-depsech { margin: 0 0 5px; font-size: var(--fs-lg); font-weight: 700;
  letter-spacing: -.01em; color: var(--text-0); }
#kcore-root .kc-depsecd { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
/* Columnas ASIMÉTRICAS: la foto es una columna estrecha y el resto se lo lleva
   lo que se edita. `minmax(0,1fr)` en la derecha y nunca un `1fr` suelto: la
   fila de iconos tiene ancho mínimo propio y reventaría la columna (§5.c.1). */
#kcore-root .kc-depgrid { display: grid; grid-template-columns: 200px minmax(0,1fr);
  gap: 18px 42px; align-items: start; margin-top: 26px; }
#kcore-root .kc-depgcol { min-width: 0; }
/* ⚠️ Los rótulos de la ficha van en CAJA BAJA (diseño de David). La versalita
   gris de 11px es el estándar de las CABECERAS DE TABLA, y aquí rotula campos
   que se editan: en mayúscula se leen como encabezados de una tabla que no
   existe. Se re-alcanza desde `.kc-depgrid` para no tocar el resto. */
#kcore-root .kc-depgrid .kc-deph3,
#kcore-root .kc-depgrid .kc-fld > label { text-transform: none; letter-spacing: 0;
  font-size: 13.5px; font-weight: 500; color: var(--text-1); margin-bottom: 9px; }
#kcore-root .kc-depgrid .kc-deph3 { margin-top: 30px; }
#kcore-root .kc-depgcol > .kc-deph3:first-child { margin-top: 0; }
/* El primer título de una columna no separa de nada: sin esto, el de la derecha
   arranca 20px más abajo que el campo de la izquierda y se ve descuadrado. */
#kcore-root .kc-depgcol > .kc-deph3:first-child { margin-top: 0; }
#kcore-root .kc-depname-f { margin: 0 0 22px; max-width: 960px; }
#kcore-root .kc-req { color: #D14343; }

/* Eliminar va al FINAL de General y separado: una acción destructiva no compite
   de tú a tú con los controles de todos los días. Mismo criterio que sacarla de
   la cabecera de la ficha de una pieza al menú ⋮. */
#kcore-root .kc-depdanger { margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ── La tabla de solicitantes ──
   Reemplaza a las tarjetas: con ocho personas, comparar correos o ver quién no
   ha entrado nunca obligaba a leer en zigzag. */
/* ⚠️ SIN BORDES (David, 29 ago 2026: «ese estilo no lo manejamos»). Lo que
   separa las filas es el hover, igual que en el resto de la plataforma; el
   encabezado se distingue por su versalita gris y no por una línea. */
/* ⚠️ El `!important` NO es decoración: los bordes que David vio los pone ASTRA
   en todo `<table>`, `<th>` y `<td>`, y sin esto vuelven en cuanto se quite
   cualquier regla nuestra. Es la regla del proyecto para propiedades críticas. */
#kcore-root .kc-deptable,
#kcore-root .kc-deptable th,
#kcore-root .kc-deptable td { border: 0 !important; background-image: none; }
#kcore-root .kc-deptable { width: 100%; border-collapse: collapse; }
#kcore-root .kc-deptable th { text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .07em; font-weight: 600; color: var(--text-3); padding: 0 12px 10px 12px;
  white-space: nowrap; }
#kcore-root .kc-deptable td { padding: 12px; font-size: 13px; color: var(--text-1);
  vertical-align: middle; }
#kcore-root .kc-deptable tbody tr { border-radius: var(--r-sm); transition: background .14s; }
#kcore-root .kc-deptable tbody tr:hover { background: var(--surface-2); }
#kcore-root .kc-deptable th:first-child, #kcore-root .kc-deptable td:first-child { padding-left: 4px; }
#kcore-root .kc-deptable-acc { text-align: right; padding-right: 4px !important; width: 1%; }

/* ⚠️ EL MENÚ ⋯ SE ANCLA A SU CELDA, Y SIN ESTO SE VA A LA ESQUINA DE LA
   PANTALLA. `.kc-pmenu` es `position: absolute`, y un `<td>` no es un ancestro
   posicionado por defecto: sin `position: relative` aquí, el menú resolvía
   contra el primer ancestro que sí lo fuera (o el viewport) y aparecía arriba a
   la derecha, lejísimos de la fila que lo abrió. Reportado por David. */
#kcore-root .kc-deptable-acc { position: relative; }
#kcore-root .kc-deptable-acc .kc-pmenu { top: 32px; right: 4px; }
#kcore-root .kc-reqcell { display: flex; align-items: center; gap: 9px; }
#kcore-root .kc-reqcell b { font-weight: 500; color: var(--text-0); }
#kcore-root .kc-reqmail { color: var(--text-2); }
#kcore-root .kc-reqlast { color: var(--text-2); white-space: nowrap; }

/* El estado se DERIVA del último acceso; no hay «inactivo» porque no hay modelo
   para eso. Ver `KCORE_Requesters::all()`. */
#kcore-root .kc-st { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px;
  font-weight: 500; white-space: nowrap; }
#kcore-root .kc-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
#kcore-root .kc-st-act { color: #2E7D52; }
#kcore-root .kc-st-act::before { background: #3AA377; }
#kcore-root .kc-st-inv { color: #6B7280; }
#kcore-root .kc-st-inv::before { background: #9CA3AF; }

/* El buscador de la lista, con las medidas del de Plantillas. */
#kcore-root .kc-depsearch { margin: 0 0 4px; }

@media (max-width: 1180px) {
  #kcore-root .kc-dephead { flex-wrap: wrap; }
  /* La tabla scrollea LO SUYO en vez de arrastrar la página a scroll
     horizontal, que es el defecto que este archivo ya pagó tres veces. */
  #kcore-root .kc-depsec { overflow-x: auto; overflow-y: hidden; }
  #kcore-root .kc-depgrid { grid-template-columns: minmax(0,1fr); }
  /* En angosto, veinte pistas dejarían tejas de 12px: se reparte en dos filas. */
  #kcore-root .kc-icgrid { grid-template-columns: repeat(10, minmax(0,1fr)); }
}

/* ══════════ EL BRIEF DE SOLICITUDES (28 ago 2026, BD v44) ══════════
 *
 * El editor de las preguntas que el portal le hace a un cliente, dentro del
 * detalle de Clientes. Dos columnas: la lista de preguntas y la VISTA PREVIA.
 *
 * ⚠️ Prefijo `kc-bf` y no `kc-brief`: esa clase ya existe y es la tarjeta «Qué
 * pidió» de la ficha (§5.c.3).
 *
 * ⚠️ **Ninguna regla de aquí usa `all: unset`.** `.kc-bfrow` es arrastrable, y
 * `all: unset` resetea `-webkit-user-drag` a `auto`: en Chrome y Safari
 * `draggable="true"` es un HINT DE PRESENTACIÓN que cualquier hoja de autor
 * pisa, así que el arrastre se rompería sin que nada avisara. Es la novena
 * trampa de CSS de este repo, y le pasó a `.kc-tk` del Tablero.
 */
#kcore-root .kc-bftabs { margin: 4px 0 16px; }
#kcore-root .kc-bfsub { font-size: 12.5px; line-height: 1.55; color: var(--text-2); margin: 0 0 14px; }

#kcore-root .kc-bfwarn { background: #FFF8E1; border: 1px solid #F7C948; border-radius: var(--r-sm);
  padding: 10px 13px; font-size: 12.5px; line-height: 1.5; color: #6B5200; margin: 0 0 14px; }
#kcore-root .kc-bfwarn b { font-weight: 600; }

/* `minmax(0,1fr)` y nunca un `1fr` suelto: la vista previa tiene contenido con
   ancho mínimo y un `1fr` se expandiría para acomodarlo, reventando la columna
   entera (§5.c.1, y ya pasó tres veces en este repo). */
#kcore-root .kc-bflayout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,400px);
  gap: 28px; align-items: start; margin-top: 18px; }
#kcore-root .kc-bfcol { min-width: 0; }
/* La cabecera de la columna EDITABLE. Existe para que no haya duda de cuál de
   las dos columnas se toca: la de al lado se mira. */
#kcore-root .kc-bfedh { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 14px; }
#kcore-root .kc-bfedht { min-width: 0; }
#kcore-root .kc-bfedh3 { margin: 0 0 3px; font-size: 14.5px; font-weight: 600; color: var(--text-0); }
#kcore-root .kc-bfedhd { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--text-3); }
#kcore-root .kc-bftdel { all: unset; box-sizing: border-box; flex: none; display: flex;
  align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--r-sm);
  border: 1px solid var(--line); font-size: 11.5px; font-weight: 500; color: var(--text-2);
  cursor: pointer; font-family: inherit; white-space: nowrap; }
#kcore-root .kc-bftdel:hover { border-color: #E7B4B4; background: #FDECEC; color: #C0392B; }
#kcore-root .kc-bftdel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#kcore-root .kc-bftdel svg { width: 14px; height: 14px; display: block; fill: none; flex-shrink: 0; }

#kcore-root .kc-bflist { display: flex; flex-direction: column; gap: 8px; }

#kcore-root .kc-bfrow { display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
#kcore-root .kc-bfrow:hover { border-color: var(--border); }
#kcore-root .kc-bfrow.kc-dragging { opacity: .4; }
#kcore-root .kc-bfrow.kc-dragover { border-color: var(--lime); box-shadow: 0 0 0 2px rgba(203,249,4,.35); }
#kcore-root .kc-bfgrip { cursor: grab; color: var(--text-3); font-size: 13px; line-height: 1; user-select: none; }
#kcore-root .kc-bfmain { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
#kcore-root .kc-bflabel { font-size: 13.5px; font-weight: 500; color: var(--text-0); }
#kcore-root .kc-bfhelp { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#kcore-root .kc-bfreq { color: #D14343; margin-left: 3px; font-weight: 600; }

#kcore-root .kc-bfchip { flex-shrink: 0; font-size: 10.5px; font-weight: 500; padding: 3px 8px;
  border-radius: 20px; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
#kcore-root .kc-bfchip-t { background: var(--accent-dim); color: #4A5D00; }

/* Astra le mete `padding: 8.4px 14px` a TODO botón, y un icon-only con
   `width` fijo se queda con el área de contenido en 4px y el SVG invisible.
   REGLA del proyecto: todo botón icon-only declara su padding explícito. */
#kcore-root .kc-bfedit { flex-shrink: 0; background: none; border: 0; padding: 4px 6px !important;
  font-size: 11.5px; font-weight: 500; color: var(--text-2); cursor: pointer; border-radius: 6px; }
#kcore-root .kc-bfedit:hover { background: var(--surface-3); color: var(--text-0); }
#kcore-root .kc-bfdel { flex-shrink: 0; width: 26px; height: 26px; padding: 0 !important; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; background: none; border: 0;
  border-radius: 6px; cursor: pointer; color: var(--text-3); }
#kcore-root .kc-bfdel:hover { background: #FDECEC; color: #D14343; }
#kcore-root .kc-bfdel svg { display: block; fill: none; flex-shrink: 0; }

#kcore-root .kc-bfreset { display: block; margin: 14px 0 0; background: none; border: 0; padding: 0 !important;
  font-size: 12px; color: #D14343; cursor: pointer; text-decoration: underline; }

/* ── La vista previa ──
   Va SIEMPRE visible, no detrás de un botón: es lo único que le enseña a quien
   configura cómo se siente llenar el formulario, y con la lista sola un brief de
   quince preguntas parece razonable. */
/* `sticky` para que «siempre visible» sea verdad y no una intención: con la
   lista larga, la previa se iba hacia arriba al bajar por las preguntas, y
   entonces el único sitio donde se ve el efecto de lo que estás editando
   desaparece justo cuando más preguntas hay. Medido en el navegador, no
   supuesto. Solo aplica mientras la caja scrollee (≥1181px, dos columnas). */
#kcore-root .kc-bfprev { min-width: 0; position: sticky; top: 0; }
#kcore-root .kc-bfprevh { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 600; color: var(--text-3); margin-bottom: 10px; }

/* ═══ LA PREVIA ES UNA FOTO, NO UN SEGUNDO EDITOR ═══
 *
 * Se pinta con los controles del PORTAL —tarjeta clara, campos de 13.5px sobre
 * #F7F8FA, chips pill, botón lima— porque su trabajo entero es enseñar cómo se
 * SIENTE llenarlo (§3.b: los valores se copian del portal, no se eligen). Con
 * los estilos de esta pantalla era una lista de preguntas más.
 *
 * ⚠️ **`pointer-events: none` VA EN LOS HIJOS DEL CUERPO, NO EN LA TARJETA.**
 *
 * La primera versión lo puso en `.kc-bfpapp` entero, y eso apagaba también la
 * RUEDA: `.kc-bfpbody` scrollea sus 62vh, pero un elemento que no recibe
 * eventos tampoco recibe `wheel`, así que un brief largo se veía cortado y no
 * había forma de bajar. Lo reportó David.
 *
 * Con el bloqueo en `.kc-bfpbody > *`, el ÚNICO nodo que recibe eventos es el
 * cuerpo, y solo para scrollear: no tiene ningún manejador de clic detrás, y
 * el `dragover` de esta pantalla solo llama a `preventDefault()` dentro de
 * `.kc-bflist`, así que sin esa llamada el navegador NO la acepta como zona de
 * suelta. La garantía de «aquí no se edita ni se arrastra» se mantiene, y
 * ahora además se puede leer entera.
 */
#kcore-root .kc-bfpapp { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-sm);
  user-select: none; }
#kcore-root .kc-bfpbar { pointer-events: none; }
#kcore-root .kc-bfpbody > * { pointer-events: none; }
#kcore-root .kc-bfpbar { display: flex; align-items: center; gap: 5px; padding: 9px 13px;
  background: var(--ink); }
#kcore-root .kc-bfpdot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.28); }
#kcore-root .kc-bfpbart { margin-left: 8px; font-size: 11px; font-weight: 500; color: #FFF; letter-spacing: .01em; }
/* `overflow-x: hidden` explícito: al dejar de ser `visible` un eje, el otro
   computa a `auto` solo y pinta una barra horizontal parásita (§5.c.2). */
#kcore-root .kc-bfpbody { padding: 16px 17px 18px; max-height: 62vh; max-height: 62dvh;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;
  scrollbar-color: #D8D8D2 transparent; }
#kcore-root .kc-bfpbody::-webkit-scrollbar { width: 8px; }
#kcore-root .kc-bfpbody::-webkit-scrollbar-thumb { background: #D8D8D2; border-radius: 8px; }
#kcore-root .kc-bfpbody::-webkit-scrollbar-track { background: transparent; }

#kcore-root .kc-bfptipo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 13px; margin-bottom: 15px; border-bottom: 1px solid var(--line); }
#kcore-root .kc-bfptipochip { font-size: 11.5px; font-weight: 600; padding: 4px 11px;
  border-radius: 20px; background: var(--accent-dim); color: #4A5D00; }
#kcore-root .kc-bfptipot { font-size: 10.5px; color: var(--text-3); font-style: italic; }

#kcore-root .kc-bfprevempty { font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
#kcore-root .kc-bfpfield { margin-bottom: 15px; }
#kcore-root .kc-bfplab { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-0); margin-bottom: 5px; }
#kcore-root .kc-bfphelp { display: block; font-size: 11px; color: var(--text-3); margin: -3px 0 6px; line-height: 1.4; }
/* Los campos son CAJAS, no `<input disabled>`: el gris de apagado del navegador
   dice "esto está roto", y lo que hay que enseñar es un formulario en blanco. */
#kcore-root .kc-bfpin { width: 100%; box-sizing: border-box; background: #F7F8FA;
  border: 1px solid var(--line); border-radius: 8px; min-height: 36px;
  padding: 9px 12px; font-size: 13px; color: var(--text-3); }
#kcore-root .kc-bfpta { min-height: 62px; }
#kcore-root .kc-bfpfake { color: var(--text-3); }
#kcore-root .kc-bfpchips { display: flex; flex-wrap: wrap; gap: 6px; }
#kcore-root .kc-bfpchip { font-size: 11.5px; padding: 6px 13px; border-radius: 20px;
  background: #F7F8FA; border: 1px solid var(--line); color: var(--text-1); }
#kcore-root .kc-bfpdrop { border: 1px dashed var(--border); border-radius: 8px; padding: 16px;
  text-align: center; font-size: 11.5px; color: var(--text-3); background: #F7F8FA; }
#kcore-root .kc-bfpchecks { display: flex; align-items: center; gap: 7px; margin-top: 8px;
  font-size: 12px; color: var(--text-2); }
#kcore-root .kc-bfpbox { width: 14px; height: 14px; flex: none; border: 1px solid var(--border);
  border-radius: 4px; background: var(--surface); }

/* El bloque de Entrega se pinta aunque no sea configurable: quien arma el brief
   tiene que ver el formulario COMPLETO, o agregaría una pregunta de fecha
   creyendo que falta y habría dos. Va visualmente separado para que se entienda
   que no sale de la lista de al lado. */
#kcore-root .kc-bpfixed { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
#kcore-root .kc-bfpfixh { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 600; color: var(--text-3); margin-bottom: 12px; }
#kcore-root .kc-bfpnote { margin: 0; font-size: 10.5px; line-height: 1.45; color: var(--text-3); font-style: italic; }
/* El botón cierra la foto: sin él la previa termina en el aire y no se lee como
   un formulario que alguien va a mandar. Es un `<div>`, no un `<button>`. */
#kcore-root .kc-bfpsend { margin-top: 16px; padding: 11px 16px; border-radius: 10px;
  background: var(--lime); color: var(--ink); font-size: 13.5px; font-weight: 600;
  text-align: center; }

#kcore-root .kc-depit-tpl .kc-depname { font-weight: 600; }
#kcore-root .kc-depit-tpl { border-bottom: 1px solid var(--line); }

@media (max-width: 1180px) {
  /* Apilada, la vista previa va DEBAJO de la lista y no al revés: lo que se
     edita tiene que quedar bajo el pulgar, y la previa es para mirar.
     Y deja de ser `sticky`: pegada arriba en una sola columna taparía la lista
     que se está editando, que es lo contrario de para lo que existe. */
  #kcore-root .kc-bflayout { grid-template-columns: minmax(0,1fr); }
  #kcore-root .kc-bfprev { position: static; }
}

/* El párrafo de un modal.
 *
 * Existía como estilo EN LÍNEA repetido en cada llamador (la papelera, el
 * borrado de un solicitante). Se declara aquí con los mismos valores para que el
 * próximo modal no tenga que copiarlos, que es como terminan divergiendo tres
 * modales que deberían verse igual. */
#kcore-root .kc-mtxt { font-size: 13.5px; line-height: 1.6; color: #4B5563; margin: 0 0 14px; }

/* ── El riel de tipos de trabajo del brief (29 ago 2026) ──
 *
 * Reusa `.kc-tabs`/`.kc-tab`, que es el estándar de pestañas de la plataforma
 * (§5.b): pastilla blanca con sombra para la activa, nunca acento lima. Lo que
 * se agrega es solo el envoltorio y la pestaña de crear. */
/* ═══ EL RIEL DE TIPOS VA SUBRAYADO, NO EN PASTILLA (David, 31 ago 2026) ═══
 *
 * ⚠️ **Es la excepción al estándar del §5.b**, y el intercambio es deliberado:
 * las pestañas de la ficha (General / Solicitantes / Briefs) volvieron a la
 * pastilla del Overview, y los TIPOS pasaron al subrayado que ellas tenían.
 * David lo pidió así al verlos juntos. La lógica es defendible: la pastilla es
 * un selector de VISTA —cambia de qué estás hablando— y el riel de tipos es un
 * eje de contenido dentro de una misma vista, más cerca de las pestañas de un
 * documento. Si el estándar se revisa, se revisa entero (§5.b), no aquí.
 *
 * `overflow-x: auto` con `overflow-y: hidden` explícito: al dejar de ser
 * `visible` un eje, el otro computa a `auto` solo y pinta una barra parásita
 * (§5.c.2). Y `padding-bottom` en el riel para que el subrayado no se coma la
 * línea inferior al scrollear. */
#kcore-root .kc-bftipos { margin: 0 0 4px; max-width: 100%;
  display: flex; gap: 26px; align-items: stretch;
  background: transparent; border-radius: 0; padding: 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto; overflow-y: hidden; }
#kcore-root .kc-bftipos .kc-tab { flex: none; background: transparent; border-radius: 0;
  box-shadow: none; padding: 0 0 12px; font-size: 13.5px; font-weight: 500;
  color: var(--text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; }
#kcore-root .kc-bftipos .kc-tab:hover { color: var(--text-1); background: transparent; }
#kcore-root .kc-bftipos .kc-tab.on { background: transparent; box-shadow: none;
  color: var(--text-0); font-weight: 600; border-bottom-color: var(--lime); }

/* «＋ Tipo» NO es una pestaña: en un riel subrayado, un botón con subrayado
   propio se leería como un tipo más llamado «Tipo». Va como acción discreta. */
#kcore-root .kc-bftnew { color: var(--accent) !important; font-weight: 600;
  border-bottom-color: transparent !important; }
#kcore-root .kc-bftnew:hover { color: var(--ink) !important; }

/* Lo que se hereda de «En todas» dentro de un tipo: se VE para que el formulario
 * se entienda completo, pero no se edita desde aquí — se edita en su pestaña, y
 * mezclarlo haría dudar de qué estás tocando. */
#kcore-root .kc-bfher { margin-bottom: 12px; }
#kcore-root .kc-bfherh { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 600; color: var(--text-3); margin-bottom: 6px; }
#kcore-root .kc-bfrow-her { opacity: .62; background: transparent; border-style: dashed; }

/* Los adjuntos del cliente en el triage (29 ago 2026).
 *
 * Reusa `.kc-file` de la ficha —el mismo componente, no una copia— y solo
 * agrega el envoltorio y su título. En modo LECTURA: aquí no se sube ni se
 * borra, solo hay que poder mirarlos para decidir si se acepta. */
#kcore-root .kc-dtfiles { margin-top: 18px; }
#kcore-root .kc-dtfiles h3 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .09em; font-weight: 600; color: var(--text-3); }

/* El riel de tipos, arrastrable. Sin `all: unset` en ninguna de estas reglas:
 * `.kc-tab` no lo lleva, y `all` resetea `-webkit-user-drag`, que es lo que en
 * Chrome y Safari hace que `draggable="true"` funcione (novena trampa). */
#kcore-root .kc-bftipos .kc-tab[draggable="true"] { cursor: grab; }
#kcore-root .kc-bftipos .kc-tab.kc-dragging { opacity: .4; }
#kcore-root .kc-bftipos .kc-tab.kc-dragover { box-shadow: inset 2px 0 0 var(--lime); }
/* El contador va neutro en los dos estados, como manda el §5.b: con color le
   pelearía la señal al subrayado, que es lo que dice cuál está activa. */
#kcore-root .kc-bftipos .kc-tab .kc-tc { margin-left: 6px; }

/* ═══════════════ EL ESQUELETO DE CARGA ═══════════════

   Reportado por David (1 sep 2026): *"mientras carga se queda en blanco, solo
   con los títulos pero vacío todo… habíamos definido que iba a haber una
   animación como de esqueleto parpadeando"*.

   La decisión existía, pero solo se había construido en el PORTAL del cliente
   (`.dbch-sk-*` en dbch-dashboard.css). La Mesa nunca la tuvo: sus tres huecos
   —las cuatro tarjetas, la tabla y la columna derecha— se pintan desde el JS
   con `innerHTML`, así que hasta que volvía el `fetch` no había nada.

   ⚠️ EL ESQUELETO LO PINTA EL PHP, no el JS, y ese es el punto: si lo montara el
   JS aparecería DESPUÉS de descargar y parsear kcore-mesa.js, que es justo el
   tramo que se quiere tapar. Viniendo en el HTML se ve en el primer pintado.

   Y no hace falta apagarlo: `renderMine()` asigna `innerHTML` sobre esos mismos
   tres contenedores, así que el esqueleto se va solo cuando llegan los datos.
   Un `hide()` aparte sería un segundo sitio que mantener sincronizado.

   El pulso es el MISMO del portal (1,5 s, `ease-in-out`, opacidad 1 → .45) para
   que las dos superficies esperen igual. Los retrasos escalonados hacen que la
   fila lata en ola en vez de a bloque, que es lo que la lee como "cargando" y
   no como "roto". */
@keyframes kc-sk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* El gris es PROPIO y no `--line` (#F0F0ED): esa es la hairline interna, un
   color pensado para una raya de 1 px. Como bloque de 116 px sobre el fondo de
   la página (#FAFAF8) casi no se distingue, y un esqueleto que no se ve es
   otra vez la pantalla en blanco. Este cae por debajo del fondo y de la
   superficie blanca de las tarjetas, así que lee en los dos sitios. */
#kcore-root .kc-sk { background: #E9E9E4; border-radius: var(--r);
  animation: kc-sk-pulse 1.5s ease-in-out infinite; }
#kcore-root .kc-sk-2 { animation-delay: .12s; }
#kcore-root .kc-sk-3 { animation-delay: .24s; }
#kcore-root .kc-sk-4 { animation-delay: .36s; }

/* Las cuatro tarjetas: el MISMO alto que las de verdad (116 px), o al llegar
   los datos la página da un salto y el esqueleto deja de ser una espera para
   ser un tirón. */
#kcore-root .kc-sk-stat { min-height: 116px; border-radius: var(--r-lg); }

/* La tabla: filas del alto de una `.kc-tr` (13 px de padding + contenido). */
#kcore-root .kc-sk-rows { padding: 6px 6px 12px; }
#kcore-root .kc-sk-row { height: 44px; margin: 0 8px 8px; border-radius: var(--r-sm); }

/* La columna derecha: el gráfico y el panel de comentarios. Van como hijos
   directos de `.kc-mw-side` —que ya es flex column con su gap— y reparten el
   alto con el mismo `flex` que los `.kc-mpanel` de verdad. */
#kcore-root .kc-sk-panel { border-radius: var(--r-lg); }
#kcore-root .kc-sk-panel-a { flex: none; height: 232px; }
#kcore-root .kc-sk-panel-b { flex: 1 1 auto; min-height: 148px; }

/* Quien pidió no ver animaciones no las ve: el esqueleto se queda quieto, en
   gris, y sigue diciendo lo mismo (aquí va a haber algo). */
@media (prefers-reduced-motion: reduce) {
  #kcore-root .kc-sk { animation: none; }
}

/* ═══════════════ EL COLOR DE MARCA Y SU MAQUETA ═══════════════

   La agencia elige un color y ve, ahí mismo, el portal de su cliente.

   ── LA TARJETA VA EN DOS COLUMNAS (4 sep 2026) ──

   Izquierda lo que se toca, derecha la maqueta. La primera versión la ponía
   DEBAJO de los controles y David la rechazó al probarla: a lo ancho de una
   tarjeta `kc-prf-wide` la maqueta se estiraba a una proporción que ningún
   navegador tiene, y lo que enseñaba no se parecía al portal. Un preview
   deformado es peor que no tenerlo, porque se cree.

   ── POR QUÉ 16:9 Y POR QUÉ `cqw` ──

   El cajón lleva `aspect-ratio: 16/9`, que es la proporción de una pantalla, y
   TODAS las medidas de dentro van en `cqw` (1cqw = 1% del ancho del cajón).
   Eso hace que la maqueta ESCALE en vez de re-maquetarse: a 300px o a 700px de
   ancho se ve la misma composición, más chica o más grande, igual que un
   `transform: scale()` pero sin JavaScript y sin desalinear el texto.

   Es la razón de que no haya ni un `px` en la maqueta. Una medida en px aquí
   rompe el escalado en el tamaño donde nadie está mirando.

   ⚠️ Los colores entran SIEMPRE por las variables `--mq-*`, que las escribe
   `brandPreview()` con la paleta que devolvió el servidor. Ninguna regla de
   aquí abajo lleva un color de marca escrito: si lo llevara, la maqueta
   enseñaría un portal que no existe. Los respaldos de los `var(...)` son el
   lima, para que se vea entera antes de la primera respuesta.

   Los grises SÍ van escritos: el marco del portal no se personaliza. */

#kcore-root .kc-prf-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  /* ⚠️ `align-content` además de `align-items`, y no es redundante.
     `align-items` coloca cada celda DENTRO de su fila; `align-content` coloca
     las FILAS dentro del grid. Sin esto, una tarjeta más alta que su contenido
     —que es lo que pasa en cuanto el contenedor la estira— reparte el sobrante
     entre las filas y abre un hueco entre el título y las columnas. Medido en
     el banco: 245px de aire entre «La empresa» y los controles. */
  align-content: start;
}
#kcore-root .kc-prf-split > h2 { grid-column: 1 / -1; }
/* La columna izquierda apila con aire.
   Sin esto, `.kc-prfrow` (logo + botones) y el campo del nombre quedaban
   pegados —medido: 0px entre el borde de uno y el del otro— y a media tarjeta,
   con el hint envolviendo a dos líneas, se leía como un amontonamiento. En la
   tarjeta a lo ancho no se notaba porque el hint cabía en una línea. */
#kcore-root .kc-brand-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
/* El botón de guardar no estira a lo ancho de la columna. */
#kcore-root .kc-brand-left > .kc-b { align-self: flex-start; }

/* La cajita del logo, acotada de verdad. `overflow:hidden` además del
   `max-height` de la imagen: un archivo con proporción rara se salía de su
   caja y empujaba al campo de abajo. La caja manda, siempre. */
#kcore-root .kc-brand-left .kc-logobox { overflow: hidden; }
#kcore-root .kc-brand-left .kc-logobox img { max-height: 40px; }

/* A media tarjeta el hint del logo envuelve: la fila pasa a alinearse arriba
   en vez de al centro, que es lo que dejaba el logo flotando a media altura. */
#kcore-root .kc-brand-left .kc-prfrow { align-items: flex-start; }

/* Por debajo de 1180px la Mesa ya no tiene ancho para dos columnas útiles: la
   maqueta pasa abajo, pero conserva su 16:9 y su escalado. */
@media (max-width: 1180px) {
  #kcore-root .kc-prf-split { grid-template-columns: minmax(0, 1fr); }
}

#kcore-root .kc-brand-col { min-width: 0; position: sticky; top: 8px; }
/* El rótulo se separa 14px del monitor y no 8: la sombra del bisel se
   proyecta 20px hacia arriba (blur 30 con offset 10) y a 8px se comía el
   texto — legible en el diseño, ilegible en pantalla. */
/* ⚠️ `--text-3` y no un blanco translúcido. La Mesa es CLARA (`--surface:
   #FFFFFF`): un `rgba(255,255,255,.62)` aquí es invisible, y así estuvo hasta
   el 7 sep 2026 — el rótulo existía, se medía, y nadie lo veía nunca. Vino de
   revisarlo en un banco de fondo oscuro. Cualquier color nuevo en esta hoja
   sale de las variables de `#kcore-root`, no de la intuición. */
#kcore-root .kc-brand-cap {
  display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 14px; font-weight: 700;
  position: relative; z-index: 1;
}

#kcore-root .kc-brand-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#kcore-root .kc-brand-pick input[type="color"] {
  width: 42px; height: 34px; padding: 0; border: 1px solid var(--border);
  border-radius: 8px; background: none; cursor: pointer;
}
#kcore-root .kc-brand-pick #kc-co-hex {
  width: 104px; text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, monospace;
  letter-spacing: .04em;
}
#kcore-root .kc-brand-locked { font-size: 12.5px; }

/* ── EL MONITOR ──
   Puro CSS, ni un asset. El bisel oscuro con su brillo superior, el cuello y
   la base. Las medidas van en % del ancho para que la pantalla entera escale
   igual que su contenido — un bisel en px se vería grueso en una Mesa angosta
   y fino en una ancha. */
#kcore-root .kc-screen { width: 100%; }
#kcore-root .kc-screen-bezel {
  background: linear-gradient(180deg, #33343A 0%, #1D1E22 100%);
  border-radius: 1.4% / 2.5%;
  padding: 1.1% 1.1% 3.4%;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
}
/* El cuello: un trapecio, más angosto abajo. */
#kcore-root .kc-screen-neck {
  width: 15%; height: 2.4%; margin: 0 auto;
  background: linear-gradient(180deg, #26272C 0%, #1A1B1E 100%);
  clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
}
#kcore-root .kc-screen-base {
  width: 30%; height: .9%; min-height: 5px; margin: 0 auto;
  background: linear-gradient(180deg, #2E2F34 0%, #17181B 100%);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 14px rgba(0,0,0,.4);
}

/* El cajón: proporción de pantalla y contenedor de consulta, que es lo que
   habilita los `cqw` de dentro. */
#kcore-root .kc-brand-prev {
  position: relative;              /* ver el ⚠️ de abajo */
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

/* La maqueta. `pointer-events:none` porque se mira, no se toca: deja claro que
   ese botón no hace nada y evita que alguien lo intente. */
/*
 * ⚠️ `position:absolute; inset:0` y NO `width/height:100%`.
 *
 * `aspect-ratio` da un alto PREFERIDO, no un techo: con el contenido en flujo
 * normal, `min-height:auto` deja que el contenido estire la caja y el 16:9 se
 * pierde justo en los anchos grandes, que es donde se nota. Se vio en el banco
 * a 700px: la caja salía bastante más alta que 9/16 de su ancho.
 *
 * Sacando la maqueta del flujo, la caja manda y el contenido se acomoda dentro.
 */
#kcore-root .kc-mq {
  position: absolute; inset: 0;
  display: flex;
  pointer-events: none; font-size: 1.55cqw; line-height: 1.4;
}
#kcore-root .kc-mq-side {
  width: 22cqw; flex: none; background: #1A1A1A; padding: 1.7cqw 1.4cqw;
  display: flex; flex-direction: column;
}
/* Sobre el color del menú, SIN píldora blanca. Ver la nota de `maquetaHtml()`:
   el parche blanco pegado arriba del sidebar se veía peor que el problema que
   resolvía. El texto de respaldo (cuando no hay logo) va en blanco, que es el
   color del resto del menú. */
/* ⚠️ CENTRADO, y en pareja con `.dbch-logo-agencia` del portal (David, 7 sep
   2026). Estas dos reglas se tocan JUNTAS: la vez que se cambió solo una, la
   maqueta enseñó un portal que no existía. */
#kcore-root .kc-mq-logo {
  color: #fff; height: 5.2cqw;
  margin-bottom: 1.6cqw; display: flex; align-items: center; justify-content: center;
  overflow: hidden; font-size: 1.25cqw; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 0 .6cqw; white-space: nowrap;
}
/* El logo real, no el nombre. `contain` porque un logotipo de agencia casi
   nunca es cuadrado y estirarlo es peor que no ponerlo. */
#kcore-root .kc-mq-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
#kcore-root .kc-mq-nav {
  color: #9CA3AF; padding: .85cqw 1.2cqw; border-radius: 99px;
  margin-bottom: .35cqw; font-size: 1.45cqw; white-space: nowrap;
}
#kcore-root .kc-mq-nav.on {
  background: var(--mq-dark, #CBF904); color: var(--mq-on-dark, #1A1A1A); font-weight: 600;
}
/* El ítem del Advisor va en color de marca SOBRE oscuro, sin relleno: es el
   caso que obligó a que `brand_dark` cumpla el piso de un TEXTO y no el de un
   elemento. Ver KCORE_Branding::UI. */
#kcore-root .kc-mq-nav.ai { color: var(--mq-dark, #CBF904); }
#kcore-root .kc-mq-promo {
  margin-top: auto; border-radius: 1.7cqw; padding: 1.4cqw 1.2cqw; color: #fff;
  background: radial-gradient(130% 130% at 25% 0%,
    var(--mq-p1, #93AC12) 0%, var(--mq-p2, #5A6E05) 45%, var(--mq-p3, #2C3600) 100%);
}
#kcore-root .kc-mq-promo b { display: block; font-size: 1.5cqw; margin-bottom: 1cqw; line-height: 1.25; }

#kcore-root .kc-mq-body {
  flex: 1; min-width: 0; background: #fff; color: #0D1117;
  padding: 1.8cqw 2cqw; display: flex; flex-direction: column; gap: 1.4cqw;
}
#kcore-root .kc-mq-row { display: flex; align-items: center; gap: 1.2cqw; }
#kcore-root .kc-mq-btn {
  display: inline-block; background: var(--mq-brand, #CBF904); color: var(--mq-on-brand, #1A1A1A);
  border-radius: 99px; padding: .8cqw 1.7cqw; font-weight: 600; font-size: 1.4cqw; white-space: nowrap;
}
#kcore-root .kc-mq-pill {
  background: var(--mq-brand, #CBF904); color: var(--mq-on-brand, #1A1A1A);
  border-radius: 99px; padding: .55cqw 1.4cqw; font-size: 1.3cqw; font-weight: 600; white-space: nowrap;
}
#kcore-root .kc-mq-lnk { color: var(--mq-accent, #7A9800); font-weight: 600; font-size: 1.4cqw; white-space: nowrap; }
/* La tabla se come el alto que sobra y reparte entre sus filas.
   Es lo que hace que la maqueta se vea llena en 16:9 sin depender de cuántas
   filas de ejemplo haya: con el `gap` del cuerpo y un `margin-top:auto` en el
   gráfico quedaba un hueco muerto en el medio, que a 640px era medio cajón. */
#kcore-root .kc-mq-tbl {
  border: .14cqw solid #ECECE8; border-radius: 1.2cqw; overflow: hidden;
  flex: 1; display: flex; flex-direction: column;
}
#kcore-root .kc-mq-tr {
  padding: 1.1cqw 1.5cqw; border-bottom: .14cqw solid #F1F1EE;
  flex: 1; display: flex; align-items: center;
}
#kcore-root .kc-mq-tr:last-child { border-bottom: 0; }
#kcore-root .kc-mq-tr.hov { background: var(--mq-tint, #F6FAE3); }
#kcore-root .kc-mq-bub {
  background: var(--mq-tint2, #EFF8CE); color: var(--mq-on-tint, #46530A);
  border: .14cqw solid var(--mq-tint-border, #E4F0B8);
  border-radius: 1.5cqw 1.5cqw .4cqw 1.5cqw; padding: 1.1cqw 1.6cqw;
  align-self: flex-start; max-width: 82%;
}
#kcore-root .kc-mq-chart { display: flex; align-items: flex-end; gap: .8cqw; height: 7.5cqw; flex: none; }
#kcore-root .kc-mq-chart i { width: 3.4cqw; border-radius: .5cqw .5cqw 0 0; background: var(--mq-brand, #CBF904); height: 100%; }
#kcore-root .kc-mq-chart i.s { background: var(--mq-soft, #E6F9A1); height: 62%; }
#kcore-root .kc-mq-chart i.d { background: rgba(var(--mq-rgb, 203,249,4), .14); height: 34%; }

/* ═══════════════ EL INTERRUPTOR, UNO SOLO ═══════════════

   ── LA REGLA (David, 9 sep 2026). NO SE REABRE. ──

       A la DERECHA y VERDE  = encendido
       A la IZQUIERDA y ROJO CLARO = apagado

   Vale para TODO interruptor de la Mesa y del portal, el que exista y el que
   se agregue. Un producto en el que cada interruptor elige su color y su lado
   obliga a leer la etiqueta para saber de qué lado está, y entonces el carril
   no está informando de nada: es decoración.

   ── POR QUÉ ES UNA SOLA CLASE Y NO UN PATRÓN QUE SE COPIA ──

   Esto nació roto justo por copiarlo. El interruptor del Advisor reusó los
   `<span>` del de pausa pero con su propia clase en el `<label>`, y la regla
   que DESPLAZA el nudo estaba escrita contra la clase del otro: el carril
   cambiaba de color y el nudo se quedaba clavado a la izquierda. David lo vio
   en pantalla. Con una sola clase eso no puede volver a pasar, porque no hay
   una segunda copia que se quede atrás.

   Lo único que cada uso decide es su LAYOUT (la palabra debajo o al lado), y
   para eso están los modificadores de abajo. El color, el tamaño, el
   desplazamiento y el foco son de aquí y de ningún otro sitio.

   ── EL ESTADO SALE DEL `:checked`, NUNCA DE UNA CLASE ──

   Incluido el color de la palabra. Una clase `is-off` escrita a mano por el
   frontend es una segunda verdad, y el día que se desincronice la pantalla
   diría «Activo» en rojo sobre un carril verde. El `<input>` es el único que
   sabe de qué lado está.

   El verde de encendido es el de «bien», no el lima de marca: el lima es el
   acento de la Mesa y aquí competiría con todo lo que ya lo lleva. El rojo
   claro lo pidió David el 7 sep 2026, y reemplazó a un ámbar que yo había
   puesto por «es reversible»: la agencia quiere que se lea como un corte. */
#kcore-root .kc-sw {
  display: inline-flex; align-items: center; gap: 6px;
  flex: none; cursor: pointer; user-select: none;
}
#kcore-root .kc-sw input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
/* `display:inline-block` es defensivo, no imprescindible: como hijo de un
   contenedor flex el `<span>` ya se blockifica y toma `width`/`height`. Se
   declara igual para que la regla no dependa de que su padre siga siendo flex
   el día que alguien mueva el interruptor a otro sitio — un `<span>` suelto es
   `inline` y ahí las medidas se ignoran en silencio. */
#kcore-root .kc-sw-track {
  display: inline-block;
  width: 38px; height: 21px; border-radius: 99px; flex: none;
  background: #FF5757; position: relative;
  transition: background .18s ease;
}
#kcore-root .kc-sw input:checked + .kc-sw-track { background: #2E9E63; }
#kcore-root .kc-sw-knob {
  display: block;
  position: absolute; top: 3px; left: 3px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; transition: transform .18s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
#kcore-root .kc-sw input:checked + .kc-sw-track .kc-sw-knob { transform: translateX(17px); }
/* El foco se ve: hay controles de acceso aquí dentro y tienen que poder usarse
   con teclado. */
#kcore-root .kc-sw input:focus-visible + .kc-sw-track {
  outline: 2px solid var(--lime, #CBF904); outline-offset: 2px;
}
#kcore-root .kc-sw-txt {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-align: center;
  color: #FF5757; white-space: nowrap;
}
#kcore-root .kc-sw input:checked + .kc-sw-track + .kc-sw-txt { color: #2E9E63; }
#kcore-root .kc-sw input:disabled + .kc-sw-track { opacity: .5; }

/* ── Modificador: la palabra DEBAJO del carril, centrada ──
   Lo usa el interruptor de acceso, en la cabecera de la ficha. La nota de
   `suspSwitchHtml()` explica por qué: al lado derecho, el estado se leía como
   parte de la cabecera y no como el estado del propio interruptor. */
#kcore-root .kc-sw-col { flex-direction: column; }

/* ── Modificador: pegado al borde derecho de su fila ── */
#kcore-root .kc-sw-end { margin-left: auto; }

/* La etiqueta ya NO se esconde en pantallas angostas: debajo del carril no
   roba ancho a nadie, y era justo el sitio donde el interruptor se quedaba sin
   decir de qué lado estaba. */

/* ── EL ESTADO DEL CLIENTE EN LA LISTA (David, 7 sep 2026) ──

   «Debería poder ver visualmente los clientes que están activos y los que
   están en pausa, alguna manera de filtrarlos.»

   Solo se marca lo ANORMAL: un cliente activo no lleva nada. Marcar las 40
   filas para señalar 2 es no señalar ninguna, y además el verde en cada fila
   competiría con la teja de identidad, que es lo que se barre al leer. */
#kcore-root .kc-depfilt {
  display: flex; gap: 6px; padding: 0 0 12px; flex-wrap: wrap;
}
/* Sobre fondo CLARO. La primera versión las pintó con blancos translúcidos
   —blanco sobre blanco— y solo se veía la pestaña activa. Ver la nota de
   `.kc-brand-cap`: es el mismo error, el mismo día. */
#kcore-root .kc-depfilt-b {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-3); border: 1px solid var(--border);
  /* `#686F7D` y no `--text-2`: sobre `--surface-3` el token da 4.39 y se queda
     a un pelo de AA. Es el mismo `--text-2` oscurecido con la derivación de
     `KCORE_Branding` hasta pasar 4.5 — 4.59. Mismo tono, mismo aire, legible. */
  color: #686F7D; border-radius: 99px; padding: 6px 13px;
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#kcore-root .kc-depfilt-b:hover { background: #EBEBE7; color: var(--text-1); }
#kcore-root .kc-depfilt-b.on {
  background: var(--lime, #CBF904); border-color: var(--lime, #CBF904); color: #0D1117;
}
/* La pestaña de «En pausa» activa va en rojo y no en lima: es la única de las
   tres que dice algo que hay que atender, y el lima aquí la disfrazaría de
   estado normal. */
#kcore-root .kc-depfilt-b.kc-depfilt-pausa.on {
  background: #FF5757; border-color: #FF5757; color: #fff;
}
#kcore-root .kc-depfilt-n {
  font-size: 11px; font-weight: 700; opacity: .62;
  font-variant-numeric: tabular-nums;
}

/* La fila de un cliente en pausa: SOLO la teja atenuada. La barra roja a la
   izquierda se quitó a pedido de David (7 sep 2026) — competía con la teja de
   identidad, que es por donde se reconoce a cada cliente, y una lista con
   varias barras rojas se lee como una alarma y no como un estado.
   Lo que queda dice lo mismo sin gritar: la teja apagada y la palabra. */
#kcore-root .kc-depit-pausa .kc-depic { opacity: .45; }

/* La palabra, junto al nombre. El color por sí solo no es accesible, y un
   punto rojo sin texto se lee como «tiene algo pendiente» y no como «cortado». */
#kcore-root .kc-deppausa {
  display: inline-block; margin-left: 9px; vertical-align: middle;
  /* El texto va más oscuro que el `#FF5757` del interruptor: sobre su propio
     tinte, el rojo puro da 3.79 y aquí se lee una PALABRA, no se mira un
     carril. `#C92A2A` es el mismo rojo bajado hasta 4.79 sobre el tinte. El
     relleno del carril sí se queda en el tono que pidió David: ahí el color es
     la señal, y encima no va texto. */
  background: rgba(255,87,87,.12); color: #C92A2A;
  border-radius: 99px; padding: 2px 9px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
}

/* ── EL CORREO DE CONTACTO Y LA VOZ (BD v48) ──
   Dos campos más en la tarjeta de la empresa. El `textarea` de la voz no se
   deja estirar a lo ancho: dentro del grid de dos columnas, un `resize`
   horizontal desborda la columna y se lleva por delante el preview. */
#kcore-root .kc-voz textarea {
  width: 100%; resize: vertical; min-height: 68px;
  font-family: inherit; font-size: 13px; line-height: 1.5;
}
#kcore-root .kc-voz-n {
  float: right; font-variant-numeric: tabular-nums; color: var(--text-3);
}

/* ══════════════════════════════════════════════════════════════════════════
   EL PULSO DEL CLIENTE (8 sep 2026)

   El semáforo, las piezas esperando aprobación y la calificación promedio,
   rescatados del Admin Portal. Ver `KCORE_Health`.

   ⚠️ TODOS los selectores van acotados a su sitio (`#kc-dep-md`, `#kc-list`)
   o a un prefijo propio. Es la lección del hotfix del 29 ago: una regla suelta
   sobre una clase compartida se llevó por delante tres secciones que ni se
   estaban tocando.
   ══════════════════════════════════════════════════════════════════════════ */

/* El chip de la LISTA de clientes, junto al nombre. Mismo componente que
   «En pausa» a propósito: son dos estados de la misma fila y verlos con formas
   distintas haría dudar de si significan cosas del mismo orden. */
#kcore-root .kc-dephl {
  display: inline-block; margin-left: 9px; vertical-align: middle;
  border-radius: 99px; padding: 2px 9px;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em;
}
#kcore-root .kc-dephl-red    { background: rgba(255,87,87,.12);  color: #C92A2A; }
#kcore-root .kc-dephl-yellow { background: rgba(247,201,72,.22); color: #8A6100; }

/* ── La pestaña PULSO de la ficha ── */
#kcore-root .kc-hl { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }

#kcore-root .kc-hlhead {
  display: flex; align-items: flex-start; gap: 13px;
  border-radius: var(--r-md); padding: 15px 18px;
}
#kcore-root .kc-hlhead h3 {
  margin: 0 0 4px; font-size: var(--fs-md); font-weight: 700; letter-spacing: -.01em;
}
/* `flex: none` explícito: dentro de un flex, un punto de 10px se encoge hasta
   ser un óvalo en cuanto el texto de al lado pide sitio. */
#kcore-root .kc-hldot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; }

#kcore-root .kc-hlalist { margin: 0; padding-left: 17px; }
#kcore-root .kc-hlalist li { font-size: var(--fs-base); color: var(--text-1); line-height: 1.5; }
#kcore-root .kc-hlok,
#kcore-root .kc-hlnote { margin: 0; font-size: var(--fs-base); color: var(--text-2); line-height: 1.5; }

/* Las cuatro cifras. `minmax(0,1fr)` y no `1fr` a secas: la regla de oro de
   este archivo, o una etiqueta larga estira su columna y descuadra las otras. */
#kcore-root .kc-hlkpis {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px;
}
#kcore-root .kc-hlkpi {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--surface-2); border-radius: var(--r-md); padding: 14px 16px;
}
#kcore-root .kc-hlnum { font-size: var(--fs-xl); font-weight: 700; color: var(--text-0); line-height: 1.1; }
#kcore-root .kc-hlnum small { font-size: var(--fs-sm); font-weight: 600; color: var(--text-3); }
#kcore-root .kc-hlk { font-size: var(--fs-sm); color: var(--text-2); }
#kcore-root .kc-hlsub { font-size: var(--fs-micro); color: var(--text-3); }

/* ── Las filas de «esperando aprobación» ──
   La MISMA fila en la ficha de un cliente y en la Bandeja: son lo mismo y
   duplicarlas es cómo terminan divergiendo. */
#kcore-root .kc-esp { display: flex; flex-direction: column; }

/* ── LAS DOS VISTAS DE LA SECCIÓN CLIENTES (8 sep 2026) ──
   ⚠️ TODO acotado a `#kc-dep-md`. `.kc-tabs-wrap`, `.kc-search` y `.kc-md-*`
   las comparten CINCO pantallas, y una regla suelta sobre ellas se llevó por
   delante tres el 29 ago. */

/* El botón «＋ Nuevo cliente» al borde derecho, con el riel a la izquierda.
   Mismo patrón que `.kc-head-row > .kc-b`, que empuja cualquier acción
   principal de encabezado. */
#kcore-root #kc-dep-md .kc-tabs-wrap > .kc-b { margin-left: auto; }

/* En «Esperando» no hay cartera que buscar ni estados que filtrar: los dos
   controles se esconden en vez de quedarse inertes. Un control permanentemente
   muerto enseña a ignorar la barra entera. */
#kcore-root #kc-dep-md.kc-dep-espera .kc-depsearch,
#kcore-root #kc-dep-md.kc-dep-espera .kc-depfilt { display: none; }
/* Y el «＋ Nuevo cliente» tampoco: crear un cliente es de la otra vista. */
#kcore-root #kc-dep-md.kc-dep-espera .kc-tabs-wrap > .kc-b { display: none; }

#kcore-root .kc-espnote {
  margin: 14px 0 4px; font-size: var(--fs-sm); color: var(--text-3); line-height: 1.5;
}

/* La pestaña «Esperando aprobación» de Mi trabajo. El contenedor de la tabla
   (`.kc-mw-tablewrap`) es una tarjeta sin padding porque lo suyo es una tabla;
   una lista de filas necesita el suyo. */
#kcore-root .kc-espmw { padding: 4px 20px 20px; }
#kcore-root .kc-espmw .kc-espnote { margin-top: 12px; }


#kcore-root .kc-esprow {
  display: grid; grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center; gap: 0 18px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
#kcore-root .kc-esprow:last-child { border-bottom: 0; }

#kcore-root .kc-esp-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* `min-width: 0` arriba y el recorte aquí: sin lo primero, un hijo `nowrap` se
   niega a bajar de su ancho de contenido y empuja las otras dos columnas fuera
   de la fila. Es la misma regla del `minmax(0,1fr)` del calendario. */
/* El título es un BOTÓN que abre la pieza. `all: unset` se repone lo que hace
   falta —y ⚠️ `box-sizing`, que ese reset se lleva por delante (§5.c.5). */
#kcore-root .kc-esp-t {
  all: unset; box-sizing: border-box; display: block; cursor: pointer;
  font-family: inherit; text-align: left;
  font-size: var(--fs-base); font-weight: 600; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#kcore-root .kc-esp-t:hover { color: var(--accent); }
#kcore-root .kc-esp-t:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#kcore-root .kc-esp-m {
  font-size: var(--fs-sm); color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Los días. El tono lo pone la fila, con los MISMOS umbrales del semáforo. */
#kcore-root .kc-esp-d { font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; }
#kcore-root .kc-esp-amb .kc-esp-d { color: #8A6100; font-weight: 600; }
#kcore-root .kc-esp-red .kc-esp-d { color: #C92A2A; font-weight: 700; }

#kcore-root .kc-esp-a { display: flex; justify-content: flex-end; min-width: 168px; }
#kcore-root .kc-esp-ok { font-size: var(--fs-sm); color: #3D6B1F; }
/* «Sin solicitante» es un BOTÓN, no un texto muerto: abre la ficha, que es
   donde se le asigna uno. Se ve como enlace y no como botón relleno para que no
   compita con «Enviar recordatorio», que es la acción normal de esta lista. */
#kcore-root .kc-esp-no {
  all: unset; box-sizing: border-box; cursor: pointer; font-family: inherit;
  font-size: var(--fs-sm); color: var(--text-3); text-decoration: underline;
  text-decoration-style: dotted; text-underline-offset: 3px;
}
#kcore-root .kc-esp-no:hover { color: var(--text-1); }
#kcore-root .kc-esp-no:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* En angosto la fila se apila: con tres columnas, «Enviar recordatorio» y los
   días se comen el título y no se sabe de qué pieza se habla. */
@media (max-width: 1024px) {
  #kcore-root .kc-hlkpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #kcore-root .kc-esprow { grid-template-columns: minmax(0,1fr); gap: 8px; }
  #kcore-root .kc-esp-a { justify-content: flex-start; min-width: 0; }
}

/* ══ EL ADVISOR DE UN CLIENTE (BD v49) ══
   El carril es `.kc-sw`, el ÚNICO que hay: mismo verde, mismo rojo claro y
   mismo lado que el de pausa. Aquí no se redefine ni un color — la primera
   versión sí lo hizo (gris para apagado, «porque no tener Advisor no es un
   corte») y el resultado fue un producto con dos interruptores que no se
   parecían. La regla de David es que todos se lean igual, y una excepción
   razonada sigue siendo una excepción.

   Lo único propio de este uso es el LAYOUT: en fila, con su explicación al
   lado, porque aquí hay sitio para explicar y en la cabecera no lo había. */
#kcore-root .kc-advsec { margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line); }
#kcore-root .kc-advrow { display: flex; align-items: flex-start; gap: 16px; max-width: 760px; }
#kcore-root .kc-adv { padding-top: 2px; }
/* Bloqueado por plan: se ve, se puede pulsar, y no alterna. El cursor lo dice
   antes de que nadie lo intente. */
#kcore-root .kc-adv.is-locked { cursor: not-allowed; }
#kcore-root .kc-advtxt { display: flex; flex-direction: column; gap: 4px; }
#kcore-root .kc-advtxt b { font-size: 13.5px; }
#kcore-root .kc-advtxt .kc-hint { margin: 0; }

/* La invitación a mejorar el plan. No es un banner de campaña: es la respuesta
   a «por qué no puedo encender esto», así que vive pegada al interruptor. */
#kcore-root .kc-advlock {
  margin-top: 16px; max-width: 760px; padding: 16px 18px; border-radius: 12px;
  background: var(--soft, #F4F6F8); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
#kcore-root .kc-advlock p { margin: 0; flex: 1 1 320px; font-size: 13px; line-height: 1.5; }
#kcore-root .kc-adv-cta { flex: none; text-decoration: none; }
/* El destello al pulsar el carril bloqueado. Dura lo justo para que el ojo
   salte al botón; `prefers-reduced-motion` lo apaga, que es una animación
   puramente decorativa y hay gente a la que le sienta mal. */
@keyframes kcAdvHi {
  0%   { box-shadow: 0 0 0 0 rgba(203,249,4,.0); }
  30%  { box-shadow: 0 0 0 4px rgba(203,249,4,.55); }
  100% { box-shadow: 0 0 0 0 rgba(203,249,4,.0); }
}
#kcore-root .kc-advlock-hi { animation: kcAdvHi .7s ease; }
@media (prefers-reduced-motion: reduce) {
  #kcore-root .kc-advlock-hi { animation: none; }
}
/* En angosto el carril se pone ARRIBA de su explicación: al lado, con 300px de
   ancho útil, la frase se parte en cinco líneas contra un interruptor de 38px y
   la fila se lee torcida. */
@media (max-width: 900px) {
  #kcore-root .kc-advrow { flex-direction: column; align-items: flex-start; gap: 10px; }
  #kcore-root .kc-adv { padding-top: 0; }
}

/* ══ BORRAR UN MENSAJE PROPIO (BD v50) ══
   La papelera lleva `kc-med kc-mdel`: hereda entera la del lápiz —tamaño,
   opacidad, foco y el `@media (hover:none)` que la deja alcanzable en táctil— y
   aquí solo se le pone el rojo del hover. No se redefine nada más a propósito;
   ver la nota de `.kc-med`, que ya registra lo que pasa cuando una regla
   paralela gana por especificidad y deja el control inalcanzable. */
#kcore-root .kc-mdel:hover { color: #C0392B; background: rgba(192,57,43,.10); }

/* La lápida. Cursiva y en el gris más bajo: tiene que leerse como «aquí hubo
   algo» y no competir con los mensajes que sí dicen cosas. Sin fondo ni borde —
   una caja la haría más visible que el mensaje de al lado, que es justo al
   revés de lo que significa. */
#kcore-root .kc-cmt-del { font-style: italic; color: var(--text-3); }

/* ══ LA MESA EN EL CELULAR (≤768px) · Fase 2, paso 2 (15 sep 2026) ══════════
   Aprobado por David sobre maqueta (https://claude.ai/artifact/5A4heBK6p8nbkSvfgKNg5L).
   ⚠️ Va AL FINAL de la hoja a propósito: a igual especificidad gana la última
   regla, y más arriba hay estilos base agregados después del bloque de 768 que
   pisarían esto (la misma trampa que el portal ya documentó en su CLAUDE.md).

   Tres piezas:
   1. Cabecera compacta: título a la izquierda, avatar y campana en la misma
      fila; lo demás de la cabecera (botones, mes, semana, rangos) en una fila
      debajo. Antes el contenido del Tablero empezaba a los 280px.
   2. Lista y detalle en pantallas separadas (Bandeja, Plantillas, Cerebro AI).
      Clientes (#kc-dep-md) ya funciona así en todos los anchos y queda fuera.
      El JS pone .kc-md-open al tocar un elemento y .kc-en-detalle en la raíz,
      que esconde la cabecera de la sección y la barra inferior.
   3. El Tablero sigue siendo kanban: una columna a la vez, la siguiente asoma. */
@media (max-width: 900px) {
  /* ⚠️ `> .kc-card` y NO `.kc-card` a secas: esa clase la llevan TAMBIÉN las
     tarjetas de sección de la ficha (`<div class="kc-sec kc-card">`), así que
     el alto de pantalla se lo aplicaba a cada una y dejaba un hueco blanco de
     800px debajo del brief y del plan. Es el hueco que reportó David con una
     captura, y lo introdujo el paso 2 de este mismo repaso. Medido: tres
     `.kc-sec` con min-height 812px. La tarjeta principal es hija directa. */
  #kcore-root > .kc-card { min-height: 100vh; min-height: 100dvh; }

  /* ── 1. Cabecera compacta ── */
  #kcore-root .kc-head { padding: 14px 18px 12px; }
  #kcore-root .kc-head-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: start; }
  #kcore-root .kc-head-row > div:first-child { grid-column: 1; grid-row: 1; min-width: 0; }
  #kcore-root .kc-head h1 { font-size: 22px; }
  #kcore-root .kc-head p { font-size: 12.5px; margin-top: 2px; line-height: 1.4; }
  /* El contenedor de la derecha se disuelve para repartir a sus hijos: la
     identidad sube a la fila del título, lo demás baja a su propia fila. */
  #kcore-root .kc-head-right { display: contents; }
  #kcore-root .kc-head-row .kc-topright { grid-column: 2; grid-row: 1; gap: 6px; }
  #kcore-root .kc-head-row .kc-me-btn b { display: none; }
  #kcore-root .kc-head-right > :not(.kc-topright) { grid-column: 1 / -1; margin-left: 0; min-width: 0; }
  #kcore-root .kc-head-right > .kc-head-acts { display: flex; gap: 8px; }
  #kcore-root .kc-head-right > .kc-head-acts > .kc-b-lime { flex: 1; justify-content: center; }
  #kcore-root .kc-head-right > .kc-b { justify-self: start; }
  #kcore-root .kc-head-right > .kc-tabs { overflow-x: auto; scrollbar-width: none; max-width: 100%; justify-self: start; }
  #kcore-root .kc-head-row .kc-monthnav, #kcore-root .kc-head-row .kc-weeknav { justify-self: start; }

  /* ── 2. Lista y detalle en pantallas separadas ── */
  /* min-width 0 en toda la cadena: la fila de pestañas de la Bandeja no envuelve
     y, sin esto, su ancho de contenido ensanchaba la lista más allá de la pantalla. */
  #kcore-root .kc-body.kc-flush > .kc-md, #kcore-root .kc-md > .kc-md-list, #kcore-root .kc-md > .kc-md-detail { min-width: 0; }
  #kcore-root .kc-md-list .kc-tabs-wrap { flex-wrap: nowrap; }
  #kcore-root .kc-md-list .kc-tabs-wrap .kc-tabs { min-width: 0; flex: 0 1 auto; }
  /* Con el relleno de escritorio cada pestaña mide 153px y dos no caben en los
     ~300px del riel: caía una por línea y las cuatro de «Mi trabajo» se comían
     media pantalla. Apretadas, entran dos por fila. */
  #kcore-root .kc-tab { padding: 7px 11px; font-size: 12px; }
  #kcore-root .kc-md:not(#kc-dep-md) > .kc-md-list { width: 100%; max-height: none; border: 0; flex: 1 1 auto; }
  #kcore-root .kc-md:not(#kc-dep-md):not(.kc-md-open) > .kc-md-detail,
  #kcore-root .kc-md:not(#kc-dep-md):not(.kc-md-open) > .kc-ai-docs,
  #kcore-root .kc-md.kc-md-open > .kc-md-list { display: none; }
  #kcore-root .kc-ai-md.kc-md-open:not(.kc-md-open2) > .kc-md-detail,
  #kcore-root .kc-ai-md.kc-md-open2 > .kc-ai-docs { display: none; }
  #kcore-root .kc-ai-md > .kc-ai-docs { width: 100%; max-height: none; border: 0; }
  #kcore-root .kc-md.kc-md-open > .kc-md-detail { flex: 1 1 auto; min-height: 0; }
  /* La barra de «volver». La inserta el JS como primer hijo del maestro-detalle,
     fuera de lo que re-pinta cada sección, para que un refresco no la borre. */
  #kcore-root .kc-md.kc-md-open > .kc-mdback { display: flex; }
  /* El ASPECTO de la barra vive fuera de este bloque (ver «LA BARRA DE VOLVER»):
     Cerebro AI la usa hasta 1180 y aquí solo llegaría a 900. */
  /* En el detalle: sin cabecera de sección ni barra inferior (decisión de David,
     como WhatsApp al abrir un chat). */
  #kcore-root.kc-en-detalle .kc-pane.on > .kc-head,
  #kcore-root.kc-en-detalle .kc-side { display: none; }
  #kcore-root.kc-en-detalle > .kc-card { padding-bottom: 0; }
  /* Las acciones de la solicitud quedan fijas abajo, siempre a mano. */
  #kcore-root.kc-en-detalle #kc-detail .kc-dt-head .kc-dt-acts {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 99980; margin: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
    background: var(--surface); border-top: 1px solid var(--border);
    padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 20px rgba(0,0,0,.05);
  }
  #kcore-root.kc-en-detalle #kc-detail .kc-dt-acts .kc-b { justify-content: center; }
  #kcore-root.kc-en-detalle #kc-detail .kc-dt-acts [data-act="accept"] { grid-column: 1 / -1; order: 9; height: 44px; font-size: 14px; }
  #kcore-root.kc-en-detalle #kc-detail { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }

  /* Detalle de Plantillas: el título y los pasos se cortaban a media palabra
     («Redes Socic», «Concepto y»). Menos relleno, título a lo ancho y
     «Eliminar» como papelera de solo ícono (el texto sigue en el botón para
     lectores de pantalla). */
  #kcore-root .kc-tpl { padding: 16px 16px 28px; }
  #kcore-root .kc-tplhead .kc-tytitle { flex: 1 1 auto; width: 100%; }
  #kcore-root .kc-tplhead .kc-b-red { font-size: 0; gap: 0; padding: 0; width: 36px; height: 36px; justify-content: center; flex: none; }
  #kcore-root .kc-tplhead .kc-b-red svg { width: 16px; height: 16px; }
  #kcore-root .kc-tplrow { gap: 8px; padding: 10px 10px; }
  #kcore-root .kc-tplrow .kc-tplact { gap: 0; }

  /* ── Paso 3: Reportes y Perfil a una columna ──
     Las dos rejillas son de dos columnas en todos los anchos; en un teléfono
     el texto salía una palabra por línea y los campos de 100px. En móvil la
     página ya scrollea entera, así que la rejilla deja de tener scroll propio. */
  #kcore-root .kc-rp, #kcore-root .kc-prf { grid-template-columns: minmax(0, 1fr); overflow: visible; }
  #kcore-root .kc-rpcard, #kcore-root .kc-prfcard { padding: 16px; }

  /* ── Paso 4: el calendario como el del Portal en el celular ──
     Número en círculo (hoy lima, elegido tinta) y un punto por pieza; los
     nombres pasan a la lista del día de abajo. Los colores son los de la
     leyenda que ya existe. Ver renderCal(): en móvil caben 3 puntos y se abre
     con hoy elegido. */
  #kcore-root .kc-cal-wrap { gap: 12px; align-content: start; }
  #kcore-root .kc-cal { flex: none; padding: 12px 8px 10px; }
  #kcore-root .kc-dow { gap: 0; }
  #kcore-root .kc-dow span { font-size: 10px; letter-spacing: .04em; }
  #kcore-root .kc-grid { grid-auto-rows: auto; gap: 2px 0; flex: none; }
  /* Bloque centrado con los puntos en línea, y no rejilla ni flex: con rejilla un
     solo punto quedaba pegado a la izquierda, y con flex los márgenes del número
     encogían los puntos y los desalineaban. */
  #kcore-root .kc-cell { display: block; text-align: center; line-height: 0;
    height: 52px; padding: 3px 0 0; background: transparent; border: 0; box-shadow: none; }
  #kcore-root .kc-cell:hover { background: transparent; }
  #kcore-root .kc-cell .kc-cn { margin: 0 auto 3px; line-height: 1; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; font-size: 13px; font-weight: 500; color: var(--text-1); }
  #kcore-root .kc-cell.kc-today, #kcore-root .kc-cell.kc-sel { background: transparent; border: 0; box-shadow: none; }
  #kcore-root .kc-cell.kc-today .kc-cn { background: var(--lime); color: var(--ink); font-weight: 700; }
  #kcore-root .kc-cell.kc-sel .kc-cn { background: var(--ink); color: #fff; font-weight: 700; }
  /* Hoy sigue en lima aunque sea el día elegido (el que abre por defecto). */
  #kcore-root .kc-cell.kc-today.kc-sel .kc-cn { background: var(--lime); color: var(--ink); }
  #kcore-root .kc-cell .kc-ec { display: inline-block; vertical-align: top; margin: 0 1.5px; font-size: 0; width: 6px; height: 6px; padding: 0; border-radius: 50%; border: 0; }
  #kcore-root .kc-cell .kc-e-work { background: #8B5CF6; }
  #kcore-root .kc-cell .kc-e-review { background: #F59E0B; }
  #kcore-root .kc-cell .kc-e-done { background: #3AA377; }
  #kcore-root .kc-cell .kc-e-wish { background: #fff; border: 1.5px dashed #BFC5CE; }
  #kcore-root .kc-cell .kc-more { display: none; }
  #kcore-root .kc-legend { gap: 6px 12px; margin-top: 8px; padding: 10px 6px 0; border-top: 1px solid var(--border); }
  #kcore-root .kc-lg { font-size: 11px; gap: 5px; }
  #kcore-root .kc-lg i { width: 8px; height: 8px; border-radius: 50%; }
  /* La lista del día: cada pieza es una tarjeta con su color a la izquierda. */
  #kcore-root .kc-dayp { background: transparent; box-shadow: none; overflow: visible; display: grid; gap: 8px; align-content: start; }
  #kcore-root .kc-dayp-h { border: 0; padding: 4px 4px 0; }
  #kcore-root .kc-dayp-h .kc-dd { font-size: 16px; }
  #kcore-root .kc-dev { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid #8B5CF6;
    border-radius: 14px; padding: 12px 13px; }
  #kcore-root .kc-dev + .kc-dev { border-top: 1px solid var(--border); }
  #kcore-root .kc-dev.kc-dev-review { border-left-color: #F59E0B; }
  #kcore-root .kc-dev.kc-dev-done { border-left-color: #3AA377; }
  #kcore-root .kc-dev.kc-dev-wish { border-left: 4px dashed #BFC5CE; }
  #kcore-root .kc-dev-k { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 10px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
  #kcore-root .kc-dev-est { margin-left: auto; font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
    padding: 2px 8px; border-radius: 10px; background: #ECEBFA; color: #4E46A8; }
  #kcore-root .kc-dev-review .kc-dev-est { background: #FDF1D3; color: #8A5B00; }
  #kcore-root .kc-dev-done .kc-dev-est { background: #E3F4EC; color: #1F7350; }
  #kcore-root .kc-dev-wish .kc-dev-est { background: #F1F1EE; color: #6B6B66; }
  #kcore-root .kc-dayp .kc-empty { background: var(--surface); border: 1px dashed #DCDCD6; border-radius: 14px; }

  /* ── Paso 5: el título de la ficha de una pieza ──
     En el celular salía «[demo]…»: iba en una sola línea al lado del estado, la
     papelera y la ×. Las acciones quedan arriba a la derecha y el título baja a
     su propia fila, en varias líneas. El input de edición va al MISMO tamaño
     que el h2 para que al tocarlo el texto no salte. */
  #kcore-root .kc-dr-top { flex-wrap: wrap; gap: 8px; }
  #kcore-root .kc-dr-acts { order: 1; margin-left: auto; }
  #kcore-root .kc-dr-ttl { order: 2; flex: 1 1 100%; }
  #kcore-root .kc-dr-head h2 { white-space: normal; overflow: visible; text-overflow: clip; font-size: 22px; text-wrap: balance; }
  #kcore-root .kc-dr-ttl .kc-dt-title-e { font-size: 22px; }

  /* ── 3. Tablero kanban ── */
  #kcore-root #kc-p-tablero .kc-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -18px 4px; padding: 0 18px 2px; }
  #kcore-root #kc-p-tablero .kc-tools::-webkit-scrollbar { display: none; }
  #kcore-root #kc-p-tablero .kc-tools > * { flex: none; }
  #kcore-root #kc-p-tablero .kc-tools .kc-search { width: 170px; }
  #kcore-root .kc-board {
    display: flex !important; grid-template-columns: none !important; gap: 10px;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 18px;
    margin: 0 -18px; padding: 0 18px 8px; scrollbar-width: none;
  }
  #kcore-root .kc-board::-webkit-scrollbar { display: none; }
  #kcore-root .kc-board > .kc-col { flex: 0 0 calc(100% - 46px); min-width: 0; scroll-snap-align: start; }
  #kcore-root .kc-board .kc-col-h .kc-pill { flex: 1; text-align: center; border-radius: 10px; padding: 8px 12px; }
  #kcore-root .kc-board .kc-col-empty { min-height: 160px; }
  #kcore-root .kc-bdots { display: flex; justify-content: center; gap: 5px; padding: 6px 0 12px; }
  #kcore-root .kc-bdots i { width: 6px; height: 6px; border-radius: 3px; background: #D6D6D0; transition: width .2s, background .2s; }
  #kcore-root .kc-bdots i.on { width: 16px; background: var(--ink); }
}
/* Los puntos del kanban solo existen en el celular. */
@media (min-width: 901px) {
  /* ⚠️ La flecha de volver de CEREBRO AI se salva: esa sección funciona por
     pantallas hasta 1180 (tres paneles que no caben de lado), así que por
     encima de 900 sigue necesitándola. Sin esta excepción, en el iPad
     horizontal se entraba a un documento y no había cómo volver. */
  #kcore-root .kc-bdots, #kcore-root .kc-dev-k,
  #kcore-root .kc-md:not(.kc-ai-md) > .kc-mdback { display: none !important; }
}
@media (min-width: 1181px) {
  #kcore-root .kc-ai-md > .kc-mdback { display: none !important; }
}

/* ══ DESVANECIDO EN LOS BORDES DE LO QUE SE DESLIZA (15 sep 2026) ══════════
   Aprobado por David sobre maqueta (https://claude.ai/artifact/HmLUzLRrnCS1WQkofeic8y),
   en celular Y en escritorio. Aparece SOLO del lado donde queda contenido
   escondido: el JS (bloque «DESVANECIDO» de kcore-mesa.js) mide cada
   contenedor al deslizar y pone .kc-fx-l / -r / -t / -b, más .kc-fx-any si hay
   alguno.

   DOS técnicas, y la regla que decide cuál es de David: «el desvanecido afecta
   las opciones, no el fondo del contenedor».
   1. MÁSCARA, en contenedores SIN fondo propio (el kanban, las listas, los
      paneles de Mi trabajo, la conversación). Desvanece lo que hay dentro.
   2. VELO del color del fondo, en contenedores CON fondo propio (el riel gris
      de pestañas, la barra inferior oscura). Una máscara ahí se comería la caja
      gris o la sombra de la barra; el velo es un seudoelemento `sticky` pintado
      con el color del riel, así que lo que se desvanece es el contenido.
      ⚠️ Los márgenes negativos compensan el `gap` exacto del contenedor: sin
      ellos los dos seudoelementos correrían todas las pestañas 4px, también
      cuando no hay nada que desvanecer. */
#kcore-root .kc-fxm.kc-fx-any {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--kc-fl, 0px), #000 calc(100% - var(--kc-fr, 0px)), transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 var(--kc-ft, 0px), #000 calc(100% - var(--kc-fb, 0px)), transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 var(--kc-fl, 0px), #000 calc(100% - var(--kc-fr, 0px)), transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 var(--kc-ft, 0px), #000 calc(100% - var(--kc-fb, 0px)), transparent 100%);
          mask-composite: intersect;
}
/* ⚠️ Cada contenedor arranca en 0: las variables CSS se HEREDAN, y un contenedor
   con desvanecido dentro de otro heredaría el del padre (pasó en el Portal con
   la línea de etapas). Va antes de las cuatro de abajo. */
#kcore-root .kc-fxm { --kc-fl: 0px; --kc-fr: 0px; --kc-ft: 0px; --kc-fb: 0px; }
#kcore-root .kc-fx-l { --kc-fl: 28px; }
#kcore-root .kc-fx-r { --kc-fr: 28px; }
#kcore-root .kc-fx-t { --kc-ft: 28px; }
#kcore-root .kc-fx-b { --kc-fb: 28px; }

/* Velo del riel de pestañas (gris var(--surface-3), gap 4px). */
#kcore-root .kc-tabs::before, #kcore-root .kc-tabs::after {
  content: ''; position: sticky; flex: none; align-self: stretch; width: 28px; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity .15s; }
#kcore-root .kc-tabs::before { left: 0; order: -1; margin-right: -32px; border-radius: 18px 0 0 18px;
  background: linear-gradient(to right, var(--surface-3) 20%, rgba(244,244,242,0)); }
#kcore-root .kc-tabs::after { right: 0; order: 999; margin-left: -32px; border-radius: 0 18px 18px 0;
  background: linear-gradient(to left, var(--surface-3) 20%, rgba(244,244,242,0)); }
#kcore-root .kc-tabs.kc-fx-l::before, #kcore-root .kc-tabs.kc-fx-r::after { opacity: 1; }
/* Lo ACTIVO nunca queda bajo el velo (David): la pestaña elegida y, en el
   celular, el ícono activo de la barra van por encima; solo se desvanecen los
   demás. */
#kcore-root .kc-tabs .kc-tab.on { position: relative; z-index: 3; }

/* ══ LA BARRA DE VOLVER ═════════════════════════════════════════════════════
   El aspecto va FUERA de cualquier media query y solo la visibilidad depende
   del ancho: la Bandeja y Plantillas la usan hasta 900 y Cerebro AI hasta 1180
   (son tres paneles), así que definirla dentro del bloque del teléfono la
   dejaba sin estilos en el iPad — un botón con borde de navegador en medio de
   la pantalla. Se vio en la primera captura a 1024. */
#kcore-root .kc-mdback { display: none; align-items: center; gap: 4px; padding: 10px 10px 10px 6px;
  background: var(--surface); border-bottom: 1px solid var(--border); flex: none; }
#kcore-root .kc-mdback button { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center;
  gap: 2px; height: 38px; padding: 0 10px 0 4px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text-1); }
#kcore-root .kc-mdback button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#kcore-root .kc-mdback svg { width: 22px; height: 22px; }

/* ══ SIN VELOS EN LA BARRA NI EN LA PÁGINA (≤900px, 16 sep 2026) ════════════
   David, con el iPad en la mano: «el menú se ve raro con ese difuminado sobre
   todo, incluso sobre el fondo negro; eso está mal, no debería verse así».

   Y tiene razón por dos motivos distintos, los dos estructurales:

   1. **El velo de la barra** se pinta del color de la píldora (#1A1A1A), pero
      la píldora es TRANSLÚCIDA y con desenfoque detrás. Un rectángulo opaco del
      mismo color encima de algo translúcido no desaparece: se ve como una
      mancha más clara, justo en la esquina redondeada. La pista de que la barra
      se desliza ya la da el ícono que asoma.

   2. **El velo de la página** se pinta del color del FONDO, pero encima de la
      tarjeta hay paneles BLANCOS, así que sobre ellos deja una bruma gris. Es
      el mismo defecto del «parche» de la semana pasada, movido de sitio: un
      velo a pantalla completa no puede saber de qué color es lo que tapa. Y no
      hace falta: el contenido ya termina encima de la barra (la tarjeta reserva
      su relleno) y la píldora es opaca, así que lo que pasa por detrás no se ve
      cortado, se ve tapado por la barra, que es lo normal en una app.

   Lo que SÍ se queda es el desvanecido de los contenedores que se deslizan por
   dentro (`FX_MASCARA` en kcore-mesa.js): ahí es una máscara sobre el contenido
   y no un rectángulo de color encima. */
@media (max-width: 900px) {
  #kcore-root .kc-side::before, #kcore-root .kc-side::after,
  #kcore-root::before, #kcore-root::after { content: none; }
  #kcore-root .kc-nav button.on { z-index: 3; }
}
@media (prefers-reduced-motion: reduce) {
  #kcore-root .kc-tabs::before, #kcore-root .kc-tabs::after,
  #kcore-root .kc-side::before, #kcore-root .kc-side::after,
  #kcore-root::before, #kcore-root::after { transition: none; }
}

/* ══ CLIENTES EN EL CELULAR (≤768px) · Fase 3 del repaso responsive ═════════
   Esta sección queda FUERA del maestro-detalle a pantalla completa (ya tenía el
   suyo con `depSel`), así que se le pasaron tres cosas, vistas en la recaptura:

   1. La lista se cortaba a media teja. La regla vieja `.kc-md-list { max-height:
      292px }` del bloque de móvil sigue aplicándole porque el paso 2 la excluyó
      con `:not(#kc-dep-md)`. Era el mismo defecto que el inventario de la Fase 1
      ya había marcado como grave.
   2. «＋ Nuevo cliente» se montaba ENCIMA de las pestañas: el riel va `nowrap`
      en móvil (lo necesita la Bandeja) y el botón tiene `margin-left: auto`.
      Aquí envuelve y el botón baja a su propia fila.
   3. Con los 30px de relleno del diseño de escritorio, al nombre del cliente le
      quedaban ~100px y la columna salía vacía.

   ⚠️ TODO acotado a `#kc-dep-md`: `.kc-md-*`, `.kc-tabs-wrap` y `.kc-search` las
   comparten cinco pantallas, y una regla suelta sobre ellas ya se llevó tres por
   delante el 29 ago. */
@media (max-width: 900px) {
  #kcore-root #kc-dep-md:not(.kc-md-solo) > .kc-md-list {
    max-height: none; flex: 1 1 auto; border-bottom: 0; }
  #kcore-root #kc-dep-md .kc-md-list > .kc-tabs-wrap { flex-wrap: wrap; row-gap: 10px; }
  #kcore-root #kc-dep-md .kc-tabs-wrap > .kc-b { margin-left: 0; width: 100%; justify-content: center; }
  #kcore-root #kc-dep-md:not(.kc-md-solo) .kc-md-list > .kc-tabs-wrap { padding-left: 16px; padding-right: 16px; }
  #kcore-root #kc-dep-md:not(.kc-md-solo) .kc-md-scroll { padding: 4px 16px 24px; }
  #kcore-root #kc-dep-md:not(.kc-md-solo) .kc-depsearch { margin: 12px 16px 18px; max-width: none; }
  /* La teja baja de 56 a 44 y los huecos de 22 a 12: con las medidas de
     escritorio, el nombre y la cuenta de solicitantes no caben a la vez. */
  #kcore-root #kc-dep-md .kc-depit,
  #kcore-root #kc-dep-md .kc-deplisth { grid-template-columns: 44px minmax(0,1fr) auto 18px; gap: 0 12px; }
  #kcore-root #kc-dep-md .kc-depic-lg { width: 44px; height: 44px; }
  #kcore-root #kc-dep-md .kc-depname { font-size: 15px; }
  #kcore-root #kc-dep-md .kc-depmeta { font-size: 11.5px; }
  /* La ficha del cliente: 34px por lado se comían el ancho de los campos. */
  #kcore-root .kc-depbox { padding: 16px 16px 30px; }

  /* El editor del brief: la fila es grip | pregunta | chip | Editar | papelera,
     y con tres cosas de ancho fijo a la pregunta le quedaban ~70px («Dónde se
     va a usar» salía una palabra por línea). El nombre se queda arriba con el
     agarrador y el resto baja a una segunda fila. */
  #kcore-root .kc-bfrow { flex-wrap: wrap; row-gap: 10px; }
  #kcore-root .kc-bfmain { flex: 1 1 calc(100% - 40px); }
  #kcore-root .kc-bfhelp { white-space: normal; }
}

/* ══ iOS HACE ZOOM SI UN CAMPO TIENE LA LETRA POR DEBAJO DE 16px ═══════════
   Reportado por David desde producción con tres capturas (Advisor, Calendario
   y Overview del Portal): al tocar «Buscar tarea», Safari AMPLÍA la página y la
   deja descuadrada — el título se sale por la derecha, el buscador se pasa del
   borde y las tarjetas quedan cortadas. Al salir del campo la página se queda
   así. No es el teclado ni el layout: es una función de accesibilidad de iOS
   que amplía cuando el texto del campo es más chico que 16px.

   ⚠️ NO se arregla con `maximum-scale=1` en el viewport: eso también le quita
   el zoom con dos dedos a quien lo necesita para leer, y varias versiones de
   iOS lo ignoran. Lo único que lo evita es que el campo mida 16px, que además
   es el mínimo cómodo para escribir en un teléfono.

   Va al FINAL de la hoja para ganarle a las reglas de cada campo (12–13.5px),
   y solo en móvil: en escritorio la escala tipográfica no se toca. */
@media (max-width: 900px) {
  /* ⚠️ Con `!important`, y no es pereza: las reglas de cada campo son
     `#kcore-root .kc-search input` (1,1,1) y le GANAN por especificidad a
     `#kcore-root input` (1,0,1) por más que esto vaya al final del archivo.
     Se comprobó: sin el !important el buscador seguía en 13px y iOS seguía
     ampliando. */
  #kcore-root input, #kcore-root select, #kcore-root textarea,
  #kcore-root .kc-fmt-ed { font-size: 16px !important; }
  /* El buscador crece de alto con la letra; se le quita relleno para que la
     caja siga siendo la misma. */
  #kcore-root .kc-search input { padding-top: 8px; padding-bottom: 8px; }
}

/* ══ LAS TABLAS DE «MI TRABAJO» EN EL CELULAR (≤768px, 16 sep 2026) ═════════
   Reportado por David probando en un iPhone: los nombres salían cortados a la
   tercera letra («Edici…», «Pres…», «Subt…») y la tarea madre igual («Video
   A…»). La causa es que estas tablas son GRID con las columnas declaradas por
   clase — cuatro o cinco pistas, dos de ellas de ancho fijo — y en 375px al
   nombre le quedaban ~90px. O sea que lo único ilegible era justo lo que dice
   qué hay que hacer.

   Aquí la fila deja de ser una fila de tabla y pasa a DOS LÍNEAS: arriba el
   nombre completo (envuelve, ya no se recorta) y abajo la tarea madre a la
   izquierda con la fecha a la derecha. Es el mismo criterio con el que
   Entregables del Portal pasó a tarjetas.

   ⚠️ La colocación va por `:nth-child` y NO por clase: el estado de una pieza
   y la acción de «Por planear» son `<span>`/`<button>` sin clase propia, y
   `.kc-td-mut` la comparten el área y «Sin pasos». Los números están atados al
   orden que arma `filasPasos()` / `tablaPiezas()` en kcore-mesa.js; si ahí se
   agrega o quita una celda, hay que tocar esto. Es la misma advertencia que ya
   dejó escrita la columna que se corrió una posición por debajo de 1180.

   ⚠️ El ÁREA se esconde, y es una decisión: con el nombre completo, la tarea
   madre y la fecha, la cuarta cosa deja la fila en tres líneas y una lista de
   quince pasos en un rollo. El área sigue en la ficha, en el Tablero y en
   Reportes, que es donde se usa para decidir algo. */
@media (max-width: 900px) {
  /* Sin rótulos de columna: en dos líneas no hay columnas que rotular. */
  #kcore-root .kc-table .kc-th { display: none; }

  #kcore-root .kc-t-steps .kc-tr,
  #kcore-root .kc-t-mine .kc-tr,
  #kcore-root .kc-t-plan .kc-tr {
    grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 10px; }

  /* El nombre y la tarea madre ENVUELVEN: los tres puntos suspensivos eran el
     defecto, no la solución. */
  #kcore-root .kc-t-steps .kc-td-t,
  #kcore-root .kc-t-mine .kc-td-link,
  #kcore-root .kc-t-plan .kc-td-link {
    white-space: normal; overflow: visible; text-overflow: clip; }
  #kcore-root .kc-t-steps .kc-td-name { align-items: flex-start; }
  #kcore-root .kc-t-steps .kc-ck { margin-top: 1px; }

  /* Pasos: 1 nombre · 2 tarea madre · 3 área · 4 fecha */
  #kcore-root .kc-t-steps .kc-tr > :nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
  #kcore-root .kc-t-steps .kc-tr > :nth-child(2) { grid-column: 1; grid-row: 2; padding-left: 33px; font-size: 12.5px; }
  #kcore-root .kc-t-steps .kc-tr > :nth-child(3) { display: none; }
  #kcore-root .kc-t-steps .kc-tr > :nth-child(4) { grid-column: 2; grid-row: 2; }

  /* A mi cargo: 1 título · 2 estado · 3 plan · 4 área · 5 fecha */
  #kcore-root .kc-t-mine .kc-tr > :nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
  #kcore-root .kc-t-mine .kc-tr > :nth-child(2) { grid-column: 1; grid-row: 2; justify-self: start; }
  #kcore-root .kc-t-mine .kc-tr > :nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
  #kcore-root .kc-t-mine .kc-tr > :nth-child(4) { display: none; }
  #kcore-root .kc-t-mine .kc-tr > :nth-child(5) { grid-column: 2; grid-row: 2; }

  /* Por planear: 1 título · 2 estado · 3 área · 4 fecha · 5 «＋ Pasos» */
  #kcore-root .kc-t-plan .kc-tr > :nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
  #kcore-root .kc-t-plan .kc-tr > :nth-child(2) { grid-column: 1; grid-row: 2; justify-self: start; }
  #kcore-root .kc-t-plan .kc-tr > :nth-child(3) { display: none; }
  #kcore-root .kc-t-plan .kc-tr > :nth-child(4) { grid-column: 2; grid-row: 2; }
  /* La acción es lo que se viene a hacer en esa pestaña: a lo ancho y cómoda. */
  #kcore-root .kc-t-plan .kc-tr > :nth-child(5) { grid-column: 1 / -1; grid-row: 3; text-align: left; }
  #kcore-root .kc-t-plan .kc-tr > :nth-child(5) .kc-b { width: 100%; justify-content: center; height: 38px; }
}

/* ══ EL CHAT DEL CELULAR OCUPA LA PANTALLA (≤768px, 16 sep 2026) ════════════
   Reportado por David desde producción: al abrir una conversación de la
   Bandeja en el iPhone «no se ve dónde escribir». Reproducido en Local con una
   conversación larga: el compositor NO estaba escondido, estaba al final de una
   página de tres pantallas de alto — en escritorio el detalle es un flex de
   alto fijo con el chat scrolleando por dentro, y en móvil el paso 2 lo dejó
   crecer con el contenido, así que el scroll pasó a ser el de la página.

   Aquí la tarjeta vuelve a medir la pantalla y el scroll vuelve adentro: los
   mensajes se deslizan y el compositor se queda abajo, como cualquier chat.

   ⚠️ Acotado con `:has(...)` a que el detalle abierto sea un CHAT. El detalle
   de una solicitud no tiene scroller propio (lo suyo lo scrollea la página), y
   meterle `overflow: hidden` al contenedor le cortaría el brief sin dejar cómo
   bajar. Si algún día `:has` estorba, la alternativa es una clase en la raíz
   puesta por `renderDMChat()`, no quitar el acotamiento.

   ⚠️ 100dvh y no 100vh: en iOS el 100vh es el viewport GRANDE (el de las barras
   escondidas), así que el compositor quedaría debajo de la barra de Safari,
   que es justo el síntoma que se está arreglando. */
@media (max-width: 900px) {
  /* ⚠️ La altura se le pone a la RAÍZ, no a la tarjeta: `.kc-card` es un flex
     item con `flex: 1`, así que su `height` lo pisa el reparto del flex y
     termina midiendo lo que mida el contenido. Medido: con la altura en la
     tarjeta seguía en 2243px. */
  #kcore-root.kc-en-detalle:has(.kc-md-detail.kc-chatmode) {
    height: 100dvh; min-height: 0; overflow: hidden; }
  #kcore-root.kc-en-detalle:has(.kc-md-detail.kc-chatmode) > .kc-card {
    min-height: 0; overflow: hidden; }
  #kcore-root.kc-en-detalle:has(.kc-md-detail.kc-chatmode) .kc-pane.on,
  #kcore-root.kc-en-detalle:has(.kc-md-detail.kc-chatmode) .kc-body,
  #kcore-root.kc-en-detalle:has(.kc-md-detail.kc-chatmode) .kc-md {
    min-height: 0; overflow: hidden; }
  #kcore-root.kc-en-detalle .kc-md.kc-md-open > .kc-md-detail.kc-chatmode {
    min-height: 0; overflow: hidden; }
  /* ⚠️ El chat y el detalle de una solicitud son EL MISMO elemento (#kc-detail),
     así que hereda el relleno de 120px que reserva sitio para la fila de
     acciones fijas de la solicitud. En un chat ahí no hay ninguna fila: ese
     relleno dejaba al compositor flotando a 120px del borde. Medido. */
  #kcore-root.kc-en-detalle #kc-detail.kc-chatmode { padding-bottom: 0; }
  /* La cabecera del chat no scrollea: se achica para dejarle sitio a los
     mensajes, que es lo que se viene a leer. */
  #kcore-root .kc-chat-head { padding: 12px 16px 10px; }
  #kcore-root .kc-chat-head h2 { font-size: var(--fs-lg); }
  #kcore-root .kc-chat-scroll { padding: 12px 16px; }
  /* El compositor, pegado abajo y por encima del área segura del iPhone. */
  #kcore-root .kc-chat-bar { padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* ══ LAS PESTAÑAS ENVUELVEN EN EL CELULAR (≤768px, 16 sep 2026) ═════════════
   David: «el desvanecido se ve como un parche». Y tenía razón por una razón
   estructural, no de gusto: el riel de pestañas TIENE fondo propio y la
   pastilla activa es BLANCA, así que el velo —que se pinta del color del
   riel— pasaba por encima de una pastilla de otro color. Cualquier velo ahí
   iba a verse como una mancha.

   La salida no es afinar el degradado: es que en un teléfono el riel no
   necesite deslizarse. Con tres o cuatro pestañas cortas, envolver en dos
   líneas se lee de una y no esconde ninguna. Sin riel que se corte, tampoco
   hace falta desvanecido. En escritorio no cambia nada. */
@media (max-width: 900px) {
  #kcore-root .kc-tabs { flex-wrap: wrap; overflow: visible; border-radius: 18px; }
  #kcore-root .kc-tabs::before, #kcore-root .kc-tabs::after { display: none; }
  /* El riel de la cabecera es `inline-flex` dentro de una celda de rejilla, o
     sea que se encoge a su contenido: medido, 246px para pestañas de 153px, así
     que al envolver caía una por línea. A lo ancho caben dos. */
  #kcore-root .kc-head-right > .kc-tabs { overflow: visible; width: 100%;
    max-width: 100%; justify-self: stretch; }
  #kcore-root .kc-md-list .kc-tabs-wrap { flex-wrap: wrap; row-gap: 8px; }
  #kcore-root .kc-md-list .kc-tabs-wrap .kc-tabs { min-width: 0; flex: 0 1 auto; }
}

/* ══ EL PLAN DE EJECUCIÓN EN EL CELULAR (≤768px, 16 sep 2026) ═══════════════
   Visto al revisar la ficha en un iPhone: la cabecera de la sección es un flex
   de tres cosas (título, progreso y «Crear con plantilla») que no envuelve, así
   que «PLAN DE EJECUCIÓN» se partía en dos líneas y «0 de 1» en TRES («0 / de /
   1»); y cada paso es otro flex de cinco cosas donde el nombre —lo único que
   dice qué hay que hacer— se quedaba sin ancho y se salía de la tarjeta.

   Las dos filas envuelven: el nombre del paso arriba junto a su casilla, y
   debajo las fechas, la prioridad y quién lo hace, alineadas bajo el nombre. */
@media (max-width: 900px) {
  #kcore-root .kc-sec-h { flex-wrap: wrap; row-gap: 8px; }
  #kcore-root .kc-sec-h > h3 { flex: 1 1 auto; }
  #kcore-root .kc-prog { flex: 0 0 auto; }
  #kcore-root .kc-prog .kc-pbar { max-width: 90px; }
  #kcore-root .kc-prog .kc-pn { white-space: nowrap; }

  /* ⚠️ REJILLA y no `flex-wrap`: con envoltura, el nombre del paso es un
     <input> y el reparto dejaba la casilla y el nombre en la misma línea con el
     nombre saliéndose igual. Con rejilla, cada cosa tiene su sitio declarado. */
  #kcore-root .kc-stprow {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto;
    align-items: center; gap: 8px 11px; padding: 10px; }
  #kcore-root .kc-stprow > .kc-ck { grid-column: 1; grid-row: 1; }
  #kcore-root .kc-stprow > .kc-sn { grid-column: 2 / -1; grid-row: 1; }
  #kcore-root .kc-stprow > .kc-stpm { grid-column: 2; grid-row: 2; flex-wrap: wrap; row-gap: 6px; }
  #kcore-root .kc-stprow > .kc-sasg { grid-column: 3; grid-row: 2; }
  #kcore-root .kc-stprow > .kc-sdel { grid-column: 4; grid-row: 2; opacity: 1; }
}

/* ══ LA FICHA POR SECCIONES (≤1180px, 16 sep 2026) ══════════════════════════
   Aprobado por David sobre maqueta: «4 pestañas, la vitrina dentro, y que abra
   en la vista normal, no directo al chat». El riel es el ESTÁNDAR de la
   plataforma —pastilla blanca sobre riel gris (§5.b)— porque él pidió «el
   estilo que ya tenemos para movernos entre secciones».

   El cajón lleva `data-fi` con la sección abierta y cada bloque declara a cuál
   pertenece con `data-fi`. El CSS esconde los que no son: así cambiar de
   sección no re-pinta nada, no pierde el scroll de cada una y el JS solo toca
   un atributo.

   En ESCRITORIO el riel no existe: ahí la ficha es de dos columnas y se ve todo
   a la vez, que es justo lo que en un teléfono no cabe. */
#kcore-root .kc-fitabs { display: none; }

/* ⚠️ EL CORTE ES 1180 Y NO 900, y sale de otra captura de David: en el iPad en
   horizontal (1024–1180) la ficha ya colapsa a UNA columna, así que la
   conversación vuelve a quedar al final del rollo — «tiene el mismo problema
   que el chat aparece hasta abajo». El riel tiene que aparecer exactamente
   donde desaparece la segunda columna, no donde empieza el teléfono. */
@media (max-width: 1180px) {
  #kcore-root .kc-fitabs {
    display: inline-flex; width: calc(100% - 28px); margin: 10px 14px 2px; flex: none; }
  #kcore-root .kc-fitabs .kc-tab { flex: 1; justify-content: center; }

  #kcore-root .kc-drawer[data-fi="pieza"] [data-fi]:not([data-fi~="pieza"]),
  #kcore-root .kc-drawer[data-fi="chat"]  [data-fi]:not([data-fi~="chat"]),
  #kcore-root .kc-drawer[data-fi="plan"]  [data-fi]:not([data-fi~="plan"]),
  #kcore-root .kc-drawer[data-fi="arch"]  [data-fi]:not([data-fi~="arch"]) { display: none !important; }

  /* El cajón es una columna: cabecera y riel fijos, y el cuerpo se queda con lo
     que sobra. Sin esto el chat volvería a crecer hacia abajo con el contenido,
     que es el defecto que ya se corrigió en la Bandeja. */
  #kcore-root .kc-drawer { display: flex; flex-direction: column; }
  #kcore-root .kc-drawer .kc-dr-head { flex: none; }
  #kcore-root .kc-drawer .kc-dr-body { flex: 1; min-height: 0; }

  /* En Chat, la conversación ocupa el cuerpo entero: mensajes con scroll propio
     y el compositor abajo, sobre el área segura. */
  #kcore-root .kc-drawer[data-fi="chat"] .kc-dr-body { display: flex; overflow: hidden; padding: 0; }
  #kcore-root .kc-drawer[data-fi="chat"] .kc-dr-main { display: none; }
  #kcore-root .kc-drawer[data-fi="chat"] .kc-dr-conv {
    flex: 1; min-height: 0; width: 100%; max-width: none; border-left: 0;
    display: flex; flex-direction: column; }
  #kcore-root .kc-drawer[data-fi="chat"] .kc-conv-b {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}

/* ══ EL ÍCONO QUE ASOMA AL FINAL DE LA BARRA (≤768px, 16 sep 2026) ══════════
   Mismo ajuste que en el Portal, medido sobre la captura: con los íconos a
   1/5.5 del riel, el sexto asomaba unos 26px y el velo de 28px se lo comía
   entero — se veía un canto cortado, no un ícono. Con el velo más corto y los
   íconos un punto más angostos, el siguiente se ve a medias y se entiende que
   la barra se desliza. */
@media (max-width: 900px) {
  #kcore-root .kc-nav button { flex: 0 0 calc(100% / 5.8); }
  #kcore-root .kc-side::before, #kcore-root .kc-side::after { width: 20px; }
}

/* ══ EN EL IPAD CABEN DOS ETAPAS DEL TABLERO (601–900px, 16 sep 2026) ═══════
   David, con el iPad vertical: «la vista de tablero se ve demasiado ancha si
   solo se muestra una sola etapa, caben dos». Y caben: a 834px, dos columnas
   quedan a ~390px cada una, más que los 330 que miden en escritorio. La tercera
   sigue asomando, que es lo que dice que el tablero se desliza. */
@media (min-width: 601px) and (max-width: 900px) {
  #kcore-root .kc-board > .kc-col { flex: 0 0 calc(50% - 30px); }
}

/* ══ CEREBRO AI EN EL IPAD HORIZONTAL (901–1180px, 16 sep 2026) ═════════════
   Entre 901 y 1180 la sección se apila (clientes, documentos y la hoja), y con
   siete clientes la hoja caía fuera de la pantalla: David lo reportó como
   «entro a un doc y ni siquiera se ve algo». Que la sección scrollee lo hace
   alcanzable, pero obliga a bajar por las dos listas cada vez que se abre un
   documento.

   Aquí cada panel se queda con su alto y scrollea LO SUYO, así que al tocar un
   documento la hoja ya está ahí abajo, sin mover la página. Por debajo de 900
   no aplica: ahí la sección funciona por pantallas, con su flecha de volver. */
@media (min-width: 901px) and (max-width: 1180px) {
  /* Las tres pantallas de Cerebro AI (clientes → documentos → hoja), igual que
     en el teléfono: la sección apilada dejaba la hoja fuera de la pantalla y,
     con scroll, obligaba a bajar por las dos listas cada vez. La flecha de
     volver la pinta el JS (`MOVIL_AI`, 1180). */
  #kcore-root .kc-ai-md.kc-md-open > .kc-mdback { display: flex; }
  #kcore-root .kc-ai-md.kc-md-open > .kc-md-list { display: none; }
  #kcore-root .kc-ai-md:not(.kc-md-open) > .kc-ai-docs,
  #kcore-root .kc-ai-md:not(.kc-md-open) > .kc-md-detail { display: none; }
  #kcore-root .kc-ai-md.kc-md-open:not(.kc-md-open2) > .kc-md-detail,
  #kcore-root .kc-ai-md.kc-md-open2 > .kc-ai-docs { display: none; }
  #kcore-root .kc-ai-md > .kc-ai-docs,
  #kcore-root .kc-ai-md > .kc-md-detail { width: 100%; max-height: none; border: 0; flex: 1; min-height: 0; }
  #kcore-root .kc-ai-md > .kc-md-list { max-height: none; flex: 1; }
  #kcore-root .kc-ai-md { overflow: hidden; min-height: 0; }
}