/* GENERADO — no editar a mano. Origen: software/web/design-system/app/app.css Se rehace con: node app/scripts/tomar-app.js (vigila pruebas/app-css.js). */ /* Componentes de aplicación del design system de Musho (1.1, 26/09/2026; la 1.2 añade § 22-23; la 1.3, § 25-28; la 1.4, 27/09: anatomía de la fila, grupo de botones, vacío a la izquierda y § 33 página; la 1.5, 27/09: primario, foco, interruptor y pestaña neutros; el coral, solo peligro; la 1.6, 27/09: § 59-67 panel, menú, tooltip, árbol, barra de vista, desplegable, cabecera segmentada, detalle y propiedades editables; sidebar plegable; el coral también dice «aquí estás» — SPEC-DS-1-6.md; la 1.7, 28/09: ventana de unificación (Karri Saarinen y Brad Frost): la sidebar un escalón por debajo (--ds-app-texto-lateral) y un modificador por significado (reglas.md § 32 bis): --atencion → --aviso, --alerta → --error, --gris → --neutro; las viejas quedan UNA versión con ficha de obsoleta y se borran en la 1.8 (§ 0.12 c) — SPEC-DS-1-7.md; la 1.8.5, 28/09: caja táctil 40 en < 1056 para el chevron del árbol y la X del chip, dibujo 24/16 — SPEC-CRM3-ROJOS.md). Los usa el CRM desde la fase 0b de CRM 2 (software/crm/SPEC-CRM2-0B.md). Reglas de la casa: · Prefijo .ds- en todo: el CRM ya tiene .tarjeta, .fila, .etiqueta con otro estilo y las pantallas se migran una a una; sin prefijo se pisan. Modificadores con --, partes con __, activo con .es-activo o el ARIA. · Solo tokens de app/tokens.css. Lo que no tiene token se declara UNA vez aquí abajo como --ds-app-*, con su porqué. Lo vigila app/sonda-app.js. · Sin JS se ve bien: el activo lo pinta el servidor con la clase o el ARIA; app.js solo anima y abre/cierra. · Móvil primero: base < 720 · ≥ 720 tablet · ≥ 1056 PC; tope 1584 (reglas.md § 33: SOLO esos breakpoints; lo mide sonda-app.js). Lo copia el CRM: node app/scripts/tomar-app.js (vigila pruebas/app-css.js). */ :root { /* Fuente: el token trae solo «Geist»; si la página no la carga, cae a la del sistema en vez de a Times. */ --ds-app-fuente: var(--ds-typography-family-sans), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Medio paso (4 px): la escala de espacio empieza en 8 y los huecos entre icono y texto pequeño piden la mitad. */ --ds-app-paso-medio: calc(var(--ds-spacing-2xs) / 2); /* 1.19.0 (§ 0.16, Yaz 02/10): aire por proximidad. Cinco escalones con ROL, alias de los que ya existen (no son valores nuevos): lo que va junto, cerca; el hueco ENTRE grupos ≥ 2× el de DENTRO. Toda regla de aire vertical usa el token del rol, no --ds-spacing-*. */ --ds-aire-pieza: var(--ds-app-paso-medio); /* 4 · dentro de una pieza pequeña */ --ds-aire-parte: var(--ds-spacing-2xs); /* 8 · partes de UNA cosa */ --ds-aire-bloque: var(--ds-spacing-xs); /* 16 · cosas distintas dentro de un bloque */ --ds-aire-campo: var(--ds-spacing-sm); /* 24 · campo → campo, último campo → pie */ --ds-aire-seccion: var(--ds-spacing-md); /* 32 · sección → sección */ /* Tope de una línea de texto secundario (subtítulo, meta de tarjeta, sub de fila): ~62 caracteres. En una página ancha (1584) una frase suelta llegaba a 219 caracteres (banco del CRM, 27/09); Carbon pide 60-80. (1.5.1) */ --ds-app-texto-max: 62ch; /* Tope de un PÁRRAFO de lectura dentro de una pieza (descripción de tarjeta, texto de un vacío): ~52 caracteres de ancho ≈ 70 reales. 62ch daba ~85 (largo) y el 40ch a pelo del vacío ~55 (corto), y los dos párrafos de la misma tarjeta cortaban a 575 y 371 px sobre 944 (/kpis, Yaz 03/10). (1.20.1) */ --ds-app-parrafo-max: 52ch; /* Paso y medio (12 px): relleno lateral de chips y etiquetas densas. */ --ds-app-paso-12: calc(var(--ds-spacing-2xs) * 1.5); /* Línea fina de bordes y separadores. */ --ds-app-linea: 1px; /* Grosor del contorno de foco y del subrayado activo de pestañas. */ --ds-app-foco: 2px; /* Color del foco (1.5, reglas.md § 0.7): neutro, como el primario. El coral en una app es peligro o marca quieta; un anillo coral en cada tabulación decía «peligro» en todas partes. */ --ds-app-foco-color: var(--ds-color-bg-inverse); /* Acción primaria neutra (1.5, § 0.7 y § 30.8, Carbon: rojo = error, el primario es neutro; Untitled en oscuro y Apple hacen lo mismo): el inverso del fondo. En oscuro, claro sobre oscuro; en el tema claro del CRM los inversos ya son oscuros. El hover mezcla hacia el fondo. */ --ds-app-primario-fondo: var(--ds-color-bg-inverse); --ds-app-primario-texto: var(--ds-color-text-inverse); --ds-app-primario-hover: color-mix(in srgb, var(--ds-color-bg-inverse) 88%, var(--ds-color-bg)); /* Alto del chip de filtro (App Store / MLS): más bajo que un control. */ --ds-app-chip: 32px; /* Relleno interior del segmentado: el indicador «flota» 3 px dentro. */ --ds-app-segmentado-relleno: 3px; /* 1.14 (§ 3, H6): marco del segmentado de página, el p-1 (4) del button-border de Untitled (untitled/medidas.md § Pestañas). La cabecera segmentada (§ 65) sigue con el relleno de 3. */ --ds-app-segmentado-marco: 4px; /* Punto de color delante de la etiqueta de estado. */ --ds-app-punto: 6px; /* Barra inferior del móvil: 56 px, la medida de Material/iOS para la zona del pulgar. Botón flotante: 48 (1.9, P47, el «máx. 48» de Asier). */ --ds-app-barra: 56px; --ds-app-fab: 48px; /* Anchos máximos de hoja (en tablet/PC) y diálogo. */ --ds-app-hoja-max: 480px; --ds-app-dialogo-max: 400px; /* Alto máximo de la hoja en móvil: deja ver que debajo sigue la página. 1.15.1 (P87): en dvh, el alto VISIBLE; con vh, Safari de iPhone medía con las barras del navegador escondidas y la hoja quedaba cortada. */ --ds-app-hoja-alto: 85dvh; /* Mínimo de cada métrica en la rejilla auto-fit. */ --ds-app-metrica-min: 160px; /* Avatar normal (32); el grande usa --ds-spacing-control (40). */ --ds-app-avatar: 32px; /* Icono del estado vacío: 40, más grande que cualquier icono de UI. */ --ds-app-icono-vacio: 40px; /* Capas: barra y FAB sobre el contenido; los van en la capa superior del navegador y no necesitan z-index. */ --ds-app-capa-barra: 30; --ds-app-capa-fab: 31; /* Saltar al contenido (§ 27): por encima de la barra y del FAB al recibir foco. */ --ds-app-capa-saltar: 40; /* 1.2 · piezas de documento y de vista de datos (§ 22-23). Medidas de notion/huecos.md, tablas A y B. Son geometría de UNA pieza, no tokens: en @theme serían 37 variables de ruido para Yaz y para Figma (Ari, 26/09). La línea de 1 px es la --ds-app-linea de arriba. */ /* Cita: raya de 3 px en tinta (tabla A). */ --ds-app-raya: 3px; /* Chip: 20 px de alto; 18 dentro de tarjeta (regla 6). */ --ds-app-chip-bd: 20px; --ds-app-chip-bd-tarjeta: 18px; /* Relleno lateral del chip: 6 px (regla 6, medido en medidas.md §8). */ --ds-app-chip-bd-x: 6px; /* Título de página: icono de caja 78 px (tabla A). */ --ds-app-icono-pagina: 78px; /* Migas: 44 px de alto, enlace máx. 160 px (tabla A). */ --ds-app-migas: 44px; --ds-app-miga-max: 160px; /* Columnas: hueco de 46 px (tabla A). */ --ds-app-columnas-hueco: 46px; /* Separador: bloque de 13 px con la línea en medio (tabla A). */ --ds-app-separador: 13px; /* Interruptor (§ 24): hueco entre bola y pista = (24 - 20) / 2 menos el borde. */ --ds-app-interruptor-hueco: calc((var(--ds-icon-size-lg) - var(--ds-icon-size)) / 2 - var(--ds-app-linea)); /* Tabla simple: celda de 35 px, relleno 7/9 (tabla A). */ --ds-app-celda-simple: 35px; --ds-app-celda-y: 7px; --ds-app-celda-x: 9px; /* Caja de código: relleno 24/22 (tabla A). */ --ds-app-codigo-y: 24px; --ds-app-codigo-x: 22px; /* Pestañas de vista: barra 40 (tabla B). La píldora 32 y su relleno 6/12 se retiraron en 1.8 (P41: subrayadas como la base). */ --ds-app-vista-barra: 40px; /* Tabla de base: cabecera 36, fila 37 (45 a 390), grupo 42 (tabla B). */ --ds-app-tabla-cabecera: 36px; --ds-app-tabla-fila: 37px; --ds-app-tabla-fila-movil: 45px; --ds-app-tabla-grupo: 42px; /* 1.14 (§ 16, § 70, H4-H5): el bg-secondary de Untitled (nuestro terciario): cabecera de tabla (el mismo gris que el hover de fila, como en Untitled) y chip de filtro aplicado. */ --ds-app-fondo-secundario: var(--ds-color-bg-tertiary); /* 1.14 (§ 16, A3): tope de una celda que se recorta con «…» (un correo largo); el mismo ancho que el campo de búsqueda abierto. */ --ds-app-tabla-recorte: 240px; /* Tablero: columna 276, tarjeta 260 (tabla B). */ --ds-app-tablero-columna: 276px; --ds-app-tablero-tarjeta: 260px; /* Relleno de tarjeta 12/12 (1.19.0, § 0.16: antes 10/12, tabla B). */ --ds-app-tarjeta-y: var(--ds-app-paso-12); --ds-app-tarjeta-x: var(--ds-app-paso-12); /* Galería: tarjeta de 296 px (tabla B). */ --ds-app-galeria: 296px; /* Calendario: celda de 124 px de alto (tabla B). */ --ds-app-calendario-celda: 124px; /* Cronograma: fila 36, barra 34 (tabla B). */ --ds-app-cronograma-fila: 36px; --ds-app-cronograma-barra: 34px; /* Lista: fila de 30 px (tabla B). */ --ds-app-lista-fila: 30px; /* Gráfico: 300 px de alto (tabla B). */ --ds-app-grafico: 300px; /* Ficha: fila 34, etiqueta 160 (120 a 390), 37 hasta el cuerpo (tabla B). */ --ds-app-prop-fila: 34px; /* Tarjeta de radio (§ 5, 1.8.4): ancho mínimo; así caben 2-3 por fila. */ --ds-app-tarjeta-radio-min: 200px; --ds-app-prop-etiqueta: 160px; --ds-app-prop-etiqueta-movil: 120px; --ds-app-prop-cuerpo: 37px; /* Estado vacío: 144 px sin borde (tabla B). */ --ds-app-vacio: 144px; /* Página ancha (§ 33, 1.4): el tope de Carbon «Max»; no hay token de rejilla con ese valor (--ds-grid-grid-max es 1440, el de la web). */ --ds-app-pagina-max: 1584px; /* 1.6 (27/09/2026, SPEC-DS-1-6.md; piezas § 59-67). */ /* D1 · el coral dice «aquí estás»: pestaña activa, ítem activo de la barra lateral y de la inferior, nodo activo del árbol. Posición no es acción (Stripe, Notion); el primario sigue neutro. Veto de Yaz = cambiar esta línea por var(--ds-app-foco-color). */ --ds-app-activo-color: var(--ds-color-accent); /* marca */ /* Panel lateral (§ 59): 480, el ancho del peek del CRM que Asier llamó «precioso» (30rem); 720 para fichas con dos columnas dentro. */ --ds-app-panel-ancho: 480px; --ds-app-panel-ancho-grande: 720px; /* Tooltip (§ 61): una frase corta; más ancho ya no es una pista. */ --ds-app-tooltip-max: 240px; /* Árbol (§ 62): 12 por nivel (3C del CRM: con 16 el tercer nivel no dejaba sitio al título en una barra de 256); fila 40, 32 en compacto. */ --ds-app-arbol-sangria: 12px; --ds-app-arbol-fila: 40px; --ds-app-arbol-fila-compacta: 32px; /* 1.18.3 (Yaz 02/10, «como Google Docs»): el árbol que cuelga de un destino de la barra (Documentos) entra un paso más que el padre: sin él, el icono del hijo quedaba 4 px A LA IZQUIERDA del del padre y no se leía como hijo. 1.19.1: 22 = el icono del hijo empieza 16 a la derecha del icono del padre (medido en prod: con 20 quedaba a 14; 42 frente a 28). */ --ds-app-arbol-colgado: 22px; /* Página de detalle (§ 66): la columna lateral de propiedades (Stripe). */ --ds-app-detalle-lateral: 320px; /* 1.7 (28/09/2026, SPEC-DS-1-7.md). */ /* K1 · la navegación va un escalón por debajo del cuerpo: texto e iconos de la barra lateral en el secundario; el activo lleva el peso (§ 0.7). Lo mide medidas-ds.js g) lateral-tenue (reglas.md § 12). */ --ds-app-texto-lateral: var(--ds-color-text-secondary); /* Menú (§ 60): ancho mínimo para que «Borrar lead» no baile. */ --ds-app-menu-min: 200px; /* Búsqueda expandible (§ 63): el campo abierto (Notion). */ --ds-app-buscar-ancho: 240px; /* Esquema de color del nativo (1.6, P22): la lista abierta sigue el tema de la app. */ select.ds-campo__control { color-scheme: var(--ds-app-esquema); background: var(--ds-color-bg-elevated); color: var(--ds-color-text); height: var(--ds-spacing-control); } .ds-campo__control::placeholder { color: var(--ds-color-text-placeholder); } /* 1.17 (§ 5, R3): la sombra del campo es la de app (≈ 5 % en claro); la --ds-shadow-xs (40 % de negro) pesaba como un borde. */ .ds-campo__control:focus { outline: none; border-color: var(--ds-color-border-strong); box-shadow: var(--ds-app-sombra-xs); } .ds-campo__control:disabled { color: var(--ds-color-text-disabled); cursor: not-allowed; } .ds-campo__ayuda { font-size: var(--ds-typography-size-ui-xs); line-height: var(--ds-typography-line-height-ui-xs); color: var(--ds-color-text-tertiary); } .ds-campo__error { font-size: var(--ds-typography-size-ui-xs); line-height: var(--ds-typography-line-height-ui-xs); color: var(--ds-color-error-fg); } .ds-campo--error .ds-campo__control { border-color: var(--ds-color-error); } /* 1.8.4 · Tarjetas de radio (Stripe, formulario largo): elegir UNA entre 2-4 con descripción. Rejilla de label.ds-tarjeta-radio; 2-3 por fila, 1 en móvil. La marcada, borde de 2 px en el color de foco (neutro, nunca coral). */ .ds-campo--tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--ds-app-tarjeta-radio-min), 1fr)); gap: var(--ds-spacing-2xs); border: 0; padding: 0; margin: 0; min-width: 0; } .ds-campo--tarjetas > .ds-campo__etiqueta, .ds-campo--tarjetas > .ds-campo__ayuda, .ds-campo--tarjetas > .ds-campo__error { grid-column: 1 / -1; padding: 0; } @media (max-width: 719px) { .ds-campo--tarjetas { grid-template-columns: minmax(0, 1fr); } } /* 1.19.0 (§ 0.16): legend → primera tarjeta, 8 (antes 0). El legend queda fuera de la rejilla y el gap no le llega: su margen inferior pone los 8 (igual en Chrome y Safari; flotarlo lo metía en la rejilla solo en Chrome). */ .ds-campo--tarjetas > legend { margin-bottom: var(--ds-aire-parte); } /* 1.15.3 (§ 5, V-2A): pie de un formulario que vive en la página, una sección o un panel (no en un diálogo ni una hoja, que tienen el suyo). Fila al final, 24 por encima (1.19.0, § 0.16: aire-campo; antes 16), primario a la DERECHA y los secundarios a su izquierda; bajo 720, a todo el ancho con la regla de pie móvil de 1.15. Un enviar apagado (data-requiere) no cambia de sitio. */ .ds-form__pie { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--ds-spacing-2xs); margin: var(--ds-aire-campo) 0 0; } .ds-tarjeta-radio { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--ds-app-paso-12); row-gap: var(--ds-app-paso-medio); padding: var(--ds-aire-bloque); cursor: pointer; background: var(--ds-color-bg-elevated); /* 1.17 (§ 5, R5): anillo de 1 como .ds-tarjeta, sin borde real (no suma al alto); la elegida, anillo de 2 en el color de foco. Antes borde de 1 + anillo interior de 1. */ border: 0; border-radius: var(--ds-app-radio-tarjeta); box-shadow: var(--ds-app-anillo); } /* 1.15 (§ 5, P12 «el radio va arriba, alineado con el título»): el radio vive en la fila del título y se centra con su PRIMERA línea; no abarca dos filas (estirado, el navegador lo pintaba centrado en la tarjeta). */ .ds-tarjeta-radio > input { grid-row: 1; grid-column: 1; align-self: start; box-sizing: border-box; width: var(--ds-icon-size-sm); height: var(--ds-icon-size-sm); margin: calc((var(--ds-typography-line-height-ui-sm) - var(--ds-icon-size-sm)) / 2) 0 0; accent-color: var(--ds-app-foco-color); } .ds-tarjeta-radio > :not(input) { grid-column: 2; } .ds-tarjeta-radio__titulo { font-size: var(--ds-typography-size-ui-sm); line-height: var(--ds-typography-line-height-ui-sm); font-weight: 600; color: var(--ds-color-text); } .ds-tarjeta-radio__texto { font-size: var(--ds-typography-size-ui-xs); line-height: var(--ds-typography-line-height-ui-xs); color: var(--ds-color-text-secondary); } .ds-tarjeta-radio:hover { box-shadow: 0 0 0 var(--ds-app-linea) var(--ds-color-border-strong); } .ds-tarjeta-radio:has(> input:checked) { box-shadow: 0 0 0 var(--ds-app-foco) var(--ds-app-foco-color); } .ds-tarjeta-radio:has(> input:focus-visible) { outline: var(--ds-app-foco) solid var(--ds-app-foco-color); outline-offset: var(--ds-app-foco); } .ds-tarjeta-radio:has(> input:disabled) { cursor: default; color: var(--ds-color-text-disabled); } .ds-tarjeta-radio:has(> input:disabled) :is(.ds-tarjeta-radio__titulo, .ds-tarjeta-radio__texto) { color: var(--ds-color-text-disabled); } /* ═══ 6. Etiqueta de estado ══════════════════════════════════════════ */ /* 1.12 (decisión 8, Untitled badge-color md, bdg:84/133): alto 24 (relleno 8×2 + línea de 20), radio 6, anillo de 1 px por dentro del tono al 30 % (el X-200 de Untitled en claro, el X-800 en oscuro) sobre el *-soft (X-50 / X-950) con el texto *-fg (X-700 / X-300). El punto, solo en --punto. Antes: radio 2, alto 18, sin anillo y punto siempre. */ .ds-etiqueta { display: inline-flex; align-items: center; gap: var(--ds-app-paso-medio); box-sizing: border-box; padding: calc(var(--ds-app-paso-medio) / 2) var(--ds-spacing-2xs); border-radius: var(--ds-app-radio-etiqueta); /* 1.17 (§ 6, T1): 12/18 (ui-xs, Untitled text-xs); antes 12/20. */ font-size: var(--ds-typography-size-ui-xs); line-height: var(--ds-typography-line-height-ui-xs); font-weight: 500; white-space: nowrap; background: var(--ds-color-bg-tertiary); color: var(--ds-color-text-secondary); box-shadow: inset 0 0 0 var(--ds-app-linea) color-mix(in srgb, currentColor 30%, transparent); } .ds-etiqueta--punto::before { content: ""; flex: none; width: var(--ds-app-punto); height: var(--ds-app-punto); border-radius: var(--ds-radius-full); background: currentColor; } .ds-etiqueta--ok { background: var(--ds-color-success-soft); color: var(--ds-color-success-fg); } .ds-etiqueta--aviso { background: var(--ds-color-warning-soft); color: var(--ds-color-warning-fg); } .ds-etiqueta--error { background: var(--ds-color-error-soft); color: var(--ds-color-error-fg); } .ds-etiqueta--info { background: var(--ds-color-info-soft); color: var(--ds-color-info-fg); } .ds-etiqueta--neutro { background: var(--ds-color-bg-tertiary); color: var(--ds-color-text-secondary); } /* 1.15 (§ 6, P70 «Archivado» y P45 «Recursos ventas | Activo»): una etiqueta junto a un texto o un título deja ≥ 8. En los contenedores de TEXTO (no flex: el hueco sería solo el espacio, ~4) lleva margen lógico de 8, como ya hacía la de la fila (§ 8); los contenedores flex con gap no cambian. */ /* 1.15.3: + .ds-panel__caption («Nuevo · Centro» + «Sin próxima acción» a 0 en el panel del lead). */ :is(.ds-titulo__h1, .ds-tarjeta__titulo, .ds-panel__titulo, .ds-seccion__titulo, .ds-dialogo__titulo, .ds-hoja__titulo, .ds-caption, .ds-panel__caption, .ds-fila__sub) .ds-etiqueta { margin-inline-start: var(--ds-spacing-2xs); } /* ═══ 7. Tarjeta ═════════════════════════════════════════════════════ */ /* El estado va DENTRO como etiqueta, nunca como borde. 1.12 (decisión 7, Untitled tbl:55): toda tarjeta va vestida: radio 12, anillo de 1 px (border-secondary) + sombra xs. Era la razón del «se ve pobre»: radio 4 y ni anillo ni sombra. 1.16 (P11, D5): la de tablero (--bd) y toda superficie de contenido (lista, tabla, columna de tablero, métrica, diálogo, hoja, tarjeta de radio) van también a 12. 1.19.0 (§ 0.16): líneas de la tarjeta a 8 (parte; antes 4) y relleno 16 (bloque; antes 24). */ .ds-tarjeta { display: flex; flex-direction: column; gap: var(--ds-aire-parte); background: var(--ds-color-bg-elevated); border-radius: var(--ds-app-radio-tarjeta); box-shadow: var(--ds-app-anillo), var(--ds-app-sombra-xs); padding: var(--ds-aire-bloque); color: var(--ds-color-text); text-decoration: none; min-width: 0; } a.ds-tarjeta { transition: background-color var(--ds-motion-duration-instant) var(--ds-motion-easing-musho); } a.ds-tarjeta:hover { background: var(--ds-color-bg-tertiary); } /* 1.13.2 (§ 0.3, remate de Asier 29/09): los captions van en frase, sin mayúsculas ni tracking; los de título y panel calcan este. */ .ds-tarjeta__caption { font-size: var(--ds-typography-size-ui-xs); line-height: var(--ds-typography-line-height-ui-xs); color: var(--ds-color-text-tertiary); font-weight: 500; } /* 1.17.1 (§ 7): caption con icono. El icono (--sm) va DELANTE del texto, en la misma línea, centrado y a 8; sin la variante, el svg (block) caía encima del texto (Campos de la base, 34 de alto en vez de 18). */ .ds-tarjeta__caption--icono { display: flex; align-items: center; gap: var(--ds-spacing-2xs); margin: 0; } .ds-tarjeta__titulo { margin: 0; font-size: var(--ds-typography-size-ui-lg); line-height: var(--ds-typography-line-height-ui-lg); font-weight: 600; color: var(--ds-color-text); } /* 1.15 (P53, § 7 y § 8): un texto nunca se sale de su caja. Un título de 80 caracteres sin espacios pasaba por detrás de las tarjetas vecinas; ahora parte dentro. Donde el título se recorta con «…» (nowrap) no cambia nada. */ .ds-tarjeta__titulo, .ds-fila__titulo, .ds-tarjeta-radio__titulo, .ds-seccion__titulo, .ds-dialogo__titulo, .ds-hoja__titulo { overflow-wrap: anywhere; } /* 1.7.2: el título puede ser un enlace (tarjeta de tablero): sin subrayado ni color de enlace. */ .ds-tarjeta__titulo:is(a) { color: inherit; text-decoration: none; } .ds-tarjeta__meta { margin: 0; font-size: var(--ds-typography-size-ui-sm); line-height: var(--ds-typography-line-height-ui-sm); color: var(--ds-color-text-secondary); max-width: var(--ds-app-parrafo-max); /* 1.20.1 (§ 0.17, p. 6) */ } /* 1.17 (§ 7, E10): cuando __meta reparte piezas (flex o rejilla), el hueco es 8 en línea y 4 entre líneas en TODA tarjeta; antes 12 en Ruta, 6 en el tablero y 4 en Agendar. Pesa (0,2,0) para ganar a la receta que lo hace flex. */ .ds-tarjeta .ds-tarjeta__meta { column-gap: var(--ds-spacing-2xs); row-gap: var(--ds-app-paso-medio); } /* 1.19.0 (§ 0.16): líneas → acciones 16 (bloque) = gap de la tarjeta 8 + este 8. */ .ds-tarjeta__acciones { display: flex; flex-wrap: wrap; gap: var(--ds-spacing-2xs); margin-top: var(--ds-aire-parte); } /* 1.15.2 (P27, § 7): en el tablero, el botón de etapa de la tarjeta solo bajo 1056; en PC la tarjeta se arrastra. Lo decide el DS, no la vista. */ @media (min-width: 1056px) { .ds-tablero .ds-tarjeta__acciones { display: none; } } /* 1.10 (P29, § 7) → 1.12 (decisión 6): --borde ya no dibuja un borde de 1 que suma al alto: desde 1.12 TODA tarjeta lleva el anillo fino + sombra xs (arriba). La clase queda para las tarjetas de Panel y Hoy hasta que migren a .ds-panel-metricas (§ 71); no añade nada salvo quitar un borde heredado. */ .ds-tarjeta--borde { border: 0; } /* 1.11 (§ 7, panel de resumen): el «Ver todo (n)» de un bloque mide lo que su texto, no el ancho de la tarjeta (como en .ds-detalle__principal). */ .ds-tarjeta--borde > .ds-boton--enlace { align-self: flex-start; } /* ═══ 8. Lista de filas ══════════════════════════════════════════════ */ .ds-lista { list-style: none; margin: 0; padding: 0; background: var(--ds-color-bg-elevated); border-radius: var(--ds-app-radio-tarjeta); box-shadow: var(--ds-app-anillo), var(--ds-app-sombra-xs); } /* 1.18 (§ 8, Yaz 01/10): la lista suelta va vestida como la tarjeta (anillo de 1 + sombra xs, decisión 7 de 1.12): en Rutas se veía «sin borde» al lado de las tarjetas de Hoy. Dentro de otra superficie (tarjeta, panel, hoja, diálogo) ya la viste su caja: sin anillo, o saldría un borde doble. */ :is(.ds-tarjeta, .ds-panel, .ds-hoja, .ds-dialogo) .ds-lista { box-shadow: none; } /* 1.16 (§ 8, P11/D5): con radio 12 el fondo de hover de la primera y la última fila asomaba por la esquina; las esquinas de la fila heredan las de la lista. */ .ds-lista > :first-child, .ds-lista > :first-child > .ds-fila { border-start-start-radius: inherit; border-start-end-radius: inherit; } .ds-lista > :last-child, .ds-lista > :last-child > .ds-fila { border-end-start-radius: inherit; border-end-end-radius: inherit; } .ds-lista > li + li, .ds-lista > .ds-fila + .ds-fila { border-top: var(--ds-app-linea) solid var(--ds-color-border-subtle); } /* § 8 · 1.23.0: lista de resultados que crece con la red; scroll dentro. */ .ds-lista--tope { max-height: var(--ds-app-lista-tope); overflow-y: auto; overscroll-behavior: contain; } .ds-lista--tope[hidden] { display: none; } .ds-fila { display: flex; align-items: center; gap: var(--ds-app-paso-12); /* 1.19.2 (§ 0.16, Yaz 02/10 «poco padding vertical en /rutas»): 12 arriba y abajo (antes 8): la lista suelta lleva anillo como una tarjeta y a 8 se leía apretada; 12 = el relleno compacto del tablero (Apple, lista agrupada). */ min-height: var(--ds-spacing-touch); padding: var(--ds-app-paso-12) var(--ds-spacing-xs); color: var(--ds-color-text); text-decoration: none; transition: background-color var(--ds-motion-duration-instant) var(--ds-motion-easing-musho); } a.ds-fila:hover, button.ds-fila:hover { background: var(--ds-color-bg-tertiary); } button.ds-fila { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; } /* 1.16 (P1, D1): el icono de la fila va en el color del texto (antes secundario; los de proyecto y documento, en coral con --marca). */ .ds-fila__icono { color: var(--ds-color-text); } /* 1.18 (§ 8): icono de identidad con color, en el coral de marca (--ds-app-icono-tinte); 1.18.2: dentro de una caja de coral suave. Solo en listas de contenido, nunca en la barra ni el árbol (el motivo de retirar D5 en 1.16). Pesa (0,2,0): la base `.ds-icono { color: inherit }` (§ 19) va después. */ /* 1.19.4 (Yaz 02/10, «unificar los iconos como en /proyectos»): la caja vale también en el árbol vestido de lista (§ 62) y en el nombre de una tabla de base (§ 23): contenido de página, nunca la barra. */ :is(.ds-fila, .ds-arbol--lista, .ds-tabla__nombre) .ds-fila__icono--tinte { box-sizing: border-box; flex: none; width: var(--ds-app-icono-caja); height: var(--ds-app-icono-caja); padding: calc((var(--ds-app-icono-caja) - var(--ds-icon-size)) / 2); border-radius: var(--ds-app-icono-caja-radio); color: var(--ds-app-icono-tinte); background: var(--ds-app-icono-caja-fondo); } /* 1.17.1 (§ 8): el icono de fila (el de delante; el chevron no) mide 20 en PC y 24 bajo 720, como el icono que se toca con el dedo (§ 19). Vale para toda fila: listas, Más, Hoy y la lista de una tarjeta de panel. */ @media (max-width: 719px) { /* 1.19.5: sin la caja de identidad: este selector pesa (0,4,0) y dejaba la caja de 36 en 24 (Proyectos y Recientes en móvil, medido en prod 02/10). */ .ds-fila__icono, .ds-fila > .ds-icono:first-child:not(.ds-fila__chevron, .ds-fila__icono--tinte) { width: var(--ds-icon-size-lg); height: var(--ds-icon-size-lg); } /* 1.18.2: la caja del icono de identidad crece con él (24 dentro de 36). */ :is(.ds-fila, .ds-arbol--lista, .ds-tabla__nombre) .ds-fila__icono--tinte { width: var(--ds-app-icono-caja-movil); height: var(--ds-app-icono-caja-movil); padding: calc((var(--ds-app-icono-caja-movil) - var(--ds-icon-size-lg)) / 2); } } .ds-fila__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ds-fila__titulo { font-size: var(--ds-typography-size-ui-md); line-height: var(--ds-typography-line-height-ui-md); max-width: var(--ds-app-texto-max); /* 1.14.2: en listas de 960 un título pasaba de 110 caracteres */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-fila__sub { font-size: var(--ds-typography-size-ui-sm); line-height: var(--ds-typography-line-height-ui-sm); color: var(--ds-color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: var(--ds-app-texto-max); } .ds-fila__chevron { color: var(--ds-color-text-tertiary); } /* Anatomía de la fila (1.4, reglas.md § 8): icono · texto (la etiqueta DENTRO del título, tras el texto) · meta (un dato corto a la derecha) · hueco de acción (chevron, ≤ 2 iconos o .ds-fila__hueco del ancho del chevron), para que el borde derecho de la lista sea el mismo en todas las filas. */ .ds-fila__titulo .ds-etiqueta { vertical-align: middle; margin-inline-start: var(--ds-spacing-2xs); } /* Con etiqueta dentro, el título parte línea en vez de recortarse: si el nombre es largo, el recorte se comía la etiqueta entera (el Panel del CRM a 360 px perdía «Atrasado», que es lo único que importa de esa fila). El texto no se trunca cuando lleva estado (1.5.1). */ .ds-fila__titulo:has(.ds-etiqueta) { white-space: normal; } /* D4 (1.6, revierte la 1.5.1 cuando hay __nombre): el nombre que escribe el usuario se recorta con «…» y la etiqueta queda fija a su lado (Carbon: lo generado por el usuario se trunca). Sin __nombre, sigue partiendo línea. */ .ds-fila__titulo:has(.ds-fila__nombre) { display: flex; align-items: center; min-width: 0; white-space: nowrap; } .ds-fila__nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-fila__titulo:has(.ds-fila__nombre) .ds-etiqueta { flex: none; } .ds-fila__meta { flex: none; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--ds-typography-size-ui-sm); line-height: var(--ds-typography-line-height-ui-sm); color: var(--ds-color-text-secondary); } .ds-fila__hueco { flex: none; width: var(--ds-icon-size); } /* 1.22.0 (O3/U6, § 8): FILA QUE ES ENLACE. Cuando la fila es un
/
  • (no un ) porque lleva otro control dentro, .ds-fila--enlace la hace pulsable entera: su enlace principal, .ds-fila__destino, se estira a la fila con un ::after (inset 0); cualquier otro botón o enlace queda encima y funciona. Mismo contrato que la tabla (1.15.2 y 1.21.0): sin input, select ni textarea dentro (con uno, el enlace deja de estirarse). Alto: el de la .ds-fila, ≥ 44 (--ds-spacing-touch) en todos los anchos, también bajo 720. Foco: en la fila entera, nunca en el texto del enlace. */ .ds-fila--enlace { position: relative; cursor: pointer; } .ds-fila--enlace:hover { background: var(--ds-color-bg-tertiary); } .ds-fila__destino { color: inherit; text-decoration: none; } .ds-fila--enlace .ds-fila__destino::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .ds-fila--enlace :is(button, a:not(.ds-fila__destino), summary, label) { position: relative; z-index: 1; } .ds-fila--enlace:has(:is(input, select, textarea)) { cursor: default; } .ds-fila--enlace:has(:is(input, select, textarea)):hover { background: none; } .ds-fila--enlace:has(:is(input, select, textarea)) .ds-fila__destino::after { content: none; } .ds-fila__destino:focus-visible { outline: none; } .ds-fila--enlace:has(.ds-fila__destino:focus-visible) { outline: var(--ds-app-foco) solid var(--ds-app-foco-color); outline-offset: calc(-1 * var(--ds-app-foco)); } @media (max-width: 719px) { .ds-fila--enlace { min-height: var(--ds-spacing-touch); } } /* 1.22.2 (§ 8, Sparring asalto 36): FILA QUE SE LEE. La fila que se ESCANEA (una lista de cosas) recorta a una línea; la que se LEE (una cita, una explicación) lleva .ds-fila--lectura y no recorta nunca: título y sub parten línea, con el mismo tope de ancho de lectura. La meta no cambia. */ .ds-fila--lectura :is(.ds-fila__titulo, .ds-fila__sub) { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } /* ═══ 9. Hoja inferior ═══════════════════════════════════════════════ */ /* : en móvil sube desde abajo; en ≥ 720 se centra. La entrada la anima @starting-style; app.js solo llama a showModal()/close(). */ .ds-hoja { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; max-height: var(--ds-app-hoja-alto); padding: 0; border: 0; display: none; flex-direction: column; background: var(--ds-color-bg-elevated); color: var(--ds-color-text); border-radius: var(--ds-app-radio-tarjeta) var(--ds-app-radio-tarjeta) 0 0; transform: translateY(100%); transition: transform var(--ds-motion-duration-reveal) var(--ds-motion-easing-musho), overlay var(--ds-motion-duration-reveal) allow-discrete, display var(--ds-motion-duration-reveal) allow-discrete; } .ds-hoja[open] { display: flex; transform: translateY(0); } @starting-style { .ds-hoja[open] { transform: translateY(100%); } } .ds-hoja::backdrop, .ds-dialogo::backdrop, .ds-panel::backdrop { background: var(--ds-color-bg-overlay); opacity: 0; transition: opacity var(--ds-motion-duration-reveal) var(--ds-motion-easing-musho), overlay var(--ds-motion-duration-reveal) allow-discrete, display var(--ds-motion-duration-reveal) allow-discrete; } .ds-hoja[open]::backdrop, .ds-dialogo[open]::backdrop, .ds-panel[open]::backdrop { opacity: 1; } @starting-style { .ds-hoja[open]::backdrop, .ds-dialogo[open]::backdrop, .ds-panel[open]::backdrop { opacity: 0; } } .ds-hoja__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-spacing-2xs); padding: var(--ds-spacing-2xs) var(--ds-spacing-2xs) var(--ds-spacing-2xs) var(--ds-spacing-xs); border-bottom: var(--ds-app-linea) solid var(--ds-color-border-subtle); } .ds-hoja__titulo { margin: 0; font-size: var(--ds-typography-size-ui-lg); line-height: var(--ds-typography-line-height-ui-lg); font-weight: 600; } .ds-hoja__cuerpo { flex: 1; overflow-y: auto; padding: var(--ds-spacing-xs); display: flex; flex-direction: column; gap: var(--ds-spacing-xs); } .ds-hoja__pie { display: flex; gap: var(--ds-spacing-2xs); justify-content: space-between; padding: var(--ds-app-paso-12) var(--ds-spacing-xs) calc(var(--ds-app-paso-12) + env(safe-area-inset-bottom)); border-top: var(--ds-app-linea) solid var(--ds-color-border-subtle); } .ds-hoja__pie .ds-boton--primario { flex: 1; } @media (min-width: 720px) { .ds-hoja { inset: 0; margin: auto; width: calc(100% - 2 * var(--ds-spacing-sm)); max-width: var(--ds-app-hoja-max); height: fit-content; border-radius: var(--ds-app-radio-tarjeta); transform: translateY(var(--ds-spacing-sm)); opacity: 0; transition: transform var(--ds-motion-duration-reveal) var(--ds-motion-easing-musho), opacity var(--ds-motion-duration-reveal) var(--ds-motion-easing-musho), overlay var(--ds-motion-duration-reveal) allow-discrete, display var(--ds-motion-duration-reveal) allow-discrete; } .ds-hoja[open] { transform: translateY(0); opacity: 1; } @starting-style { .ds-hoja[open] { transform: translateY(var(--ds-spacing-sm)); opacity: 0; } } .ds-hoja__pie { padding-bottom: var(--ds-app-paso-12); } } /* ═══ 10. Botón flotante ═════════════════════════════════════════════ */ .ds-fab { position: fixed; z-index: var(--ds-app-capa-fab); right: var(--ds-spacing-xs); bottom: calc(var(--ds-app-barra) + env(safe-area-inset-bottom) + var(--ds-spacing-xs)); display: flex; align-items: center; justify-content: center; width: var(--ds-app-fab); height: var(--ds-app-fab); padding: 0; border: 0; border-radius: var(--ds-radius-full); background: var(--ds-app-primario-fondo); color: var(--ds-app-primario-texto); box-shadow: var(--ds-shadow-float); text-decoration: none; cursor: pointer; transition: background-color var(--ds-motion-duration-instant) var(--ds-motion-easing-musho); } .ds-fab:hover { background: var(--ds-app-primario-hover); } @media (min-width: 1056px) { .ds-fab { display: none; } } /* ═══ 11. Barra inferior ═════════════════════════════════════════════ */ .ds-barra-inferior { position: fixed; z-index: var(--ds-app-capa-barra); left: 0; right: 0; bottom: 0; display: flex; align-items: stretch; height: calc(var(--ds-app-barra) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--ds-color-bg-elevated); border-top: var(--ds-app-linea) solid var(--ds-color-border-subtle); } .ds-barra-inferior__item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ds-app-paso-medio); color: var(--ds-color-text-tertiary); text-decoration: none; transition: color var(--ds-motion-duration-instant) var(--ds-motion-easing-musho); } /* Activo = texto en --ds-app-activo-color y en 600, sin fondo: color Y peso (§ 11; 1.6, D1). 1.22.0 (O4/P57): el ICONO va en --ds-app-activo-icono (marca) en los dos temas, como la barra lateral; un icono pide 3:1 y el coral lo da, un texto pide 4,5:1 y no. */ .ds-barra-inferior__item[aria-current], .ds-barra-inferior__item.es-activo { color: var(--ds-app-activo-color); background: none; } .ds-barra-inferior__item[aria-current] > .ds-icono, .ds-barra-inferior__item.es-activo > .ds-icono { color: var(--ds-app-activo-icono); } .ds-barra-inferior__item[aria-current] .ds-barra-inferior__texto, .ds-barra-inferior__item.es-activo .ds-barra-inferior__texto { font-weight: 600; } .ds-barra-inferior__texto { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ds-typography-size-ui-xs); line-height: var(--ds-typography-line-height-ui-xs); font-weight: 500; } @media (min-width: 1056px) { .ds-barra-inferior { display: none; } } /* ═══ 12. Barra lateral ══════════════════════════════════════════════ */ .ds-sidebar { display: none; flex-direction: column; gap: var(--ds-spacing-2xs); width: var(--ds-spacing-sidebar); flex: none; padding: var(--ds-spacing-xs); background: var(--ds-color-bg-elevated); } @media (min-width: 1056px) { .ds-sidebar { display: flex; } } .ds-sidebar__logo { display: flex; align-items: center; gap: var(--ds-spacing-2xs); min-height: var(--ds-spacing-control); padding: 0 var(--ds-app-paso-12); font-size: var(--ds-typography-size-ui-lg); line-height: var(--ds-typography-line-height-ui-lg); font-weight: 600; color: var(--ds-color-text); text-decoration: none; } /* 1.6 (P1-P5): orden __logo → __buscar → segmentado → __nav → __pie. El logo es un