/* ============================================================ 0 · Pegamento de las pantallas que ya hablan el vocabulario del catálogo (27 de agosto). Solo lo que el catálogo no define porque es de la app: texto centrado en la puerta, la prosa larga dentro de una tarjeta, la pila vertical dentro de una tarjeta, el par de nombre y resumen que va dentro del interruptor de alcance, y la celda de tabla que lleva una frase en vez de una cifra. ============================================================ */ .pl-centrado{ text-align:center } /* La portada de conversación (nota de Tomás, 31 de agosto): todo limpio, la ficha del cliente en el centro y la barra de preguntar debajo. Con hilo abierto, la conversación arriba y la barra al final, como cualquier chat. */ .pl-portada{ display:grid; gap:var(--s-4); justify-items:center; align-content:center; min-height:calc(100dvh - 200px) } .pl-portada .ask{ width:min(100%, 760px) } .pl-portada .area-chip{ text-decoration:none } .pl-portada .pl-chat__sugerencias{ justify-content:center } .pl-portada .explica{ border-top:0; padding-top:0 } .pl-portada--charla{ align-content:start; min-height:0 } .pl-portada--charla .conversacion{ width:min(100%, 820px) } /* Pila vertical dentro de una tarjeta del catálogo: `.card` reparte relleno pero no espacio entre sus hijos, y el reinicio deja los párrafos a cero. */ .pl-apilado{ display:grid; gap:var(--s-2) } .pl-prosa{ display:grid; gap:var(--s-2) } .pl-prosa p{ margin:0; font-size:var(--t-small); line-height:1.6; color:var(--text-muted); max-width:78ch } .pl-prosa strong{ color:var(--text); font-weight:600 } .pl-prosa ul, .pl-prosa ol{ margin:0; padding-left:1.2rem; font-size:var(--t-small); line-height:1.6; color:var(--text-muted) } .pl-alcance__texto{ display:grid; gap:2px } /* Los seis interruptores de alcance DENTRO del formulario del alta (nota de Tomás, 4 de septiembre): el formulario es una fila flexible, y este bloque ocupa la fila entera para que los interruptores no se aprieten entre campos. */ .pl-alta__alcance{ flex:1 1 100%; display:grid; gap:.5rem } /* Los campos de un formulario en rejilla se alinean por ARRIBA: alineados por abajo, un campo con texto de ayuda empuja a los demás y la fila baila. */ .card .pl-form-rejilla{ align-items:start } /* El calendario de rango dentro del selector de periodo (segunda nota de Tomás): dos fechas y un botón, apilados, sin salirse del menú. */ .pl-rango{ display:grid; gap:8px; padding:4px 10px 8px } .pl-rango__campo{ display:grid; gap:4px; font:500 var(--t-micro)/1.3 var(--font-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted) } .pl-rango .input{ font-family:var(--font-body) } .conmutador__menu--periodo{ min-width:240px } /* Una tarjeta de cifra cuya cifra es una PALABRA («falta el modelo de negocio») y no un número. Lleva los dos nombres de clase delante porque tiene que ganarle a `.kpi--compacta .kpi__num`, que es más específica que una clase. */ .kpi .kpi__num.pl-kpi__palabra{ font-size:1.15rem; line-height:1.25; letter-spacing:-.01em } /* El asistente del catálogo tiene cuatro pasos y el alta tiene OCHO. Se ensancha a ocho columnas y la línea que une los círculos se recoloca a su medida; por debajo de 1200 px vuelve a cuatro (y sin línea, porque con dos filas uniría solo la de arriba) y por debajo de 640 px a dos, como el original. */ .stepper.pl-stepper--ocho{ grid-template-columns:repeat(8, minmax(0, 1fr)) } .stepper.pl-stepper--ocho::before{ left:6.25%; right:6.25% } @media (max-width: 1200px){ .stepper.pl-stepper--ocho{ grid-template-columns:repeat(4, minmax(0, 1fr)) } .stepper.pl-stepper--ocho::before{ display:none } } @media (max-width: 640px){ .stepper.pl-stepper--ocho{ grid-template-columns:repeat(2, minmax(0, 1fr)) } } /* Los seis interruptores de alcance, en dos columnas dentro de la ficha del cliente activo. En estrecho vuelven a una, que es como los define `.pl-alcance`. */ .pl-alcance--dos{ grid-template-columns:repeat(2, minmax(0, 1fr)) } @media (max-width: 1100px){ .pl-alcance--dos{ grid-template-columns:minmax(0, 1fr) } } /* Persona de la tabla de accesos: el nombre arriba y su nombre de usuario debajo en gris, para que la columna «usuario» desaparezca sin perder el dato. */ .pl-persona{ display:grid; gap:2px; min-width:0 } .pl-persona__usuario{ font-size:var(--t-micro); color:var(--text-soft) } /* Debajo del nombre de usuario, los negocios que un usuario raso tiene asignados (petición de Tomás, 4 de septiembre). */ .pl-persona__negocios{ font-size:var(--t-micro); color:var(--text-muted); white-space:normal } /* La acción única de una pantalla que ABRE un pliegue (pedir el permiso, crear un acceso, dar de alta): el botón vive dentro del `summary`, y `.explica summary` pone versalitas a todo lo que lleva dentro. El botón no las quiere: un botón en mayúsculas no es el botón del catálogo, es otro botón. */ .explica summary .btn{ text-transform:none; letter-spacing:-.005em } /* Lo que solo existe en el papel (veredicto del consejo, informe y auditoría): las tablas completas se quedan en el PDF y salen de la pantalla. */ .pl-solo-impresion{ display:none } @media print{ .pl-solo-impresion{ display:block } .explica{ display:none } .conmutador{ display:none } } /* La tabla del catálogo va en `nowrap` a propósito, para que una cifra nunca se parta en dos líneas. Cuatro pantallas (informe, rúbricas, montaje y salud) tienen columnas que son PROSA, no cifras: sin esto, la frase entera se va a lo ancho y la caja de la tabla se desplaza cien caracteres a la derecha. Lleva el nombre del elemento delante porque tiene que ganarle a `.tabla td`, que es más específica que una clase suelta. */ .tabla th.pl-celda-larga, .tabla td.pl-celda-larga{ white-space:normal; max-width:46ch } /* El control segmentado del catálogo se dibuja con BOTONES, y en Rúbricas va con ENLACES: cada área tiene su propia dirección web (`/rubricas?area=…`), se puede abrir en otra pestaña y sobrevive a recargar. Como `.segmentado button` no alcanza a un enlace, aquí va la misma receta copiada, con sus mismos tokens y sin un solo color escrito a mano. El salto de línea lo pide el material: seis nombres de área no caben en una fila. */ .segmentado{ flex-wrap:wrap; max-width:100% } .segmentado a{ font:600 var(--t-small) var(--font-body); padding:7px 14px; border-radius:var(--r-pill); background:transparent; color:var(--text-muted); text-decoration:none; cursor:pointer; } .segmentado a:hover{ color:var(--text); text-decoration:none } .segmentado a.is-active{ background:var(--surface); color:var(--text); box-shadow:var(--sh-1) } /* La plataforma SIN CONECTAR dentro del segmentado (nota de voz de Tomás, 4 de septiembre: «que se sepa de dónde vienen»). No es un enlace muerto: es un rótulo apagado, con la misma letra del segmentado, la opacidad bajada y el cursor normal. Sin un solo color escrito a mano. */ .segmentado .pl-apagado{ font:600 var(--t-small) var(--font-body); padding:7px 14px; border-radius:var(--r-pill); color:var(--text-muted); opacity:.45; cursor:default; } /* El nombre de una campaña enlaza a su detalle (?campana=) con la letra del bloque que lo envuelve: el color se hereda y el enlace solo subraya al pasar. El display en bloque conserva el recorte con puntos suspensivos del nombre. */ .pl-enlace-campana{ display:block; min-width:0; color:inherit; text-decoration:none } .pl-enlace-campana:hover{ text-decoration:underline; text-underline-offset:3px } .pl-enlace-campana b{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } /* La leyenda de la barra apilada toma los colores de serie POR POSICIÓN, los mismos tokens que usa la propia barra, para no escribir colores en línea. */ .leyenda.pl-por-orden span:nth-child(1) i{ background:var(--serie-1) } .leyenda.pl-por-orden span:nth-child(2) i{ background:var(--serie-2) } .leyenda.pl-por-orden span:nth-child(3) i{ background:var(--serie-3) } .leyenda.pl-por-orden span:nth-child(4) i{ background:var(--serie-4) } .leyenda.pl-por-orden span:nth-child(5) i{ background:var(--serie-5) } .leyenda.pl-por-orden span:nth-child(6) i{ background:var(--serie-6) } /* Un pliegue DENTRO de una celda de tabla (las cuatro columnas que Rúbricas se quitó de encima viven ahí). El pliegue suelto lleva una línea arriba porque separa del bloque anterior; dentro de una celda no separa nada y solo añade una raya de más en cada fila. */ .tabla .explica{ border-top:0; padding-top:0; margin-top:6px } /* ============================================================ Encargo: calendario de rango presentable + voz en el chat (nota de voz de Tomás, 7 de septiembre). Prefijos propios plcal- (calendario) y plvoz- (dictado y lectura). Solo tokens var(--…), cero colores escritos a mano. ============================================================ */ /* El calendario que calendario.js pinta DENTRO del desplegable del periodo, con la rejilla .calendario del catálogo. El desplegable entero gana scroll interno para no salirse de la pantalla en ventanas bajas o estrechas. */ .plcal-menu{ max-height:min(72vh, 560px); overflow-y:auto; overscroll-behavior:contain } .plcal-calendario{ width:100%; min-width:0 } .plcal-flechas{ display:flex; gap:6px } /* Los días son BOTONES (se pulsan y se recorren con el teclado) y hay que quitarles el traje de botón del navegador. La letra y el color no se tocan: los pone .calendario__dia, que ya viste a sus hermanos del catálogo. */ .plcal-dia{ appearance:none; border:0; background:transparent; padding:0; cursor:pointer; width:100% } .plcal-dia:hover{ background:var(--panel) } .plcal-dia:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:1px } /* El día de hoy se vuelve a pintar aquí: el reinicio de arriba vive en la MISMA hoja y a igual peso le ganaría a la regla heredada de components.css. */ .plcal-dia.calendario__dia--hoy{ background:var(--brand-wash); color:var(--brand) } /* El rango elegido: lavado de marca por dentro y los dos extremos rellenos. El extremo no se distingue solo por color: va en negrita y con aria-pressed. */ .plcal-dia--rango{ background:var(--brand-wash) } .plcal-dia--extremo{ background:var(--brand-fill); color:var(--brand-contrast); font-weight:700 } .plcal-dia--extremo:hover{ background:var(--brand-fill-strong); color:var(--brand-contrast) } /* Los dos botones de voz nacen ocultos y voz.js solo los enseña si el navegador trae la capacidad. El display explícito de .btn y .btn-circle ignora [hidden] (incidente 284), así que se les devuelve aquí. */ .plvoz-mic[hidden], .plvoz-escuchar[hidden]{ display:none } .ask .plvoz-mic{ flex:0 0 auto } /* El botón de escuchar no se estira al ancho de la tarjeta de respuesta. */ .plvoz-escuchar{ justify-self:start } /* Mientras el micrófono escucha, el borde toma el color de marca y late. El estado no va solo en color: hay movimiento y el botón lleva aria-pressed. */ .plvoz-escuchando{ border-color:var(--brand); color:var(--brand); animation:plvoz-late 1.6s ease-out infinite } @keyframes plvoz-late{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent) } 100%{ box-shadow:0 0 0 9px color-mix(in srgb, var(--brand) 0%, transparent) } } @media (prefers-reduced-motion: reduce){ .plvoz-escuchando{ animation:none; box-shadow:0 0 0 3px var(--brand-wash) } } /* ============================================================ 2 · .pl-edad · el sello de edad del dato, en mono ============================================================ */ .pl-edad{ display:inline-flex; align-items:center; gap:.3rem; font:500 var(--t-micro)/1.3 var(--font-mono); color:var(--text-soft); font-variant-numeric:tabular-nums; } /* ============================================================ 4 · .pl-campanas · la tabla de campañas ============================================================ */ .pl-campanas th, .pl-campanas td{ vertical-align:middle } .pl-campanas .pl-col-estado{ min-width:132px } .pl-campanas .pl-col-cifra{ min-width:112px } .pl-campanas .pl-col-edad{ min-width:96px; white-space:nowrap } /* ============================================================ 5 · .pl-chat · la conversación (la respuesta con procedencia del catálogo) ============================================================ */ @keyframes pl-latido{ 0%,80%,100%{opacity:.25} 40%{opacity:1} } .pl-chat__sugerencias{ display:flex; flex-wrap:wrap; gap:.4rem } .pl-chat__sugerencias form{ display:contents } /* ============================================================ 8 · .pl-solo-lector · texto que solo oye el lector de pantalla ============================================================ */ .pl-solo-lector{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } .pl-solo-lector--enfocable:focus{ position:static; width:auto; height:auto; margin:0; overflow:visible; clip-path:none; white-space:normal; } /* ============================================================ 9 · .pl-acceso y .pl-fuera · la puerta (la pantalla de acceso del catálogo) Una sola tarjeta de cristal centrada en el marco con halo. ============================================================ */ .pl-fuera{ min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem 1.25rem; background:transparent; } /* ============================================================ 11 · .pl-umbral · la pantalla que firma los umbrales ============================================================ */ .pl-umbral__form{ margin-top:.5rem } .pl-umbral__campos{ display:grid; gap:.9rem; align-items:end; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)) } .pl-umbral__accion{ display:flex; align-items:flex-end } .pl-umbral__accion .btn{ width:auto; min-width:8rem } .pl-umbral__pie{ margin:.9rem 0 0; font-size:var(--t-small); color:var(--text-soft); max-width:70ch } /* ---- Nombres largos cortados por DELANTE: lo que distingue va al final. ---- */ .pl-nombre{ display:block; max-width:34ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:rtl; unicode-bidi:plaintext; text-align:left; } /* ============================================================ 13 · .pl-areas · las tarjetas de área: dos ejes y halo del estado La tarjeta de proyecto de status_011: icono en chip, título, estado arriba a la derecha, barra con degradado y un halo del color del estado en la esquina. Sin banda lateral, que está vetada. ============================================================ */ .pl-areas{ display:grid; gap:var(--s-3); grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); align-items:start } .pl-area__ir{ justify-self:start; font-size:var(--t-small); font-weight:600; color:var(--brand); text-decoration:none } .pl-area__ir:hover{ text-decoration:underline; text-underline-offset:3px } /* ============================================================ 14 · .pl-alertas · las alertas con sus cuatro partes (alerts_006) Velo del estado a la izquierda que se apaga hacia la derecha. ============================================================ */ .pl-alertas{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-3); counter-reset:alerta } /* ---- Formularios en fila y en rejilla ---- */ .pl-form-fila{ display:flex; gap:.75rem; align-items:flex-end; flex-wrap:wrap } .pl-form-fila__campo{ flex:1 1 18rem; min-width:0 } .pl-form-rejilla{ display:grid; gap:.9rem var(--s-3); grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); align-items:end } .pl-form-rejilla__accion{ display:flex; align-items:flex-end } /* ============================================================ 15 · .pl-informe · el resumen listo para enseñar fuera ============================================================ */ .pl-informe{ display:grid; gap:var(--s-4); max-width:none } .pl-informe__selector{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap } .pl-informe__rotulo{ font-size:var(--t-small); color:var(--text-muted); font-weight:600 } .pl-informe__imprimir{ margin-left:auto } .pl-informe__cabecera{ display:flex; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; padding-bottom:var(--s-3); border-bottom:2px solid var(--text); } .pl-informe__marca{ margin:0; font:500 var(--t-micro)/1.3 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--brand) } .pl-informe__titulo{ margin:.15rem 0 0; font:700 1.6rem/1.1 var(--font-display); letter-spacing:-.03em } .pl-informe__meta{ text-align:right; font-size:var(--t-small); color:var(--text-muted) } .pl-informe__meta p{ margin:0 0 .15rem } .pl-informe__meta strong{ color:var(--text) } .pl-informe__tabla{ font-size:var(--t-small) } .pl-informe__explica{ font-size:var(--t-micro); color:var(--text-muted); max-width:44ch; white-space:normal } .pl-informe__pie{ padding-top:var(--s-3); border-top:1px solid var(--line); font-size:var(--t-micro); color:var(--text-soft) } .pl-informe__pie p{ margin:0 } .pl-informe .db-table tbody td, .pl-informe .db-table tbody th{ white-space:normal } /* ============================================================ 16 · LA HOJA DE IMPRESIÓN Sin menú, sin barra, sin controles, sin fondos oscuros. La marca de muestra se imprime siempre. ============================================================ */ @media print{ .db-side, .db-topbar, .db-scrim-side, .db-no-imprimir, .pl-informe__selector{ display:none !important } body{ background-image:none } .db-shell{ display:block; height:auto; overflow:visible } .db-main{ overflow:visible } .db-main__body{ padding:0 } .pl-informe{ max-width:none } .pl-informe__tabla{ font-size:9.5pt } .pl-informe__tabla thead{ display:table-header-group } /* LAS PIEZAS DEL CATÁLOGO, desde el 27 de agosto. El informe se compone con `.informe-bloque` y `.tabla` dentro de `.tabla-caja`, así que las mismas reglas que ya tenían las piezas viejas se repiten con los nombres nuevos: el bloque puede partirse entre páginas pero su cabecera no se queda sola, la cabecera de la tabla se repite en cada hoja, la cabecera pegajosa deja de estarlo (en papel no hay desplazamiento) y la caja de la tabla no recorta lo que no cabe. */ .informe-bloque{ break-inside:auto; page-break-inside:auto } .informe-bloque__cabeza{ break-after:avoid; page-break-after:avoid } .tabla{ font-size:9.5pt } .tabla thead{ display:table-header-group } .tabla thead th{ position:static } .tabla-caja{ overflow:visible } /* La trama de las cifras de muestra se imprime SIEMPRE, con el nombre viejo y con el del catálogo. Es la defensa contra el peor accidente de este producto: un informe de ejemplo que llega a un cliente sin decirlo. */ a[href]::after{ content:"" } } /* ============================================================ 17 · Alcance por área en la ficha del cliente ============================================================ */ .pl-alcance{ display:grid; gap:.5rem } .pl-alcance__nombre{ font-weight:600; font-size:var(--t-small) } .pl-alcance__resumen{ font-size:var(--t-micro); color:var(--text-muted) } .pl-alcance__accion{ margin-top:.4rem } /* ============================================================ 19 · Incidentes sin fatiga ============================================================ */ .pl-incidentes{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem } .pl-silencio{ display:flex; gap:.6rem; align-items:flex-end; flex-wrap:wrap; margin-top:.6rem } .pl-silencio__motivo{ flex:1 1 260px } .pl-silencio__motivo .input{ width:100% } /* ============================================================ 20 · Acciones y su ciclo de verificación ============================================================ */ .pl-accion__texto{ margin:.6rem 0 0; padding:.7rem .9rem; font:400 var(--t-micro)/1.5 var(--font-mono); white-space:pre-wrap; color:var(--text); background:var(--panel); border-radius:var(--r-md); border:1px solid var(--line); } .pl-accion__botones{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:flex-start; margin-top:.7rem } .pl-autorizar{ display:grid; gap:.5rem; flex:1 1 100% } .pl-pasos__lista{ margin:.4rem 0 0 1.1rem; padding:0; display:grid; gap:.3rem } .pl-paso__detalle{ display:block; color:var(--text-soft) } .pl-paso--bien strong{ color:var(--estado-optimo-texto) } .pl-paso--bloqueado strong, .pl-paso--caducada strong{ color:var(--estado-degradado-texto) } .pl-paso--divergente strong{ color:var(--estado-critico-texto) } .pl-paso--sin_lectura strong, .pl-paso--abierto strong{ color:var(--estado-atencion-texto) } /* ============================================================ 21 · Rúbricas por área ============================================================ */ .pl-rubrica__clave{ display:block; font:500 var(--t-micro) var(--font-mono); color:var(--text-soft) } .pl-rubrica__porque{ font-size:var(--t-small); color:var(--text-muted); min-width:260px; white-space:normal } .pl-rubrica__item{ padding-left:.6rem } /* ============================================================ 22 · Alta de cliente en ocho pasos, y el buscador ============================================================ */ .pl-alta__form{ display:flex; gap:.6rem; align-items:flex-end; flex-wrap:wrap; margin-top:.6rem } .pl-alta__form .pl-silencio__campo .input{ min-width:160px } .pl-buscador{ margin-bottom:.8rem } .pl-buscador__nada{ font-size:var(--t-small); color:var(--text-muted); margin:0 0 .6rem }