/* ============================================================ Dotia — Iconografía Preset B validado por Eva el 05/08/2026. Origen: 5_Diseno/handoff_iconos_listado/css/dotia-iconos.css. Depende de los tokens del proyecto, que viven en app.css (no hay un tokens.css suelto: el handoff traía una copia de referencia y el LEEME dice usar la del proyecto si ya existe). Por eso los nombres del handoff se han traducido a los de aquí: --neutro-* → --dt-neutral-* --azul-* → --dt-blue-* --verde-* → --dt-green-* --rojo-* → --dt-red-* --ambar-* → --dt-amber-* --color-* → --dt-color-* La convención del repo es el prefijo --dt-; app.css publica además alias sin prefijo, pero ninguna regla del proyecto los usa. Cargar SIEMPRE después de app.min.css. Ningún valor de este fichero es un hex suelto: todo sale de un token. Si necesitas un color que no está aquí, no lo inventes — añádelo primero al bloque de tokens de app.css. ============================================================ */ :root{ /* --- Parámetros del sistema de iconos (preset B, tamaño revisado por Eva el 05/08/2026: el dibujo sube de 18/32 a 20/36) --- */ --dt-ic-size: 20px; /* dibujo en acción de fila */ --dt-ic-stroke: 1.5; /* grosor de trazo Lucide */ --dt-ic-color: var(--dt-neutral-400); /* color en REPOSO */ --dt-ic-btn: 36px; /* área táctil del botón-icono */ --dt-ic-radius: 9px; /* esquina del contenedor (1/4 del área, como el 8 de 32) */ --dt-ic-gap: 2px; /* separación entre iconos de una fila */ } /* ------------------------------------------------------------ 1 · EL ICONO Se usa siempre con el sprite: El sprite (svg/dotia-iconos.svg) se inyecta UNA vez en el _Layout, justo después de . No cargar Lucide por JS ni por CDN. ------------------------------------------------------------ */ .dt-ic{ width: var(--dt-ic-size); height: var(--dt-ic-size); flex: none; display: block; stroke: currentColor; /* hereda el color del contenedor */ fill: none; stroke-width: var(--dt-ic-stroke); stroke-linecap: round; stroke-linejoin: round; } /* Modificadores de tamaño. No usar otros valores. */ .dt-ic--16{ --dt-ic-size: 16px } /* dentro de una línea de texto o de un botón con texto */ .dt-ic--18{ --dt-ic-size: 18px } /* acción de fila (por defecto) */ .dt-ic--20{ --dt-ic-size: 20px } /* barra de herramientas, cabecero */ .dt-ic--24{ --dt-ic-size: 24px } /* solo estados vacíos e ilustración */ /* Icono acompañando a texto: alineación óptica */ .dt-ic--inline{ display:inline-block; vertical-align:-3px } /* Icono en reposo: neutro-400, el color de reposo del sistema. Se usa cuando el icono no está dentro de un .dt-iab —que ya lo pone— sino suelto en una celda, una cabecera o un campo. */ .dt-ic--tenue{ color: var(--dt-neutral-400) } /* Acento DENTRO del dibujo. El color de estado se queda en la silueta del icono: trazo en rojo y relleno claro en las partes que declaran `fill: var(--dt-ic-relleno)` -hoy el globo de comentarios-. Asi el aviso sigue saltando al recorrer veinte filas, que es lo que un simple cambio de trazo no conseguia (Eva, 21/08/2026), pero sin la pildora con anillo que lo envolvia: un icono recuadrado en rojo se lee como error, no como "aqui hay algo", y ademas descuadra la columna de acciones (Eva, 22/08/2026). La variable llega al dibujo por herencia: el clona el simbolo en un shadow tree al que el CSS del documento no entra, pero las propiedades personalizadas si heredan. */ .dt-ic--acento-peligro{ color: var(--dt-red-600); --dt-ic-relleno: var(--dt-red-100) } /* Lupa dentro de un campo de búsqueda. El contenedor tiene que ser `relative`. Centrado real con translate en vez de un desplazamiento fijo: los campos de búsqueda del backoffice no tienen todos la misma altura. */ .dt-ic--busqueda{ position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--dt-neutral-400); pointer-events: none; } /* ------------------------------------------------------------ 2 · EL BOTÓN-ICONO (.dt-iab = icon action button) Área 32×32 con dibujo de 18. En reposo gris tenue sin fondo; en hover, color semántico + fondo del mismo tono. ------------------------------------------------------------ */ .dt-iab{ display: inline-grid; place-content: center; width: var(--dt-ic-btn); height: var(--dt-ic-btn); padding: 0; border: 1px solid transparent; border-radius: var(--dt-ic-radius); background: transparent; color: var(--dt-ic-color); font-size: 14px; cursor: pointer; position: relative; transition: background .12s ease, color .12s ease, border-color .12s ease; } .dt-iab:hover{ color: var(--dt-neutral-800); background: var(--dt-neutral-100) } .dt-iab:focus-visible{ outline: none; box-shadow: 0 0 0 2px var(--dt-color-fondo), 0 0 0 3px var(--dt-blue-500); } .dt-iab:disabled{ color: var(--dt-color-texto-deshabilitado); cursor: not-allowed; background: none } .dt-iab:disabled:hover{ background: none; color: var(--dt-color-texto-deshabilitado) } /* --- Tonos semánticos. SOLO se manifiestan en hover/foco. --- */ .dt-iab[data-tono="ir"]:hover { color: var(--dt-indigo-700); background: var(--dt-indigo-50) } .dt-iab[data-tono="ok"]:hover { color: var(--dt-green-700); background: var(--dt-green-50) } .dt-iab[data-tono="info"]:hover { color: var(--dt-blue-700); background: var(--dt-blue-50) } .dt-iab[data-tono="aviso"]:hover { color: var(--dt-amber-700); background: var(--dt-amber-50) } .dt-iab[data-tono="peligro"]:hover { color: var(--dt-red-600); background: var(--dt-red-50) } /* --- Contador sobre el icono (notas, avisos) --- */ .dt-iab__cnt{ position: absolute; top: 1px; right: 1px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: var(--dt-radius-pill); background: var(--dt-blue-500); color: var(--dt-neutral-0); font-size: 9px; font-weight: var(--dt-fw-bold); line-height: 14px; text-align: center; font-variant-numeric: tabular-nums; } /* --- Variante sobre fondo oscuro (barra superior temada) --- */ .dt-iab--sobre-cabecero{ color: rgba(255,255,255,.75) } .dt-iab--sobre-cabecero:hover{ color:#fff; background: rgba(255,255,255,.14) } /* --- Variante DENTRO DE UN CAMPO (decisión de Eva, 21/08/2026) --- El aspa que borra lo escrito en una caja de búsqueda. Es un botón-icono, pero no uno de fila: va superpuesto sobre el propio campo, así que no cabe en 36 —dentro de un filtro de 38 se comería el borde— y no puede quedarse en las utilidades sueltas con las que se pintaba (`grid h-7 w-7 place-content-center rounded-full text-slate-400 …`), que es lo que prohíbe la §1 de `NORMA_BOTONES.md`. La duda estaba anotada en la §3.2 de esa norma desde el 17/08/2026; se resuelve como variante del mismo componente y no como pieza nueva, porque el reposo, el hover, el foco y el tooltip son los de siempre. Cambia solo lo que tiene que cambiar, y por las variables del bloque 1: la caja baja a 28 y el dibujo a 16 —la densidad compacta del preset B—, sin repetir ni un color. El ancla vertical es `bottom` y no `top`: 5 px centran el aspa en los 38 de `.dt-filtro` sin que la vista tenga que decir a qué altura está el campo. Antes lo decía a mano —`top-1.5`, o `top-[26px]` cuando el control llevaba rótulo encima—, que es de lo que se trataba de salir. A cambio, **la caja relativa tiene que ser la del campo**, no una que abarque también el rótulo o la línea de estado: `_FiltroPredictivo` con rótulo tiene un aviso debajo («Elige una opción de la lista»), así que su contenedor acaba 21 px por debajo de la caja y el aspa se salía justo eso. Por eso ese partial envuelve el campo y su aspa en un `relative` propio. En las barras de filtros no hace falta: ahí el contenedor no tiene dentro nada más que el campo. Los 8 px de la derecha no son elección: el `pr-9` que la caja reserva para el aspa son 36, y 28 + 8 los llenan exactos. Si algún día cambia el hueco, cambian los dos a la vez. Y el selector lleva las DOS clases a propósito, no por gusto: `.dt-tt` —que todo botón-icono sin texto lleva— declara `position: relative` y vive en el bloque 4, más abajo. Con `.dt-iab--en-campo` a secas empatan en especificidad y gana el de abajo: el aspa se quedaba en el flujo, en línea detrás del campo y a 900 px de su borde, con los 8 px leídos como desplazamiento relativo. En pantalla se ve al momento; en el diff del CSS, no. */ .dt-iab.dt-iab--en-campo{ position: absolute; right: 8px; bottom: 5px; --dt-ic-btn: 28px; --dt-ic-size: 16px; } /* ------------------------------------------------------------ 3 · GRUPO DE ACCIONES DE FILA OJO: nada de display:flex sobre un , rompe el layout de tabla. ------------------------------------------------------------ */ .dt-acciones{ text-align: right; white-space: nowrap; font-size: 0 } .dt-acciones > *{ vertical-align: middle; margin-left: var(--dt-ic-gap) } .dt-acciones__sep{ display: inline-block; width: 1px; height: 18px; background: var(--dt-color-borde); margin: 0 5px; } /* ------------------------------------------------------------ 4 · TOOLTIP Obligatorio en todo botón-icono sin texto. El texto va en data-tip Y en aria-label — el tooltip es CSS, no accesible por sí solo. ------------------------------------------------------------ */ /* El centrado horizontal de la burbuja va en una variable: así las reglas que repiten el `transform` para animar la entrada (el empujón vertical de :hover y de --abajo) no recentran de vuelta la burbuja anclada a la derecha. En la variable va SOLO el eje horizontal, que se resuelve una vez y no cambia de estado: Chrome no reinvalida el pseudo-elemento cuando cambia una propiedad personalizada del elemento —probado en caliente, `top`/`bottom` se actualizaban y el `transform` con `var()` se quedaba con el valor viejo—, así que el empujón de entrada no puede depender de una. */ .dt-tt{ position: relative; --dt-tt-dx: -50% } .dt-tt::after{ content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(var(--dt-tt-dx)) translateY(3px); background: var(--dt-neutral-900); color: var(--dt-neutral-0); font-size: var(--dt-text-ayuda); line-height: var(--dt-lh-ayuda); font-weight: var(--dt-fw-medium); white-space: nowrap; padding: 4px 8px; border-radius: var(--dt-radius-sm); opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease; z-index: 40; } .dt-tt::before{ content: ""; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--dt-neutral-900); opacity: 0; transition: opacity .12s ease; z-index: 40; } .dt-tt:hover::after, .dt-tt:focus-visible::after{ opacity: 1; transform: translateX(var(--dt-tt-dx)) translateY(0) } .dt-tt:hover::before, .dt-tt:focus-visible::before{ opacity: 1 } /* En la última fila de una tabla el tooltip se sale por abajo: usar --abajo */ .dt-tt--abajo::after{ bottom:auto; top: calc(100% + 7px); transform: translateX(var(--dt-tt-dx)) translateY(-3px) } .dt-tt--abajo::before{ bottom:auto; top: calc(100% + 2px); border-top-color: transparent; border-bottom-color: var(--dt-neutral-900) } .dt-tt--abajo:hover::after{ transform: translateX(var(--dt-tt-dx)) translateY(0) } /* La última acción de la fila está pegada al borde derecho del listado, y ese borde recorta: el contenedor de scroll horizontal (`.overflow-x-auto`) es ancestro del botón, así que su pseudo-elemento absoluto no se le escapa. Con la burbuja centrada, «Más acciones» perdía 21px a 1920 en el listado de alumnado. Ahí —y en cualquier botón que se marque a mano con --der— la burbuja cuelga del borde derecho del botón y crece hacia dentro; la flecha se queda centrada en el icono, que es lo que señala a quién pertenece el texto. */ .dt-tt--der, .dt-acciones > :last-child.dt-tt, .dt-acciones > :last-child .dt-tt{ --dt-tt-dx: 0 } .dt-tt--der::after, .dt-acciones > :last-child.dt-tt::after, .dt-acciones > :last-child .dt-tt::after{ left: auto; right: 0 } /* ------------------------------------------------------------ 5 · RESPETO A prefers-reduced-motion ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce){ .dt-iab, .dt-tt::after, .dt-tt::before{ transition: none } }