/* BUSCADOR DE ESTADOS — tema oscuro + oro (decidido por el abogado). Un solo archivo, por secciones: 1 tokens · 2 base · 3 estructura · 4 tarjetas · 5 tablas · 6 chips · 7 formularios y botones · 8 avisos · 9 cronología, chat y respuestas de la IA · 10 cabecera del proceso y pestañas · 11 espera y trabajos largos · 12 móvil. */ /* ---- 1. Tokens --------------------------------------------------------- */ :root { /* Sin esto el navegador pinta sus controles nativos en modo claro: el icono del calendario sale oscuro sobre oscuro y «Choose Files» es lo más brillante de la pantalla siendo lo menos importante. */ color-scheme: dark; /* Superficies: tres niveles del mismo neutro; el lateral un pelo más frío. */ --superficie: oklch(0.155 0.006 285); --superficie-2: oklch(0.205 0.007 285); --superficie-3: oklch(0.24 0.008 285); --lateral: oklch(0.19 0.009 290); --borde: oklch(0.30 0.008 285); --tinta: oklch(0.935 0.004 285); --tinta-suave: oklch(0.71 0.01 285); /* 6.9:1 sobre --superficie-2 */ --acento: oklch(0.74 0.13 85); /* oro */ --acento-tinta: oklch(0.18 0.03 85); /* texto sobre oro: 8.1:1 */ /* Semáforo de términos. `vencido` lleva --tinta encima (5.0:1); los otros tres van como texto sobre superficie. */ --estado-vencido: oklch(0.52 0.19 25); --estado-urgente: oklch(0.63 0.19 25); --estado-pronto: oklch(0.76 0.15 75); --estado-bien: oklch(0.66 0.13 150); --estado-neutro: var(--tinta-suave); /* El rojo puro sobre su propio tinte se queda en 4.0:1; aclarado hacia la tinta sube de 5:1. Igual para el verde de los avisos «ok». */ --urgente-claro: color-mix(in oklch, var(--estado-urgente) 65%, var(--tinta)); --bien-claro: color-mix(in oklch, var(--estado-bien) 65%, var(--tinta)); /* Nombres viejos como alias: ninguna plantilla se queda sin color. */ --fondo: var(--superficie); --panel: var(--superficie-2); --panel2: var(--superficie-3); --texto: var(--tinta); --gris: var(--tinta-suave); --rojo: var(--estado-urgente); --rojo-fuerte: var(--estado-vencido); --ambar: var(--estado-pronto); --verde: var(--estado-bien); --radio: 10px; --radio-control: 8px; --radio-chip: 999px; /* Escala tipográfica fija, razón 1.125: 12.5 · 14 · 15 · 17 · 19 · 25 px. */ --t-1: 0.78125rem; --t-2: 0.875rem; --t-3: 0.9375rem; --t-4: 1.0625rem; --t-5: 1.1875rem; --t-6: 1.5625rem; --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; --mono: "SF Mono", ui-monospace, Menlo, monospace; --transicion: 150ms ease; /* Sin esto el checkbox marcado sale en el azul del sistema. */ accent-color: var(--acento); } /* ---- 2. Base ------------------------------------------------------------ */ * { box-sizing: border-box; } /* `hidden` manda aunque la clase del elemento fije otro `display`. */ [hidden] { display: none !important; } body { margin: 0; background: var(--superficie); color: var(--tinta); font-family: var(--sans); font-size: var(--t-3); line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--acento); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: var(--t-6); margin: 0 0 4px; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; } h2 { font-size: var(--t-4); margin: 0 0 14px; font-weight: 600; } h3 { font-size: var(--t-3); margin: 0 0 8px; font-weight: 600; } .subtitulo { color: var(--tinta-suave); margin: 0 0 26px; font-size: var(--t-2); } .subtitulo.mono { overflow-wrap: anywhere; } /* radicado de 23 dígitos */ /* Texto que llega de fuera —correos, portal— trae direcciones y enlaces sin un solo espacio («secfabta@cendoj…») que se salen de su caja. Ojo en una tabla: `anywhere` rebaja el ancho mínimo de la columna y el reparto automático la estruja; ahí van anchos fijos, como en `.tabla-fija`. */ .largo { overflow-wrap: anywhere; } /* Las tablas de alertas y de correos llevan ese texto: el asunto de un correo, su cuerpo, el remitente. Con el reparto automático una dirección larga las sacaba de su tarjeta, y con `anywhere` a secas el detalle quedaba en 81 px, una palabra por línea. Con anchos fijos —los de su cabecera— la tabla mide lo que la tarjeta y `anywhere` solo parte lo que de verdad no cabe. */ .tabla-fija { table-layout: fixed; } .tabla-fija td { overflow-wrap: anywhere; } .pequeno { font-size: var(--t-1); } .gris { color: var(--tinta-suave); } .mono { font-family: var(--mono); font-size: var(--t-1); font-variant-numeric: tabular-nums; } /* Solo para el lector de pantalla: el texto existe, no se pinta. */ .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* El visor del directorio de la Rama. Power BI no informa de su alto —sin uno fijo el iframe queda en una franja ilegible— y además conserva su proporción 16:9 y centra lo que sobra: con una altura suelta dejaba una franja blanca bajo la tabla. Por eso la proporción manda, con un mínimo para que en una ventana estrecha siga cabiendo la tabla y un tope para no pasarse de pantalla. */ .marco-directorio { aspect-ratio: 16 / 9; min-height: 420px; max-height: 80vh; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; } .marco-directorio iframe { width: 100%; height: 100%; border: 0; display: block; } @media (max-width: 780px) { .marco-directorio { min-height: 360px; max-height: 70vh; } } /* Foco visible en TODO lo interactivo, siempre en oro. */ :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--acento); } @media (prefers-reduced-motion: reduce) { *, ::before, ::after { transition: none !important; animation: none !important; } } /* ---- 3. Estructura ------------------------------------------------------ */ .envoltorio { display: flex; min-height: 100vh; } .lateral { width: 232px; flex: 0 0 232px; background: var(--lateral); border-right: 1px solid var(--borde); padding: 22px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } /* La marca: el gesto (la hoja del estado con su chincheta de oro) y el nombre. El oro es solo la chincheta; el nombre va en tinta, como el resto del mueble. */ .marca { display: flex; gap: 10px; align-items: center; color: var(--tinta); } .marca:hover { text-decoration: none; } .marca-gesto { flex: 0 0 auto; } .marca-gesto .hoja { fill: var(--tinta); } .marca-gesto .renglon { fill: var(--tinta-suave); } .marca-gesto .aro { fill: var(--lateral); } .marca-gesto .chincheta { fill: var(--acento); } .marca-texto { display: flex; flex-direction: column; font-size: var(--t-3); font-weight: 650; letter-spacing: -.01em; line-height: 1.25; } .marca-texto small { color: var(--tinta-suave); font-size: var(--t-1); font-weight: 400; letter-spacing: 0; } /* Primero del documento: el teclado llega al contenido sin recorrer el menú. */ .saltar { position: absolute; left: 12px; top: -60px; z-index: 40; background: var(--acento); color: var(--acento-tinta); padding: 8px 14px; border-radius: var(--radio-control); font-weight: 650; } .saltar:focus { top: 12px; text-decoration: none; } main:focus { outline: none; } /* La búsqueda del lateral: un campo más compacto que los de los formularios. */ .buscar-lateral { margin: 20px 0 0; } .buscar-lateral input { padding: 8px 10px; font-size: var(--t-2); } .menu { list-style: none; padding: 0; margin: 18px 0 0; } .menu li { margin-bottom: 2px; } .menu a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--radio-control); color: var(--tinta); font-size: var(--t-2); transition: background var(--transicion); } .menu a:hover { background: var(--superficie-3); text-decoration: none; } .menu a.activo { background: var(--superficie-3); color: var(--acento); font-weight: 600; } .lateral form { margin-top: 26px; } .lateral .boton { width: 100%; } #estado-scan { margin: 12px 0 0; } .principal { flex: 1; min-width: 0; padding: 30px 34px 60px; max-width: 1180px; } /* ---- 4. Tarjetas y detalle --------------------------------------------- */ .tarjeta { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px 22px; margin-bottom: 20px; } /* `space-between` solo sirve con dos hijos; con un contador en medio el número quedaba flotando. Lo último (form/botón) va a la derecha. */ .tarjeta > h2 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .tarjeta > h2 > form, .tarjeta > h2 > .boton, .tarjeta > h2 > button { margin-left: auto; } .datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px 26px; } .datos div span, .rotulo-dato { display: block; color: var(--tinta-suave); font-size: var(--t-1); text-transform: uppercase; letter-spacing: .04em; } .acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; } .acciones.compactas { margin: 0; gap: 6px; } .acciones.compactas.arriba { margin-top: 6px; } .acciones.en-titulo { margin: 0 0 0 auto; gap: 6px; } .acciones.filtros-crono { margin: 4px 0 8px; gap: 6px; } .pie-tarjeta { margin-bottom: 0; } .sin-margen { margin: 0; } .subseccion { margin-top: 22px; } .avisos-titulo { margin: -6px 0 10px; } /* Un bloque plegable con cara de tarjeta: su título se lee en la línea del triángulo. */ .tarjeta > summary > h2 { display: inline; margin: 0; } .datos-plegados { margin-top: 14px; } .asunto-samai { margin: 14px 0 0; } .form-carpeta { margin-top: 10px; } .nota-carpeta { margin: 0 0 12px; } .form-subir, .form-despacho, .aviso-traslado { margin-top: 12px; } .crono-plegada { margin-top: 10px; } .form-representa { margin-top: 16px; } .leyenda-titulo { padding: 0; margin: 0 0 8px; font-size: var(--t-2); font-weight: 600; color: var(--tinta); text-transform: none; letter-spacing: 0; } .salida-redaccion { margin-top: 12px; } .tabla-debajo { margin-top: 16px; } .borrador { max-height: 420px; overflow: auto; } tr.detalle td { padding-top: 0; } .form-corregir { margin-top: 10px; } .cita-plantilla { margin: 0 0 12px; } .en-linea { display: inline; margin-left: 8px; } .nota-corta { margin: 4px 0; } .form-plazo { display: inline-block; margin: 2px 0; } @media (min-width: 781px) { .tabla-sujetos td:first-child { width: 170px; } } /* El recuento que acompaña a un título: dato, no título. */ .cuenta-titulo { color: var(--tinta-suave); font-size: var(--t-1); font-weight: 400; } /* Tarjetas en rejilla: cada una su dato, y sin márgenes sueltos por dentro. */ .rejilla-tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 20px; } .rejilla-tres > .tarjeta { margin: 0; } .rejilla-tres .tarjeta p { margin: 0 0 8px; } .rejilla-tres .tarjeta p:last-child { margin-bottom: 0; } .rejilla-tres .tarjeta .vacio { padding: 0; } #filtro-cuenta { margin: 6px 0 0; } /* La fecha y su fuente van juntas: en móvil el rótulo de la columna va delante y la fuente no puede caer al margen como si fuera otro campo. */ .movimiento { display: inline-block; vertical-align: top; } .vacio { color: var(--tinta-suave); font-size: var(--t-2); padding: 12px 0; } /* ---- 5. Tablas ---------------------------------------------------------- */ table { width: 100%; border-collapse: collapse; font-size: var(--t-2); } th { text-align: left; color: var(--tinta-suave); font-weight: 600; font-size: var(--t-1); text-transform: uppercase; letter-spacing: .04em; padding: 0 10px 9px; border-bottom: 1px solid var(--borde); } td { padding: 11px 10px; border-bottom: 1px solid var(--borde); vertical-align: top; } tr:last-child td { border-bottom: none; } tr.pulsable:hover { background: var(--superficie-3); } .celda-accion { text-align: right; white-space: nowrap; } /* Términos: una cabecera y un bloque por color, con su nombre escrito. */ .tabla-terminos .c-proceso, .tabla-terminos .c-fecha { width: 120px; } .tabla-terminos .c-estado { width: 200px; } .tabla-terminos .c-accion { width: 110px; } tr.grupo th { padding: 16px 10px 6px; border-bottom: 0; letter-spacing: .04em; } tbody:first-of-type tr.grupo th { padding-top: 12px; } /* ---- 6. Chips y contadores --------------------------------------------- */ .chip { display: inline-block; padding: 2px 9px; border-radius: var(--radio-chip); line-height: 1.5; font-size: var(--t-1); font-weight: 600; border: 1px solid var(--borde); color: var(--tinta-suave); white-space: nowrap; vertical-align: middle; } /* Un chip que es botón (las facetas de jurisprudencia) hereda la letra. */ button.chip { font-family: inherit; cursor: pointer; background: transparent; } /* La faceta elegida es una selección, y la selección es oro. */ .chip.faceta[aria-pressed=true] { color: var(--tinta); border-color: var(--acento); } .facetas { margin: -4px 0 14px; } .faceta-grupo { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; } .faceta-rotulo { min-width: 64px; } /* El semáforo no depende del color: cada estado lleva su glifo delante. */ .chip.vencido::before, .chip.rojo::before, .chip.ambar::before, .chip.verde::before { margin-right: .35em; } .chip.vencido::before { content: "✕"; } .chip.rojo::before { content: "!"; } .chip.ambar::before { content: "▲"; font-size: .8em; } .chip.verde::before { content: "✓"; } .chip.vencido { color: var(--tinta); background: var(--estado-vencido); border-color: var(--estado-vencido); } .chip.rojo { color: var(--urgente-claro); border-color: var(--estado-urgente); background: color-mix(in oklch, var(--estado-urgente) 14%, transparent); } .chip.ambar { color: var(--estado-pronto); border-color: var(--estado-pronto); background: color-mix(in oklch, var(--estado-pronto) 14%, transparent); } .chip.verde { color: var(--estado-bien); border-color: var(--estado-bien); background: color-mix(in oklch, var(--estado-bien) 14%, transparent); } .chip.acento { color: var(--acento); border-color: var(--acento); background: color-mix(in oklch, var(--acento) 14%, transparent); } /* Lo nuevo por atender. Oro y no rojo: el rojo es del semáforo de los plazos, y un contador rojo permanente enseñaba a no mirar el rojo. */ .contador { background: var(--acento); color: var(--acento-tinta); border-radius: var(--radio-chip); padding: 1px 7px; font-size: var(--t-1); font-weight: 650; line-height: 1.4; } /* Bandeja de alertas: filtros por tipo y un grupo por proceso. */ .filtros { display: flex; flex-wrap: wrap; gap: 6px; } a.chip.filtro { transition: color var(--transicion), border-color var(--transicion); } a.chip.filtro:hover { color: var(--tinta); border-color: var(--tinta-suave); text-decoration: none; } /* El filtro elegido es una selección: oro, como la pestaña activa. */ a.chip.filtro[aria-current=true] { color: var(--tinta); border-color: var(--acento); } .acciones .empuja { flex: 1; } .cabecera-grupo { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 14px; } .cabecera-grupo h2 { margin: 0; } .cabecera-grupo form { margin-left: auto; } .despacho-grupo { font-weight: 400; } .col-fecha { width: 6.5rem; } .col-alerta { width: 34%; } .col-accion { width: 7rem; } /* Correos: el remitente y los radicados en su ancho; las acciones apiladas para que el desplegable de procesos no empuje los botones fuera de la tarjeta. */ .col-asignar { width: 13rem; } .col-proceso { width: 6.5rem; } .col-certeza { width: 6.5rem; } .acciones-correo { display: flex; flex-direction: column; gap: 6px; align-items: stretch; } .acciones-correo > form, .acciones-correo .fila-formulario { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .acciones-correo details form { margin-top: 6px; } .texto-correo { white-space: pre-wrap; font: inherit; margin: 6px 0; } /* Lo que no se ha leído lleva el punto oro de lo nuevo, el mismo de la cronología: no es un chip más compitiendo con el tipo. */ .punto-nuevo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); margin-right: 6px; vertical-align: middle; } tr.sin-leer .titulo-alerta { color: var(--tinta); font-weight: 600; } .detalle-alerta .corto, .detalle-alerta .completo { white-space: pre-line; } .detalle-alerta summary { color: var(--acento); margin-top: 4px; width: fit-content; } .detalle-alerta:has(> details[open]) > .corto { display: none; } details:not([open]) > summary .cerrar, details[open] > summary .abrir { display: none; } /* ---- 7. Formularios y botones ------------------------------------------ */ input[type=text], input[type=search], input[type=email], input[type=url], input[type=password], input[type=date], input[type=time], input[type=number], select, textarea { width: 100%; background: var(--superficie-3); color: var(--tinta); border: 1px solid var(--borde); border-radius: var(--radio-control); padding: 10px 12px; font-family: inherit; font-size: var(--t-2); } textarea { resize: vertical; min-height: 90px; line-height: 1.5; } /* El selector de archivos va aparte: su botón nativo era lo más brillante de la tarjeta. */ input[type=file] { width: 100%; background: var(--superficie-3); color: var(--tinta); border: 1px solid var(--borde); border-radius: var(--radio-control); padding: 8px 10px; font-family: inherit; font-size: var(--t-2); } input[type=file]::file-selector-button { background: transparent; color: var(--tinta); border: 1px solid var(--borde); border-radius: var(--radio-control); padding: 4px 11px; margin-right: 10px; font-family: inherit; font-size: var(--t-1); cursor: pointer; } /* Rótulos de formulario en versalitas: son rótulos de campo, no cejas de sección. */ label { display: block; font-size: var(--t-1); color: var(--tinta-suave); margin: 0 0 5px; text-transform: uppercase; letter-spacing: .04em; } .campo { margin-bottom: 15px; } .fila-campos { display: flex; gap: 14px; flex-wrap: wrap; } .fila-campos .campo { flex: 1; min-width: 170px; } /* Anchos de campo con nombre, en vez de un max-width suelto en cada plantilla. */ .campo.corto { max-width: 190px; } .campo.medio { max-width: 280px; } /* El botón o la casilla que cierra una fila de campos, alineado con los campos. */ .campo.al-pie { display: flex; align-items: flex-end; flex: 0 0 auto; min-width: 0; } .campo.al-pie .opcion { margin-bottom: 10px; } .campo.hora { flex: 0 0 auto; min-width: 0; display: flex; gap: 6px; align-items: center; } /* Una fila de controles sueltos: botones, un campo y su botón, un texto al lado. */ .fila-formulario { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; } .fila-formulario > .campo { margin-bottom: 0; } .fila-formulario > .pequeno { padding-bottom: 8px; } .nota-form { margin: 8px 0 0; } .nota-filtros { margin: 2px 0 10px; } .mas-filtros { margin-top: 10px; } .mas-filtros > summary { color: var(--acento); } .mas-filtros > .fila-campos:first-of-type { margin-top: 10px; } .opciones.grupo-campos { margin: 6px 0 0; } .sintesis { max-width: 72ch; } .select-compacto { width: auto; padding: 4px 8px; } .guardar-fila .boton { white-space: nowrap; } .respuesta-lexius { margin-top: 12px; } /* Resultados de «Buscar»: título, contexto y el trozo con lo encontrado. */ .buscar-pagina { margin-bottom: 22px; } .resultados { list-style: none; margin: 0; padding: 0; } .resultados li { padding: 10px 0; border-bottom: 1px solid var(--borde); } .resultados li:last-child { border-bottom: 0; } .titulo-resultado { font-weight: 600; } .fragmento { margin: 4px 0 0; color: var(--tinta-suave); max-width: 90ch; overflow-wrap: anywhere; } /* Lo encontrado se resalta como una selección: el oro de «esto es lo que buscas». */ mark { background: color-mix(in oklch, var(--acento) 32%, transparent); color: var(--tinta); padding: 0 1px; } /* La explicación que va justo bajo el título de una tarjeta. */ .intro-tarjeta { margin: -8px 0 14px; } .visor-caido { margin: 12px 0 0; } .separador { border: 0; border-top: 1px solid var(--borde); margin: 18px 0; } /* Un grupo de campos: el fieldset sin marco y su leyenda con cara de rótulo. */ .grupo-campos { border: 0; margin: 0 0 8px; padding: 0; min-width: 0; } .grupo-campos legend { padding: 0; margin: 0 0 6px; font-size: var(--t-1); color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .04em; } .editor-yaml { min-height: 420px; } .conectar-buzon { margin-top: 18px; } #aviso-listas { margin: 0 0 12px; } .paginacion { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; } /* Radios en línea («Represento a»): aquí el label tiene que leerse como frase. */ .opciones { display: flex; flex-wrap: wrap; gap: 6px 18px; } .opcion { display: inline-flex; gap: 7px; align-items: center; text-transform: none; letter-spacing: 0; font-size: var(--t-2); color: var(--tinta); cursor: pointer; } .opcion input { width: auto; margin: 0; } summary { cursor: pointer; } .boton { display: inline-block; background: var(--acento); color: var(--acento-tinta); border: none; border-radius: var(--radio-control); padding: 10px 18px; font-family: inherit; font-size: var(--t-2); font-weight: 650; cursor: pointer; transition: filter var(--transicion), background var(--transicion); } .boton:hover { filter: brightness(1.1); text-decoration: none; } .boton.secundario { background: transparent; color: var(--tinta); border: 1px solid var(--borde); } .boton.secundario:hover { background: var(--superficie-3); filter: none; } .boton:disabled, .boton[aria-busy=true] { opacity: .5; cursor: default; filter: none; } .boton.pequeno { padding: 5px 11px; font-size: var(--t-1); } /* Los matices exigen `secundario`: un `boton acento` suelto sería oro sobre oro. */ .boton.secundario.peligro { color: var(--urgente-claro); border-color: var(--estado-urgente); } .boton.secundario.acento { color: var(--acento); border-color: var(--acento); } /* Un `peligro` sin `secundario` es el destructivo lleno: rojo con tinta encima. */ .boton.peligro:not(.secundario) { background: var(--estado-vencido); color: var(--tinta); } /* ---- 8. Avisos ---------------------------------------------------------- */ .aviso { border-radius: var(--radio-control); padding: 11px 15px; margin-bottom: 18px; font-size: var(--t-2); border: 1px solid var(--borde); color: var(--tinta-suave); background: var(--superficie-3); } .aviso.error { border-color: var(--estado-urgente); color: var(--urgente-claro); background: color-mix(in oklch, var(--estado-urgente) 14%, transparent); } .aviso.ok { border-color: var(--estado-bien); color: var(--bien-claro); background: color-mix(in oklch, var(--estado-bien) 14%, transparent); } .aviso.info { border-color: var(--borde); color: var(--tinta-suave); background: var(--superficie-3); } .aviso.fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .aviso.fila form { margin-left: auto; } .aviso.trabajo-terminado { border-color: var(--acento); color: var(--tinta); background: color-mix(in oklch, var(--acento) 10%, transparent); } /* Cada línea de la revisión se puede callar. El botón vive dentro de la línea y no puede robarle sitio al texto: hereda el color del recuadro y solo se enciende al pasarle por encima o al llegar con el teclado. */ .callar { display: inline; } .callar-boton { background: none; border: 0; color: inherit; cursor: pointer; opacity: .55; font-family: inherit; font-size: var(--t-1); line-height: 1; padding: 2px 6px; border-radius: var(--radio-control); transition: opacity var(--transicion); } .callar-boton:hover, .callar-boton:focus-visible { opacity: 1; } .aviso ul { margin: 8px 0 0 18px; padding: 0; } .aviso li { margin-bottom: 2px; } .callados { margin-top: 8px; } .callados ul { margin: 6px 0 0 18px; } /* ---- 9. Cronología, chat y respuestas de la IA ------------------------- */ .crono { list-style: none; padding: 0; margin: 0; } /* «Ver más» (panel.js, `paginar`): clase propia para no pisar el `hidden` de los filtros. */ .pag-oculta { display: none; } .pag-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; } /* Raíl de 1 px: es una guía, no una franja de color. */ .crono li { padding: 13px 0 13px 18px; border-left: 1px solid var(--borde); position: relative; } .crono li::before { content: ""; position: absolute; left: -4.5px; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--borde); } .crono li.nueva::before { background: var(--acento); } .crono .fecha { color: var(--tinta-suave); font-size: var(--t-1); font-variant-numeric: tabular-nums; } .crono .fecha strong { color: var(--tinta); font-weight: 600; } .crono .titulo { font-weight: 600; margin: 1px 0 3px; } .crono .nota { color: var(--tinta-suave); font-size: var(--t-2); } .chat { max-height: 420px; overflow-y: auto; margin-bottom: 14px; } .burbuja { padding: 10px 14px; border-radius: var(--radio); margin-bottom: 10px; max-width: 88%; font-size: var(--t-2); white-space: pre-wrap; } .burbuja.usuario { background: var(--superficie-3); margin-left: auto; border: 1px solid var(--borde); } .burbuja.asistente { background: transparent; border: 1px solid var(--borde); } .chat-envio { display: flex; gap: 10px; flex-wrap: wrap; } .chat-envio input { flex: 1 1 240px; } /* Tope de medida: a 119 caracteres por línea una sentencia no se lee. */ .respuesta-ia { white-space: pre-wrap; font-size: var(--t-2); line-height: 1.6; max-width: 72ch; } /* Texto largo con su propio desplazamiento: se alcanza con el teclado (tabindex). */ .texto-largo { max-height: 70vh; overflow-y: auto; } /* ---- 10. Cabecera del proceso y pestañas ------------------------------- */ /* Se queda arriba mientras se recorre el caso: el radicado y el semáforo no se pierden de vista. `nav.pestanas` va dentro de la cabecera (último hijo) o justo después: en ese caso panel.js le mide la altura (--alto-cabecera). */ .cabecera-proceso { position: sticky; top: 0; z-index: 20; background: var(--superficie); margin-top: -10px; padding-top: 10px; } .cabecera-proceso h1 { margin-bottom: 2px; } .titulo-proceso { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; } .titulo-proceso .mas { margin-left: auto; } .mas .acciones { margin: 8px 0 0; gap: 6px; } .cabecera-proceso .subtitulo { margin-bottom: 10px; } .cabecera-proceso .chips { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 12px; } .pestanas { display: flex; gap: 2px; margin: 0 0 22px; border-bottom: 1px solid var(--borde); background: var(--superficie); position: sticky; top: var(--alto-cabecera, 0px); z-index: 19; overflow-x: auto; scrollbar-width: none; } .pestanas::-webkit-scrollbar { display: none; } .pestanas a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; margin-bottom: -1px; color: var(--tinta-suave); font-weight: 600; font-size: var(--t-2); white-space: nowrap; border-bottom: 2px solid transparent; transition: color var(--transicion), border-color var(--transicion); } .pestanas a:hover { color: var(--tinta); text-decoration: none; } .pestanas a[aria-selected=true] { color: var(--tinta); border-bottom-color: var(--acento); } .pestanas a:focus-visible { outline-offset: -2px; } .pestanas a .cuenta { color: var(--tinta-suave); font-weight: 400; font-size: var(--t-1); } /* Sin JS se ven todas las pestañas seguidas; con JS solo la activa. */ html.js .pestana:not(.activa) { display: none; } /* Que un ancla interna (#termino-45) no quede escondida bajo lo pegajoso. */ .pestana, .pestana [id] { scroll-margin-top: calc(var(--alto-pegajoso, 0px) + 12px); } /* ---- 11. Espera y trabajos largos -------------------------------------- */ /* Caja de la IA mientras se espera: el texto de espera y, debajo, tres líneas que respiran. Con «reducir movimiento», quietas (sección 2). */ .esqueleto { position: relative; padding-bottom: 48px; } .esqueleto::after { content: ""; position: absolute; left: 0; bottom: 34px; width: 72%; height: 10px; border-radius: var(--radio-chip); background: var(--superficie-3); box-shadow: 0 16px 0 -1px var(--superficie-3), 0 32px 0 -2px var(--superficie-3); animation: pulso 1.4s ease-in-out infinite; } @keyframes pulso { 50% { opacity: .4; } } /* Lo que no pudo terminar se dice donde iba el resultado. */ .fallo-trabajo { color: var(--urgente-claro); } /* Lo que sigue corriendo en el servidor, con su reloj, desde cualquier página. */ #banner-trabajos { position: fixed; right: 16px; bottom: 16px; z-index: 30; max-width: min(320px, calc(100vw - 32px)); padding: 10px 14px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: 0 8px 24px oklch(0 0 0 / .45); font-size: var(--t-1); color: var(--tinta-suave); } #banner-trabajos div { display: flex; gap: 8px; align-items: baseline; } #banner-trabajos b { color: var(--tinta); font-weight: 600; } #banner-trabajos .reloj { margin-left: auto; font-variant-numeric: tabular-nums; } /* ---- 12. Móvil (≤ 780 px) ---------------------------------------------- */ @media (max-width: 780px) { .envoltorio { flex-direction: column; } /* El lateral pasa a barra arriba: marca y «Revisar ahora» en la primera fila, los enlaces en scroll horizontal en la segunda. Antes ocupaba la primera pantalla entera del iPhone. */ .lateral { position: static; width: 100%; flex: none; height: auto; overflow: visible; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px 0; border-right: 0; border-bottom: 1px solid var(--borde); } .marca { flex: 1 1 auto; } .marca-texto small { display: none; } .lateral form { margin: 0; flex: 0 0 auto; } .lateral .boton { width: auto; min-height: 44px; padding: 8px 12px; font-size: var(--t-1); } /* `order` porque en el HTML el botón va después del menú: sin esto caía a una tercera fila, solo, debajo de los enlaces. Va en el