/* ═══════════════════════════════════════════════════════════════════════════ LA FICHA — los bloques que comparten la Mesa y el PORTAL (23 ago 2026) Pedido de David: *"en el portal del cliente, la vista de la tarjeta de la tarea se ve igual que en la mesa… la idea no es quitarle opciones sino ampliar la vista para que sea más cómoda"*. ═══ POR QUÉ ESTE ARCHIVO EXISTE, Y NO UNA COPIA ═══ El §4 lo prohíbe explícitamente: el frontend es COMPARTIDO, no forkeado. Copiar estas reglas a `dbch-dashboard.css` habría significado arreglar cada bug de Astra dos veces, que es lo que ese apartado documenta con nombres propios (la papelera invisible, el `white-space` de los chips). Y hay un precedente medido: la vitrina se compartió en vez de copiarse (`kcore-vitrina.css`, 856 líneas), y el dividendo salió en números — el Reel entero costó CERO líneas en el portal y la parrilla 17. ═══ QUÉ ENTRA AQUÍ Y QUÉ NO ═══ Entra lo que las dos superficies pintan IGUAL: la franja de propiedades y el armazón de una sección. **No entra nada de EDITAR**: `.kc-pc-v` (el valor que se vuelve control al tocarlo), `.kc-sec-h` y `.kc-sec-b` (los lápices) se quedan en `kcore-mesa.css`, porque en el portal la ficha es de lectura. `.kc-card` tampoco entra, y no por olvido: en la Mesa ESE NOMBRE ESTÁ DECLARADO DOS VECES con significados distintos (la tarjeta del dashboard y la caja de una sección). Moverlo habría arrastrado esa ambigüedad al portal. ═══ EL RE-ALCANCE ═══ `:is(#kcore-root, #dbch-root)` conserva la especificidad de id (1,1,0), que es la misma que tenían con `#kcore-root` a secas. Con `.kc-props` habría bajado a (0,1,0) y los estilos base de Astra le habrían ganado — el defecto que el §4 ya documentó dos veces y que la vitrina volvió a encontrar. ⚠️ **Una regla nueva aquí lleva el `:is(...)` COMPLETO**, o funciona en la Mesa y no existe en el portal. ═══ LOS TOKENS ═══ Los siete que usa este archivo (`--border`, `--surface`, `--surface-3`, `--text-1`, `--text-3`, `--r-lg`, `--accent`) están declarados en LAS DOS raíces y con el mismo valor: comprobado antes de mover nada. Es la trampa que la vitrina sí pisó, con `--tint-2`, que solo existía en la Mesa y dejó esos elementos sin fondo, sin error y solo un poco mal. Este archivo se carga ANTES que `kcore-mesa.css` (es su dependencia), así que la cascada de la Mesa queda igual que estaba: lo que aquella declare después sigue ganando. ═══════════════════════════════════════════════════════════════════════════ */ /* ── La franja de propiedades ─────────────────────────────────────────────── */ :is(#kcore-root, #dbch-root) .kc-props { display: grid; /* `minmax(0, …)` en todas: un `fr` suelto tiene `min-content` de mínimo, y con texto `nowrap` dentro eso hace que la fila se niegue a encoger y desborde en vez de recortar. Es la misma nota que ya está en `.kc-dr-body`. */ grid-template-columns: minmax(0,1.05fr) minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr); gap: 16px 10px; align-items: start; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; background: var(--surface); } /* Debajo de 1400 la ficha se estrecha y cinco columnas dejan cada valor en ~120px, donde «25 JUL 2026» ya sale con puntos suspensivos. Tres y tres es más legible que cinco apretadas. ⚠️ ÚNICA EXCEPCIÓN a la escala 1180/1024/768/480 (15 sep 2026). No es un corte de dispositivo sino del ANCHO de la ficha: bajarlo a 1180 dejaría las cinco columnas apretadas justo en los portátiles de 1280 y 1366, que son escritorio (la prioridad). Lo correcto a futuro es un container query. */ @media (max-width: 1400px) { :is(#kcore-root, #dbch-root) .kc-props { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { :is(#kcore-root, #dbch-root) .kc-props { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ⚠️ En el PORTAL la franja va en un modal, no en la columna de una ficha de 1440px, así que sus cinco columnas nunca caben. Se le da su propio número de columnas por el ancho REAL del modal y no por el del viewport, que es lo que miran los media queries de arriba: un modal de 900px dentro de una pantalla de 1600 seguiría pidiendo cinco. */ #dbch-root .kc-props { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { #dbch-root .kc-props { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── Una celda ────────────────────────────────────────────────────────────── */ :is(#kcore-root, #dbch-root) .kc-pc { min-width: 0; display: flex; flex-direction: column; gap: 7px; } :is(#kcore-root, #dbch-root) .kc-pc-l { font-size: 11.5px; color: var(--text-3); font-weight: 500; } :is(#kcore-root, #dbch-root) .kc-pc-t { min-width: 0; display: flex; flex-direction: column; } :is(#kcore-root, #dbch-root) .kc-pc-n { font-size: 13px; font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :is(#kcore-root, #dbch-root) .kc-pc-s { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Un valor sin poner se ve como lo que es: un hueco, no un dato. */ :is(#kcore-root, #dbch-root) .kc-pc-0 .kc-pc-n { color: var(--text-3); font-weight: 500; } :is(#kcore-root, #dbch-root) .kc-pc-go { color: var(--accent); text-decoration: none; font-weight: 600; } :is(#kcore-root, #dbch-root) .kc-pc-go:hover { text-decoration: underline; } :is(#kcore-root, #dbch-root) .kc-pc .kc-pc-av { width: 30px; height: 30px; font-size: 10.5px; flex: none; } :is(#kcore-root, #dbch-root) .kc-pc-na { background: var(--surface-3); color: var(--text-3); } /* La fila de una celda con avatar. En la Mesa esto lo da `.kc-pc-v`, que es un