/* Los tokens de "El Despacho Portátil", tomados de base44_front/src/DESIGN_LANGUAGE.md. Viven en UN sitio para que las pantallas nuevas no vayan derivando: papel de fondo, tinta para el texto, índigo SOLO para lo activo, serif SOLO para lo que es documento. Lo específico de cada pantalla se queda en su HTML. Aquí solo lo compartido. */ /* ── LAS TRES LETRAS, SERVIDAS DESDE AQUÍ ─────────────────────────────────── Base44 las traía de Google Fonts con un `@import`. Aquí NO, y no es purismo: 🔴 Una petición a un servidor ajeno en cada carga le cuenta a ese servidor CUÁNDO se abre un expediente y desde dónde. No manda el expediente, pero manda que lo hay. La regla de la casa es que nada sale del portátil, y esto salía. 🔴 Y sin red no habría letra. Una demanda se prepara donde se puede, no donde hay wifi. Van vendidas en `web/tipos/` (243 KB, siete ficheros) y la CSP lleva `font-src 'self'`, que ya bloqueaba la otra vía. Se re-vendan con `npm run tipos`. Los pesos son los que se usan y ni uno más: cada uno son 24 KB que alguien descarga. */ @font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap; src:url(/tipos/inter-latin-400-normal.woff2) format('woff2')} @font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap; src:url(/tipos/inter-latin-500-normal.woff2) format('woff2')} @font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap; src:url(/tipos/inter-latin-600-normal.woff2) format('woff2')} @font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap; src:url(/tipos/inter-latin-700-normal.woff2) format('woff2')} @font-face{font-family:Merriweather;font-style:normal;font-weight:400;font-display:swap; src:url(/tipos/merriweather-latin-400-normal.woff2) format('woff2')} @font-face{font-family:Merriweather;font-style:normal;font-weight:700;font-display:swap; src:url(/tipos/merriweather-latin-700-normal.woff2) format('woff2')} /* ⚠️ Y NO hay tercera letra. Base44 traía también Caveat --letra a mano-- para las notas adhesivas de su pantalla de inicio, que aquí no se rehace. La única tentación era usarla en el texto de las notas del expediente, y eso es justo lo que el propio documento de diseño prohíbe: «nada de skeuomorfismo que estorbe». Una nota que dice «ojo con la fecha del burofax» hay que poder leerla de un vistazo. El post-it se hace con el papel, no con la letra. */ :root{ --papel:hsl(228 38% 97%); --tarjeta:#fff; --tinta:hsl(223 14% 10%); --tinta-suave:hsl(223 10% 42%); --borde:hsl(230 29% 92%); /* 🔴 DOS NOMBRES, NO UNO, Y ES LA DECISIÓN 1005 DE DIRECCIÓN. `--indigo` hacía dos trabajos incompatibles: pintarse DETRÁS (con texto blanco encima, que necesita 4,5:1 contra el blanco) y pintarse DELANTE (como tinta sobre `--tarjeta` y `--papel`, que necesita 4,5:1 contra ELLOS). En claro un solo valor da los dos; en oscuro no puede, porque las dos exigencias tiran en sentidos contrarios. 🔑 *Cuando un mismo valor tiene que cumplir dos contrastes contra fondos opuestos, no es un color mal elegido: es DOS colores con un solo nombre.* ⚠️ Cuál es cada uso NO lo decidió nadie a ojo: lo dice la propiedad CSS —`background` y un `box-shadow` sólido pintan detrás; `color`, `border` y `outline` pintan delante—. Fueron 26 y 103. ⏳ Y el VALOR de `--indigo-tinta` en oscuro sigue PROVISIONAL: es el único trozo de esto que espera al ojo de Dirección, que es quien decide de qué color es cada cosa (982). Hoy los dos llevan el mismo valor, o sea que **la estructura ya está y el aspecto no ha cambiado ni un píxel**: el día que se elija el tono, se toca UNA línea y no ciento veintinueve. */ --indigo-fondo:hsl(242 52% 55%); --indigo-tinta:hsl(242 52% 55%); --indigo-flojo:hsl(242 52% 96%); --ambar:hsl(38 92% 50%); --rojo:hsl(0 72% 51%); --verde:hsl(152 45% 38%); --sans:Inter,"Segoe UI",system-ui,-apple-system,sans-serif; --serif:Merriweather,Georgia,"Times New Roman",serif; /* el sello de registro de entrada: monoespaciada, como un cuño */ --sello:ui-monospace,"Cascadia Code",Consolas,"SF Mono",monospace; /* el post-it: papel amarillo, no un aviso. Por eso no es `--ambar`, que significa peligro. */ --postit:hsl(48 92% 94%); --postit-borde:hsl(45 80% 72%); --postit-firma:hsl(40 25% 38%); /* ── LA ESCALA ────────────────────────────────────────────────────────────── 🔴 MEDIDO el 2026-08-24: **16 tamaños de letra distintos, 24 espaciados y 11 radios**. Eso es la definición aritmética de «no hay sistema», y es lo que el ojo lee como descuido sin poder decir por qué. 🔑 Pero al agruparlos apareció algo mejor de lo esperado: **no es caos, es deriva.** Hay ocho peldaños de verdad y cada uno está partido por medio píxel — 11 y 11,5; 12 y 12,5; 13 y 13,5; 14, 14,5, 15 y 15,5. Nadie eligió esas mitades: se escribieron en ficheros distintos en días distintos. 📌 Así que aquí se le pone nombre al peldaño, **con el valor que más se usa en cada uno** — para que nombrar la escala no cambie por sí solo el aspecto de nada. Lo que falta es que las pantallas los adopten, y eso NO se hace a ciegas: `npm run escala` dice cuánto se desvía cada una, y se corrige mirando la pantalla. */ /* Ocho peldaños, de la etiqueta a la portada. */ --letra-sello:10.5px; /* mayúsculas de etiqueta y sello -- 32 usos, el peldaño más bajo */ --letra-menuda:11.5px; /* metadatos, pies de ficha -- 55 usos */ --letra-chica:12.5px; /* el texto de interfaz que más hay -- 56 usos */ --letra:13px; /* texto normal, tablas, botones */ --letra-media:15px; /* nombres, subtítulos */ --letra-grande:17px; /* cifras que mandan */ --letra-titulo:19px; /* título de sala */ --letra-portada:23px; /* la puerta, y poco más */ /* Espaciado de base 4. Un ojo distingue 8 de 12; no distingue 13 de 14, y sin embargo obliga a decidir cada vez. */ --hueco-1:4px; --hueco-2:8px; --hueco-3:12px; --hueco-4:16px; --hueco-5:20px; --hueco-6:24px; --hueco-7:32px; /* Tres radios y una píldora. Los once que había no significaban once cosas. */ --radio-menudo:4px; /* distintivos diminutos */ --radio:7px; /* botones, campos, chips cuadrados */ --radio-caja:11px; /* tarjetas, tablas, paneles */ --radio-pildora:99px; /* lo que es redondo del todo */ /* ── LA MEDIDA ─────────────────────────────────────────────────────────────── 🔴 MEDIDO el 2026-08-29 a 1707 px, que es donde entran Daniel y Arturo. Los párrafos explicativos iban a **130, 138 y 143 caracteres por renglón** — el doble del máximo legible (45–75 es lo cómodo; 90 es ya el límite). Y con la peor combinación posible: los más largos eran los de letra MÁS PEQUEÑA, 11,5 px, porque nada les ponía tope y se estiraban con el contenedor. Lo que se lee así no es adorno: «Calculado sin ningún festivo declarado en ese periodo… compruébalo antes de fiarte de esta fecha», que es la frase de la que depende un plazo. 🔑 Y no era la primera vez. El 2026-08-24 ya se unificó el ancho de lectura —había 52, 54 y 56ch— pero sólo donde se estaba mirando. Hoy quedaban **cinco anchos distintos** (70, 72, 76, 78 y ninguno) porque cada pantalla escribió el suyo. Ahora hay UNO. ⚠️ Va en `ch` y no en píxeles a propósito: `ch` es el ancho del carácter, así que la medida se ajusta sola al tamaño de letra. En píxeles, bajar un cuerpo alarga el renglón sin que nadie se entere. */ --medida:72ch; } @media (prefers-color-scheme:dark){ :root{--papel:hsl(223 18% 11%);--tarjeta:hsl(223 16% 14%);--tinta:hsl(228 25% 92%); --tinta-suave:hsl(228 10% 62%);--borde:hsl(223 12% 24%);--indigo-flojo:hsl(242 30% 22%); /* de noche el post-it no puede ser amarillo brillante: es papel, no un foco */ --postit:hsl(45 22% 18%);--postit-borde:hsl(45 45% 42%);--postit-firma:hsl(45 15% 62%);} } *{box-sizing:border-box} /* El tamano HEREDADO: lo usa todo lo que no fija el suyo. Estuvo en 14px --fuera de escala-- hasta el 2026-08-24, porque bajarlo encoge de golpe media aplicacion y desde el entorno de desarrollo no se veia el resultado. Se hizo el dia que se pudo mirar: mira el Registro del expediente, que es lo que mas hereda. */ body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);font-size:var(--letra)} /* ── EL TEXTO CORRIDO LLEVA MEDIDA ─────────────────────────────────────────── Un párrafo dentro de la aplicación no pasa de `--medida`. Va por ELEMENTO y no por una lista de clases: `.nada`, `.plazo-aviso`, `.como-entrar`, `.explica`… son la misma cosa escrita seis veces, y una lista se queda corta con la séptima. En un párrafo corto —las migas, el nombre del cliente— no se nota: un tope sólo actúa sobre lo que llega a él. 🔑 MENOS EL ESCRITO, que no es la aplicación: es el documento que redacta el letrado y su ancho es suyo. Por eso `.tiptap` se sale, y se sale AQUÍ, donde se lee la regla. */ main p, dialog p{max-width:var(--medida)} .tiptap p{max-width:none} /* ── LA RETÍCULA DE PUNTOS = "superficie de escritorio" ───────────────────── Solo en el fondo, nunca en tarjetas (lenguaje visual §2). Valores calcados de `.agenda-dot-grid` de Base44 --punto de 1px cada 16px, del color del borde-- y no aproximados a ojo: era 22px y un gris propio, y la diferencia se notaba en que la superficie parecía lisa. La retícula no se ve, se NOTA; si hay que buscarla, sobra. */ .escritorio{ background-image:radial-gradient(circle,var(--borde) 1px,transparent 1px); background-size:16px 16px; } @media (prefers-color-scheme:dark){ .escritorio{background-image:radial-gradient(circle,hsl(0 0% 100% / .06) 1px,transparent 1px)} } /* ── La sala: la columna de trabajo ────────────────────────────────────────── 🔴 Estaba declarada SEIS veces, con CUATRO anchos distintos —860, 880, 900 y 940— y dos rellenos —22px y 26px—. Nadie eligió eso: se escribió en seis ficheros en seis días, y cada uno parecía razonable donde estaba. Es la misma deriva que tenían los tamaños de letra, y se ve igual de poco y se nota igual. 📌 Y el ancho sube a 1100. En una pantalla normal —1707 px de ancho, que es lo que da un monitor de 1920 al 112%— una columna de 900 usa **la mitad**: el resto es fondo. Eso pasaba con la lista de 463 pruebas de AFISELAR, que salía en una columna estrecha, con su propia barra de desplazamiento y los nombres cortados, mientras sobraban 700 px a la derecha. ⚠️ Ancho de columna NO es ancho de párrafo. Lo que se lee seguido —`.proposito`, el texto del estado vacío— sigue topado en `ch`, que es lo que mide de verdad una línea legible. Aquí lo que se ensancha son listas y tablas, que es donde 700 px valen para algo. */ .sala{max-width:1100px;margin:0 auto;padding:var(--hueco-6) var(--hueco-5) calc(var(--hueco-7) * 2)} header{ display:flex;align-items:baseline;gap:var(--hueco-4);padding:var(--hueco-3) var(--hueco-5); background:var(--tarjeta);border-bottom:1px solid var(--borde); } /* 🔴 La marca es un ENLACE, no el título de la página. Hasta el 2026-08-24 nueve pantallas abrían con `

LexOmnia

`, así que el índice de encabezados de un lector de pantalla decía «LexOmnia» en todas y en ninguna decía qué pantalla era. El nombre del producto se sabe; lo que hay que anunciar es dónde has entrado. */ header .marca{ font-size:var(--letra-media);font-weight:600;color:inherit;text-decoration:none; } header .marca:hover{color:var(--indigo-tinta)} /* Y el hueco de al lado dice UNA cosa que la barra no puede decir: en qué expediente estás. Cuando repetía el nombre de la sección —«Expedientes» junto a la pestaña «Expedientes»— la misma palabra salía dos veces seguidas, y en la ficha del expediente, tres. */ header .caso{color:var(--tinta-suave)} /* 🔑 QUIÉN ERES NO ES UN SITIO AL QUE IR. Tu nombre salía pegado detrás del último enlace de la barra, del mismo gris y casi del mismo tamaño: leído deprisa parecía una séptima sección. Se va al otro lado, junto a Salir, que es lo único que se hace con él. El `margin-left:auto` lo lleva el nombre y ya no el botón: así los dos viajan juntos. En las pantallas sin nombre —ninguna hoy— el botón sigue solo a la derecha por el `margin-left:auto` de la clase `.salir` que hay debajo. */ header .meta{margin-left:auto} header button.salir{ margin-left:auto;font:inherit;font-size:var(--letra-chica);color:var(--tinta-suave); background:none;border:1px solid var(--borde);border-radius:var(--radio);padding:var(--hueco-1) var(--hueco-3);cursor:pointer; } header .meta + button.salir{margin-left:0} header button.salir:hover{color:var(--tinta);border-color:var(--tinta-suave)} .panel{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio-caja); height:100%;display:flex;flex-direction:column;overflow:hidden} /* h1 o h2 según lo que el panel SEA en esa pantalla: en el editor el panel del escrito es la pantalla entera y su título es el h1; el de al lado, «Documentos», es una sección. La pinta es la misma porque el sitio es el mismo. */ .panel > :is(h1, h2){ margin:0;padding:var(--hueco-3) var(--hueco-4);font-size:var(--letra-chica);font-weight:600;letter-spacing:.05em; text-transform:uppercase;color:var(--tinta-suave);border-bottom:1px solid var(--borde); display:flex;align-items:center;gap:var(--hueco-2) } .panel > .cuerpo{overflow:auto;padding:var(--hueco-6) var(--hueco-7)} .meta{font-size:var(--letra-menuda);color:var(--tinta-suave)} .cargando,.vacio{padding:var(--hueco-7) var(--hueco-6);text-align:center;color:var(--tinta-suave)} /* h2 o h3 segun DONDE caiga el vacio: dentro de un bloque es un nivel por debajo de su titulo, y a pantalla completa cuelga del h1. Se ve igual en los dos sitios -- lo que cambia es el indice de encabezados, que es lo que se recorre sin ver. */ .vacio :is(h2, h3){color:var(--tinta);font-size:var(--letra-media);margin:0 0 var(--hueco-2)} /* El estado vacío dice POR QUÉ está vacío y qué hacer, no «no hay nada». Por eso tiene anchura de lectura: cabe una frase, y una frase es lo que hace falta. Y cuando la salida existe, la salida es un botón: ver `web/comun/vacios.js`. */ .vacio p{margin:0 auto;max-width:56ch;line-height:1.62} .vacio > .principal{display:inline-block;margin-top:var(--hueco-4);text-decoration:none} /* ════════════════════════════════════════════════════════════════════════════ EL VOCABULARIO COMPARTIDO ════════════════════════════════════════════════════════════════════════════ 🔴 POR QUÉ ESTO ESTÁ AQUÍ, medido el 2026-08-24: había 1.157 líneas de CSS repartidas por las pantallas y 110 compartidas. La clase del estado vacío estaba declarada TRECE veces, la del encabezado trece, la del formulario trece. Cada pantalla se inventaba su tabla, su chip y su estado vacío, y por eso ninguna se parecía del todo a la de al lado. Eso es lo que se ve como «diseño muy básico»: no es que falte adorno, es que no hay VOCABULARIO. Un lenguaje visual son piezas que se repiten; si cada pantalla dibuja su propia tabla, no hay lenguaje, hay diez dialectos. 📌 Lo que entra aquí es lo que aparece en DOS O MÁS pantallas. Lo que sólo usa una se queda en su HTML: subirlo sería hacer general algo que nadie más necesita, y eso engorda el fichero que todo el mundo se descarga. ════════════════════════════════════════════════════════════════════════════ */ /* ── La navegación ─────────────────────────────────────────────────────────── Se pinta desde web/comun/navegacion.js, no se escribe a mano en cada HTML: cada pantalla ofrecía enlaces distintos y ninguna llevaba a todas partes. */ nav.sitios{display:flex;gap:var(--hueco-1);margin-left:var(--hueco-4)} nav.sitios a{ font-size:var(--letra-chica);color:var(--tinta-suave);text-decoration:none; padding:var(--hueco-1) var(--hueco-3);border-radius:var(--radio);white-space:nowrap; border:1px solid transparent; } nav.sitios a:hover{color:var(--tinta);background:var(--papel)} /* Índigo SÓLO para lo activo (lenguaje visual §2). Aquí «lo activo» es dónde estás. */ nav.sitios a.aqui{color:var(--indigo-tinta);background:var(--indigo-flojo);font-weight:600} @media (max-width:900px){ nav.sitios{margin-left:0;order:99;width:100%;overflow-x:auto;overflow-y:hidden;padding-bottom:var(--hueco-1)} header{flex-wrap:wrap;row-gap:var(--hueco-2)} } /* ── El encabezado de una sala ─────────────────────────────────────────────── Título y, debajo, la frase que dice de qué va la pantalla. La frase no es decoración: es donde se escribe lo que la pantalla NO hace, que es lo que nadie adivina. */ .encabezado{display:flex;align-items:baseline;gap:var(--hueco-4);margin:0 0 var(--hueco-2);flex-wrap:wrap} .encabezado h1{margin:0;font-size:var(--letra-titulo);font-weight:600} .proposito{margin:0 0 var(--hueco-5);font-size:var(--letra-chica);line-height:1.62;color:var(--tinta-suave); max-width:var(--medida)} /* ── Las migas ─────────────────────────────────────────────────────────────── De dónde vienes, encima del título. Estaba declarada igual en dos pantallas —la ficha del expediente y la carga— con las mismas tres reglas escritas dos veces. 📌 No sustituye a la barra de arriba y no repite lo mismo: la barra dice a qué SECCIÓN vas, las migas dicen de qué expediente cuelga ESTA pantalla. Por eso en la carga son dos («Expedientes · el expediente») y en la ficha una. */ .migas{font-size:var(--letra-chica);color:var(--tinta-suave);margin:0 0 var(--hueco-4)} .migas a{color:var(--indigo-tinta);text-decoration:none} .migas a:hover{text-decoration:underline} /* ── La tabla ──────────────────────────────────────────────────────────────── Densidad primero (lenguaje visual §0: «la densidad de información manda»). Las cifras en tabulares y a la derecha: una columna de importes que no cuadra en vertical obliga a leerla número a número. */ .envoltorio{overflow-x:auto} table.listado{width:100%;border-collapse:collapse;font-size:var(--letra-chica); background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio-caja);overflow:hidden} table.listado th{text-align:left;font-size:var(--letra-sello);text-transform:uppercase;letter-spacing:.05em; color:var(--tinta-suave);font-weight:600;padding:var(--hueco-2) var(--hueco-3);border-bottom:1px solid var(--borde)} table.listado td{padding:var(--hueco-2) var(--hueco-3);border-bottom:1px solid var(--borde);vertical-align:top} table.listado tbody tr:last-child td{border-bottom:0} table.listado tbody tr:hover{background:var(--papel)} table.listado .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} table.listado a{color:var(--indigo-tinta);text-decoration:none} table.listado a:hover{text-decoration:underline} /* ── El chip ───────────────────────────────────────────────────────────────── Una etiqueta, no un botón. Los colores son los semánticos del lenguaje visual: rojo sólo para riesgo, ámbar para aviso, verde para validado. Nunca decorativos. */ .chip{display:inline-block;font-size:var(--letra-sello);text-transform:uppercase;letter-spacing:.05em; /* Igual que el aviso: 1px de alto. La escala de huecos es para cajas, no para pildoras. */ padding:1px var(--hueco-2);border-radius:var(--radio-pildora);border:1px solid var(--borde); color:var(--tinta-suave);vertical-align:middle;white-space:nowrap} .chip.avisa{border-color:var(--ambar);color:var(--ambar)} .chip.riesgo{border-color:var(--rojo);color:var(--rojo)} .chip.bien{border-color:var(--verde);color:var(--verde)} .chip.activo{border-color:var(--indigo-tinta);color:var(--indigo-tinta);background:var(--indigo-flojo)} /* El sello de registro de entrada: monoespaciada, como un cuño (lenguaje visual §4). */ .chip.sello{font-family:var(--sello);text-transform:none;letter-spacing:0} /* ── Las pestañas ──────────────────────────────────────────────────────────── Para dividir UNA pantalla, no para navegar entre pantallas: eso lo hace nav.sitios, y que las dos cosas se parecieran sería confundir «dónde estoy» con «qué miro aquí». 📌 Esta versión viene de la pantalla de Expediente, que la tenía mejor que la que se escribió para el vocabulario: el subrayado se pinta con ::after en vez de con border-bottom —así no pelea con la línea de la propia barra— y cabe un contador al lado del nombre. Al subir vocabulario se sube la MEJOR versión que ya existe, no la más reciente. */ nav.pestanas{ display:flex;gap:var(--hueco-5);align-items:flex-end;margin:0 0 var(--hueco-4); border-bottom:1px solid var(--borde);overflow-x:auto;overflow-y:hidden } /* 🔴 `overflow-y:hidden` NO sobra, aunque nadie quiera desplazar una barra de pestañas hacia abajo. En CSS, si un eje deja de ser `visible` y el otro no se toca, el otro se convierte en `auto` solo. Y aqui habia 1px de desbordamiento vertical --el subrayado de la pestaña activa, que va a `bottom:-1px` para pisar la linea de la barra-- asi que el navegador pintaba una BARRA DE DESPLAZAMIENTO VERTICAL dentro de una franja de 30px de alto: dos flechitas sueltas flotando sobre la tabla, y 20px de ancho menos para las pestañas. Se veia en «La ley». */ nav.pestanas button{ position:relative;font:inherit;font-size:var(--letra);color:var(--tinta-suave); background:none;border:0;padding:var(--hueco-1) 1px var(--hueco-2);cursor:pointer;white-space:nowrap; display:flex;align-items:center;gap:var(--hueco-2) } nav.pestanas button:hover{color:var(--tinta)} nav.pestanas button.activa{color:var(--tinta);font-weight:600} nav.pestanas button.activa::after{ content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:var(--radio-pildora); background:var(--indigo-fondo) } /* El contador es opcional: la pantalla que no lo necesite, no pinta el elemento. */ nav.pestanas .cuenta{ font-size:var(--letra-sello);font-weight:500;color:var(--tinta-suave); border:1px solid var(--borde);border-radius:var(--radio-pildora);padding:0 var(--hueco-2) } nav.pestanas button.activa .cuenta{border-color:var(--indigo-tinta);color:var(--indigo-tinta)} /* ── Un formulario ─────────────────────────────────────────────────────────── La etiqueta ARRIBA y no al lado: al lado, las etiquetas largas del castellano jurídico («Comunicación al arrendatario para recuperar la vivienda») descuadran la rejilla entera. */ .formulario{display:flex;gap:var(--hueco-3);flex-wrap:wrap;align-items:flex-end; background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio-caja);padding:var(--hueco-4) var(--hueco-5)} .formulario label{display:flex;flex-direction:column;gap:var(--hueco-1)} .formulario label > span{font-size:var(--letra-sello);text-transform:uppercase;letter-spacing:.05em; color:var(--tinta-suave);font-weight:600} .formulario input,.formulario select,.formulario textarea{ font:inherit;font-size:var(--letra);padding:var(--hueco-2);border:1px solid var(--borde);border-radius:var(--radio); background:var(--papel);color:var(--tinta)} .formulario input:focus,.formulario select:focus,.formulario textarea:focus{ outline:2px solid var(--indigo-tinta);outline-offset:1px;border-color:var(--indigo-tinta)} .formulario input[type=number]{text-align:right;font-variant-numeric:tabular-nums} /* 🔴 Era `button.principal`, y `vacio()` pinta un `` cuando la salida lleva a otro sitio. O sea que la unica accion de un estado vacio se quedaba en texto suelto, sin fondo y sin forma de boton: justo la que tenia que verse. Se pinta igual sea enlace o boton; lo que se elige al escoger uno u otro es lo que HACE --un enlace se abre en otra pestaña y un boton no--, no lo que aparenta. */ .principal{font:inherit;font-size:var(--letra);padding:var(--hueco-2) var(--hueco-5);border:0;border-radius:var(--radio); background:var(--indigo-fondo);color:#fff;cursor:pointer;display:inline-block;text-decoration:none} .principal:hover{filter:brightness(1.08)} .principal:disabled{opacity:.55;cursor:progress;filter:none} /* ── Una cifra ─────────────────────────────────────────────────────────────── `.manda` para la que se lee primero. `.sin` para «no consta», que NO es un cero: se pinta en gris y en cursiva justo para que no se copie por descuido a un escrito. */ .cifras{display:flex;gap:var(--hueco-2);flex-wrap:wrap} .cifra{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio-caja); padding:var(--hueco-3) var(--hueco-4);min-width:11em} .cifra .etiqueta{display:block;font-size:var(--letra-sello);text-transform:uppercase;letter-spacing:.05em; color:var(--tinta-suave);font-weight:600;margin-bottom:var(--hueco-1)} .cifra .valor{font-size:var(--letra-grande);font-variant-numeric:tabular-nums} .cifra.manda{border-color:var(--indigo-tinta)} .cifra.manda .valor{color:var(--indigo-tinta);font-weight:600} .cifra.sin .valor{font-size:var(--letra-media);color:var(--tinta-suave);font-style:italic} /* ── Lo que no se sabe ─────────────────────────────────────────────────────── Un aviso de que falta un dato va ARRIBA y en rojo, antes que ninguna cifra. Debajo del total es un aviso que nadie lee — y el número se copia igual. */ .descubierto{border:1px solid var(--rojo);border-left-width:3px;border-radius:var(--radio-caja); padding:var(--hueco-3) var(--hueco-4);margin:0 0 var(--hueco-4);background:hsl(0 70% 50% / .045)} .descubierto strong{display:block;font-size:var(--letra);color:var(--rojo);margin-bottom:var(--hueco-1)} .descubierto p{margin:0;font-size:var(--letra-chica);line-height:1.6;max-width:var(--medida)} p.error{color:var(--rojo);font-size:var(--letra-chica);margin:0} /* ════════════════════════════════════════════════════════════════════════════ LO QUE HACE QUE ESTO SE PUEDA USAR SIN RATÓN Y SIN VER LA PANTALLA ════════════════════════════════════════════════════════════════════════════ 🔴 MEDIDO el 2026-08-24, antes de escribir nada de esto: en todo `web/` había **cero** `aria-live`, **cero** `role`, `
` en dos pantallas de diez, y **ningún anillo de foco en enlaces ni en botones** — sólo en las cajas de texto. O sea: quien navega con el teclado no veía dónde estaba, y quien no ve la pantalla no se enteraba de que algo había cargado, fallado o guardado. 📌 No es una casilla que marcar. Un expediente lo abre quien lo abre: un letrado con la mano ocupada tomando notas navega con el teclado, y un plazo que vence no puede depender de ver un color. Y va aquí arriba, en el vocabulario, por lo de siempre: repartido por diez pantallas, en tres semanas hay diez versiones y dos que se olvidaron. ════════════════════════════════════════════════════════════════════════════ */ /* ── El anillo de foco ─────────────────────────────────────────────────────── `:focus-visible` y no `:focus`: el navegador ya sabe distinguir «llegué aquí con el teclado» de «lo acabo de pulsar con el ratón», y poner el anillo en los dos casos es justo lo que lleva a la gente a quitarlo con `outline:none`. Que es como se llegó aquí. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{ outline:2px solid var(--indigo-tinta); outline-offset:2px; border-radius:var(--radio); } /* Dentro de una tabla o de una barra apretada, el anillo se sale; pegado se ve igual. */ :where(td, th, nav.pestanas) :where(a, button):focus-visible{outline-offset:1px} /* ── Apagado sin apagarlo ──────────────────────────────────────────────────── 🔴 Se ve igual que `disabled` y NO lo está, que es justo lo que hace falta: un botón `disabled` no puede tener el foco, así que apagar el que acabas de pulsar lo tira al `` y no lo devuelve. Medido el 2026-08-27 en veintidós sitios; el porqué entero está en web/comun/botones.js. ⚠️ Y son DOS cosas distintas, que el CSS de esta casa ya distinguía sin decirlo: «espera, que estoy» lleva el cursor de reloj; «no se puede» no lleva ninguno. Por eso el reloj va con `data-trabajando`, que sólo pone `mientrasTrabaja`, y no con el atributo a secas. ⚠️ Con `:where()`, que no puntúa: cada pantalla sigue mandando en el color de su botón. */ :where(button, a, [role="button"])[aria-disabled="true"]{opacity:.6;cursor:default} :where(button, a, [role="button"])[data-trabajando]{cursor:progress} /* ── Saltar al contenido ───────────────────────────────────────────────────── El primer tabulador de cualquier pantalla. Sin esto hay que recorrer los seis enlaces de la navegación en CADA pantalla antes de llegar a lo que se venía a hacer. No se esconde con `display:none` --eso lo saca del orden de tabulación y deja de existir-- sino sacándolo de la pantalla hasta que recibe el foco. */ a.saltar{ position:absolute;left:8px;top:-60px;z-index:99; background:var(--indigo-fondo);color:#fff;text-decoration:none; padding:var(--hueco-2) var(--hueco-4);border-radius:0 0 var(--radio) var(--radio);font-size:var(--letra); } a.saltar:focus{top:0} /* ── Que no se mueva la pantalla si te has cansado de que se mueva ─────────── Preferencia del sistema, no un ajuste de la aplicación: quien la ha puesto, la ha puesto para todo. Se apaga TODO --transiciones incluidas-- y no sólo el latido de los plazos, que era lo único que la respetaba. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* ── Lo que se dice sin verse ──────────────────────────────────────────────── Un texto que sólo lee el lector de pantalla. Para poner nombre a algo que en la pantalla se entiende por su sitio y fuera de ella no se entiende por nada. */ .solo-lectura-de-pantalla{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0; } /* ── 🔴 `hidden` ESCONDE, SIEMPRE ──────────────────────────────────────────── El atributo `hidden` es un `display:none` de la hoja del navegador, y esa hoja pierde contra CUALQUIER regla nuestra que ponga `display`. O sea que `label{display:grid}` --que es lo que hay en todos los formularios de esta casa-- deja a `hidden` sin efecto y el campo sigue ahi. Medido el 2026-08-29 poniendo el formulario de una parte: «Nº de colegiado» sale escondido a quien no es abogado, y salia igualmente. Y al buscar la forma aparecio que ya habia pasado DOS VECES --`ol.numerados[hidden]` y `form.abrir[hidden]`, dos parches sueltos en la misma pantalla-- y una tercera sin parchear: el campo «Órgano» del procedimiento, que tenia que desaparecer al elegir extrajudicial y no desaparecia desde el dia que se escribio. Un parche por selector no vale, porque el siguiente formulario vuelve a caer. Esta regla es general y por eso lleva `!important`: no compite con nada, cierra la puerta. ⚠️ Y `plegable` (web/comun/paneles.js) esconde TODOS los paneles con `hidden`. Sin esto, cualquier panel al que alguien le ponga `display` nace abierto sin que se note. */ [hidden]{display:none !important} /* ── Los modificadores ─────────────────────────────────────────────────────── 🔑 LA REGLA, y la comprueba `web/comun/vocabulario.prueba.js`: una pantalla NO redefine un selector compartido. Si necesita una variante, la variante vive aquí con su nombre. No es formalismo: al medir el 2026-08-24 había veinticuatro reglas repetidas con el MISMO selector y valores distintos —el estado vacío con 40, 44 y 52 px de relleno según la pantalla; el ancho de lectura en 52, 54 y 56ch—. Nadie lo decidió; cada uno escribió un número razonable. Así es como un lenguaje visual se deshace: no de golpe, sino un píxel cada vez. */ /* Un encabezado sin frase debajo necesita respirar más: sin `.proposito`, los 6px del compartido dejan el título pegado al contenido. */ .encabezado.suelto{margin-bottom:var(--hueco-5)} /* Un formulario en columna, para filtros y altas: las etiquetas largas del castellano jurídico caben mal en una fila. */ .formulario.encolumnado{display:grid;gap:var(--hueco-3);align-items:stretch} .formulario.encolumnado label{display:grid;gap:var(--hueco-1);font-size:var(--letra-chica);color:var(--tinta-suave)} /* El botón que ocupa el ancho: sólo donde hay UNA acción y ninguna otra cosa que hacer —entrar, básicamente—. En una pantalla con más botones sería gritar. */ .principal.ancho{width:100%;font-size:var(--letra-media);font-weight:600; padding:var(--hueco-3) var(--hueco-4);border-radius:var(--radio)}