/* ═══════════════════════════════════════ ▓ PATRÓN · Cajón de notificaciones — gemelo vanilla ▓ v1.0 · 2026-08-24. Ficha: `design-system/PATRON_CAJON_NOTIFICACIONES.md` Kit: `catalogo-cd/components/CajonNotificaciones.jsx` Handoff: `plans/design_handoff_cajon_notificaciones/` ⛔ ESTA HOJA ES SÓLO LO QUE ES **PROPIO** DE NOTIFICACIONES. El marco, la banda de grupo, la fila, el despliegue, el título, el subtítulo, la rejilla de campos y el hueco vacío viven en `patrones/cajon-lateral/` y NO se repiten aquí. `DECISION-FUENTE: Ricardo, 2026-08-24 — «NO los coseches por separado: se cosecha UNA VEZ la concha; cada cajón es después una composición».` LAS REGLAS QUE NO SE NEGOCIAN, del handoff: · EL PUNTO TRABAJA DOBLE. Su COLOR dice de qué es la notificación; su PRESENCIA dice que no la has abierto. Todas llevan punto: no hay filas sin él. · CUATRO FAMILIAS Y NADA MÁS: verde · naranja · rojo · azul. El gris se fusionó con el azul. · NINGÚN TEXTO DE COLOR. La única semántica es el punto. El texto vive en tres grises: título --fg1, cuerpo --fg2, origen/folio y hora --fg3. · SIN ÍCONOS EN LA FILA. Ni glifos por familia, ni cuadros de tinte, ni avatares. Los únicos SVG son el chevrón, la estrella y los tres de la cabecera. REQUISITOS DEL ANFITRIÓN: 1. Los tokens del canon (`colors_and_type.css`). 2. `box-sizing: border-box`. 3. `patrones/cajon-lateral/` (hoja y conducta) y el componente `Dot`. 4. `componentes/celda-cruce/` (hoja y conducta) — la estrella dentro de la celda del punto es esa PIEZA, no CSS de este patrón. Sin su hoja, la estrella no aparece: no se ve un defecto de estilo, se ve una fila sin control. ═══════════════════════════════════════ */ /* ── LA COLUMNA DE LA DERECHA — hora ARRIBA, chevrón ABAJO ─────────────────── El chevrón sólo aparece si la notificación TRAE detalle. Una flecha que no abre nada es una promesa incumplida en cada fila que la lleve. ⛔ EL CHEVRÓN VA ANCLADO A LA ESQUINA INFERIOR DERECHA, no colgando de la hora. DECISION-FUENTE: Ricardo, 2026-08-24 — «creo que el chevron en este caso esta mal acomodado, para mí tendría que estar anclado a esquina inferior derecha». La columna SE ESTIRA al alto de la fila y reparte sus dos hijos a los extremos. Sin esto la columna medía lo que medían sus hijos y se quedaba arriba: en una fila de 101px, el chevrón caía a 49px del fondo — flotando a media altura, sin apoyarse en nada. *Dos elementos que no tocan ningún borde no forman una columna: forman un bloque suelto que el ojo lee como un descuido.* Anclado abajo, además, el chevrón queda en la esquina que el ojo ya visita al terminar de leer la fila — y sube y baja con el alto del texto sin que nadie teclee una separación. */ .exds-cnot-derecha { display: grid; justify-items: end; align-self: stretch; align-content: space-between; row-gap: var(--space-1-5, 6px); } .exds-cnot-hora { flex: none; font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif); font-weight: 400; font-size: var(--fs-caption, 12px); line-height: 1.5; color: var(--fg3, #5C6B7A); /* Tabular obligatorio: sin esto la columna BAILA entre 09:15 y 10:42, y la lista entera tiembla al desplazarse. */ font-variant-numeric: tabular-nums; white-space: nowrap; } /* ── EL CUERPO Y EL ORIGEN ─────────────────────────────────────────────────── El cuerpo se recorta a DOS líneas. Es lo que cabe sin que una notificación larga se coma tres filas de la lista; lo que no cabe está en el detalle. */ .exds-cnot-cuerpo { margin-top: var(--space-0-5, 2px); font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif); font-weight: 400; font-size: var(--fs-body-sm, 13px); line-height: 1.4; color: var(--fg2, #4B5563); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .exds-cnot-meta { display: block; margin-top: var(--space-1, 4px); font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif); font-weight: 400; font-size: var(--fs-caption, 12px); line-height: 1.35; color: var(--fg3, #5C6B7A); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── EL DETALLE — sangrado bajo el texto, no bajo el punto ─────────────────── 36px = la celda del punto (6) + su hueco (10) + el relleno del cajón (20). Va tecleado porque es una suma de tres cosas y CSS no la puede hacer sin un calc() que diría menos que este comentario. */ .exds-cnot-det { display: grid; row-gap: var(--space-3, 12px); padding: 0 var(--space-5, 20px) var(--space-4, 16px) 36px; } /* ── EL CONTADOR DE LA PESTAÑA — SE ABSORBIÓ EN LA PESTAÑA EL 2026-08-23 ────── ⛔ AQUÍ YA NO ESTÁ, Y NO ES UNA OMISIÓN. No era una pieza de notificaciones ni una segunda clase de pestaña: es la MISMA pestaña con un número al lado, así que entró como OPCIÓN de la pestaña que ya existe (`.exds-tab-cuenta`, en `patrones/cajon-lateral/`, ficha `COMPONENTE_TABS.md` § El contador). DECISION-FUENTE: Ricardo, 2026-08-24 — «absorber en las pestañas que ya existen». Lo que este cajón pone dentro es el NÚMERO —las sin leer de esa pestaña—, que es lo único suyo: el aspecto es de la pestaña. */ /* ═════════════════════════════════════════════════════════════════════════════ LA ESTRELLA DENTRO DE LA CELDA DEL PUNTO — SE MUDÓ AL CATÁLOGO EL 2026-08-23 ⛔ AQUÍ YA NO HAY CSS DE LA ESTRELLA, Y NO ES UNA OMISIÓN: es la pieza COMPONENTE_CELDA_CRUCE.md, que este patrón MONTA. Un patrón consume piezas del canon, no las reimplementa — copiar su CSS no cuenta como consumirla (GOBIERNO.md §1-ter-bis, Ricardo 2026-08-23). Se cosechó porque no era de notificaciones: resuelve "quiero una acción por fila y no tengo ancho para ponerla al lado", que le pasa a cualquier lista. Ricardo aprobó promoverla el 2026-08-24. ⛔⛔ RETIRADO EL 2026-09-01 — ESTA FILA YA NO USA LA CELDA DE CRUCE. `DECISION-FUENTE: Ricardo, 2026-09-01 — con las filas de hoy y las dos opciones montadas con las piezas vivas delante (plans/decisiones/_decision_punto_estrella_2026-09-01.html), eligió: «A».` QUÉ PASABA. El punto y la estrella compartían UNA celda y se cruzaban: para que entrara la estrella al pasar el ratón, tenía que salir el punto. Ricardo lo reportó mirando la pantalla: «cuando el usuario pasa el cursor por una notificación su punto de no leídas desaparece. Esto no debería de pasar». ⛔ Y NO ERA UN FALLO DE PRODUCCIÓN: era el canon. La tabla de la ficha decía «Ratón encima → se va» y la pieza estaba construida para eso, así que la app obedecía. Pero la decisión del 24-ago que esa misma tabla cita empieza «Punto se queda»: la ficha se contradecía a sí misma tres líneas más abajo, y se implementó la mitad equivocada. *Ningún medidor podía cazarlo — todos comparan la app contra el catálogo, y aquí los dos decían lo mismo.* LA REGLA QUE LO SUSTITUYE, que es la de cualquier app de correo: el indicador de no leída TIENE SU SITIO Y NO LO CEDE; lo que aparece al pasar el ratón son acciones, y aparecen en el OTRO EXTREMO de la fila. El punto es un ESTADO y la estrella una ACCIÓN: poner la acción encima del estado borra el estado justo cuando el usuario está apuntando a esa fila para decidir. LO QUE NO CAMBIA, porque era correcto y es de Ricardo: leer apaga el punto, marcar como importante lo apaga también (marcar es leer), y una vez apagado NO VUELVE. POR QUÉ NO CUESTA ANCHO. La celda de cruce existía para ahorrar 18px por fila (con la estrella al lado del punto el título arrancaba en 54px en vez de 36). La estrella no vuelve al lado del punto: se va a la columna derecha, que YA existe, YA se estira al alto de la fila y YA reparte sus hijos a los extremos. Cabe en el hueco que esa columna deja libre, y el título sigue arrancando en 36. ═════════════════════════════════════════════════════════════════════════════ */ /* ── LA COLUMNA DEL PUNTO — su sitio es suyo ───────────────────────────────── ⛔ SE CENTRA POR CONSTRUCCIÓN, NO CON UN DESPLAZAMIENTO A MANO (2026-09-01). La celda mide EXACTAMENTE el alto de la primera línea del título y centra su contenido: así el punto cae en el eje óptico de esa línea, sea cual sea el cuerpo de letra que use la fila. Si mañana el título cambia de tamaño, el punto lo sigue solo y nadie tiene que acordarse de recalcular un margen. ⛔ ANTES ERA margin-top: 6px, heredado del --cruce-baja de la celda de cruce, y quedaba ALTO. Lo cazó Ricardo mirando el visual el 2026-09-01: «el dot que indica notificación no leída debe estar exactamente inline con el título». Un número tecleado acierta con la tipografía del día que se tecleó, y sólo con ésa. */ .exds-cnot-celda { display: grid; place-items: center; width: var(--dot, 8px); height: calc(var(--fs-body-sm, 13px) * 1.35); } /* ── EL PUNTO SE APAGA POR HABERSE ATENDIDO, Y NO VUELVE ───────────────────── Los dos atributos viven en el ITEM porque es la fila la que sabe: data-nota-leida="true" ya se abrió → el punto se apaga data-nota-marcada="true" está marcada importante → el punto se apaga también ⛔ MARCAR ES LEER: para decidir que algo te importa tuviste que leerlo. Por eso no puede existir una fila marcada y sin leer a la vez, y las dos señales nunca se disputan nada. ⛔ Y NO SE APAGA AL PASAR EL RATÓN. Ésa era la regla vieja y es la que se retira: pasar el ratón no es leer. */ .exds-cnot-punto { transition: opacity var(--motion-base, 250ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1)), transform var(--motion-base, 250ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1)); } [data-nota-leida="true"] .exds-cnot-punto, [data-nota-marcada="true"] .exds-cnot-punto { opacity: 0; transform: scale(.5); } /* ── LA ESTRELLA — en la columna derecha, entre la hora y el chevrón ───────── Se descubre recorriendo la lista (la dispara la FILA ENTERA, no un blanco de 24px: apuntar a un objetivo pequeño sólo lo hace quien ya sabe que está ahí — Ricardo, 2026-08-24, y eso sí se conserva). Puesta, se queda visible para siempre. ⛔ SIN DISCO DE HOVER y SIN REBOTE: la curva con sobrepaso se retiró del sistema en agosto de 2026. Mide 24px para el dedo aunque el glifo mida 15. */ .exds-cnot-marca { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; /* ⛔ CUADRADO-REDONDEADO, NO DISCO (corregido 2026-09-01, mismo día). Nació con radio de píldora —copiado del control de la celda de cruce— y eso subió el trinquete de forma de 73 a 75. Lo cazó la sesión del cotizador al no poder publicar: mientras el número suba, la compuerta bloquea a TODOS. El canon reserva el círculo a la PERSONA (COMPONENTE_ESTADOS.md § Regla de FORMA: «❌ disco redondo, se confunde con avatar»), y el IconButton canónico es --radius-sm. Aquí no se monta IconButton porque renderiza un