con onclick no se alcanza con el teclado ni lo anuncia un lector de pantalla. Se le quitan los estilos de botón porque no parece uno ni debe parecerlo. */ .qr-row-main { flex: 1; min-width: 0; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; } .qr-row-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; } .qr-chevron { margin-left: auto; display: inline-flex; color: var(--text-dim); transition: transform 160ms ease; } .qr-chevron .ic { width: 15px; height: 15px; } .qr-row.abierta .qr-chevron { transform: rotate(180deg); } /* CERRADA una línea; ABIERTA el texto entero. Se anima el max-height y no se cambia el white-space de golpe: el salto de "nowrap" a "pre-wrap" sin transición es justo lo que hace que un acordeón se sienta roto. */ .qr-row-text { font-size: 13px; color: var(--text-dim); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-height: 1.5em; transition: max-height 180ms ease; } .qr-row.abierta .qr-row-text { white-space: pre-wrap; max-height: 30em; } /* El texto CRUDO (con sus {{variables}}) solo cuando está desplegada: quien gestiona necesita ver dónde están, pero cerrada sería una segunda línea de ruido en cada fila. */ .qr-row-crudo { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 180ms ease, opacity 180ms ease, margin-top 180ms ease; } .qr-row.abierta .qr-row-crudo { max-height: 12em; opacity: 1; margin-top: 6px; } .qr-row-crudo code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--accent-strong); } .qr-uses { font-size: 11px; color: var(--text-dim); } .qr-uses-none { font-style: italic; opacity: .75; } /* Editar y borrar de una fila/tarjeta (departamentos y mensajes rápidos: la misma pieza). El dibujo era de 15px dentro de un botón de 34: en un móvil eso es un blanco que se falla, y son las dos únicas acciones de la tarjeta. */ .qr-row-acts { display: flex; gap: 4px; flex: 0 0 auto; } .qr-row-acts .ic { width: 17px; height: 17px; } /* En táctil, 44px de área — el mínimo de Apple HIG y Material, y aquí se nota porque el vecino es "eliminar". */ @media (max-width: 720px) { .qr-row-acts .icon-btn { width: 44px; height: 44px; } .qr-row-acts .ic { width: 19px; height: 19px; } } .qr-locked { font-size: 11px; color: var(--text-dim); font-style: italic; white-space: nowrap; padding: 0 4px; } /* --- Editor --- */ .qr-shortcut-field { display: flex; align-items: center; } .qr-slash { padding: 11px 2px 11px 12px; font-weight: 700; color: var(--text-dim); background: var(--bg-elev); border: 1px solid var(--border); border-right: 0; border-radius: 8px 0 0 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .qr-shortcut-field input { flex: 1; border-radius: 0 8px 8px 0 !important; } .qr-modal .modal-card, .qr-edit-modal { max-width: 620px; } .qr-edit-modal textarea { width: 100%; resize: vertical; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 11px 13px; color: var(--text); font-size: 14px; font-family: inherit; transition: border-color 120ms ease; } .qr-edit-modal textarea:focus { border-color: var(--accent); outline: none; } .qr-vars { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; } .qr-var { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; font-size: 11.5px; color: var(--text-dim); cursor: pointer; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; } .qr-var:hover { background: var(--bg-hover); color: var(--text); border-color: var(--accent); } .qr-preview-box { margin-top: 4px; } .qr-preview-box label { font-size: 12px; color: var(--text-dim); font-weight: 600; } .qr-preview-text { margin-top: 6px; padding: 10px 12px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; color: var(--text); white-space: pre-wrap; word-break: break-word; min-height: 42px; } .qr-preview-text.empty { color: var(--text-dim); font-style: italic; } /* El movimiento explica de dónde sale algo; a quien pide menos movimiento no le explica nada y le molesta. Se quedan los cambios de color, que no desplazan nada. */ @media (prefers-reduced-motion: reduce) { .qr-picker, .qr-picker.leaving, .qr-row { animation: none; } .qr-chevron, .qr-row-text, .qr-row-crudo { transition: none; } } /* ========================================================================== Departamentos (item 126) ========================================================================== */ /* --- El chip de la lista y la cabecera --- */ /* El punto de color va ADEMÁS del nombre, nunca en su lugar: un departamento identificado solo por color deja fuera a quien no los distingue, y a cualquiera con más de cuatro. */ .dept-chip { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--text-dim); padding: 1px 7px 1px 5px; border: 1px solid var(--border); border-radius: 999px; /* 200px y no 130: "Soporte técnico" no entraba y se leía "Soporte téc…", que es peor que no poner nada — un nombre a medias hay que adivinarlo. Sigue habiendo tope porque un equipo con nombre kilométrico no puede comerse la fila entera. */ max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dept-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; } /* --- Tomar / Soltar / Transferir --- */ .dept-actions { display: inline-flex; align-items: center; gap: 6px; } .dept-actions .ghost-btn { display: inline-flex; align-items: center; gap: 5px; } .dept-actions .ic { width: 14px; height: 14px; } /* Entran con movimiento porque APARECEN Y DESAPARECEN solos: si un compañero toma el chat que tienes abierto, "Tomar" se va y llega su nombre. Sin animación parece un parpadeo. */ .dept-actions > * { animation: dept-act-in 160ms ease-out; } @keyframes dept-act-in { from { opacity: 0; transform: translateY(-3px); } } .dept-owner { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-dim); padding: 4px 8px; border: 1px dashed var(--border); border-radius: 8px; } .dept-owner .ic { width: 13px; height: 13px; } /* Etiqueta FIJA de la hilera de filtros (item 137): dice en qué bandeja estás. Se distingue de un filtro a propósito —sin borde ni fondo de pastilla— para que nadie intente pulsarla esperando que filtre algo. */ .filter-fija { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--text-dim); padding: 5px 2px 5px 0; margin-right: 2px; } .filter-fija-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } /* Cada tema de la Ayuda es una TARJETA: con solo una línea divisoria, seis acordeones seguidos se leían como una lista y no como seis cosas que se abren. El fondo y el radio dicen "esto es una pieza" antes de leer nada. */ .help-item { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; transition: border-color .13s ease; } .help-item:hover { border-color: var(--border-strong, var(--accent)); } .help-item[open] { border-color: var(--accent); } /* --- Control segmentado (item 20) --- Un riel con las opciones dentro y la activa en relieve. El fondo del carril es lo que dice que las tres van juntas y que solo una puede estar puesta; sin él serían tres botones sueltos que parecen acciones. */ .seg-control { display: flex; gap: 2px; padding: 3px; margin-bottom: 12px; background: var(--bg-hover); border-radius: 10px; } .seg-opt { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 8px; border: 0; border-radius: 8px; cursor: pointer; background: transparent; color: var(--text-dim); font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: background-color .13s ease, color .13s ease; } /* Se recorta EL TEXTO, no el botón: con el recorte en el botón, el puntito de "tiene filtros activos" se iba con los puntos suspensivos en la pestaña más larga. */ .seg-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .seg-opt:hover { color: var(--text); } /* La activa lleva SUPERFICIE, no solo color: es lo que se lee como "estás aquí" de un vistazo y lo que la distingue en escala de grises. */ .seg-opt.on { background: var(--bg-panel); color: var(--text); box-shadow: 0 1px 3px var(--shadow); } /* El puntito avisa de que ESA pestaña, que no estás mirando, tiene algo marcado. Es la contrapartida de que los filtros se acumulen entre grupos: sin él la lista saldría recortada por una condición que no está en pantalla. */ .seg-punto { flex: 0 0 auto; /* nunca se encoge ni se recorta: es el aviso, no el adorno */ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* En la bandeja el segmentado es la cabecera de los filtros, no un separador de secciones: sin el margen de abajo (que allí sí hace falta) y algo más compacto, que la columna es estrecha. */ .chat-filters .seg-control { margin-bottom: 0; } .chat-filters .seg-opt { padding: 6px 6px; font-size: 12px; } /* La versión, al lado del nombre del producto en "Acerca de" (item 111). Discreta: es un dato de referencia para reportar un fallo, no un titular. */ .cfg-version { font-size: 11.5px; font-weight: 600; color: var(--text-dim); background: var(--bg-hover); border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; font-variant-numeric: tabular-nums; } /* Subtítulo dentro de una sección de Configuración: separa dos ajustes que conviven en el mismo apartado (cómo se reparte / quién puede ver). Sin él, los dos bloques de radios se leían como un solo grupo de cuatro opciones. */ .cfg-sub { margin: 22px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); } .cfg-sub:first-child { margin-top: 0; } /* --- Gestión (Configuración → Departamentos) --- */ .dept-mode { margin-bottom: 16px; } .dept-mode-opt { display: flex; align-items: flex-start; gap: 9px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; cursor: pointer; font-size: 13px; line-height: 1.45; transition: background-color 120ms ease, border-color 120ms ease; } .dept-mode-opt:hover { background: var(--bg-hover); } .dept-mode-opt input { margin-top: 2px; flex: 0 0 auto; } .dept-mode-opt b { color: var(--text); } .dept-mode-opt span { color: var(--text-dim); } /* La acción principal de una pantalla va ARRIBA Y A LA IZQUIERDA (petición tuya): es donde empieza la lectura, y a la derecha competía con el scroll de la lista. La misma clase la usan Departamentos y Usuarios para que las dos pantallas se comporten igual. */ .dept-toolbar, .cfg-toolbar { display: flex; justify-content: flex-start; margin-bottom: 12px; } /* El icono y el texto del botón, con su aire. Iba solo en la barra de Departamentos, así que en "Añadir usuario" el dibujo salía pegado a la palabra: mismo componente, dos aspectos. Las dos barras comparten regla justamente para que eso no vuelva a pasar. */ .dept-toolbar .modal-btn, .cfg-toolbar .modal-btn { display: inline-flex; align-items: center; gap: 7px; } .dept-toolbar .ic, .cfg-toolbar .ic { width: 15px; height: 15px; } .dept-list { max-height: 42vh; overflow-y: auto; } .dept-row { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-bottom: 1px solid var(--border); animation: qr-row-in 150ms ease-out; } .dept-row:last-child { border-bottom: 0; } .dept-row .dept-dot { width: 10px; height: 10px; } .dept-row-main { flex: 1; min-width: 0; } .dept-row-top { display: flex; align-items: center; gap: 8px; } .dept-row-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Un departamento sin nadie NO se disimula: es un buzón donde se acumulan conversaciones que no atiende nadie, y verlo es justo el objetivo. */ .dept-warn { display: inline-flex; align-items: center; gap: 5px; color: var(--warn, #d97706); } .dept-warn .ic { width: 13px; height: 13px; } .dept-members { max-height: 200px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 4px; } .dept-member { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: background-color 120ms ease; } .dept-member:hover { background: var(--bg-hover); } .dept-member-role { display: block; font-size: 11px; color: var(--text-dim); } .dept-edit-modal input[type="color"] { width: 56px; height: 34px; padding: 2px; cursor: pointer; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; } @media (prefers-reduced-motion: reduce) { .dept-actions > *, .dept-row { animation: none; } } /* ========================================================================== Métricas de atención (item 127) ========================================================================== */ .met-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .met-periodos { display: flex; gap: 2px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 2px; } .met-per { background: none; border: 0; cursor: pointer; border-radius: 6px; padding: 6px 11px; font-size: 12.5px; color: var(--text-dim); transition: background-color 120ms ease, color 120ms ease; } .met-per:hover { color: var(--text); } .met-per.active { background: var(--bg-panel); color: var(--text); font-weight: 600; } .met-refresh { margin-left: auto; } .met-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; } .met-card { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); animation: qr-row-in 180ms ease-out; } .met-card-val { font-size: 26px; font-weight: 700; line-height: 1.1; } .met-card-tit { font-size: 12px; color: var(--text-dim); line-height: 1.35; } .met-card-pie { font-size: 11px; color: var(--text-dim); opacity: .8; margin-top: 2px; } /* El aviso de lo que NO está contado va arriba y con forma propia: quien lee tiene que verlo antes de sacar conclusiones, no en una nota al pie que nadie lee. */ .met-aviso { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; margin-bottom: 14px; border-radius: 8px; background: color-mix(in srgb, var(--warn, #d97706) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warn, #d97706) 35%, transparent); font-size: 12.5px; line-height: 1.45; color: var(--text); } .met-aviso .ic { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; color: var(--warn, #d97706); } /* Una tabla ancha scrollea DENTRO de su caja; la página nunca scrollea en horizontal. */ /* La tabla es una TARJETA, no texto suelto sobre el fondo (corrección del 11-08): contorno, esquinas redondeadas y superficie propia, como cualquier app moderna. En tema claro, además, sin superficie propia no se veía dónde empezaba ni acababa. */ .met-tabla-wrap { overflow-x: auto; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; } .met-tabla { width: 100%; border-collapse: collapse; font-size: 13px; } /* El encabezado se distingue del cuerpo con su propio tono: es la referencia fija mientras se leen las filas, y sin separación visual se lee como una fila más. */ .met-tabla thead th { background: var(--bg-hover); } .met-tabla thead th:first-child { border-top-left-radius: 11px; } .met-tabla thead th:last-child { border-top-right-radius: 11px; } .met-tabla th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--text-dim); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; cursor: help; } .met-tabla td { padding: 9px 10px; border-bottom: 1px solid var(--border); } .met-tabla tr:last-child td { border-bottom: 0; } .met-tabla tbody tr { transition: background-color 120ms ease; } .met-tabla tbody tr:hover { background: var(--bg-hover); } .met-nombre { font-weight: 600; } .met-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .met-dim { color: var(--text-dim); } .met-nota { margin-top: 12px; line-height: 1.5; } @media (prefers-reduced-motion: reduce) { .met-card { animation: none; } } /* ========================================================================== Rail de navegación (item 129, fase 1) ========================================================================== */ /* El HUECO del rail no se mueve nunca: .nav-rail reserva el ancho compacto en el flujo y lo que crece al desplegar es .rail-inner, que flota encima. Ese es el punto del item 129, no un detalle de estilo: si creciera el hueco, abrir el menú empujaría el chat que alguien está leyendo. Se probó al revés primero (absolute sobre el propio rail) y la bandeja saltaba al borde izquierdo, que es exactamente lo que había que evitar. */ .nav-rail { flex: 0 0 var(--rail-w, 56px); width: var(--rail-w, 56px); position: relative; z-index: 60; } .rail-inner { position: absolute; top: 0; left: 0; bottom: 0; width: var(--rail-w, 56px); background: var(--bg-panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; overflow: hidden; transition: width 170ms ease, box-shadow 170ms ease; } /* El ancho DESPLEGADO vive en --rail-open-w (item 129 + petición del 12-08). Es una variable y no un 232px repetido porque lo consumen cuatro reglas —el hueco fijado, el panel flotante y sus dos versiones de móvil—: con el número escrito a mano, arrastrar el divisor movía una y dejaba las otras tres donde estaban. */ .nav-rail.open .rail-inner { width: var(--rail-open-w, 232px); box-shadow: 4px 0 24px var(--shadow); } /* El divisor solo existe con el menú abierto: plegado no hay nada que redimensionar y un borde con cursor de arrastre invitaría a un gesto que no hace nada. */ .rail-resizer { position: absolute; top: 0; bottom: 0; right: 0; width: 6px; margin-right: -3px; cursor: col-resize; z-index: 10; background: transparent; opacity: 0; pointer-events: none; transition: background-color .12s ease, opacity .12s ease; touch-action: none; /* igual que .resizer: sin esto el dedo hace scroll y no arrastra */ } /* El divisor va donde ESTÁ el borde que se arrastra. Plegado el rail mide 56px, pero al desplegarse flotando el hueco NO crece (crece .rail-inner encima), así que con `right:0` el divisor se quedaba en el borde del hueco —a 56px— mientras el panel llegaba a 232. Anclándolo a --rail-open-w cae en el borde real en los dos casos: flotando y fijado. */ .nav-rail.open .rail-resizer, .nav-rail.pinned .rail-resizer { opacity: 1; pointer-events: auto; left: var(--rail-open-w, 232px); right: auto; } .rail-resizer:hover, body.resizing .rail-resizer { background: var(--accent); } /* El fondo del menú en móvil: DETRÁS del rail y delante de todo lo demás. Y por eso NO puede ser hijo de `.nav-rail`: el rail tiene z-index propio, así que crea su propio contexto de apilamiento y un hijo con z-index menor sigue pintándose ENCIMA de sus hermanos de dentro. El velo acababa oscureciendo el propio menú, que es lo que se veía. Es hermano del rail, y ahí sí manda el z-index. */ .rail-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .45); animation: backdropIn 160ms ease; } .rail-backdrop[hidden] { display: none; } @keyframes backdropIn { from { opacity: 0; } } /* En escritorio el rail no tapa nada: se despliega al lado y el trabajo de detrás sigue siendo legible. Un velo ahí sería apagar la pantalla para abrir un menú. */ @media (min-width: 721px) { .rail-backdrop { display: none !important; } } /* MIENTRAS SE ARRASTRA, sin transición. El rail anima su ancho en 170ms para plegarse y desplegarse; con esa animación puesta, el borde persigue al cursor con retraso y el arrastre se siente pegajoso. La animación sigue estando para lo suyo. */ body.resizing .nav-rail, body.resizing .rail-inner { transition: none; } /* Al RESTAURAR con doble clic, los tres paneles vuelven animados. Es solo para ese gesto: se pone la clase, se quita la variable y se retira la clase al acabar. Durante el arrastre no puede haber transición (el borde iría por detrás del cursor), y por eso no se declara en la regla normal de cada panel. */ body.restaurando .sidebar, body.restaurando .info-panel, body.restaurando .nav-rail, body.restaurando .rail-inner { transition: width 180ms ease, flex-basis 180ms ease; } /* SOLO ESTA LISTA SCROLLEA. Con el menú entero desbordando, lo primero que se salía de la pantalla eran el tema, la configuración y la cuenta —que están al final— y quedaban inalcanzables. Así la marca se queda arriba, el pie abajo, y lo que cede es la lista de secciones, que es lo que puede crecer. `min-height: 0` es obligatorio: sin él un hijo flexible no encoge por debajo de su contenido y el scroll no llega a aparecer nunca. */ .rail-items { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } /* LOS BOTONES NO SE ENCOGEN: cuando falta alto, la LISTA hace scroll (petición tuya). Un flex reparte el hueco que falta entre sus hijos, así que sin `flex-shrink: 0` las filas se aplastaban una por una y el scroll no aparecía nunca — se veían diez botones enanos en vez de seis normales y un scroll. El pie (tema, configuración y tu cuenta) queda FUERA de esa lista a propósito: son las tres cosas que tienen que estar siempre a la vista, sin buscarlas bajando. */ .rail-items > * { flex: 0 0 auto; } .rail-btn { display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 10px; background: none; border: 0; border-radius: 10px; cursor: pointer; color: var(--text-dim); font-size: 13.5px; text-align: left; white-space: nowrap; overflow: hidden; transition: background-color 130ms ease, color 130ms ease; } .rail-btn:hover { background: var(--bg-hover); color: var(--text); } .rail-btn.active { background: var(--bg-hover); color: var(--text); font-weight: 600; } .rail-ic { flex: 0 0 20px; display: inline-flex; align-items: center; justify-content: center; } .rail-ic .ic { width: 19px; height: 19px; } /* El texto existe SIEMPRE en el DOM (para lectores de pantalla y para que no haya que repintar al desplegar); lo que cambia es si se ve. */ .rail-txt { opacity: 0; transition: opacity 130ms ease; } .nav-rail.open .rail-txt { opacity: 1; } /* La fila de la marca: el nombre a la izquierda y los botones al final, como pediste. `margin-left: auto` en el primero los empuja a los dos. */ /* 6px en TODA la fila, y el mismo hueco en `.rail-brand-acts`: el punto de estado tenía 4px a la izquierda (2 de la fila + 2 de su margen) y 8 a la derecha (2 + los 6 del grupo), y esa diferencia de 4px se ve — un punto descentrado parece mal colocado aunque nadie sepa decir por qué. Un solo valor para los dos lados y no hay nada que cuadrar a mano. */ .rail-brand-fila { display: flex; align-items: center; gap: 6px; } .rail-brand-fila .rail-brand { flex: 1 1 auto; min-width: 0; } .rail-brand-acts { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } /* PLEGADO NO CABE NADA MÁS QUE EL LOGO. Se intentó dejar el punto de estado visible ahí y el resultado fue el de la captura: 56px con logo + contador de sin leer + punto, todo pisándose. Plegado, el rail es una tira de iconos; el estado vuelve en cuanto se despliega, que es a un gesto de distancia. */ .nav-rail:not(.open):not(.pinned) .rail-brand-acts { display: none; } /* LA CHINCHETA MIDE LO MISMO QUE LA MARCA (lo cazaste tú): la marca es una fila de 40px y el botón un .icon-btn de 34, así que las dos cajas redondeadas de la misma fila no cuadraban de alto. El ancho se queda en 34: lo que se lee desalineado es el alto. */ .rail-brand-fila .icon-btn { height: 40px; } /* Junto a la marca, el punto de estado necesita área de pulsación propia: 10px de círculo se fallan con el ratón y no se ven con el foco del teclado. */ .rail-brand-acts .conn-dot { outline-offset: 4px; } /* sin margen propio: el hueco lo pone el gap */ /* R5: la marca del rail, que ADEMÁS es el botón de menú (como Gemini). En reposo se ve el logo; al pasar el cursor se convierte en la hamburguesa y al pulsar despliega. Son la misma cosa porque ocupaban dos filas para lo mismo: la de arriba del todo, que es donde la gente ya va a buscar el menú. El icono NO se mueve al cambiar: los dos viven apilados en la misma caja de 20px y lo único que cambia es cuál se ve. Si uno sustituyera al otro en el DOM, la fila daría un salto de un píxel en cada hover. */ .rail-brand { display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 10px; margin-bottom: 4px; background: none; border: 0; border-radius: 10px; cursor: pointer; color: var(--text-dim); font: inherit; text-align: left; overflow: hidden; white-space: nowrap; transition: background-color 130ms ease; } .rail-brand:hover { background: var(--bg-hover); } .rail-brand-ic { position: relative; flex: 0 0 20px; height: 20px; } /* El contador sobre el isotipo, abajo a la derecha. `overflow: visible` en la caja del icono es obligatorio: mide 20px y el punto se sale por diseño. */ .marca-badge { position: absolute; right: -6px; bottom: -5px; z-index: 2; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--notif); color: #fff; font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center; /* El aro del color del fondo lo separa del dibujo del logo, que si no se leen pegados. */ box-shadow: 0 0 0 2px var(--bg-elev); animation: marca-badge-in 140ms ease-out; } @keyframes marca-badge-in { from { opacity: 0; transform: scale(.6); } } @media (prefers-reduced-motion: reduce) { .marca-badge { animation: none; } } .marca-badge.hidden { display: none; } /* Los DOS iconos que se turnan (logo y hamburguesa), apilados. Se nombran uno a uno y no con `> *`: ese selector alcanzaba también al contador de sin leer, y el `inset: 0` lo estiraba hasta ocupar el icono entero. */ .rail-brand-ic > .rail-brand-logo, .rail-brand-ic > .rail-brand-menu { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; transition: opacity 130ms ease; } .rail-brand-ic .ic { width: 20px; height: 20px; } .rail-brand-menu { opacity: 0; color: var(--text); } /* El cambio logo⇄hamburguesa cuelga de `.marca-menu` y NO de `.rail-brand`: la misma pieza la llevan el primer botón del rail y, en móvil, los botones de menú de la bandeja y de una sección (#rail-movil, #panel-menu). Atarlo a `.rail-brand` habría obligado a repetir las reglas o a copiar el marcado, que es justo como se torció el interruptor del popover. */ .marca-menu:hover .rail-brand-menu, .marca-menu:focus-visible .rail-brand-menu { opacity: 1; } .marca-menu:hover .rail-brand-logo, .marca-menu:focus-visible .rail-brand-logo { opacity: 0; } /* En la cabecera de la bandeja el botón es un .icon-btn (34px) y la marca vive centrada dentro, sin el hueco de 20px del rail. */ .icon-btn.marca-menu { padding: 0; } .icon-btn.marca-menu .rail-brand-ic { flex: 0 0 20px; width: 20px; } /* 20px, el ancho del hueco de icono del rail: así el isotipo comparte eje con Mensajes, Departamentos y el resto, en vez de quedar descolgado como le pasaba al avatar (R3). */ .rail-brand-logo { width: 20px; height: 20px; object-fit: contain; } .rail-brand .logo { font-size: 15px; } /* Las vistas: la bandeja y el panel de sección ocupan el mismo hueco. */ .app-view { flex: 1; display: flex; min-width: 0; } .app-view.hidden { display: none; } .app-panel { flex-direction: column; overflow-y: auto; padding: 26px 30px 40px; /* SUELO gris: las tarjetas y la tabla son blancas y se apoyan encima. Sin esto, panel y tarjetas eran del mismo blanco y la única separación era el contorno — que es justo lo que el usuario señaló que no se apreciaba. */ background: var(--bg); } /* La cabecera de una sección lleva su botón de menú a la IZQUIERDA del título (solo en móvil, ver #panel-menu): es la única puerta de vuelta al resto de apartados. */ .panel-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; } .panel-head-txt { min-width: 0; flex: 1 1 auto; } #panel-menu { flex: 0 0 auto; margin-top: 2px; } .panel-head h2 { font-size: 21px; margin: 0 0 4px; } .panel-sub { margin: 0; color: var(--text-dim); font-size: 13px; max-width: 70ch; line-height: 1.5; } .panel-body { max-width: 900px; } /* Entra con movimiento porque SUSTITUYE a la bandeja: sin él, cambiar de sección es un corte seco y no se ve de dónde salió lo nuevo. */ /* La MISMA animación para las tres vistas: la bandeja y las secciones entran igual. Antes solo la llevaba .app-panel y volver a Mensajes era un corte seco. */ .app-view.swapping { animation: panel-in 190ms ease-out; } @keyframes panel-in { from { opacity: 0; transform: translateX(10px); } } @media (prefers-reduced-motion: reduce) { .rail-inner, .rail-txt { transition: none; } .app-view.swapping { animation: none; } } /* ========================================================================== Departamentos y Métricas: forma, no solo texto (rediseño 2026-08-11) ========================================================================== */ /* --- Esqueletos de carga --- */ /* Se pinta la FORMA de lo que viene, no un "Cargando…" centrado: así la página no pega el salto al llegar los datos. El pulso es lento a propósito; uno rápido parece un error. */ .esqueleto { pointer-events: none; } .esq-bloque { display: block; width: 100%; height: 100%; min-height: 34px; border-radius: 8px; background: var(--bg-hover); animation: esq-pulso 1.6s ease-in-out infinite; } @keyframes esq-pulso { 0%, 100% { opacity: .45; } 50% { opacity: .85; } } .met-fila-esq { height: 44px; padding: 5px 0; } /* --- Departamentos: tarjetas --- */ .dept-intro { margin: 0 0 14px; } /* OJO: `.dept-toolbar` ESTABA DECLARADA DOS VECES, aquí y 300 líneas más arriba, y esta —que la alineaba a la DERECHA— ganaba por estar debajo. Por eso "Nuevo departamento" seguía a la derecha después de haberlo movido. La regla vive ARRIBA, junto a la de Usuarios, porque son la misma pieza; aquí solo queda el margen propio de esta pantalla. */ .dept-toolbar { margin-bottom: 14px; } .dept-list { display: flex; flex-direction: column; gap: 10px; max-height: none; } .dept-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 0; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev); position: relative; overflow: hidden; animation: qr-row-in 160ms ease-out; transition: border-color 130ms ease, transform 130ms ease; } .dept-row:hover { border-color: color-mix(in srgb, var(--dept-color, #6b7280) 55%, var(--border)); } /* La barra de color es el MISMO color del chip de la bandeja: la identidad del departamento se aprende en un sitio y se reconoce en el otro. */ .dept-barra { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--dept-color, #6b7280); } .dept-row-main { flex: 1; min-width: 0; padding-left: 16px; } .dept-row-top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; } .dept-nombre { font-size: 15px; } .dept-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--dept-color, #6b7280) 16%, transparent); color: color-mix(in srgb, var(--dept-color, #6b7280) 75%, var(--text)); border: 1px solid color-mix(in srgb, var(--dept-color, #6b7280) 35%, transparent); } .dept-badge.mio { background: var(--bg-hover); color: var(--text-dim); border-color: var(--border); } .dept-caras { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .avatar-xs { width: 24px; height: 24px; font-size: 10px; flex: 0 0 auto; } .dept-mas { font-size: 11px; color: var(--text-dim); margin-left: 3px; } .dept-cifras { display: flex; gap: 14px; margin-top: 8px; } .dept-cifra { font-size: 12px; color: var(--text-dim); } .dept-cifra b { font-size: 15px; color: var(--text); margin-right: 3px; } /* Una cola con gente esperando se ve DISTINTA, no solo con otro número: es lo único de esta pantalla que pide hacer algo hoy. */ .dept-cifra.urge b { color: var(--warn, #d97706); } .dept-vacio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 42px 24px; text-align: center; color: var(--text-dim); border: 1px dashed var(--border); border-radius: 12px; } .dept-vacio .ic { width: 30px; height: 30px; opacity: .5; margin-bottom: 4px; } .dept-vacio p { margin: 0; max-width: 46ch; line-height: 1.5; font-size: 13px; } /* --- Métricas --- */ .met-card { position: relative; overflow: hidden; } /* Cada tarjeta lleva su tinte, y son SEMÁNTICOS (no de marca): el bot y las personas se distinguen igual en toda la consola. */ .met-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tono, transparent); } .met-humano { --tono: var(--author-client, #3b82f6); } .met-bot { --tono: var(--author-bot, #10b981); } .met-espera { --tono: var(--warn, #d97706); } .met-card-val { font-variant-numeric: tabular-nums; } /* --- Gráficos (charts.js) ------------------------------------------------- Dos bloques que caben lado a lado en escritorio y se apilan en móvil. La tarta es pequeña a propósito: responde una pregunta de proporción, no compite con la tabla. */ .met-graficos { display: grid; gap: 18px; margin: 20px 0 4px; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); align-items: start; } .met-grafico h4 { margin: 0 0 3px; font-size: 13.5px; } .met-grafico .modal-hint { margin: 0 0 10px; } .chart { position: relative; } .chart-svg { width: 100%; height: auto; display: block; overflow: visible; } .chart-donut .chart-svg { max-width: 200px; margin: 0 auto; } /* La leyenda de la TARTA se centra con ella (el gráfico ya va centrado con margin:auto). Alineada a la izquierda mientras el dibujo estaba centrado, el bloque se leía torcido. La de la LÍNEA no: allí el gráfico empieza en su eje y la leyenda lo acompaña. */ .chart-donut .chart-leyenda { justify-content: center; } /* El texto del centro y los ejes van con TOKENS DE TEXTO, nunca con el color de la serie: el color identifica marcas, y una cifra coloreada se lee como si fuera otra categoría. */ .chart-donut-num { fill: var(--text); font-size: 26px; font-weight: 700; } .chart-donut-pie { fill: var(--text-dim); font-size: 9.5px; } .chart-eje { fill: var(--text-dim); font-size: 10px; } /* La rejilla es la referencia, no el dato: tiene que verse menos que las líneas. */ .chart-grid { stroke: var(--border); stroke-width: 1; } .chart-guia { stroke: var(--text-dim); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; } .chart-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--text-dim); } .chart-leyenda-item { display: inline-flex; align-items: center; gap: 6px; } .chart-punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; } /* El globo sigue al cursor sobre la línea. `translateX(-50%)` lo centra en el día, y el margen del contenedor evita que se salga por los lados. */ .chart-tip { position: absolute; top: 4px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 2px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 11.5px; color: var(--text); box-shadow: 0 6px 18px var(--shadow); pointer-events: none; white-space: nowrap; z-index: 2; } /* `display: flex` GANA al atributo [hidden] (que solo trae display:none del user-agent), así que sin esta línea el globo se queda pintado en la esquina desde que carga. */ .chart-tip[hidden] { display: none; } .chart-tip span { display: inline-flex; align-items: center; gap: 6px; } .chart-tip b { font-weight: 700; } @media (max-width: 720px) { .met-graficos { grid-template-columns: 1fr; } } .met-persona { display: inline-flex; align-items: center; gap: 8px; } /* La barra de volumen hace que la tabla se lea de un vistazo: sin ella hay que comparar cifras a mano, fila por fila. */ /* EL FALLO QUE ROMPIA LA TABLA (b_20.png): esto era `display:flex` sobre el propio . Una celda con display:flex DEJA DE SER CELDA — sale del algoritmo de tabla — y con ella se va la alineación de la columna y el borde inferior de la fila, que dejaba de llegar de lado a lado. El flex va en un envoltorio DENTRO de la celda; el td se queda siendo td. */ .met-vol-in { display: flex; align-items: center; justify-content: flex-end; gap: 9px; } .met-barra { display: block; width: 70px; height: 6px; border-radius: 999px; background: var(--bg-hover); overflow: hidden; } .met-barra-fill { display: block; height: 100%; background: var(--author-client, #3b82f6); border-radius: 999px; } .met-destacado { font-weight: 600; } .met-vacio { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 42px 24px; text-align: center; color: var(--text-dim); border: 1px dashed var(--border); border-radius: 12px; } .met-vacio .ic { width: 30px; height: 30px; opacity: .5; margin-bottom: 6px; } .met-vacio p { margin: 0; } /* --- Pie del rail --- */ /* El pie NO entra en el scroll y NO se encoge: tema, configuración y tu cuenta se quedan fijas abajo aunque la lista de arriba desborde (lo pediste así). */ .rail-foot { margin-top: auto; flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border); } .rail-foot > * { flex: 0 0 auto; } /* R3 (b_21.png). El problema y su arreglo, que costó dos intentos: · El hueco de icono del rail mide 20px y el círculo de la cuenta 24. Un hijo MÁS ANCHO que su caja desborda hacia la derecha, así que el círculo quedaba descentrado respecto a la columna por la que pasan los demás iconos. · El primer intento fue sacarlo del flujo (position:absolute). Centró, pero dejó a `.rail-ic` SIN ALTO, y la corona —que cuelga de ese hueco con top:-7px— se vino al centro del círculo en vez de quedarse encima. Un arreglo que rompe al vecino. Lo que se hace ahora: el hueco de ESTA fila mide 24px (lo que mide el círculo) y se compensa con -2px a cada lado. Su centro cae exactamente donde el de un hueco de 20px, así que la columna queda alineada; y como el círculo sigue EN EL FLUJO, el hueco vuelve a tener su alto y la corona a tener de dónde colgar. */ .rail-account .rail-ic { position: relative; flex: 0 0 24px; height: 24px; margin: 0 -2px; display: inline-flex; align-items: center; justify-content: center; } .rail-inicial { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; line-height: 1; } /* La corona va ARRIBA Y CENTRADA sobre la inicial, no en la esquina: en la esquina se confundía con un badge de notificación. */ /* La corona se ancla al CÍRCULO (que ahora es el contexto posicionado), no al hueco: así sigue sentada encima de la inicial esté donde esté esta. */ .rail-corona { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); color: var(--corona); line-height: 0; } .rail-corona .ic { width: 12px; height: 12px; } /* "Cerrar sesión" en el pie de "Mi cuenta": SOLO EL ICONO, sin fondo, a la izquierda del todo. Rojo únicamente al pasar por encima. Es la acción más destructiva del panel y a la vez la que la gente viene a buscar aquí: tiene que estar, sin ser lo primero que grita. `margin-right: auto` lo separa de los botones de guardar/cerrar, para que no se pulse por inercia al ir a por el de al lado. */ .cuenta-salir { margin-right: auto; color: var(--text-dim); } .cuenta-salir:hover, .cuenta-salir:focus-visible { color: var(--danger); background: var(--danger-dim, transparent); } .cuenta-salir .ic { width: 17px; height: 17px; } @media (prefers-reduced-motion: reduce) { .esq-bloque, .dept-row { animation: none; } } /* --- Rail: el tercer estado, FIJADO --------------------------------------- */ /* Flotando tapa el contenido y se cierra solo; FIJADO entra en el flujo y lo empuja. Por eso el ancho fijado va en .nav-rail (el hueco) y no solo en .rail-inner: es la única diferencia real entre los dos estados, y es justo la que el usuario quería. */ .nav-rail { transition: flex-basis 170ms ease, width 170ms ease; } .nav-rail.pinned { flex-basis: var(--rail-open-w, 232px); width: var(--rail-open-w, 232px); } .nav-rail.pinned .rail-inner { width: var(--rail-open-w, 232px); box-shadow: none; } .nav-rail.pinned .rail-txt { opacity: 1; } /* PLEGADO, la chincheta NO OCUPA SITIO. Antes compartía fila con el botón de menú y le robaba la mitad del ancho, así que el menú salía cortado (b_ del 11-08). Ahora sale del flujo con position:absolute mientras el rail está compacto, y entra en la fila solo cuando hay ancho de sobra. */ .rail-top { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; position: relative; } .rail-top .rail-toggle { margin-bottom: 0; flex: 1 1 auto; min-width: 0; } .rail-pin { position: absolute; right: 0; top: 50%; transform: translateY(-50%); flex: 0 0 auto; opacity: 0; pointer-events: none; transition: opacity 130ms ease; } .nav-rail.open .rail-pin, .nav-rail.pinned .rail-pin { position: static; transform: none; } .nav-rail.open .rail-pin, .nav-rail.pinned .rail-pin { opacity: 1; pointer-events: auto; } .rail-pin.active { color: var(--accent); background: var(--bg-hover); } .rail-pin .ic { width: 15px; height: 15px; } @media (prefers-reduced-motion: reduce) { .nav-rail, .rail-pin { transition: none; } } /* ========================================================================== Filas de badges: lista y cabecera (corrección del 11-08, b_11/b_12/b_13) ========================================================================== */ /* Los badges tienen FILA PROPIA y son más pequeños que el nombre. Antes compartían línea con él: en cuanto había departamento, el nombre se truncaba ("~ Taller ...") y el chip se montaba encima de la hora. Un chat que no puedes identificar de un vistazo no sirve. */ .session-tags { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; min-width: 0; } .session-tags .session-time { margin-left: auto; flex: 0 0 auto; } /* Sin badges no hay fila que pintar, solo la hora — y se sube a la línea del nombre para no gastar alto de más en los chats normales, que son la mayoría. */ .session-tags.solo-hora { margin-bottom: 0; height: 0; overflow: visible; } .session-tags.solo-hora .session-time { position: relative; top: 17px; } .tags-flecha { display: inline-flex; flex: 0 0 auto; color: var(--text-dim); opacity: .5; } .tags-flecha .ic { width: 12px; height: 12px; } /* Los badges de esta fila van UN PUNTO más pequeños que en el resto de la consola: aquí son contexto, no el contenido. AQUÍ SOLO SE CAMBIA EL TAMAÑO. El relleno es del COMPONENTE y tiene que ser el mismo en todas partes: cuando esta regla lo pisaba, el círculo del asignado salía pegado al borde de su píldora en la cabecera del chat (1px) y despegado en la lista (6px) — el mismo chip con dos aspectos, que es exactamente lo que un componente existe para evitar. Lo mismo le pasaba al punto del departamento (5px arriba, 4px en la lista). */ .session-tags .chat-badge, .session-tags .dept-chip, .session-tags .asig-chip { font-size: 10px; max-width: 46%; } .session-item-top { min-width: 0; } .session-name-wrap { min-width: 0; } /* Chip de "quién lo atiende": avatar + nombre. Ver asignadoChipHTML para por qué es un avatar y no un icono genérico. */ .asig-chip { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--text-dim); padding: 1px 7px 1px 1px; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; white-space: nowrap; } .asig-chip.mia { border-color: var(--accent); color: var(--accent); } /* EL CÍRCULO MIDE 15px Y NO 17 (lo cazaste tú): con 17 la píldora del asignado salía 20px de alto contra los 17 de la del departamento, y dos chips hermanos en la misma fila con alturas distintas se leen como dos cosas de distinto rango. El alto lo fija ahora la pareja de reglas de abajo, así que no vuelve a depender de lo que lleve dentro. */ .asig-chip .avatar { width: 15px; height: 15px; font-size: 7.5px; flex: 0 0 auto; } /* LOS DOS CHIPS DE LA FILA MIDEN LO MISMO DE ALTO, venga dentro un punto de color o un avatar. Fijarlo aquí —y no confiar en que el contenido case— es lo que evita que cualquier cambio futuro (un icono, una inicial más grande) los vuelva a descuadrar. */ .dept-chip, .asig-chip { min-height: 19px; box-sizing: border-box; } /* El AVATAR va pegado al borde izquierdo de la píldora y el nombre se centra en lo que queda (pedido tuyo). Antes los dos iban en bloque, así que el círculo flotaba hacia el centro y los chips de chats seguidos no alineaban sus círculos. EL RELLENO DE 1px DE LA IZQUIERDA ES PARTE DE ESO: quien reduzca este chip en algún sitio cambia `font-size` y `max-width`, NUNCA el padding — si no, el círculo se despega en una pantalla y no en otra. */ .asig-nom { flex: 1 1 auto; text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* --- Cabecera del chat --- OJO: `.chat-titles`, `.chat-header-info` y `.chat-header-actions` SE DECLARAN ARRIBA, con el resto de la cabecera. Aquí estaban otra vez, 3300 líneas después y con valores distintos (`min-width: 0` y `flex: 0 0 auto`), así que ganaban por orden y dejaban sin efecto lo de allí — el nombre del cliente volvía a poder encogerse hasta cero y la barra que mide el desbordamiento nunca se enteraba (b_27). Un mismo hecho declarado en dos sitios acaba SIEMPRE en dos verdades: si hay que tocar el reparto de la cabecera, se toca arriba. */ /* LA FILA DE BADGES NUNCA SE PARTE EN DOS (petición tuya, 12-08). Con `wrap`, en cuanto coincidían departamento + asignado + estado, la fila se abría a dos líneas y empujaba el nombre del cliente hacia abajo: la cabecera daba un salto de alto cada vez que alguien tomaba un chat. En una sola línea, lo que no cabe se recorta con puntos suspensivos —el mismo criterio que la fila de la lista, que ya iba así—: primero cede el departamento y después el nombre de quien atiende, porque el ESTADO es lo que no se puede perder. `min-width: 0` en los hijos es obligatorio: sin él un flex no baja de su contenido y la fila desborda en vez de recortarse. */ .chat-tags { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; min-width: 0; flex-wrap: nowrap; overflow: hidden; } .chat-tags > .chat-dept { min-width: 0; flex: 0 1 auto; overflow: hidden; } .chat-tags .dept-chip, .chat-tags .asig-chip { min-width: 0; flex: 0 1 auto; } .chat-tags .state-badge { flex: 0 0 auto; } .chat-dept { display: inline-flex; align-items: center; gap: 6px; } .chat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================================== Responsive (corrección del 11-08, b_14/b_15) ========================================================================== */ /* --- Tablet y móvil apaisado: el rail compacto SÍ cabe --- */ @media (max-width: 1024px) { .nav-rail.pinned { flex-basis: var(--rail-w, 56px); width: var(--rail-w, 56px); } .nav-rail.pinned .rail-inner { width: var(--rail-open-w, 232px); box-shadow: 4px 0 24px var(--shadow); } /* LA CHINCHETA SOLO EXISTE EN ESCRITORIO (lo cazaste tú): de 1024px para abajo el menú abierto FLOTA sobre el contenido en vez de empujarlo, así que "fijarlo" no fijaba nada — el botón estaba, se pulsaba y no pasaba nada visible. Un control que no cumple lo que promete es peor que no tenerlo. Estaba escondido solo en móvil (720px), y las tablets se quedaban con él. */ .rail-pin { display: none; } } /* --- Móvil: el rail NO es una columna --- */ /* Con 375 px de ancho, 56 px de rail son el 15% de la pantalla gastados en navegación que se usa tres veces al día. Aquí el rail desaparece del flujo y se abre ENCIMA desde el botón que hay junto al logo; fijarlo no tiene sentido y se esconde la chincheta. */ /* El botón de menú móvil se declara oculto ANTES del media query: si se declarara después, ganaría por orden y no aparecería nunca en móvil (que es justo lo que pasó al probarlo). */ #rail-movil { display: none; } @media (max-width: 720px) { .nav-rail, .nav-rail.pinned { flex-basis: 0; width: 0; } /* FIJADO NO EXISTE EN MÓVIL. Con `pinned` recordado de escritorio, el menú se quedaba abierto tapando la pantalla nada más entrar. Aquí solo `.open` abre, y `.open` siempre lo enciende una pulsación. */ .rail-inner, .nav-rail.pinned .rail-inner { width: 0; padding: 10px 0; border-right: 0; box-shadow: none; } .nav-rail.open .rail-inner { width: min(272px, 84vw); padding: 10px 8px; border-right: 1px solid var(--border); box-shadow: 4px 0 28px var(--shadow); } .nav-rail.open .rail-txt { opacity: 1; } .nav-rail.pinned:not(.open) .rail-txt { opacity: 0; } /* EL VELO ERA ESTE PSEUDO-ELEMENTO Y POR ESO NO SE PODÍA CERRAR TOCÁNDOLO. Un `::before` no es un nodo propio: los clics que caen sobre él los recibe SU ANFITRIÓN, o sea el propio `.nav-rail`. Y como la regla de cerrar dice "si el clic fue dentro del rail, no cierres" —que es lo correcto para el menú—, tocar el fondo contaba como tocar el menú. Encima, al cubrir `inset: 0`, hacía que cualquier punto de la pantalla respondiera `#nav-rail` en una prueba de impacto. Ahora el velo es un elemento de verdad (#rail-backdrop), HERMANO del rail: recibe sus propios clics y los cierra. Ver .rail-backdrop más arriba. */ /* El botón que lo abre vive en la cabecera de la lista, junto al logo. */ #rail-movil { display: inline-flex; } } /* Métricas en móvil: la tabla no cabe y recortarla escondía columnas enteras (b_15). Se convierte en tarjetas, con la etiqueta de cada dato delante — que es lo que hace la industria con tablas densas en pantallas estrechas. */ @media (max-width: 720px) { /* En móvil la wrap deja de ser tarjeta: cada FILA es la tarjeta, o habría un contorno dentro de otro. */ .met-tabla-wrap { background: none; border: 0; border-radius: 0; overflow: visible; } .met-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .met-tabla, .met-tabla tbody, .met-tabla tr, .met-tabla td { display: block; width: 100%; } .met-tabla tr { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--bg-elev); } /* Sin esto, la barra de volumen y su número se pegan al borde derecho de la tarjeta. */ .met-tabla .met-vol-in { gap: 10px; flex: 1 1 auto; } .met-barra { flex: 1 1 auto; min-width: 60px; } .met-tabla td { border: 0; padding: 3px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .met-tabla td::before { content: attr(data-col); font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-dim); font-weight: 700; } .met-tabla .met-nombre { justify-content: flex-start; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .met-tabla .met-nombre::before { content: none; } .met-vol-in { justify-content: space-between; flex: 1 1 auto; } .met-barra { width: 90px; } .met-cards { grid-template-columns: 1fr 1fr; } .app-panel { padding: 18px 14px 32px; } } /* Móvil: los botones de canalización se quedan SOLO con su icono. Con el texto, "Tomar" y "Transferir" ocupaban tanto que se montaban sobre el nombre del cliente (medido: las acciones empezaban 30 px antes de que acabara el nombre). El icono con su `title` dice lo mismo en un cuarto del espacio. */ /* Móvil: los botones de canalización CONSERVAN su texto. Se probó dejarlos con solo el icono para ganar sitio y el usuario lo rechazó con razón: un tick y una flecha no dicen "tomar" y "transferir" a quien no lo sabe ya, y equivocarse aquí tiene consecuencias. El sitio lo saca overflowbar.js mandando al menú lo que no quepa. */ @media (max-width: 720px) { /* Los botones de canalización miden LO MISMO que en escritorio: encogerlos era otra forma de apretar. Si no caben, se van enteros al menú con su nombre. */ /* EL ESPACIADO NO CAMBIA POR SER MÓVIL, Y ESTE ERA EL FALLO DE FONDO. Aquí había `gap: 2px` (contra los 12px de escritorio) y los botones de canalización encogían de tamaño y de letra. Con eso, la barra "cabía" a base de aplastarse: la comprobación de desbordamiento decía siempre que sí y NUNCA se mandaba nada al menú — que es justo lo que se veía, todo pegado y nada escondido. La regla ahora es la de siempre en un diseño responsive que se sostiene: el espaciado es CONSTANTE y lo que se adapta es CUÁNTAS cosas se enseñan. Sin `flex-wrap`, además: una barra que envuelve tampoco desborda nunca. */ .chat-header-actions { flex-wrap: nowrap; justify-content: flex-end; } } /* --- Cuenta y salida en la misma fila (estilo Gemini) --- */ .rail-cuenta-fila { display: flex; align-items: center; gap: 2px; } .rail-cuenta-fila .rail-account { flex: 1 1 auto; min-width: 0; } /* Plegado, el botón de salir NO ocupa: si compartiera los 40 px con la cuenta, la inicial se quedaría sin sitio (es el mismo fallo que tenía el botón de menú con la chincheta). */ .rail-logout { flex: 0 0 auto; width: 0; padding: 0; overflow: hidden; opacity: 0; transition: opacity 130ms ease; } .nav-rail.open .rail-logout, .nav-rail.pinned .rail-logout { width: 34px; padding: 0 8px; opacity: 1; } .rail-logout:hover { color: var(--danger); } /* --- Respiración en la lista (b_17/b_18/b_19) --- */ /* La fila de badges y la hora quedaban pegadas al borde: el chip parecía cortado por la ventana y con el viewport estrecho llegaba a superponerse. */ .session-item { padding-right: 14px; } .session-tags { padding-right: 2px; gap: 6px; } /* La flechita al RAS del contorno del primer chip: el hueco que dejaba su caja la despegaba del grupo y parecía de otra cosa. */ .tags-flecha { margin-left: -2px; margin-right: -1px; } /* Con el ratón encima, el contorno de los badges se aclara. Antes el borde y el fondo del hover eran el mismo tono, así que al pasar por encima los chips se disolvían en la fila. */ .session-item:hover .dept-chip, .session-item:hover .asig-chip, .session-item.active .dept-chip, .session-item.active .asig-chip { border-color: var(--border-strong); } /* Con poco ancho, los badges ceden antes que la hora: la hora es una sola palabra y no puede partirse; un chip sí puede recortarse con puntos suspensivos (b_19). */ .session-tags .dept-chip, .session-tags .asig-chip { min-width: 0; flex: 0 1 auto; } .session-tags .session-time { padding-left: 4px; } /* Distintivo de instancia de pruebas (item 134). Va junto al logo, que es lo primero que se mira, y en ámbar: es un aviso, no un estado del sistema. Solo aparece en sandbox — un adorno permanente se vuelve invisible en una semana y dejaría de avisar cuando importa. */ .env-chip { margin-left: 8px; flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; color: var(--warn, #d97706); background: color-mix(in srgb, var(--warn, #d97706) 14%, transparent); border: 1px solid color-mix(in srgb, var(--warn, #d97706) 40%, transparent); } /* Guardas de layout para nombres largos (item 6 de la revisión). Un tope en el servidor evita lo absurdo; esto evita que lo LARGO PERO LEGÍTIMO rompa la fila. */ .rail-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .met-persona span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .met-nombre { max-width: 260px; } .dept-row-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* ========================================================================== Ajustes de la revisión: #3 (achicar), #21 (combobox) ========================================================================== */ /* #3 — La fila de badges NO envuelve ni desborda. Al estrechar la ventana, la hora se queda (es una sola palabra, no se puede partir) y los chips ceden por orden inverso de importancia: primero se recorta el nombre del departamento, luego el de quien atiende. Antes se salían de la caja y se montaban sobre la hora. */ .session-tags { flex-wrap: nowrap; overflow: hidden; } /* CUANDO LA LISTA SE ESTRECHA, LOS BADGES SE QUEDAN EN SU FIGURA (petición tuya): el punto del departamento, el círculo con la inicial de quien atiende y el icono del estado. Antes los nombres se recortaban y acababan solapándose con la hora. Va con CONTAINER QUERY y no con media query porque lo que se estrecha es LA LISTA —se arrastra su divisor—, no la pantalla: una media query no se entera de eso. Los nombres completos siguen en el `title` de cada chip. */ /* El contenedor de consulta es LA COLUMNA, no la lista: `container-type` sobre la lista la dejaba con ancho cero (contiene su propio tamaño en línea y ahí dentro no había de dónde sacarlo). La columna sí tiene ancho propio (--sidebar-w), que es justo lo que se arrastra. */ .sidebar { container-type: inline-size; } @container (max-width: 320px) { .session-tags .chip-txt, .session-tags .asig-nom { display: none; } .session-tags .dept-chip, .session-tags .asig-chip, .session-tags .chat-badge { gap: 0; padding-left: 3px; padding-right: 3px; } .session-tags .asig-chip { padding-left: 1px; } } .session-tags .session-time { flex: 0 0 auto; margin-left: auto; } .session-tags .dept-chip { max-width: 40%; } .session-tags .asig-chip { max-width: 34%; } /* Con la ventana muy estrecha el chip se queda en el punto de color y la inicial: el nombre sobra antes que el dato de que EXISTE un departamento o un responsable. */ @media (max-width: 1100px) { .session-tags .dept-chip { max-width: 92px; } .session-tags .asig-chip { max-width: 76px; } } @media (max-width: 900px) { .session-tags .dept-chip, .session-tags .asig-chip { max-width: 64px; } } /* #21 — Los `select` seguían con el aspecto del navegador, que en Windows es un control gris de otra época y desentona con el resto de campos. Se les da la misma superficie, contorno y radio que a los inputs, con la flecha dibujada (un SVG en data: URI, que no pide red y sigue el color del tema). */ .modal-field select, .campo select, select.entrada { appearance: none; -webkit-appearance: none; width: 100%; font: inherit; font-size: 14px; padding: 11px 36px 11px 13px; color: var(--text); background-color: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 15px; transition: border-color 120ms ease; } .modal-field select:focus, .campo select:focus { outline: none; border-color: var(--accent); } .modal-field select:hover, .campo select:hover { border-color: var(--border-strong); } /* El desplegable nativo hereda el fondo del sistema en algunos navegadores: se fuerza para que no salga una lista blanca sobre un tema oscuro. */ .modal-field select option, .campo select option { background: var(--bg-panel); color: var(--text); } /* Sección Soporte (item 129/130). Dos tarjetas, no un formulario: hoy no hay a dónde enviarlo, y un campo de texto que no llega a nadie es peor que decir la verdad. */ .sop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .sop-card { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev); } .sop-card h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; } .sop-card h3 .ic { width: 17px; height: 17px; color: var(--text-dim); } .sop-card p { margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.5; } .sop-card .modal-btn { margin-top: auto; text-decoration: none; } .sop-nota { margin-top: 14px; } /* ========================================================================== Segunda revisión del 11-08 ========================================================================== */ /* R2 — El botón de copiar se va AL FINAL de su línea, no pegado al título. */ .caps-verdict-title { display: flex; align-items: center; gap: 8px; } .caps-copiar { margin-left: auto; flex: 0 0 auto; } .caps-copiar .ic { width: 15px; height: 15px; } /* R2 — El toast salía POR DETRÁS de la modal, así que copiar no daba señal de haber funcionado. Un aviso que no se ve es lo mismo que no avisar. */ .toast-container { z-index: 1000; } /* R1 — Franja del color del departamento a la izquierda de cada chat. El color se relaciona más rápido que leer el nombre del badge; el badge se queda porque el color solo no basta (ver la nota del .dept-chip). */ .session-item { position: relative; } .session-item[data-dept-color]::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--dept-color, transparent); } /* R4 — En tema claro la lista de usuarios era plana: fondo igual al de la página. En oscuro ya se veía bien, así que solo cambia el claro. */ :root[data-theme="light"] .user-row, :root[data-theme="light"] .qr-row, :root[data-theme="light"] .dept-row { background: var(--bg-panel); } /* R9 — El campo del composer tenía en claro el mismo fondo que su footer. */ :root[data-theme="light"] .composer-editor { background: var(--bg-panel); }