/* ============================================================ SOCIO LEGAL — Sistema de diseño v1.0 "El socio que nunca duerme." ------------------------------------------------------------ Paleta: navy (autoridad) + oro (prestigio) + marfil (papel legal) Tipografía: Playfair Display (marca/títulos) + Inter (UI) Tokens semánticos; dark mode por intercambio de variables. Los selectores conservan las clases/IDs que usa el JS existente. ============================================================ */ :root { /* Marca */ --navy-950: #081019; --navy-900: #0d1b2a; --navy-800: #122438; --navy-700: #1a334e; --gold: #c5a059; /* Tinte del DESTELLO que señala una fila. A propósito NO es `--gold-soft`: ése es el del `:hover` y un destello que se ve igual que el ratón encima no señala nada. Ver `.doc-resaltado`. */ --gold-flash: rgba(197, 160, 89, 0.42); --gold-strong: #a9853d; --gold-soft: rgba(197, 160, 89, 0.14); --wa: #25d366; /* verde WhatsApp — solo para la acción real de enviar por WhatsApp */ /* Ámbar FIJO — no cambia con la paleta. Para estados semánticos (etiqueta "Para hoy") y el acento del KPI "Expedientes Activos". */ --amber: #c5a059; --amber-strong: #a9853d; --amber-soft: rgba(197, 160, 89, 0.14); /* Acento para TEXTO/íconos según el fondo (legibilidad en toda paleta): --accent-ink → sobre superficies claras/soft (oscuro en claro, claro en oscuro) --accent-on-deep → sobre el fondo institucional PROFUNDO (siempre claro) */ --accent-ink: var(--gold-strong); /* respaldo */ /* 78% y no 84%: al 84% se quedaba en 4.12 de contraste sobre el fondo marfil, por debajo del mínimo de 4.5. Al 78% da 4.65 con margen. A ojo la diferencia es nula (rgb 142,112,51 → 132,104,48), pero el texto dorado pequeño pasa de "se intuye" a "se lee". Se sigue derivando del dorado del estudio, así que un despacho que ponga su propio color hereda el mismo arreglo automáticamente. */ --accent-ink: color-mix(in srgb, var(--gold-strong) 78%, #000000); --accent-on-deep: #ecd9a6; /* respaldo si el navegador no soporta color-mix */ --accent-on-deep: color-mix(in srgb, var(--gold) 60%, #ffffff); /* Superficies (marfil cálido, no blanco hospital) */ --bg: #f4f1ea; --paper: #fcfbf7; --card: #ffffff; --line: #e7e2d6; --line-strong: #d8d2c2; /* Tinta */ --ink: #1c2534; --ink-2: #4c5567; /* Gris de los textos pequeños (fechas, contadores, notas al pie, rótulos). Era #7d8593 y se quedaba en 3.3 de contraste sobre el fondo marfil, por debajo del mínimo legible de 4.5. Afectaba a 81 textos de la app a la vez, casi todos de 9 a 12 px: justo los que más cuesta leer, y en la pantalla de alguien que revisa plazos a diario. Se oscureció conservando el mismo tono azulado (no cambia el aspecto, sólo se lee): ahora da 4.5 sobre el fondo, 4.9 sobre el papel y 5.1 sobre las tarjetas blancas. El modo oscuro ya cumplía (5.3-6.1). */ --ink-3: #686e7a; /* Semánticos */ --danger: #b3362a; --danger-bg: #fbeeec; --success: #14735a; --success-bg: #e9f4f0; --warning: #a8721c; --warning-bg: #faf3e3; /* 🪦 `--vino` (#7b1e3a) SE RETIRÓ ENTERO el 2026-08-08, y en dos pasos. Pintaba DOS cosas a la vez: las audiencias y la advertencia jurídica, y por eso tocar una estropeaba la otra. Primero las audiencias salieron a su propio token (`--audiencia`); después las cuatro advertencias que quedaban pasaron a `--warning-txt`, porque una advertencia tiene que parecerse a las demás advertencias de la app y no a la marca del estudio. Sin usos, el token se borra en vez de dejarlo ahí: un color huérfano en la paleta acaba reapareciendo en el sitio equivocado. El motivo por el que se fue —tono 342°: a 3° del acento burdeos y a 23° del rojo de «vencido»— está medido junto al bloque AUDIENCIA de aquí abajo. */ --info: #2b5b8f; /* ---------- NOTA (2026-08-31) ---------- El color de lo que NO es un plazo: reuniones, diligencias, recordatorios. Lo pidió un estudio a través de Piero: *«no todo se basa en tareas, escritos y audiencias»*. 🔴 Lo que este color tiene que hacer, y es lo único que importa: **no parecerse al rojo de vencido ni al ámbar de hoy.** Una nota de la semana pasada no es un plazo que se dejó pasar, y si se pinta igual, el rojo deja de significar nada — que es la misma avería del `--vino` de arriba por el otro lado. Se elige el verde azulado #1d6a5e (tono 170°): · a 165° del rojo de vencido (#b3362a, 5°) — imposible confundirlos · a 130° del ámbar de hoy (#a8721c, 40°) · a 40° del azul de pendiente (#2b5b8f, 210°): la distancia más corta, pero es la pareja menos peligrosa (ninguno de los dos es una alarma) · sobre él, texto blanco da 5,6 de contraste (el mínimo son 4,5) 🪤 NO se reusa `--success` (#14735a), aunque se le parezca: ese token dice «salió bien», y una nota no ha salido de ninguna manera todavía. Dos significados en un color es de donde salió el problema del `--vino`. */ --nota: #1d6a5e; --nota-bg: #e8f3f0; /* ---------- AUDIENCIA ---------- 🔴 2026-08-08, lo pidió Piero: «todo parece de color rojo, y cuando cambiamos de colores con las paletas no queda bien». Tenía razón y se puede medir. La audiencia iba en `--vino` #7b1e3a, que está en el tono 342°: · a 23° del rojo de «vencido» (#b3362a, tono 5°) ⇒ de un vistazo son el mismo color, y entonces el rojo deja de significar «se acabó». · a 3° del acento de la paleta BURDEOS (#a83250, tono 345°) ⇒ en esa paleta la audiencia y el color del estudio son indistinguibles. Se buscó el tono con MÁS sitio libre respecto de TODO lo que comparte pantalla —los 4 semánticos y los 6 acentos de paleta—. El hueco más ancho de todos cae en el verde (101°) y se descartó a propósito: el verde ya significa «hecho» en esta app, y una audiencia a la que todavía no has ido no puede pintarse de «hecho». El siguiente es este morado ciruela: · 60° del rojo de vencido (antes 23°) · 40° del acento más cercano en las seis paletas (antes 3°) Es FIJO, como el ámbar: un color que SIGNIFICA algo no puede cambiar cuando el estudio elige otro color de marca; lo que tiene que hacer es convivir con los seis, y por eso se eligió por distancia y no por gusto. Las tres variantes son las mismas familias que el resto del sistema: relleno (letra blanca encima), letra en claro (sobre el peor fondo real) y letra sobre superficie oscura. Ver el bloque «COLOR DE TEXTO QUE SE LEE EN LOS DOS MODOS», más abajo. 🎨 2026-08-11 — SE AHONDA: #8e2d86 → #7d2a72. Piero: «el color ciruela que se parece un morado todavía no me convence […] ¿lo llegaste a comparar con todos los colores de las paletas?». RESPUESTA HONESTA: no del todo. Se había comparado contra los 6 ACENTOS y los 4 semánticos. Ahora sí contra los 40 colores del sistema —los 6 tonos de cada paleta (acento, acento fuerte y los cuatro azules de fondo) más los semánticos—, y el veredicto es que **no choca con nada**: lo más cercano en tono queda a 34° (el n800 de burdeos) y lo más cercano en distancia perceptiva a ΔE 29 (el n700 de púrpura), muy por encima del ~10-15 en que dos colores empiezan a confundirse. Y el hueco de 305° **es el único que queda**: los tonos ocupados son 5·20·40·164·210·261·345, y de los huecos, el más ancho (102°, verde) está vetado porque el verde ya significa «hecho». Moverlo de sitio lo empeora. ⇒ No se cambia de SITIO, se cambia de PROFUNDIDAD, que es lo que hace que lea a ciruela y no a morado: L del 37% al 33%, tono 305°→308°. Y todos los números mejoran a la vez: · relleno con letra blanca .... 7,32 → 8,58 · letra sobre el peor claro ... 5,42 → 6,36 · distancia a púrpura ......... 44° → 47° · distancia a burdeos ......... 40° → 37° (sigue holgada) `--audiencia-claro` (#e39ad6, tono 311°) NO se toca: ya pertenece a esta familia y sigue midiendo 6,29 sobre el peor fondo oscuro y 6,11 sobre su propio tinte al 12% — que es el fondo que de verdad hay debajo. ↩️ Si a Piero le sigue sin convencer, se revierte tocando SOLO estas dos líneas (`--audiencia` y `--audiencia-txt`) a #8e2d86. */ --audiencia: #7d2a72; /* Compat con código previo */ --white: #ffffff; --gray: var(--ink-3); --light-bg: var(--paper); /* ---------- SISTEMA DE CUADROS ---------- Se contaron 24 cuadros en la app con 18 rellenos distintos y 6 radios de esquina distintos. Había esquinas de 6 y de 7, de 9 y de 10: esa diferencia no se ve, y por eso mismo sólo aporta desorden. Y rellenos como "22 arriba, 26 a los lados, 18 abajo" en un mismo recuadro. El efecto era el que se nota al mirar la pantalla: cada cuadro parecía dibujado por una persona distinta. Ahora hay CUATRO niveles, y todo cuadro usa uno de ellos. El nivel se elige por el peso del cuadro, no por gusto: destacado → lo primero que se lee al entrar (el parte del sistema) normal → una tarjeta o un bloque con contenido propio compacto → una franja o una fila dentro de otro cuadro mínimo → botones, campos y pastillas Los rellenos son SIMÉTRICOS salvo en los compactos, donde el aire lateral es mayor que el vertical a propósito (una franja baja y ancha necesita más margen a los lados para no verse apretada). */ --caja-destacada: 40px; --caja-normal: 24px; --caja-compacta: 12px 16px; --caja-minima: 10px 12px; /* Sistema */ --r-lg: 14px; /* cuadros destacados y normales */ --r-md: 10px; /* cuadros compactos y columnas */ --r-sm: 7px; /* botones y campos */ /* PASTILLA (los extremos totalmente redondos: chips, contadores, etiquetas de estado). Se conseguía de dos maneras distintas: unas con 999px y otras poniendo a mano la mitad de la altura (20, 21, 22, 26...). El problema del segundo método es que sólo sale redondo si el alto no cambia; en cuanto el texto salta a dos líneas o el usuario agranda la letra, esas esquinas dejan de ser semicírculos y quedan a medio camino, mientras las de al lado siguen perfectas. Con 999px el extremo es siempre semicircular, mida lo que mida. */ --r-pastilla: 999px; --shadow-1: 0 1px 2px rgba(18, 26, 40, 0.05), 0 1px 6px rgba(18, 26, 40, 0.04); --shadow-2: 0 4px 14px rgba(18, 26, 40, 0.08), 0 2px 4px rgba(18, 26, 40, 0.05); --shadow-3: 0 18px 50px rgba(8, 16, 25, 0.28); /* ---------- TIPOGRAFÍA ---------- Inter para la interfaz, Playfair Display para marca y títulos. Decisión de Piero (2026-07-28): se probó cambiarlas por IBM Plex Sans + Fraunces y prefirió conservar las de siempre. Lo que SÍ se conserva de aquella prueba es lo que no dependía de la letra: las cifras de ancho fijo (más abajo, en `body`) y la regla de que los NÚMEROS nunca van en la letra de títulos. Ambas AUTOALOJADAS en vendor/fonts. */ --font-ui: "Inter", system-ui, -apple-system, sans-serif; --font-display: "Playfair Display", Georgia, serif; /* ---------- ESCALA DE TAMAÑOS ---------- La app llegó a tener 34 tamaños de letra distintos, con parejas como 11 y 11.5, 12 y 12.5, 9 y 9.5, y hasta un 11.8. Esa diferencia NO se ve — y ese es justamente el problema: dos rótulos que deberían leerse como iguales quedaban "casi iguales", y eso es lo que hace que una pantalla se sienta descuidada sin que se sepa señalar por qué. Se consolidó en ONCE pasos. Nadie se movió más de 1 px, salvo los textos de 8 y 9 px, que subieron a 10: por debajo de eso un abogado de cincuenta años no lee, y eran 41 sitios. Después se SUBIÓ UN ESCALÓN toda la franja pequeña (10→11, 11→12, 12→13): el 74% del texto de la app estaba a 12 px o menos, mientras que el cuerpo declarado era de 15. Es decir, la app decía tener un cuerpo cómodo pero en la práctica casi todo era letra chica. Medido antes de aplicarlo: 370 textos afectados, nada se desborda ni se recorta, y la página sólo crece un 1,4%. 🔎 06-09-2026 · SE MIDIÓ SI LA ESCALA SE CUMPLÍA, y no: **29 reglas estaban por debajo del suelo de 11 px** que este mismo bloque declara. No fue un descuido de nadie en concreto — es lo que le pasa a una regla escrita en un comentario que nada comprueba: se cumple el día que se escribe y va cediendo un 0,5 cada vez. Se subieron 17 (las que son TEXTO que se lee) y se dejaron doce a propósito: · 6 son ICONOS (glifos, no texto: un 10 px ahí es un tamaño de dibujo) · 3 viven en un `@media` de pantalla estrecha, donde el ancho está medido · 3 son la pastilla de fecha de la agenda y la barra 2–2 del celular, dos apreturas decididas a propósito el 31-08 y el 13-08 Lo vigila `pruebas/la-escala-de-la-letra.test.js`, que lista las excepciones por nombre: una nueva hay que ponerla ahí, o sea decidirla. REGLA: al añadir algo nuevo, usar uno de estos pasos. Si ninguno vale, probablemente el problema es la jerarquía, no el tamaño. 11 sello, contador diminuto 15 CUERPO (base de la app) 12 metadato, pie 17 subtítulo 13 secundario 19 título de bloque 14 texto de apoyo / destacado 22 título de sección 26 título de pantalla 34 saludo grande LA LETRA DE TÍTULOS (Playfair) SÓLO DE 19 PX PARA ARRIBA, y sólo en la marca y los momentos ceremoniales (entrada, saludo, cabecera de modal). Es una serif de mucho contraste: por debajo de ese tamaño se deshilacha, y si se usa en todas partes deja de destacar. El trabajo diario va en la letra de interfaz. Los números, NUNCA en la de títulos: no alinean. */ --speed: 180ms; --ease: cubic-bezier(0.25, 0.8, 0.25, 1); } body.dark-mode { /* Superficies NEUTRAS (baja saturación) para que cualquiera de las 6 paletas de acento se vea limpia y no choque en modo oscuro. */ --bg: #0d1117; --paper: #151a21; --card: #1a2029; --line: #2a313c; --line-strong: #37404d; --ink: #eef2f7; --ink-2: #b8c2d0; --ink-3: #8494a8; --light-bg: #101c2b; --white: #14212f; --danger-bg: rgba(179, 54, 42, 0.16); --success-bg: rgba(20, 115, 90, 0.16); --warning-bg: rgba(168, 114, 28, 0.16); /* 🪤 EL TINTE DE LA NOTA TAMBIÉN VA AQUÍ. En claro es un crema verdoso opaco (#e8f3f0); dejado tal cual sobre el fondo oscuro sería una mancha casi blanca. Es la trampa de los tintes que ya mordió con `--gold-soft`: un color de FONDO definido sólo en la paleta clara no falla, brilla. */ --nota-bg: rgba(29, 106, 94, 0.18); --gold-soft: rgba(197, 160, 89, 0.12); /* En oscuro el mismo tinte rinde menos: el fondo ya es oscuro y el dorado al 42% se queda en un gris sucio. Sube a 52%. */ --gold-flash: rgba(197, 160, 89, 0.52); /* Ámbar un punto más brillante para leerse sobre superficies oscuras */ --amber: #d8b877; --amber-strong: #cba85f; --amber-soft: rgba(197, 160, 89, 0.16); /* En oscuro, el texto de acento sobre chips soft debe ACLARARSE */ --accent-ink: #d8b877; /* respaldo */ --accent-ink: color-mix(in srgb, var(--gold) 55%, #ffffff); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.4); } /* ---------- Base ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* 🍎 EL IPHONE NO INFLA LA LETRA POR SU CUENTA (2026-08-13). Safari en iOS trae encendido su "ajuste automático de tamaño de texto": cuando le parece que un bloque es ancho para su letra, la agranda él solo. El resultado es que un rótulo medido aquí en 14px sale en el teléfono más grande y se parte donde no debería — que es como Piero vio «El Redactor» en dos líneas. Con `100%` se le dice que respete lo que dice la hoja. ⚠️ Esto NO impide hacer zoom con los dedos (eso sería `user-scalable=no`, que no se toca: hay abogados que lo necesitan para leer). */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-ui); font-size: 15px; line-height: 1.55; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; touch-action: manipulation; overflow-x: hidden; /* nada se desliza en horizontal salvo lo que tenga su propio scroll */ /* CIFRAS DE ANCHO FIJO EN TODA LA APLICACIÓN. Antes esto se ponía a mano clase por clase (27 sitios) y había que acordarse en cada número nuevo. Aquí se resuelve UNA vez: todo dígito de la app ocupa lo mismo, así que importes, plazos, fechas y números de expediente quedan en columna sin tocar nada más. Un 1 y un 8 miden igual, y una tabla de honorarios se lee de un vistazo. Las 27 declaraciones sueltas quedan como refuerzo inofensivo. */ font-variant-numeric: tabular-nums; } /* Los campos de formulario NO heredan font-variant-numeric del body: hay que dárselo aparte o el importe escrito baila respecto del calculado. */ input, select, textarea, table { font-variant-numeric: tabular-nums; } h1, h2, h3 { line-height: 1.25; } img { max-width: 100%; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; font-size: 14px; color: var(--ink); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 10px 12px; width: 100%; transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); } /* 🍎 LOS CAMPOS DE FECHA Y HORA, EN SU SITIO EN EL IPHONE (2026-08-13) ------------------------------------------------------------ 🔴 Lo vio Piero en su celular: en «Facturación» los dos campos de fecha salían MÁS ANCHOS que los demás, con el valor centrado y el borde derecho cortado por el filo de la pantalla. Los otros campos estaban perfectos. La causa es de Safari en iOS, y por eso aquí no se reproduce: a `` le da un ANCHO PROPIO calculado por su contenido y no lo deja encoger, así que el `width:100%` de la regla de arriba se queda corto; y encima centra el valor con `::-webkit-date-and-time-value`. Como el `` lleva `overflow-x:hidden`, lo que sobra no se puede desplazar: se CORTA. Eso es exactamente lo que se ve en su captura. ⚠️ No son dos campos: son 13 en toda la app (los plazos y las audiencias que se confirman cada día, la calculadora, la Carpeta y las sugerencias del Vigía). Por eso se arregla aquí, de una vez y para los que vengan, en vez de parchear Facturación. 🔑 `min-width: 0` es la pieza que importa: sin ella `width:100%` no puede bajar del ancho intrínseco que iOS le pone. */ input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; } input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value, input[type="datetime-local"]::-webkit-date-and-time-value, input[type="month"]::-webkit-date-and-time-value { text-align: left; margin: 0; } /* Botón que sustituye a un ponía su flecha. */ .ed-selector { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; cursor: pointer; font-family: inherit; font-size: 14px; color: var(--ink); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 10px 12px; transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease); } .ed-selector:hover { border-color: var(--gold); } .ed-selector i { color: var(--ink-3); font-size: 12px; flex: none; } .ed-selector span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } ::placeholder { color: var(--ink-3); } /* ============================================================ LOGIN — el primer apretón de manos ============================================================ */ #login-screen { position: fixed; inset: 0; z-index: 3000; display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: 1fr; background: var(--bg); overflow: hidden; } /* ---- Panel izquierdo: hero de marca ---- */ .login-hero { position: relative; overflow: hidden; display: flex; align-items: center; padding: 56px; color: #f5efe2; background: radial-gradient(900px 600px at 80% -10%, rgba(197, 160, 89, 0.16), transparent 60%), radial-gradient(700px 520px at -10% 110%, rgba(27, 51, 78, 0.9), transparent 55%), linear-gradient(160deg, var(--navy-900), var(--navy-950)); } .login-hero-grid { position: absolute; inset: 0; opacity: 0.16; background-image: linear-gradient(to right, rgba(197, 160, 89, 0.25) 1px, transparent 1px), linear-gradient(to bottom, rgba(197, 160, 89, 0.25) 1px, transparent 1px); background-size: 54px 54px; -webkit-mask-image: radial-gradient(120% 80% at 25% 20%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 80% at 25% 20%, #000 30%, transparent 75%); } .login-orb { position: absolute; border-radius: 50%; filter: blur(64px); pointer-events: none; } .login-orb.orb-1 { width: 300px; height: 300px; left: -70px; top: 56px; background: rgba(197, 160, 89, 0.26); animation: orbFloat1 12s ease-in-out infinite; } .login-orb.orb-2 { width: 340px; height: 340px; right: -60px; bottom: 24px; background: rgba(27, 51, 78, 0.7); animation: orbFloat2 15s ease-in-out infinite; } @keyframes orbFloat1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(14px, -22px); } } @keyframes orbFloat2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-18px, 24px); } } /* Aurora premium: sábana de luz oro/navy que gira lentísimo detrás del grid */ .login-hero::before { content: ""; position: absolute; z-index: 0; pointer-events: none; top: 50%; left: 50%; width: 150%; height: 150%; transform: translate(-50%, -50%); background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(197, 160, 89, 0.12) 55deg, transparent 130deg, rgba(27, 51, 78, 0.40) 210deg, transparent 300deg, rgba(197, 160, 89, 0.08) 350deg, transparent 360deg); filter: blur(48px); opacity: 0.85; animation: heroAurora 28s linear infinite; } @keyframes heroAurora { to { transform: translate(-50%, -50%) rotate(360deg); } } /* Viñeta: oscurece los bordes para dar profundidad y foco al texto */ .login-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(125% 105% at 50% 38%, transparent 52%, rgba(6, 12, 20, 0.58) 100%); } @media (prefers-reduced-motion: reduce) { .login-hero::before { animation: none; } } .login-hero-inner { position: relative; z-index: 2; max-width: 470px; animation: fadeUp 0.7s var(--ease) both; } .login-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); } .login-eyebrow.sm { letter-spacing: 2px; font-size: 11px; } .login-hero-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.05; letter-spacing: 0.3px; margin: 18px 0 16px; } .login-hero-title em { font-style: italic; color: var(--gold); } .login-hero-sub { font-size: 15px; line-height: 1.7; color: rgba(238, 242, 247, 0.62); max-width: 410px; } .login-hero-foot { position: absolute; left: 56px; right: 56px; bottom: 34px; z-index: 2; display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(238, 242, 247, 0.4); } /* ---- Panel derecho: formulario ---- */ .login-form-wrap { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 40px 30px; overflow-y: auto; } /* Los márgenes automáticos centran la tarjeta cuando hay espacio y la dejan deslizarse desde arriba (sin recortarse) cuando el formulario es alto —p. ej. el registro de estudio, que tiene más campos que el ingreso. */ .login-card { width: 100%; max-width: 400px; margin-top: auto; margin-bottom: auto; animation: fadeUp 0.55s var(--ease) both; } .login-brandrow { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 28px; } .login-wordmark { width: 100%; max-width: 250px; height: auto; display: block; } .login-brandrow .login-logo { width: 56px; height: 56px; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 3px 12px rgba(13, 27, 42, 0.22)); } .login-brand2 { font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 2px; } .login-welcome { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: 0.2px; color: var(--ink); margin-bottom: 28px; text-align: center; } .login-welcome span { display: block; color: var(--ink-3); font-weight: 600; } .login-field { text-align: left; margin-bottom: 16px; } .login-field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; } .login-inputwrap { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-pastilla); padding: 0 18px; transition: border-color var(--speed), box-shadow var(--speed); } .login-inputwrap i { color: var(--ink-3); font-size: 13px; } .login-inputwrap:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); } .login-inputwrap:focus-within i { color: var(--acento-txt); } .login-inputwrap input { flex: 1; height: 48px; padding: 0; border: none !important; background: transparent !important; box-shadow: none !important; color: var(--ink); font-size: 14px; } .login-ojo { cursor: pointer; padding: 6px; margin: -6px -6px -6px 0; } .login-ojo:hover { color: var(--acento-txt) !important; } /* Badge "Último uso" sobre el método de acceso usado la última vez */ .login-social-wrap { position: relative; } .ultimo-uso-badge { position: absolute; top: -10px; right: 14px; z-index: 2; background: #1f2937; color: #fff; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pastilla); box-shadow: 0 2px 6px rgba(0,0,0,.22); } .ultimo-uso-badge::after { content: ""; position: absolute; bottom: -4px; right: 16px; border: 5px solid transparent; border-top-color: #1f2937; border-bottom: 0; } .login-submit { position: relative; overflow: hidden; border-radius: var(--r-pastilla); height: 50px; margin-top: 8px; } /* Separador "o" y botón de Google */ .login-o { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .login-o::before, .login-o::after { content: ""; flex: 1; height: 1px; background: var(--line); } .btn-google { width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--line-strong); border-radius: var(--r-pastilla); background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .btn-google:hover { background: var(--paper); border-color: var(--gold); } .g-logo-img { width: 18px; height: 18px; object-fit: contain; display: block; } .login-submit::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent); } .login-submit:hover::after { transform: translateX(120%); transition: transform 0.7s ease; } #login-error { display: none; margin-top: 14px; font-size: 13px; color: var(--danger-txt); background: var(--danger-bg); border: 1px solid rgba(179, 54, 42, 0.35); border-radius: var(--r-sm); padding: 10px 12px; } #login-error.ok { color: var(--success-txt); background: var(--success-bg); border-color: rgba(20, 115, 90, 0.35); } .login-forgot { font-size: 12px; font-weight: 600; color: var(--acento-txt); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--speed); } .login-forgot:hover { border-bottom-color: var(--acento-txt); } .login-foot { margin-top: 24px; font-size: 11px; letter-spacing: 1px; color: var(--ink-3); text-transform: uppercase; text-align: center; } /* El pie del hero nunca debe encimarse con el texto centrado ni descuadrarse */ .login-hero-foot { flex-wrap: wrap; gap: 6px 16px; } .login-hero { align-items: center; padding-bottom: 88px; } /* deja sitio al pie absoluto */ /* Responsive: apila el hero arriba y el formulario abajo. Punto de quiebre a 940px para que a "media pantalla" ya apile (en vez de comprimir dos columnas y descuadrarse). */ @media (max-width: 940px) { #login-screen { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow-y: auto; } .login-hero { flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 30px 26px 22px; } .login-hero-foot { position: static; left: auto; right: auto; bottom: auto; margin-top: 20px; justify-content: flex-start; } .login-hero-title { font-size: clamp(24px, 6vw, 32px); margin: 10px 0 10px; } .login-hero-sub { font-size: 13px; } .login-form-wrap { padding: 28px 24px 44px; } } @media (max-width: 480px) { .login-hero { padding: 24px 20px 18px; } .login-hero-inner { max-width: 100%; } .login-hero-sub { max-width: 100%; } .login-welcome { font-size: 22px; } .login-form-wrap { padding: 24px 20px 40px; } } /* ---------- Botón principal (oro) ---------- */ .btn-gold { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; padding: var(--caja-compacta); /* El primer tono era el dorado FIJO #d0ae69: en la paleta vino el botón salía degradado de dorado a vino, dos familias de color a la vez. */ background: linear-gradient(180deg, var(--acento-btn-1), var(--acento-btn-2)); color: var(--sobre-acento); border: none; border-radius: var(--r-sm); font-size: 13px; font-weight: 700; letter-spacing: 0.3px; transition: transform 120ms var(--ease), box-shadow var(--speed) var(--ease), filter var(--speed); box-shadow: 0 2px 10px rgba(197, 160, 89, 0.28); } .btn-gold:hover { filter: brightness(1.06); box-shadow: 0 4px 16px rgba(197, 160, 89, 0.4); } .btn-gold:active { transform: scale(0.98); } .btn-gold:disabled { opacity: 0.55; cursor: not-allowed; } .btn-navy { background: linear-gradient(180deg, var(--navy-800), var(--navy-950)); color: #f0e6cf; box-shadow: 0 2px 10px rgba(8, 16, 25, 0.35); border: 1px solid rgba(197, 160, 89, 0.35); } .btn-navy:hover { box-shadow: 0 4px 16px rgba(8, 16, 25, 0.45); } /* ============================================================ ESTRUCTURA — sidebar + contenido ============================================================ */ #app-layout { display: none; min-height: 100dvh; } #sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; width: 244px; background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%); border-right: 1px solid rgba(197, 160, 89, 0.16); display: flex; flex-direction: column; padding: 26px 16px 18px; } /* En oscuro el sidebar va NEUTRO (independiente de la paleta) para no chocar con el contenido; el acento de la paleta sigue en íconos/activos. */ body.dark-mode #sidebar { background: linear-gradient(180deg, #12161d 0%, #0b0e13 100%); border-right-color: var(--line); } .sidebar-logo { text-align: center; padding: 6px 6px 22px; border-bottom: 1px solid rgba(197, 160, 89, 0.14); } .sidebar-logo svg { display: block; margin: 0 auto 2px; } .sidebar-logo img { display: block; width: 92px; height: 92px; margin: 0 auto 2px; object-fit: contain; } .brand-name { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: #f5efe2; display: block; margin-top: 10px; letter-spacing: 0.3px; line-height: 1.15; } .brand-name em { font-style: normal; color: var(--accent-on-deep); } .brand-tag { display: block; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(197, 160, 89, 0.75); margin-top: 6px; line-height: 1.4; padding: 0 4px; } /* Acción primaria de la barra: la única cosa de la izquierda que NO es un lugar. Va en dorado sólido para que se distinga de la lista de pestañas. */ .nav-accion { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 22px; padding: 12px 14px; border: none; border-radius: var(--r-md); background: linear-gradient(180deg, var(--acento-btn-1) 0%, var(--acento-btn-2) 100%); color: var(--sobre-acento); font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: .01em; cursor: pointer; box-shadow: 0 2px 10px rgba(197,160,89,.25); transition: transform var(--speed), box-shadow var(--speed), filter var(--speed); } .nav-accion:hover { filter: brightness(1.06); box-shadow: 0 4px 16px rgba(197,160,89,.35); transform: translateY(-1px); } .nav-accion:active { transform: none; } .nav-accion i { font-size: 13px; } .nav-menu { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; flex: 1; } /* El rótulo corto solo existe en el celular (ver el bloque de 860px). */ .nav-corto { display: none; } .nav-btn { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 12px 14px; background: transparent; border: none; border-radius: var(--r-md); color: rgba(238, 242, 247, 0.62); font-size: 13px; font-weight: 500; text-align: left; transition: background var(--speed) var(--ease), color var(--speed) var(--ease); position: relative; } .nav-btn i { width: 20px; text-align: center; font-size: 15px; color: rgba(197, 160, 89, 0.6); transition: color var(--speed); } .nav-btn:hover { background: rgba(197, 160, 89, 0.08); color: #eef2f7; } .nav-btn.active { background: var(--gold-soft); color: #f5efe2; font-weight: 600; } .nav-btn.active::before { content: ""; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent-on-deep); } .nav-btn.active i { color: var(--accent-on-deep); } .dark-mode-toggle { display: flex; align-items: center; gap: 10px; justify-content: center; min-height: 42px; padding: 10px; border: 1px solid rgba(197, 160, 89, 0.22); border-radius: var(--r-md); color: rgba(238, 242, 247, 0.6); font-size: 12px; font-weight: 600; letter-spacing: 1px; cursor: pointer; transition: background var(--speed), color var(--speed); } .dark-mode-toggle:hover { background: rgba(197, 160, 89, 0.1); color: var(--gold); } #main-content { flex: 1; /* ocupa TODO el ancho disponible (el sidebar es fixed) */ margin-left: 244px; padding: 22px 28px 90px; max-width: 100%; min-width: 0; /* evita que hijos anchos (kanban/tablas) empujen el layout */ overflow-x: hidden; transition: margin-right 280ms var(--ease); /* solo se corre al abrir el Socio */ } /* Las tablas anchas hacen scroll DENTRO de su tarjeta, no mueven la página. (Aquí había además `#tabla-dashboard-urgentes`, que ya no existe en ningún HTML ni JS: se retiró el 2026-08-13.) */ .card-body, .alerta-dinamica-card > div { max-width: 100%; } /* ---------- Cabecera ---------- */ header.glass { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--caja-compacta); box-shadow: var(--shadow-1); position: sticky; top: 14px; z-index: 90; } .search-container { position: relative; flex: 1; min-width: 260px; } .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 13px; pointer-events: none; } .search-bar { height: 42px; padding-left: 38px; border-radius: var(--r-pastilla); background: var(--paper); border-color: var(--line); font-size: 13px; } /* `.spotlight-results` vivía aquí y se retiró el 03-09-2026 con el segundo buscador (ver `buscarSpotlight` en app.js). `.spotlight-item` NO se toca: la usan las sugerencias de `#suggestions-list` en el registro de expedientes. */ .spotlight-item { padding: 12px 16px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--line); color: var(--ink-2); transition: background 120ms; } .spotlight-item:last-child { border-bottom: none; } .spotlight-item:hover { background: var(--gold-soft); } .spotlight-item b { color: var(--ink); } .header-actions { display: flex; align-items: center; gap: 16px; } /* LA BANDEJA DE LOS DOS PORTALES (06-09-2026) — ver el comentario de `#btn-bandeja-portales` en app.html. Es un botón con texto, no un icono suelto: «El CEJ y el SINOE» no se adivina de un símbolo, y era justo lo que Piero quería ver sin buscarlo. En pantalla estrecha se queda el icono, que es lo que cabe al lado de la campana y el registro. */ .btn-portales { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; height: 38px; padding: 0 14px; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--accent-ink); background: var(--gold-soft); border: 1px solid var(--gold); border-radius: var(--r-pastilla); white-space: nowrap; transition: background var(--speed), filter var(--speed); } .btn-portales:hover { background: var(--card); } .btn-portales i { font-size: 14px; } /* 🆕 14-09 · La burbuja de «por leer» se cuelga de la esquina del botón, igual que la de la campana: `.badge-campana` ya está medida y pide un padre colocado. Un poco más afuera porque el botón es una pastilla, no un círculo. */ .btn-portales { position: relative; } .btn-portales .badge-campana { top: -7px; right: -7px; } /* 🪤 DOS CONDICIONES, NO UNA. El `@media` mide la VENTANA, y con el Socio abierto la ventana no encoge: encoge el sitio para trabajar. `body.estrecho` es LA condición que significa «no hay sitio» en esta casa —la puso el 13-08 la cabecera de la Carpeta, que se salía justo por esto—, así que el botón se queda en icono también ahí. Sin la segunda, entre 1081 px y el punto en que el Socio aprieta, esta fila pelearía por el ancho con el buscador. */ @media (max-width: 1080px) { .btn-portales { padding: 0 12px; } .btn-portales-txt { display: none; } } body.estrecho .btn-portales { padding: 0 12px; } body.estrecho .btn-portales-txt { display: none; } .header-datetime-box { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); padding: 8px 14px; border-radius: var(--r-pastilla); white-space: nowrap; font-variant-numeric: tabular-nums; } .btn-campana { font-size: 15px; color: var(--ink-2); cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background var(--speed), color var(--speed); } .btn-campana:hover { background: var(--gold-soft); color: var(--acento-txt); } .badge-campana { position: absolute; top: -2px; right: -2px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; min-width: 17px; height: 17px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; padding: 0 4px; pointer-events: none; } #panel-auditoria { display: none; position: absolute; right: 0; top: 48px; z-index: 400; width: 340px; max-height: 380px; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 16px; } #panel-auditoria h4 { font-size: 13px; color: var(--ink); letter-spacing: 0.4px; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px; } .audit-item { font-size: 12px; color: var(--ink-2); padding: 8px 0; border-bottom: 1px dashed var(--line); } .audit-date { display: block; font-size: 11px; color: var(--acento-txt); font-weight: 600; margin-bottom: 1px; } /* Centro de notificaciones (campana) — avisos concretos y accionables */ #panel-notif { display: none; position: absolute; right: 0; top: 48px; z-index: 400; width: 380px; max-height: 420px; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 16px; } #panel-notif h4 { font-size: 13px; color: var(--ink); letter-spacing: 0.4px; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .notif-item { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--ink-2); padding: 10px 8px; border-bottom: 1px dashed var(--line); cursor: pointer; border-radius: var(--r-sm); transition: background var(--speed); } .notif-item:hover { background: var(--gold-soft); } .notif-item i { margin-top: 2px; flex-shrink: 0; } .notif-item.leida { opacity: .62; } .notif-item.n-crit i { color: var(--danger-txt); } .notif-item.n-hoy i { color: #b45309; } .notif-item.n-ok i { color: var(--acento-txt); } .notif-item.n-vig i { color: #1a7f37; } .notif-vacio { font-size: 12px; color: var(--ink-3); padding: 12px 4px; } /* 🔴 EN EL CELULAR SE SALÍAN DE LA PANTALLA (arreglado 2026-08-06). Los dos paneles cuelgan del icono con `right: 0` y miden 380 y 340 px. En un teléfono de 375 px de ancho eso desborda por la IZQUIERDA y el texto queda cortado contra el borde: se leía "ociolegal.pe" en vez de "sociolegal.pe". Se anclan a la VENTANA (`fixed`) y no al icono, con un margen a cada lado, de modo que su ancho lo manda la pantalla y no puede volver a pasar. Comprobado que `fixed` funciona aquí: ningún ancestro tiene `transform`, `filter` ni `backdrop-filter`, que son los que lo convertirían en `absolute` sin avisar (`.glass` es solo fondo, borde y sombra). */ @media (max-width: 640px) { #panel-notif, #panel-auditoria { position: fixed; left: 10px; right: 10px; top: 68px; width: auto; max-width: none; max-height: 70vh; } } /* Opt-in elegante de avisos push (dentro de la campana) */ #notif-push-cta { margin-top: 8px; padding: 12px 12px; border-radius: var(--r-md); background: var(--gold-soft); border: 1px solid var(--line); } #notif-push-cta .npc-txt { display: block; font-size: 12px; line-height: 1.45; color: var(--ink-2); } #notif-push-cta .npc-txt i { color: var(--acento-txt); margin-right: 6px; } #notif-push-cta .npc-btn { margin-top: 10px; width: 100%; padding: 8px 10px; cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .3px; color: var(--accent-on-deep); background: var(--navy-900); border: 1px solid var(--gold); border-radius: var(--r-sm); transition: filter var(--speed); } #notif-push-cta .npc-btn:hover { filter: brightness(1.15); } /* Las tres tandas de aviso. Antes esto era un desplegable con las 24 horas del día; ahora informa en vez de preguntar (ver `pintarTandasAvisos`). */ #notif-hora-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .notif-tandas-tit { font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; } .notif-tandas-tit i { color: var(--acento-txt); margin-right: 6px; } .notif-tandas { list-style: none; margin: 0; padding: 0; } .notif-tandas li { font-size: 12px; line-height: 1.5; color: var(--ink-2); padding: 3px 0 3px 10px; border-left: 2px solid var(--line); } .notif-tandas li b { color: var(--ink); font-variant-numeric: tabular-nums; } .notif-tandas-pie { margin-top: 6px; font-size: 11px; line-height: 1.45; color: var(--ink-3); } /* 🔔 09-09 · «Dónde te estoy avisando»: la lista de aparatos con su último acuse. Mismo bloque visual que las tandas —es la misma clase de dato, dentro de la misma campana— con una línea de estado por aparato. 🎨 El color va por `--senal-*` y no por el token crudo: es una SEÑAL sobre el fondo de la campana, y en oscuro el token crudo se apaga contra ella (es la regla que nació el 07-09 con la pastilla hueca a 1,08:1). 📐 Y el suelo de 11 px: aquí no baja de ahí ninguna línea. */ #notif-entregas { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .notif-entregas-lista li { padding: 5px 0 5px 10px; } .notif-entregas-lista .ent-ok { color: var(--success-txt); font-size: 11px; } .notif-entregas-lista .ent-mal { color: var(--warning-txt); font-size: 11px; } .notif-entregas-lista .ent-nada { color: var(--ink-3); font-size: 11px; } .notif-entregas-lista .ent-ok i, .notif-entregas-lista .ent-mal i { margin-right: 4px; } #usuario-rol-header { background: var(--navy-900) !important; color: var(--accent-on-deep); border: 1px solid var(--gold) !important; border-radius: var(--r-pastilla); font-weight: 700; letter-spacing: 0.6px; } /* ---------- FRANJA DEL VIGÍA (sustituyó a la barra de Fuentes) ---------- Datos reales del trabajo de anoche. ⚠️ 2026-08-06: aquí decía que los chips `.fuente-chip` de más abajo "siguen vivos porque los usa el modal de Consultas rápidas". Era falso por partida doble: ese modal pintaba `.fuente-card`, nunca `.fuente-chip`, y además se retiró junto con RUC/OSCE. Toda esa familia (`.fuente-chip`, `.fuentes-bar-tit`, `.fuentes-leyenda`, `.fuentes-ver`, `.fc-dot`, `.lg-dot` y las animaciones `fc-halo-*`) ya está BARRIDA: 45 líneas, cero elementos en pantalla y cero menciones en JS o HTML. 🔑 Lección: la primera acotación decía "≈705-750" y era corta — quedaba una `.fuentes-leyenda` suelta en un @media de la línea 2820. La cazó el control de "nadie la nombra fuera del rango", no la lectura a ojo. Al barrer CSS, buscar la clase en TODO el archivo, no solo alrededor del bloque. */ /* 🎨 06-09-2026 · LA FRANJA, EN DOS PISOS. Antes era UNA fila elástica donde caían el rótulo, la alarma, el remedio, los números y los botones, todos con el mismo peso: el ojo no tenía por dónde empezar. Ahora la caja es una columna con una CABECERA fija (rótulo + lo que se pulsa) y un CUERPO con las zonas. Ver el bloque de las tres zonas en `renderFranjaVigia` (js/parte.js). 🪤 El `flex-wrap` de antes es lo que permitía que el corte de línea cayera entre dos botones (medido el 10-08 en 32 de 51 anchos). Los botones siguen atados dentro de `.vg-acciones`; lo que cambia es que ahora viven en su propio piso y ni siquiera comparten fila con los datos. */ .vigia-bar { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 6px; padding: var(--caja-compacta); background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--r-lg); box-shadow: var(--shadow-1); } .vg-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .vg-cuerpo { display: flex; flex-direction: column; gap: 8px; } /* EL TITULAR: qué está pasando. La línea más grande de la franja. 🪤 EN COLUMNA, no en fila. Medido en el banco: cuando coinciden dos avisos —«llevo 6 días sin revisar el CEJ» y «el CEJ ahora exige identificarse»—, en fila caben los dos en el mismo renglón y se leen como UNA frase, con la segunda alarma disfrazada de coletilla de la primera. Son dos problemas distintos, con dos remedios distintos: uno por renglón. */ .vg-titular { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 13.5px; } /* 🪤 El titular se escribe como una FRASE, así que aquí `.vg-dato` deja de ser `inline-flex`: en flex, cada trozo de texto suelto es un elemento aparte, y al partirse en el celular «Llevo 3 días sin revisar el CEJ» y «— última vez, 02/09 22:27» quedaban en dos columnas en vez de seguir uno detrás de otro. Medido a 375 px. En bloque, el texto envuelve como texto. */ .vg-titular .vg-dato { display: block; font-size: inherit; line-height: 1.45; } .vg-titular .vg-dato > i:first-child { margin-right: 7px; } /* EL REMEDIO: lo único que se pulsa aquí dentro, y por eso tiene forma de cosa que se pulsa. Antes era una línea gris igual que los datos. */ .vg-remedios { display: flex; flex-direction: column; gap: 6px; } .vg-remedio { display: flex; align-items: center; gap: 9px; width: 100%; cursor: pointer; padding: 9px 12px; font-family: inherit; font-size: 12.5px; line-height: 1.45; text-align: left; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-sm); transition: border-color var(--speed), background var(--speed); } .vg-remedio:hover, .vg-remedio:focus-visible { border-color: var(--gold); background: var(--gold-soft); } .vg-remedio > span { flex: 1; min-width: 0; } .vg-remedio i:first-child { color: var(--accent-ink); font-size: 13px; flex: none; } .vg-remedio-ir { color: var(--ink-3); font-size: 11px; flex: none; } /* LOS NÚMEROS, en pastillas: se leen de un vistazo y no obligan a leer una frase entera para saber cuántos son. */ .vg-chips { display: flex; flex-wrap: wrap; gap: 8px; } /* 🪤 16-09 · LA MISMA TRAMPA QUE EN `.vg-titular .vg-dato`, Y AQUÍ SEGUÍA VIVA. Piero mandó la captura: «5 de tus 71 sin leer — ni una vez — cómo se arregla» salía en CUATRO COLUMNAS, con «ni / una / vez» una palabra por renglón. La causa es la de siempre: en `inline-flex` cada trozo de texto suelto y cada `` es un ELEMENTO de la fila, no palabras de una frase; al no caber, flex los encoge uno a uno y cada uno envuelve por su cuenta. Reproducido en el banco a 320 px: la pastilla se quedaba en 233 px de los 292 disponibles y ocupaba 2 renglones en columnas. En `inline-block` el texto envuelve COMO TEXTO y llena el ancho. 🔑 El hueco del icono deja de ser `gap` y pasa a ser su margen: `gap` separaba TODOS los trozos, que es justo lo que los convertía en columnas. */ .vg-chip { display: inline-block; max-width: 100%; padding: 5px 11px; font-family: inherit; font-size: 12px; line-height: 1.4; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pastilla); text-align: left; } button.vg-chip { cursor: pointer; transition: border-color var(--speed), background var(--speed); } button.vg-chip:hover, button.vg-chip:focus-visible { border-color: var(--gold); background: var(--gold-soft); color: var(--accent-ink); } button.vg-chip:disabled { cursor: default; opacity: .7; } .vg-chip i { color: var(--ink-3); font-size: 11px; } .vg-chip > i:first-child { margin-right: 6px; } /* Lo que va en negrita aquí son números, fechas y dos o tres palabras que se leen de golpe («ni una vez», «cómo se arregla»): partirlas por la mitad es lo que hacía que la franja se leyera como una tabla rota. Son cortas: nunca se salen aunque la letra del teléfono venga agrandada. */ .vg-chip b, .vg-dato b { white-space: nowrap; } .vg-chip b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; } .vg-chip-mal, .vg-chip-mal i { color: var(--warning-txt); } .vg-chip-mal { border-color: color-mix(in srgb, var(--warning-txt) 34%, transparent); background: var(--warning-bg); } .vg-chip-mal b { color: inherit; } .vg-chip-ok, .vg-chip-ok i { color: var(--success-txt); } .vg-chip-nuevo, .vg-chip-nuevo i, .vg-chip-nuevo b { color: var(--acento-txt); } .vg-chip-nuevo { border-color: color-mix(in srgb, var(--acento-txt) 34%, transparent); } .vg-chip-espera, .vg-chip-espera i { color: var(--ink-3); } /* EL PIE: la explicación larga, si hace falta. */ .vg-pie { display: flex; flex-direction: column; gap: 4px; } .vigia-bar-tit { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 8px; } /* Las acciones de la franja van empujadas a la derecha del todo para que no se mezclen con los datos y se lean como lo que son: lo único que se PULSA aquí. 🪤 2026-08-10 — el `margin-left:auto` estaba en `.vg-accion` (el botón) y no en esta caja, y los dos botones eran piezas sueltas de la fila elástica. El corte de línea podía caer entre ellos y los mandaba a esquinas opuestas (medido: se partían en 32 de 51 anchos, entre ellos todo 1140-1400 px; por eso al 90% de zoom se veían bien y al 100% no). Atados en una caja, la fila los mueve JUNTOS. El `auto` vive aquí ahora: no lo devuelvas al botón. */ .vg-acciones { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; } .vg-accion { display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; white-space: nowrap; height: 34px; padding: 0 14px; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--accent-ink); background: var(--card); border: 1px solid var(--gold); border-radius: var(--r-md); transition: background var(--speed), filter var(--speed); } .vg-accion:hover { background: var(--gold-soft); } .vg-accion:disabled { opacity: .65; cursor: default; } /* La segunda acción de la franja («Traer un mes anterior») es del mismo tipo que la primera y tiene que verse igual: mismo alto, misma forma, mismo icono. Sólo cambia el borde, que va apagado para que «Revisar mi casilla ahora» siga siendo la acción principal. La separación entre ambos la pone el `gap` de `.vg-acciones`, no un margen de este botón. */ .vg-accion.vg-accion-sec { border-color: var(--line-strong); color: var(--ink-2); } .vg-accion.vg-accion-sec:hover { border-color: var(--gold); background: var(--gold-soft); color: var(--accent-ink); } .vigia-bar.vg-alarma .vg-accion { color: var(--danger-txt); border-color: var(--danger-txt); } .vigia-bar.vg-aviso .vg-accion { color: var(--warning-txt); border-color: var(--warning-txt); } .vigia-revisar-res { margin: 0 0 10px; padding: 12px 16px; font-size: 13px; line-height: 1.6; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--r-lg); box-shadow: var(--shadow-1); } /* En pantalla estrecha las dos acciones dejan de ir a la derecha y pasan a ocupar el ancho entero, una debajo de otra. El `align-items:stretch` es lo que las hace anchas: en una columna flex, estirar ES el ancho completo — no hace falta `width:100%` en el botón. */ /* 🔴 06-09 · EN EL CELULAR, PRIMERO EL DIAGNÓSTICO Y DESPUÉS EL REMEDIO. Medido en el banco a 375 px: con la cabecera arriba, lo primero que salía eran los DOS botones a pantalla completa —«Revisar mi casilla ahora» y «Traer un mes anterior»— y la alarma («llevo 3 días sin revisar el CEJ») quedaba debajo de ellos. O sea que en el teléfono, que es donde Piero mira esto, se ofrecía la solución antes de contar el problema. 🔑 `display: contents` en la cabecera saca a sus dos hijos a la rejilla de la franja, y ahí se ordenan: rótulo, cuerpo, botones. Sin duplicar marcado ni pintar dos cabeceras distintas para el mismo estado. */ @media (max-width: 700px) { .vigia-bar { display: grid; grid-template-columns: 1fr; } .vg-cab { display: contents; } .vigia-bar-tit { order: 1; } .vg-cuerpo { order: 2; } .vg-acciones { order: 3; margin-left: 0; width: 100%; flex-direction: column; align-items: stretch; } } .vg-dato { font-size: 13px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; } .vg-dato i { color: var(--ink-3); font-size: 12px; } .vg-dato b { color: var(--ink); font-weight: 700; } /* 🪦 06-09-2026 · `.vg-link`, `.vg-ok` y `.vg-nuevo` SE BARREN. Eran «un dato que además lleva a algún sitio», pintado igual que los demás con un subrayado de puntitos. Con las tres zonas nuevas ya no hacen falta y además eran parte del problema: lo pulsable se pintaba como lo que sólo informa. Lo que llevaba a algún sitio es ahora `.vg-remedio` (lo que se hace) o `button.vg-chip` (los números que se pulsan), y los estados de color viven en `.vg-chip-ok` / `.vg-chip-nuevo`. 🔑 Se borran en vez de dejarlas: una clase huérfana acaba reapareciendo en el sitio equivocado, que es la misma lección del token `--vino`. Comprobado: cero menciones en JS y en HTML. */ .vg-dato.vg-espera, .vg-dato.vg-espera i { color: var(--ink-3); font-style: italic; } /* El Vigía lleva días sin trabajar. El silencio del Vigía es idéntico a "no hay novedades", y esa confusión es la que cuesta un plazo: aquí la franja deja de informar y pasa a avisar. */ .vigia-bar.vg-aviso { border-color: var(--warning-txt); border-left-color: var(--warning-txt); background: var(--warning-bg); } .vigia-bar.vg-alarma { border-color: var(--danger-txt); border-left-color: var(--danger-txt); background: var(--danger-bg, var(--warning-bg)); } .vigia-bar.vg-aviso .vigia-bar-tit { color: var(--warning-txt); } .vigia-bar.vg-alarma .vigia-bar-tit { color: var(--danger-txt); } .vg-dato.vg-mal, .vg-dato.vg-mal i { color: var(--warning-txt); } .vigia-bar.vg-alarma .vg-dato.vg-mal, .vigia-bar.vg-alarma .vg-dato.vg-mal i { color: var(--danger-txt); } .vg-dato.vg-mal b { color: inherit; } .vg-dato.vg-mal-sub { flex-basis: 100%; font-size: 12px; color: var(--ink-2); } @media (max-width: 640px) { .vigia-bar { gap: 8px 12px; padding: 12px 14px; } } /* ---- El HISTORIAL del Vigía (dentro de su ventana) ---- Lo pidió Piero el 2026-08-08: «si quiere volver a ver, podría entrar de nuevo a ver lo que trabajó el Vigía». Hasta hoy una novedad abierta se marcaba leída y desaparecía para siempre, porque la app sólo escucha las no leídas. Se reutilizan las variables de siempre y ni un color nuevo: esto es una lista, no una pantalla. */ .vg-hist-dia { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin: 14px 0 6px; } .vg-hist-dia:first-child { margin-top: 0; } /* 🆕 15-09 · «Marcar las N como vistas»: a la derecha de las pestañas, con el mismo aspecto de pastilla pero sin competir con la activa (sin relleno). */ .vg-marcar-todas { margin-left: auto; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; width: auto; padding: 5px 11px; border-radius: var(--r-pastilla, 999px); border: 1px solid var(--line-strong); background: transparent; color: var(--ink-2); } .vg-marcar-todas:hover, .vg-marcar-todas:focus-visible { border-color: var(--gold); background: var(--gold-soft); color: var(--ink); } .vg-marcar-todas i { margin-right: 3px; } .vg-hist-it { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; font-family: inherit; cursor: pointer; margin-bottom: 6px; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); transition: border-color var(--speed), background var(--speed); } .vg-hist-it:hover, .vg-hist-it:focus-visible { border-color: var(--gold); background: var(--gold-soft); } .vg-hist-ico { color: var(--ink-3); font-size: 13px; margin-top: 2px; flex-shrink: 0; } .vg-hist-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .vg-hist-tit { font-size: 13px; font-weight: 700; color: var(--ink); } .vg-hist-sub { font-size: 12px; color: var(--ink-2); line-height: 1.45; } .vg-hist-meta { font-size: 11px; color: var(--ink-3); } /* 🆕 15-09 (noche) · A quién patrocinas, junto al número del expediente. */ .vg-hist-cli { font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vg-hist-cli i { margin-right: 4px; font-size: 11px; color: var(--ink-3); } /* Lo que YA he abierto desde esta lista (2026-08-10, lo pidió Piero: «marcar la notificación ya vista para no perder la ilación»). 🔑 La barra va con `box-shadow: inset`, NO con `border-left`: un borde de 3px ensancharía sólo las filas vistas y la lista entera bailaría al ir marcándose. 🔑 Y el texto NO se apaga. Bajar el contraste de lo ya visto es justo lo que impide releerlo, y aquí el caso de uso es volver. Tampoco palomita ni gris fuerte: los dos se leen como «resuelto» o «archivado», que es otra cosa. */ .vg-hist-it.vg-visto { background: var(--bg-2); box-shadow: inset 3px 0 0 var(--line-strong); } .vg-hist-it.vg-ultima { box-shadow: inset 3px 0 0 var(--gold); } .vg-visto-sello { color: var(--ink-3); } .vg-hist-it.vg-ultima .vg-visto-sello { color: var(--acento-txt); font-weight: 600; } /* La fila de la Carpeta a la que se acaba de llegar desde el Vigía. Dura unos segundos: es una señal de «es ésta», no un estado que haya que apagar. 🪤 2026-08-11 — Piero: «debería dirigirte abajo y parpadear […] eso no sale ahora». Eran dos cosas y ninguna era el CSS de fondo, pero ésta también fallaba: se pintaba con `--gold-soft`, que es el MISMO tinte al 12-14% del `:hover` de media app. Un destello que se ve igual que pasar el ratón por encima no dice «es ésta», dice «aquí está el cursor». Ahora PARPADEA —tres golpes— y con un tinte propio y un aro dorado alrededor, que es lo que hace que el ojo lo encuentre en una lista de cuarenta filas. */ .doc-resaltado { animation: docResaltado 2.4s ease-out 1; border-radius: var(--r-sm); position: relative; z-index: 1; } @keyframes docResaltado { 0%, 22%, 44% { background: var(--gold-flash); box-shadow: 0 0 0 2px var(--gold), inset 4px 0 0 var(--gold); } 11%, 33% { background: transparent; box-shadow: 0 0 0 2px transparent, inset 4px 0 0 transparent; } /* Después de los tres golpes se queda encendido un momento y se apaga: sin esa cola, el último parpadeo deja la fila igual que las demás justo cuando el abogado termina de bajar la vista hasta ella. */ 75% { background: var(--gold-flash); box-shadow: 0 0 0 2px var(--gold), inset 4px 0 0 var(--gold); } 100% { background: transparent; box-shadow: 0 0 0 2px transparent, inset 4px 0 0 transparent; } } /* Quien pide menos movimiento no se queda sin la señal: se queda sin el parpadeo. La fila sigue marcada el mismo tiempo, encendida y quieta. */ @media (prefers-reduced-motion: reduce) { .doc-resaltado { animation: docResaltadoQuieto 2.4s ease-out 1; } @keyframes docResaltadoQuieto { 0%, 80% { background: var(--gold-flash); box-shadow: 0 0 0 2px var(--gold), inset 4px 0 0 var(--gold); } 100% { background: transparent; box-shadow: 0 0 0 2px transparent, inset 4px 0 0 transparent; } } } /* Rótulos que agrupan los desplegables del panel del Redactor: separan lo que cambia ESTE escrito de lo que cambia TODOS los del estudio. Deliberadamente discretos — ordenan, no compiten con los desplegables que rotulan. */ .ed-grupo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line); } .ed-grupo:first-child { margin-top: 2px; } /* ---------- Pestañas ---------- */ .tab-pane { display: none; animation: fadeUp 320ms var(--ease); } .tab-pane.active { display: block; } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ---------- Tarjetas ---------- */ .card, .glass { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); } .card { padding: 24px; } /* ============================================================ 🏷️ 06-09-2026 · EL TÍTULO DE UNA PANTALLA SE ESCRIBE DE UNA SOLA MANERA ------------------------------------------------------------ Lo pidió Piero, y con la razón medida: *«las letras de Agenda, Carpeta de expedientes, Escritor y Facturación llevan diferente tamaño… mantener el mismo formato para todo SocioLegal, si no se ve todo informal y no tan profesional»*. Así estaban los cuatro títulos de las cuatro pantallas que más usa: Agenda .................. 19 px

icono accent Carpeta de Expedientes .. 17 px SIN ICONO El Redactor ............. 14 px
icono --gold Facturación ............. 19 px

EN LÍNEA icono accent Cuatro tamaños, cuatro etiquetas, dos colores de icono y uno sin icono. Y el de Facturación con el estilo escrito dentro del HTML, así que ni siquiera se podía cambiar desde aquí. 🔑 LA CAUSA NO ES EL DESCUIDO, ES QUE NO HABÍA DÓNDE: no existía una clase para «título de pantalla», así que cada uno se resolvió con lo que tenía a mano. Ahora existe, y sólo hay DOS escalones en toda la app: .titulo-pantalla 19 px — Agenda · Carpeta · El Redactor · Facturación .card-title 14 px — lo de DENTRO (Documentos, Emitidas, Contacto…) ⛔ Al añadir una pantalla o una tarjeta, usa una de las dos. Si ninguna vale, el problema es la jerarquía, no el tamaño (misma regla que la escala de la letra, más arriba). Lo vigila `pruebas/la-escala-de-la-letra.test.js`. ============================================================ */ .titulo-pantalla { font-family: var(--font-ui); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 0; display: flex; align-items: center; gap: 10px; min-width: 0; } .titulo-pantalla > i { color: var(--accent-ink); font-size: 17px; flex: none; } /* ============================================================ 🎨 07-09-2026 · LAS CUATRO CABECERAS CIERRAN IGUAL ------------------------------------------------------------ Piero: *«me gustaría que salga como El Redactor y con una línea abajo… sentí que algunas cosas sin cuadro no queda bien; como sale uno, creo que deberían salir todos»*. Tenía razón en lo que veía, aunque la causa era otra: los cuatro títulos ya se escriben igual desde ayer, pero **cerraban distinto** — El Redactor con línea, la Agenda sin nada, y la Carpeta y Facturación flotando sobre el fondo sin ningún remate. Falta el punto y aparte, no el cuadro. ⛔ POR QUÉ NO SE METEN LOS CUATRO EN UNA TARJETA, que fue lo que él propuso: sus pantallas tienen VARIAS tarjetas debajo (Facturación: los tres importes, el formulario y «Emitidas»; la Carpeta: la barra de filtros y la lista). Un título dentro de su propia tarjeta sería una caja que sólo contiene un título —y, peor, quedaría al mismo nivel que las tarjetas de contenido, o sea que dejaría de mandar sobre ellas—. El título de una pantalla va POR ENCIMA de sus tarjetas; si baja a ser una más, se pierde la jerarquía que este repaso vino a poner. 🔑 Lo que sí unifica es el CIERRE: una línea fina debajo de la cabecera entera —título y, si los hay, sus botones—. Da el mismo acabado a los cuatro, marca dónde empieza el contenido y no inventa cajas vacías. ============================================================ */ .cabecera-pantalla { padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line); } .card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 700; color: var(--ink); padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line); } /* 🎨 06-09 · El icono va en `--accent-ink`, no en `--gold` crudo. Es el mismo que usan los otros títulos de la app, y el oro puro sobre blanco se queda en 2,4 de contraste — por debajo de lo legible; el propio bloque de la paleta, arriba, explica por qué existe `--accent-ink`. */ .card-title i { color: var(--accent-ink); margin-right: 6px; } /* 🔴 «El Redactor» EN UNA SOLA LÍNEA (2026-08-13, lo vio Piero en su celular). El rótulo le salía partido en «El» / «Redactor». Medido aquí a 375 px: el texto pide 96 px y la fila tiene 298 — o sea que con la letra que dice la hoja NO PUEDE partirse, y en este navegador no se reproduce. La causa probable es el inflado de letra de Safari en iOS, que se apaga arriba (`text-size-adjust`); esta línea es el cinturón además de los tirantes: con el triple de sitio del que necesita, prohibirle el salto no puede pasarle factura a nadie. ⚠️ Va SÓLO en este título. Las tarjetas tienen rótulos largos («Distribución por etapa procesal»), y ahí el salto de línea es lo correcto: un `nowrap` general las sacaría de su caja. 🔄 06-09 · El rótulo dejó de ser un `.card-title` y pasó a `.titulo-pantalla` —los cuatro títulos de pantalla se escriben ya de una sola manera—, así que la regla le sigue. **Lo cazó la prueba, no la vista**: el marcado cambió y `pruebas/celular-descuadres.test.js` avisó de que este selector se había quedado apuntando a nada. Sin ella, el rótulo habría vuelto a partirse en el celular de Piero y nadie lo habría sabido hasta que lo viera él. */ #tab-editor .editor-side .titulo-pantalla, .titulo-1linea { white-space: nowrap; } /* 🔴 07-09 · «Nueva nota de honorarios» LE SALÍA PARTIDO EN DOS. Segunda vez que pasa lo mismo y por eso el arreglo deja de ser un selector a medida: `.titulo-1linea` es la marca de «este rótulo NO se parte», y se le pone al `.card-title` que la necesita en vez de escribir otra regla por su ruta. Medido aquí a 390 px: el texto pide 203 px en una fila de 317 — **1,56× de sobra**, o sea que con la letra de la hoja no puede partirse y en Chromium no se reproduce, exactamente como pasó con «El Redactor» el 13-08. El salto sale de Safari en iOS; con tanto sitio libre, prohibirlo no le cuesta nada a nadie. ⚠️ Se pone POR RÓTULO y nunca a `.card-title` entero: hay tarjetas con títulos largos («Distribución por etapa procesal») que SÍ deben partirse, y un `nowrap` general las sacaría de su caja. Lo vigila `pruebas/celular-descuadres.test.js`. */ .cmdk-pill { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .3px; color: var(--acento-txt); background: var(--gold-soft); border: 1px solid var(--gold); border-radius: var(--r-lg); padding: 6px 10px; cursor: pointer; transition: background .18s; } .cmdk-pill:hover { background: var(--gold); color: var(--navy-950); } /* ---------- CENTRO DE FUENTES ---------- */ .fuente-estado { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-lg); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .fuente-estado.ok { background: var(--success-bg); color: var(--success-txt); } .fuente-estado.warn { background: var(--warning-bg); color: var(--warning-txt); } .fuente-estado.info { background: color-mix(in srgb, var(--senal-info) 12%, transparent); color: var(--info-txt); } .fuente-estado.off { background: var(--paper); color: var(--ink-3); border: 1px solid var(--line); } /* ---------- EL COMANDO (Ctrl+K) ---------- */ .cmdk-ov { position: fixed; inset: 0; z-index: 3500; display: none; align-items: flex-start; justify-content: center; padding-top: 13vh; background: rgba(8,16,25,.6); backdrop-filter: blur(6px); } .cmdk-ov.open { display: flex; animation: fadeUp .16s var(--ease); } .cmdk { width: 100%; max-width: 620px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-3); } .cmdk-in { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); } .cmdk-in i { color: var(--acento-txt); font-size: 15px; } .cmdk-in input { flex: 1; border: none; background: none; outline: none; font-size: 15px; color: var(--ink); padding: 0; } .cmdk-esc { font-size: 11px; color: var(--ink-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 4px 8px; } .cmdk-list { max-height: 360px; overflow-y: auto; padding: 8px; } .cmdk-sec { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3); padding: 12px 14px 6px; } .cmdk-it { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-md); cursor: pointer; } .cmdk-it.sel { background: var(--gold-soft); } .cmdk-ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--r-md); background: var(--paper); display: flex; align-items: center; justify-content: center; color: var(--acento-txt); font-size: 13px; } .cmdk-it.sel .cmdk-ic { background: var(--card); } .cmdk-txt { min-width: 0; } .cmdk-lb { font-size: 13px; font-weight: 500; color: var(--ink); } /* La segunda línea: cliente · materia · juzgado en un expediente, y el expediente y la fecha en una actuación. Es lo que hace que el resultado se reconozca sin abrirlo. En una sola línea y con puntos suspensivos: un nombre largo no puede empujar el ancho del diálogo. */ .cmdk-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- EL PARTE (pantalla de entrada) ---------- */ /* PUESTA EN MARCHA (onboarding.js) — la guía de los seis pasos del abogado nuevo, arriba de El Parte. Sustituye a la vieja tarjeta suelta del SINOE. */ .pm { position: relative; overflow: hidden; background: var(--card, var(--paper)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--caja-normal); margin-bottom: 18px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 30px -14px rgba(16, 24, 40, .18); } /* Filo dorado superior: la firma de la casa, sin gritar. */ .pm-filo { position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--gold-strong), var(--gold) 45%, transparent); } /* Halo tenue en la esquina, para que no sea una caja plana. */ .pm::after { content: ""; position: absolute; top: -70px; right: -70px; width: 220px; height: 220px; background: radial-gradient(circle, var(--gold-soft), transparent 68%); pointer-events: none; } .pm-head { display: flex; align-items: center; gap: 16px; position: relative; } .pm-head-txt { flex: 1; min-width: 0; } .pm-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--acento-txt); } .pm-tit { font-family: var(--font-ui); font-size: 19px; font-weight: 700; color: var(--ink); margin-top: 6px; line-height: 1.3; letter-spacing: -.01em; } .pm-cerrar { background: none; border: none; color: var(--ink-3); font-size: 12px; cursor: pointer; padding: 6px 10px; flex-shrink: 0; border-radius: var(--r-pastilla); border: 1px solid transparent; transition: color .18s ease, border-color .18s ease; } .pm-cerrar:hover { color: var(--ink-2); border-color: var(--line); } /* Anillo de avance: cuenta pasos resueltos DE VERDAD (no se llena solo). */ .pm-medidor { position: relative; width: 52px; height: 52px; flex-shrink: 0; display: grid; place-items: center; } .pm-medidor svg { position: absolute; inset: 0; width: 52px; height: 52px; transform: rotate(-90deg); } .pm-ring-bg { fill: none; stroke: var(--line); stroke-width: 3; } .pm-ring-fg { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray .5s cubic-bezier(.4,0,.2,1); } .pm-medidor-n { font-family: var(--font-ui); font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; } .pm-medidor-n small { font-size: 11px; font-weight: 600; color: var(--ink-3); } /* Raíl vertical: los pasos como un recorrido, no como una lista suelta. */ .pm-lista { list-style: none; margin: 18px 0 0; padding: 0; } .pm-paso { display: flex; gap: 14px; align-items: flex-start; position: relative; padding-bottom: 6px; } .pm-paso::before { content: ""; position: absolute; left: 12px; top: 26px; bottom: -6px; width: 1px; background: var(--line); } .pm-paso.es-ultimo::before { display: none; } .pm-paso.es-hecho::before { background: rgba(20,115,90,.35); } .pm-marca { flex-shrink: 0; width: 25px; height: 25px; border-radius: 50%; z-index: 1; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--paper); color: var(--ink-3); border: 1px solid var(--line-strong); transition: background .2s ease, color .2s ease, border-color .2s ease; } .pm-cuerpo { min-width: 0; flex: 1; padding-bottom: 12px; } .pm-paso-tit { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); line-height: 1.45; padding: 4px 0; } .pm-chevron { font-size: 11px; color: var(--ink-3); margin-left: auto; transition: transform .18s ease; } .pm-paso-tit[role="button"] { cursor: pointer; border-radius: var(--r-sm); transition: color .18s ease; } .pm-paso-tit[role="button"]:hover { color: var(--acento-txt); } .pm-paso-tit[role="button"]:hover .pm-chevron { transform: translateY(2px); color: var(--acento-txt); } .pm-paso-tit[role="button"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .pm-paso.es-hecho .pm-marca { background: var(--success); color: #fff; border-color: var(--success-txt); } .pm-paso.es-hecho .pm-paso-tit { color: var(--ink-3); } .pm-paso.es-omitido .pm-paso-tit { color: var(--ink-3); } .pm-paso.es-abierto .pm-marca { background: var(--gold); color: var(--navy-950); border-color: var(--gold); box-shadow: 0 0 0 5px var(--gold-soft); } .pm-paso.es-abierto .pm-paso-tit { font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--ink); } /* El paso abierto se apoya en su propio panel, para que se lea como una ficha. */ .pm-panel { margin-top: 10px; padding: var(--caja-compacta); background: var(--gold-soft); border: 1px solid rgba(197,160,89,.28); border-radius: var(--r-md, 10px); } .pm-paso-txt { font-size: 13px; line-height: 1.7; color: var(--ink-2); margin: 0; } .pm-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--ink-3); border: 1px solid var(--line-strong); border-radius: var(--r-pastilla); padding: 2px 8px; } .pm-tag.es-ok { color: var(--success-txt); border-color: rgba(20,115,90,.4); } .pm-acciones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; } .pm-btn { width: auto !important; padding: 10px 16px !important; font-size: 13px !important; } .pm-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; } .pm-nota { font-size: 12px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; } .pm-saltar { background: none; border: none; color: var(--ink-3); font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; } .pm-saltar:hover { color: var(--ink-2); } /* Estado final: los seis pasos resueltos. Un sello, no una alerta. */ .pm-fin { display: flex; align-items: center; gap: 18px; } .pm-fin-sello { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; color: var(--success-txt); border: 1.5px solid rgba(20,115,90,.45); background: var(--success-bg); } .pm-fin-txt { flex: 1; min-width: 0; } .pm-fin-txt b { display: block; font-family: var(--font-ui); font-size: 17px; color: var(--ink); margin: 6px 0 4px; } .pm-fin-txt span { display: block; font-size: 13px; line-height: 1.65; color: var(--ink-2); } @media (max-width: 640px) { .pm { padding: 18px 16px 14px; } .pm-head { gap: 12px; flex-wrap: wrap; } .pm-tit { font-size: 17px; } .pm-cerrar { order: 3; margin-left: auto; } .pm-btn { width: 100% !important; } .pm-acciones { gap: 10px; } .pm-fin { flex-direction: column; align-items: flex-start; gap: 12px; } } @media (prefers-reduced-motion: reduce) { .pm-ring-fg, .pm-marca, .pm-chevron, .pm-paso-tit, .pm-cerrar { transition: none; } } .parte-hero { background: linear-gradient(150deg, var(--navy-900) 0%, var(--navy-950) 100%); border: 1px solid rgba(197,160,89,.28); border-radius: var(--r-lg); padding: var(--caja-destacada); color: var(--ink); box-shadow: var(--shadow-2); position: relative; overflow: hidden; margin-bottom: 24px; } body:not(.dark-mode) .parte-hero { color: #eef2f7; } .p-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--acento-claro); margin-bottom: 14px; } .p-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--success); margin-right: 8px; box-shadow: 0 0 0 4px rgba(20,115,90,.22); } /* El saludo grande de la entrada. Es el único sitio del trabajo diario donde se usa la letra de títulos, y se justifica: es la frase con la que el sistema saluda al abogado cada mañana. */ .p-saludo { font-family: var(--font-display); font-size: 34px; font-weight: 700; color: #f5efe2; margin-bottom: 20px; line-height: 1.15; } .p-parrafo { font-size: 17px; line-height: 1.85; color: #dfe5ee; max-width: 760px; font-weight: 400; } .p-parrafo .p-n { color: var(--acento-claro); font-weight: 600; } .p-acc { color: #f5efe2; font-weight: 600; cursor: pointer; border-bottom: 2px solid rgba(197,160,89,.5); padding-bottom: 1px; transition: color .18s, border-color .18s; } .p-acc:hover { color: var(--gold); border-bottom-color: var(--gold); } .p-cierre { margin-top: 22px; font-size: 15px; color: #aeb9c9; } .p-cierre b { color: #eef2f7; } /* 🎠 15-09-2026 · LOS CARRILES DE EL PARTE (antes `.p-momentos`, seis tarjetas en rejilla). Cada carril se desliza de lado: con el dedo en el celular, con la rueda o sus flechas en la computadora, y con el teclado (la pista es enfocable). Se ve un trozo de la tarjeta siguiente para que se entienda que hay más sin tener que decirlo. 🪤 Dentro de la pista el relieve 3D se apaga: Safari no recorta lo que está en 3D dentro de un `overflow` (memoria «safari-no-recorta-lo-que-esta-en-3d») y la tarjeta girada se pintaría fuera del carril. */ .p-carriles { display: flex; flex-direction: column; gap: 22px; margin-top: 26px; } .p-carril-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .p-carril-t { margin: 0; font-size: 15px; font-weight: 700; color: #f5efe2; letter-spacing: .2px; display: inline-flex; align-items: center; gap: 8px; } .p-carril-n { font-size: 12px; font-weight: 800; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--r-pastilla); display: inline-flex; align-items: center; justify-content: center; background: rgba(197,160,89,.18); border: 1px solid rgba(197,160,89,.45); color: #f0ece2; font-variant-numeric: tabular-nums; } .p-carril-ayuda { font-size: 12px; color: #98a4b6; flex: 1 1 200px; } .p-carril-flechas { display: none; gap: 6px; margin-left: auto; } .p-carril.desborda .p-carril-flechas { display: inline-flex; } .p-carril-fl { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); color: #f5efe2; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; } .p-carril-fl:hover:not(:disabled) { border-color: var(--gold); background: rgba(197,160,89,.14); } .p-carril-fl:disabled { opacity: .35; filter: none; } .p-carril-pista { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 292px); gap: 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 2px; padding: 6px 2px 10px; /* arriba: la tarjeta sube 3 px al pasar el ratón */ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; } .p-carril-pista:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r-md); } .p-carril-pista > .p-m { scroll-snap-align: start; display: flex; flex-direction: column; transform-style: flat; will-change: auto; } .p-carril-pista > .p-m.tilt-on { transform: translateY(-3px); box-shadow: none; } .p-carril-pista > .p-m.tilt-on .p-m-go { transform: none; } .p-carril-pista > .p-m .p-m-d { flex: 1 1 auto; } @media (max-width: 600px) { .p-carril-pista { grid-auto-columns: 84%; } /* En el celular se desliza con el dedo: las flechas sólo ocupaban un renglón. */ .p-carril.desborda .p-carril-flechas { display: none; } } .p-m-pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .p-m-pie .p-m-go { margin-top: 0; } .p-m-btn { font: inherit; font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: var(--r-md); border: 1px solid var(--success-claro); background: rgba(34,193,151,.16); color: #eafff8; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .p-m-btn:hover:not(:disabled) { background: rgba(34,193,151,.28); } /* La cédula que actualiza un plazo ya agendado: sigue siendo una propuesta (punteado), pero verde — es la única con una acción de un solo clic. */ .p-m.sug.sug-llego { border-color: rgba(34,193,151,.65); background: rgba(34,193,151,.08); } .p-m.sug.sug-llego .p-m-tag { color: var(--success-claro); } .p-m.sug.sug-llego .p-m-go { margin-top: 0; padding: 7px 12px; } /* La agenda, en los colores de siempre: nota (verde azulado, nunca roja), provisional (azul, nunca roja), audiencia (morado) y lo que viene (neutro). */ .p-m.nota { border-color: rgba(92,201,178,.45); background: rgba(92,201,178,.07); } .p-m.nota .p-m-tag { color: #7fd8c5; } .p-m.prov { border: 1px dashed rgba(103,155,209,.6); background: rgba(103,155,209,.08); } .p-m.prov .p-m-tag { color: #9cc0e8; } .p-m.aud { border-color: rgba(227,154,214,.5); background: rgba(227,154,214,.08); } .p-m.aud .p-m-tag { color: var(--audiencia-claro); } .p-m.prox .p-m-tag { color: #c9d2de; } .p-m.p-m-mas { font: inherit; text-align: left; color: #f5efe2; font-size: 14px; font-weight: 700; display: flex; flex-direction: column; justify-content: center; gap: 6px; align-items: flex-start; } .p-m.p-m-mas i { font-size: 20px; color: var(--acento-claro); } .p-m.p-m-mas span { font-size: 12px; font-weight: 500; color: #98a4b6; } .p-m { background: rgba(255,255,255,.05); border: 1px solid rgba(197,160,89,.2); border-radius: var(--r-lg); padding: 16px 16px; cursor: pointer; transition: transform .16s var(--ease), border-color .16s, background .16s; } .p-m:hover { transform: translateY(-3px); border-color: var(--gold); background: rgba(197,160,89,.08); } .p-m-tag { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .p-m-tag i { font-size: 11px; margin-right: 3px; } /* TRES ESTADOS QUE NO SE PUEDEN CONFUNDIR (2026-08-01, lo pidió Piero). Cada uno con su color Y su icono: quien no distinga los colores igual los distingue. · rojo = vencido o vence hoy (ya no hay margen) · ámbar = confirmado, vence pronto (hay que moverse) · gris azulado punteado = SUGERIDO: todavía no es un plazo, es una propuesta que el sistema leyó y que nadie ha confirmado. */ .p-m.crit .p-m-tag { color: var(--danger-claro); } .p-m.crit { border-color: rgba(197,48,48,.55); background: rgba(197,48,48,.10); } .p-m.pronto .p-m-tag { color: var(--warning-claro); } .p-m.pronto { border-color: rgba(214,158,46,.5); background: rgba(214,158,46,.09); } .p-m.hoy .p-m-tag { color: var(--acento-claro); } /* El tono del SUGERIDO se saca del BLANCO a baja opacidad, no de un gris azulado fijo. Motivo: esta tarjeta cambia de color con la paleta del estudio (vino burdeos, cobre, púrpura, esmeralda…) y un azul grisáceo fijo se veía como un parche frío pegado encima del vino o del cobre. El blanco rebajado es el MISMO color del fondo aclarado, así que se apaga igual en las seis. Un solo sitio donde se define: lo usan la tarjeta y la pastilla de arriba. */ .parte-hero { /* .42 y no .34: medido sobre las seis paletas, con .34 el punteado se quedaba en 2,92:1 sobre el esmeralda y el azul — por debajo del 3:1 mínimo para que un borde con significado se distinga del fondo. Con .42 las seis pasan. */ --sug-linea: rgba(255,255,255,.42); --sug-linea-fuerte: rgba(255,255,255,.62); --sug-texto: rgba(255,255,255,.78); --sug-fondo: rgba(255,255,255,.07); } .p-m.sug { border: 1px dashed var(--sug-linea); background: var(--sug-fondo); box-shadow: none; } .p-m.sug .p-m-tag { color: var(--sug-texto); } .p-m.sug:hover { border-color: var(--sug-linea-fuerte); background: rgba(255,255,255,.13); } /* El sugerido con la fecha ya pasada: sigue siendo una propuesta (por eso conserva el punteado), pero avisa. */ .p-m.sug.sug-tarde { border-color: rgba(197,48,48,.6); background: rgba(197,48,48,.09); } .p-m.sug.sug-tarde .p-m-tag { color: var(--danger-claro); } /* En el sugerido, "Revisar y confirmar" es la acción de todo el cartel: se pinta como botón, no como un enlace más. */ .p-m.sug .p-m-go { margin-top: 12px; display: inline-flex; padding: 7px 14px; border: 1px solid var(--sug-linea-fuerte); border-radius: var(--r-md); color: #fff; font-weight: 700; } .p-m.sug:hover .p-m-go { background: rgba(255,255,255,.16); } .p-m.sug.sug-tarde .p-m-go { border-color: var(--danger-claro); color: #f3b7b7; } .p-m.vigia { border-color: var(--gold); background: rgba(197,160,89,.12); box-shadow: 0 0 0 1px rgba(197,160,89,.2); } .p-m.vigia .p-m-tag { color: var(--acento-claro); } .p-m.vigia .p-m-go { color: var(--acento-claro); } /* El número de expediente es un DATO que hay que leer, no un adorno: va en tinta clara, no en el color del acento. Con el acento se quedaba en 3,92:1 sobre la tarjeta esmeralda (el chip suma su propio velo dorado encima del verde de la tarjeta y el fondo sube hasta #364c37). El borde dorado ya lo identifica como chip; el número tiene que LEERSE. */ .p-m-exp { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 2px 10px; border-radius: var(--r-pastilla); background: rgba(197,160,89,.14); border: 1px solid rgba(197,160,89,.35); font-size: 11px; font-weight: 700; letter-spacing: .3px; color: #f0ece2; font-variant-numeric: tabular-nums; } .p-m-exp i { font-size: 11px; color: var(--acento-claro); } /* 🆕 15-09 (noche) · El patrocinado, debajo del número: una línea que se corta con «…» (entero en el `title`), para que la tarjeta no crezca de alto. */ .p-m-cli { display: block; margin-top: 6px; max-width: 100%; font-size: 12.5px; font-weight: 600; color: #e9e2d2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .p-m-cli i { margin-right: 5px; font-size: 11px; color: var(--acento-claro); } .p-m-t { font-size: 14px; font-weight: 600; color: #f5efe2; margin: 8px 0 4px; line-height: 1.35; } .p-m-d { font-size: 12px; color: #98a4b6; } .p-m-go { margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--acento-claro); display: flex; align-items: center; gap: 6px; } .p-quick { display: flex; gap: 10px; margin-top: 30px; flex-wrap: wrap; } .p-qbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(197,160,89,.3); border-radius: var(--r-pastilla); color: #eef2f7; font-size: 13px; font-weight: 600; transition: background .18s, border-color .18s; } .p-qbtn:hover { background: rgba(197,160,89,.14); border-color: var(--gold); } .p-qbtn i { color: var(--acento-claro); } /* En móvil el cuadro destacado baja al nivel "normal": mismo relleno que las demás tarjetas, y simétrico (antes era 26 arriba y 22 a los lados). */ @media (max-width: 640px) { .parte-hero { padding: var(--caja-normal); } .p-saludo { font-size: 26px; } .p-parrafo { font-size: 15px; } } /* Chips-métrica de El Parte (absorben el Centro de Salud) */ .p-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; align-items: center; } .p-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: var(--r-pastilla); background: rgba(255,255,255,.06); color: #e9edf3; border: 1px solid rgba(255,255,255,.12); cursor: pointer; transition: background .15s, border-color .15s, transform .15s; } .p-chip:hover { background: rgba(255,255,255,.12); transform: translateY(-1px); } .p-chip b { font-variant-numeric: tabular-nums; color: #f7f2e6; } .p-chip .pc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .p-chip.venc .pc-dot { background: var(--danger); } .p-chip.hoy .pc-dot { background: var(--warning); } .p-chip.prox .pc-dot { background: var(--info); } .p-chip.firma .pc-dot { background: var(--gold); } /* «Por redactar» = mismo asunto que «por firmar» (un escrito), pero todavía vacío → punto HUECO. Con relleno = escrito listo esperando la firma. */ .p-chip.redac .pc-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--gold); } .p-chip.mov .pc-dot { background: var(--ink-3); } /* «Por confirmar» llevaba EL MISMO ROJO que «vencidos», y no es lo mismo: son propuestas que el Vigía leyó y que todavía NO son un plazo. Mismo lenguaje que las tarjetas de abajo: apagado, punteado y con su bombilla, para que se distinga también sin mirar el color. Los tonos salen de `--sug-*`. */ .p-chip.sug { background: transparent; border-style: dashed; border-color: var(--sug-linea); color: var(--sug-texto); } .p-chip.sug:hover { background: var(--sug-fondo); border-color: var(--sug-linea-fuerte); } .p-chip.sug .pc-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--sug-linea-fuerte); } .p-chip.sug i { font-size: 11px; opacity: .85; } .p-chip.saved { margin-left: auto; background: transparent; border-color: transparent; color: #aeb9c9; cursor: default; font-weight: 500; font-size: 12px; } .p-chip.saved:hover { transform: none; background: transparent; } .p-chip.saved i { color: var(--gold); margin-right: 2px; } @media (max-width: 560px) { .p-chip.saved { margin-left: 0; } } /* Estado de PRIMER DÍA (bienvenida) */ .p-bienvenida { margin-top: 26px; } .p-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--gold); color: var(--navy-900); border: 0; font-family: inherit; font-size: 14px; font-weight: 700; padding: 14px 24px; border-radius: var(--r-lg); cursor: pointer; transition: filter .15s, transform .15s; box-shadow: 0 4px 16px rgba(197,160,89,.28); } .p-cta:hover { filter: brightness(1.06); transform: translateY(-1px); } .p-cta i { font-size: 13px; } /* Los tres pasos que había aquí se retiraron: repetían la guía de Puesta en marcha (.pm), que es ahora el único sitio donde se explica por dónde empezar. Se quitó también su CSS para no dejar reglas huérfanas. */ /* ---------- Agenda "Tu día" (fusión de calendario + tabla) ---------- */ .tudia-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; flex-wrap: wrap; } .tudia-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Título de BLOQUE: mismo trato que los demás (19px). Estaba a 15, el tamaño del cuerpo, así que no se leía como título sino como una frase suelta — y al lado de otros bloques a 19 parecía hundido. */ /* 🪦 06-09 · `.tudia-titulo` se queda SIN ESTILO PROPIO: lo que decía (19 px, 700, icono en accent) es exactamente `.titulo-pantalla`, que ahora lo llevan las cuatro pantallas. La clase sobrevive porque el JS la usa para encontrar el título de la agenda; el aspecto ya no vive aquí. */ .tudia-toggle { display: inline-flex; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 2px; gap: 2px; flex-shrink: 0; } .tudia-toggle button { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink-3); background: transparent; border: 0; padding: 6px 14px; border-radius: var(--r-sm); cursor: pointer; transition: background .15s, color .15s; } .tudia-toggle button:hover { color: var(--ink); } .tudia-toggle button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); } .tudia-pane { padding: 0 12px 14px; } .tudia-lista-cont { display: flex; flex-direction: column; } /* 📅 2026-08-30 · La columna de la fecha pasa de 52 a 64 px: ahora lleva encima el día de la semana ESCRITO ENTERO («miércoles» es la más larga, 9 letras a 9 px). Se ensancha en vez de abreviar a propósito — abreviar es lo que hacía que «MAR 1» se leyera «1 de marzo» (ver la nota en calendario.js). */ .tudia-row { display: grid; grid-template-columns: 4px 64px 1fr auto; gap: 14px; align-items: center; padding: var(--caja-compacta); border-radius: var(--r-md); cursor: pointer; transition: background .13s; } .tudia-row:hover { background: var(--gold-soft); } .tudia-row + .tudia-row { border-top: 1px solid var(--line); } .tudia-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } /* ============================================================ 🎨 07-09-2026 (tarde) · LA FRANJA TAMBIÉN ES MACIZA O HUECA ------------------------------------------------------------ La pastilla ya seguía la regla desde esta mañana; la franja de la izquierda no, y era la mitad de lo que Piero seguía viendo igual. Medido en oscuro con los tokens crudos: audiencia 1,91:1 contra la tarjeta, próximo 1,24:1 — las dos casi invisibles y **a 1,22:1 entre ellas**, que es el número exacto de la queja original. Con `--senal-*` suben a 7,69 y 5,60. 🔑 Y aun así, entre ellas se quedan en 1,37:1 de claridad: dos colores vivos del mismo peso siguen siendo la misma mancha en 4 píxeles. Por eso la franja copia la regla de la pastilla y la dice con el GROSOR, que es lo que el ojo lee antes que el tono: MACIZO (vencido · hoy · audiencia) → 4 px de alto a alto HUECO (próximo · nota) → 2 px, centrada en la misma columna Así la fila se clasifica de un vistazo sin tener que distinguir un morado de un azul, que es justo lo que no funcionaba. */ .tudia-stripe { width: 4px; height: 36px; border-radius: 3px; background: var(--ink-3); } .tudia-row.r-venc .tudia-stripe { background: var(--senal-danger); } .tudia-row.r-hoy .tudia-stripe { background: var(--senal-warning); } .tudia-row.r-aud .tudia-stripe { background: var(--senal-audiencia); } .tudia-row.r-prox .tudia-stripe, .tudia-row.r-nota .tudia-stripe { width: 2px; height: 26px; margin: 0 1px; } .tudia-row.r-prox .tudia-stripe { background: var(--senal-info); } /* El bloque de fecha de la agenda: MES · DÍA · AÑO. Antes era día-de-la-semana + número, sin mes ni año, y dos audiencias con un año de diferencia salían idénticas en pantalla. El porqué largo está en `_filaAgenda`. 🪤 EL HUECO DEL AÑO SE RESERVA SIEMPRE (`min-height`) aunque casi nunca se pinte: si sólo ocupara sitio en las filas de otro año, ESAS filas serían más altas que el resto y la lista daría saltos al desplazarse. Es la misma regla del hueco para la palabra más larga. 🪤 Y la ALTURA es FIJA con `box-sizing: border-box`, no un `min-height`: el chip del año añade 2px de relleno, así que reservar sólo la altura del texto dejaba las filas con año 3px más altas — el salto seguía ahí, medido (71px contra 68). Con la altura fija el relleno cabe DENTRO y todas miden igual. El año usa el par `--warning-bg`/`--warning-txt` —ya medido en las seis paletas y en claro/oscuro— y no `--warning` crudo, que daba 3,06 de contraste. Va en ámbar porque es una señal de «mira esto», no un error. */ /* ============================================================ 🎨 31-08-2026 · LA PASTILLA DE FECHA (antes: cuatro renglones sueltos) ------------------------------------------------------------ Lo vio Piero: *«se ve muy pesado poner martes encima de SEP»*. Eran cuatro textos centrados del mismo peso apilados en 64 px. Ahora es UN objeto —una hojita de calendario— con tres alturas de lectura bien distintas: franja del mes (con el año dentro cuando toca) · número grande · día. 🔑 Que sea un objeto con borde es lo que quita el peso, más que quitar una línea: cuatro textos sueltos compiten entre sí; dentro de una caja, se leen en orden. 🪤 LA ALTURA SIGUE SIENDO FIJA, y por lo mismo de siempre (26-08): si las filas con año midieran distinto, la lista daría saltos al desplazarse. Ahora el año va DENTRO de la franja del mes, así que no añade altura ninguna — antes era un renglón más con su relleno, que es de donde salía el salto. ============================================================ */ .tudia-fecha { display: flex; flex-direction: column; align-items: stretch; text-align: center; letter-spacing: .3px; line-height: 1.15; font-variant-numeric: tabular-nums; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); } /* La franja del mes: es la «cabecera» de la hojita. En mayúscula y sobre el tinte de acento, así que no se puede confundir con el día de la semana, que va en minúscula y abajo. */ .tudia-fecha .mes { display: block; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--acento-txt); background: var(--gold-soft); padding: 2.5px 0 2px; border-bottom: 1px solid var(--line); } /* El año, DENTRO de la franja: «SEP 2027». Sólo sale cuando no es el año en curso — ver el porqué en `_filaAgenda`. */ .tudia-fecha .mes em { font-style: normal; font-weight: 700; opacity: .9; } .tudia-fecha.otro-anio .mes { color: var(--warning-txt); background: var(--warning-bg); } .tudia-fecha b { display: block; font-family: var(--font-ui); font-size: 19px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; padding: 3px 0 0; } /* El día de la semana va en MINÚSCULA (`text-transform: none`) justo para que no se confunda con el mes, que va en mayúscula. Es la diferencia entre «martes» y «MAR», y por eso se escribe ENTERO (se abrevió una vez y hubo que deshacerlo el 30-08). */ .tudia-fecha .dow { display: block; font-style: normal; font-size: 9px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink-3); padding: 0 2px 4px; } /* 🪤 01-09-2026 · EL TÍTULO SE SALÍA POR DEBAJO DE LA PASTILLA. Lo vio Piero en el celular: «Audiencia preliminar de esclarecimiento de hechos» se partía en cuatro líneas y «esclarecimient…» quedaba TAPADO por la pastilla morada de AUDIENCIA. Dos causas, las dos aquí: · `min-width: 0` deja que la columna se encoja, pero SIN `overflow: hidden` el contenido se sigue PINTANDO fuera de ella — encima de la columna de al lado, que es donde vive la pastilla. Encoger la caja no encoge lo de dentro. · una palabra larga («esclarecimiento») no se parte por sí sola: el navegador sólo corta en los espacios, así que desborda entera. Es pariente de la rejilla que aplastaba una columna (`1fr` es `minmax(auto,1fr)`): la misma familia de fallos, por el otro extremo. */ .tudia-main { min-width: 0; overflow: hidden; } .tudia-main .tt { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 2px; line-height: 1.3; overflow-wrap: anywhere; } .tudia-main .ss { font-size: 12px; color: var(--ink-3); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ 🎨 07-09-2026 · MACIZO O HUECO — y no «de qué color» ------------------------------------------------------------ Lo vio Piero en su agenda: *«los colores de audiencia y próximo no se diferencian a simple vista, son casi idénticos»*. Y al medirlo, la causa NO era la que parece: AUDIENCIA tono 308° · claridad 33% PRÓXIMO tono 211° · claridad 36% ⇒ 97° de distancia de TONO (muchísima) ⇒ 3 puntos de CLARIDAD, contraste entre ellos 1,22:1 (1,00 = iguales) 🔑 En una pastilla de 60 px con texto blanco encima, **el ojo no lee tono: lee claridad**. Dos manchas oscuras del mismo peso son la misma mancha aunque una sea morada y la otra azul. Cambiar el morado por otro morado no habría arreglado nada — el problema es que las cinco pastillas vivían en una banda de claridad estrechísima (26%–43%): todas «oscuras y saturadas». 🔑 Y LA RESPUESTA YA ESTABA EN LA CASA: `.st.prox` y `.s-prox .kc-badge` —la Carpeta y el tablero— pintan «Próximo» HUECO desde siempre (fondo al 12% y texto de color). **La agenda era la única que lo pintaba macizo.** Aquí no se inventa un color: se le hace seguir la regla que el resto ya sigue. LA REGLA, en una frase que se puede decir en voz alta: MACIZO = tienes que estar en un sitio a una hora, o ya se te echó encima HUECO = corre solo y lo haces cuando quieras antes de la fecha venc · hoy · aud → macizas (alarma, o cita con hora) prox · nota → huecas (un plazo que corre, algo que anotaste) ⚠️ NINGÚN COLOR CAMBIA. El verde de las notas —que Piero dice que queda bien— es el mismo `--nota` de siempre; lo que cambia es el relleno. ✅ Medido: audiencia macizo contra próximo hueco da **7,17:1**, frente al 1,22:1 de antes — **5,9× más separación**. Y el texto dentro de la pastilla hueca queda en 5,85:1 (próximo) y 5,38:1 (nota), por encima del 4,5 mínimo. ============================================================ */ .tudia-pill { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-lg); color: #fff; white-space: nowrap; border: 1px solid transparent; } .tudia-pill.venc { background: var(--danger); } .tudia-pill.hoy { background: var(--warning); } .tudia-pill.aud { background: var(--audiencia); } /* Las huecas. El borde no es adorno: es lo único que le da forma a la pastilla, porque el fondo al 12% se acerca mucho a la tarjeta. 🔴 07-09 (tarde) · Y en oscuro NO TENÍA FORMA: mezclar el token crudo —una tinta oscura— sobre una tarjeta oscura daba 1,08:1 de fondo y 1,29:1 de borde. Ahora la mezcla se hace con `--senal-*`, que en oscuro es la versión clara del color, y el borde sube al 55%. ✅ Medido — borde contra la tarjeta: 2,66:1 en oscuro (era 1,29) y 2,55:1 en claro (era 1,72); el texto dentro, 4,65:1 y 5,85:1, los dos por encima de 4,5. Es la MISMA regla en los dos modos: sólo cambia de qué color se mezcla. */ .tudia-pill.prox { background: color-mix(in srgb, var(--senal-info) 12%, transparent); border-color: color-mix(in srgb, var(--senal-info) 55%, transparent); color: var(--info-txt); } /* 🎨 07-09 (noche) · Y EN OSCURO, LA LETRA DE «PRÓXIMO» EN BLANCO. Lo pidió Piero mirando su agenda de noche, y el número le da la razón: el azul sobre su propio tinte da **4,65:1** —pasa el mínimo por poco— y en blanco sube a **13,59:1**, casi 3× más. El color no se pierde: lo lleva el borde, que es quien dice que la pastilla es hueca. ⚠️ SÓLO en oscuro. En claro el fondo de la pastilla es casi blanco y la letra blanca daría 1,20:1, o sea nada. 🔄 09-09-2026 · Y LA DE «NOTA» TAMBIÉN, PORQUE ÉL LA PIDIÓ. Aquí decía que no se le hacía «por no tocar lo que funciona por simetría», y con el número delante (6,46:1, por encima del mínimo) era una decisión defendible. Pero la pedía mirando su agenda de noche, que es donde se ve, y el número le vuelve a dar la razón: **6,46 → 12,98:1, el doble**. El color no se pierde — lo lleva el borde, que da 3,42:1 contra la tarjeta y es quien dice que la pastilla es hueca. 🔺 Un contraste que pasa el mínimo no es lo mismo que uno que se lee cómodo a la una de la mañana, y quien lo lee es él. */ /* 📝 La nota: verde azulado, NUNCA rojo. Ver `--nota` y `esNotaLibre`. */ .tudia-pill.nota { background: color-mix(in srgb, var(--senal-nota) 12%, transparent); border-color: color-mix(in srgb, var(--senal-nota) 55%, transparent); color: var(--nota-txt); } /* 🪤 09-09 · Y LA REGLA DE OSCURO VA DESPUÉS DE LAS DOS BASES, no en medio. No es orden estético: `pruebas/macizo-hueco-y-la-senal.test.js` busca el bloque de cada pastilla por su selector, y `.tudia-pill.nota {` es una subcadena de `body.dark-mode .tudia-pill.nota {`. Puesta antes, la prueba leía la regla de oscuro —que sólo tiene `color`— creía que la pastilla ya no se pintaba con `color-mix` y se ponía roja midiendo lo que no era. La cascada no cambia: `body.dark-mode .tudia-pill.nota` gana por especificidad esté donde esté. */ body.dark-mode .tudia-pill.prox, body.dark-mode .tudia-pill.nota { color: #fff; } .tudia-row.r-nota .tudia-stripe { background: var(--senal-nota); } /* ⚖️ 12-09-2026 · «SIN NOTIFICAR» — el plazo que aún no corre. 🎨 Va HUECA y de 2 px, en el mismo grupo que «Próximo» y «Nota»: la regla de esta lista es que el grosor dice la urgencia antes que el tono, y un plazo que todavía no ha empezado no puede pesar lo que uno que vence hoy. El tono es el `--senal-info` de lo que viene, porque eso es: algo que llegará. ⛔ Nunca `--danger`: su fecha no es un vencimiento. Ver `esPlazoProvisional`. */ .tudia-row.r-prov .tudia-stripe { width: 2px; height: 26px; margin: 0 1px; background: var(--senal-info); } .tudia-pill.prov { background: transparent; border-color: color-mix(in srgb, var(--senal-info) 55%, transparent); color: var(--info-txt); font-style: italic; } body.dark-mode .tudia-pill.prov { color: #fff; } .tudia-vacio { text-align: center; padding: 28px 20px; color: var(--ink-3); font-style: italic; font-size: 13px; } /* Franja de vencidos: UNA línea arriba de la agenda. No usa `--danger` crudo: se apoya en el par `--danger-bg`/`--danger-txt`, que ya está medido en las seis paletas y en claro/oscuro. Ver la memoria del contraste. */ .tudia-franja { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; font-family: inherit; font-size: 13px; font-weight: 600; text-align: left; background: var(--danger-bg); color: var(--danger-txt); border: 1px solid var(--danger); border-radius: var(--r-md); padding: 9px 14px; margin-bottom: 6px; cursor: pointer; transition: filter .13s; } .tudia-franja:hover { filter: brightness(0.97); } .tudia-franja:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .tudia-franja .tf-txt { display: inline-flex; align-items: center; gap: 8px; } .tudia-franja .tf-txt b { font-variant-numeric: tabular-nums; } .tudia-franja .tf-ver { font-size: 12px; font-weight: 700; text-decoration: underline; flex-shrink: 0; } /* 📝 05-09 · LA FRANJA DE LAS NOTAS DE DÍAS PASADOS. Misma forma que la de vencidos y color de NOTA, nunca rojo: no hay ningún plazo que se haya dejado pasar y el rojo tiene que seguir queriendo decir sólo eso. Ver `esNotaLibre` y `pendientesAgenda` en calendario.js. */ .tudia-franja.tf-nota { background: var(--nota-bg); color: var(--nota-txt); border-color: var(--nota); } .tudia-nota-pie { margin: 2px 0 8px; padding: 0 4px; font-size: 12px; color: var(--ink-3); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .tudia-nota-pie .tf-ver { font-size: 12px; font-weight: 700; color: var(--nota-txt); background: none; border: none; padding: 0; text-decoration: underline; cursor: pointer; font-family: inherit; } .tudia-venc-lista { border-left: 3px solid var(--danger); margin: 0 0 8px 2px; padding-left: 4px; } /* 🪤 Y la GEMELA del celular, que es donde se olvida siempre (la rejilla del 19-08 se arregló en escritorio y siguió rota aquí un día entero). 60 px y el día de la semana a 8,5 px: «miércoles» sigue entrando en una línea. */ @media (max-width: 480px) { .tudia-row { grid-template-columns: 4px 60px 1fr auto; gap: 10px; } .tudia-fecha .dow { font-size: 8.5px; letter-spacing: -.1px; } .tudia-fecha b { font-size: 18px; } /* 🪤 01-09 · Y LA PASTILLA, QUE ES LA QUE SE COMÍA EL SITIO. En 375 px, «AUDIENCIA» a 11 px con su relleno se lleva ~95 px de los ~200 que quedan para el texto: por eso un título largo salía en cuatro líneas. Se aprieta un punto —sigue leyéndose— y el título recupera un tercio de ancho. Sin `flex-shrink` de por medio: es una columna `auto` de la rejilla, así que lo que manda es su contenido. */ .tudia-pill { font-size: 10px; padding: 3px 7px; letter-spacing: .2px; } /* El título, hasta tres líneas. Más que eso es un párrafo dentro de una lista: deja de leerse y descuadra la fila entera. El texto completo sigue en el `title` de la fila y dentro del expediente. */ .tudia-main .tt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } } /* ---------- Aviso anticipado (Socio IA) ---------- */ .aviso-ia { margin: 16px 0 4px; padding: 18px 22px; background: linear-gradient(135deg, var(--navy-900), var(--navy-800)); border: 1px solid rgba(197, 160, 89, 0.35); border-radius: var(--r-lg); color: #eef2f7; box-shadow: var(--shadow-2); } .aviso-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .aviso-estrella { color: var(--acento-claro); font-size: 17px; } .aviso-ia h5 { font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--acento-claro); font-weight: 700; } .aviso-badge { margin-left: auto; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.8px; padding: 4px 12px; border-radius: var(--r-lg); animation: pulse-badge 2.4s infinite; } @keyframes pulse-badge { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } } .aviso-linea { font-size: 15px; } .aviso-linea strong { color: var(--acento-claro); } .aviso-detalle { font-size: 13px; color: rgba(238,242,247,0.75); margin-top: 6px; } .aviso-acciones { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; } .btn-aviso-sec { width: auto; padding: 10px 16px; font-size: 13px; background: transparent; color: var(--acento-claro); border: 1px solid var(--acento-claro); box-shadow: none; } .btn-aviso-sec:hover { background: var(--gold-soft); } /* Centro de Salud del estudio (fusiona los antiguos KPIs) */ /* Banda hero: el tiempo ahorrado (norte del producto) */ /* NÚMEROS: siempre en la letra de interfaz, nunca en la de títulos. Una serif de display no alinea cifras aunque se le pida; ese error ya obligó a deshacer el cambio en el panel de operaciones. Aquí no se repite. */ /* Fila de stats con divisores finos (sin cajas) */ /* Pie: carga por abogado con badge-contador */ .abg { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; } .abg-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 6px; border-radius: var(--r-pastilla); background: var(--paper); border: 1px solid var(--line-strong); font-size: 11px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; } .skeleton-box { position: relative; overflow: hidden; } .skeleton-box::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent); animation: shimmer 1.4s infinite; } @keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* ---------- Layout de paneles ---------- */ .layout-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; } /* Panel Principal: UNA sola columna a ancho completo (calendario, resumen, pendientes y — al final — distribución por etapa). */ .layout-panel-resumen { grid-template-columns: 1fr; gap: 22px; } /* min-width:0 en TODOS los hijos del grid: sin esto, un hijo con contenido ancho (calendario, tabla) infla la columna y desborda en móvil. */ .layout-panel > *, .layout-panel-resumen > *, .analisis-grid > * { min-width: 0; } .col-derecha { display: flex; flex-direction: column; gap: 22px; min-width: 0; } /* Carpeta de Expedientes: barra compacta "Añadir documento" + lista a ancho completo */ .doc-add-bar { margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-1); overflow: hidden; } .doc-add-bar > summary { list-style: none; cursor: pointer; padding: 14px 18px; font-size: 13px; font-weight: 700; color: var(--accent-ink); display: flex; align-items: center; gap: 10px; user-select: none; } .doc-add-bar > summary::-webkit-details-marker { display: none; } .doc-add-bar > summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: auto; font-size: 11px; color: var(--ink-3); transition: transform var(--speed); } .doc-add-bar[open] > summary::after { transform: rotate(180deg); } .doc-add-bar[open] > summary { border-bottom: 1px solid var(--line); } .doc-add-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 16px; align-items: end; padding: 16px 18px; } .doc-add-form .form-group { margin: 0; } .doc-add-form .doc-add-btn { width: auto; height: fit-content; white-space: nowrap; } /* Lista de documentos: categorías repartidas a lo ancho (más aire, no apretadas) */ #contenedor-categories-archivos { padding-right: 4px; } .doc-cats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px 18px; align-items: start; margin-bottom: 8px; } /* Distribución por etapa a lo ancho (barras en varias columnas) */ .da-etapas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px 28px; } /* Análisis de Resoluciones: las dos herramientas lado a lado a ancho completo */ .analisis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; } .analisis-grid .analisis-col { grid-template-columns: 1fr; } /* Panel derecho del dashboard (llena el hueco de la Mesa de Partes) */ .dashboard-aside { display: flex; flex-direction: column; gap: 20px; } .da-card { padding: 18px; } .da-card .card-title { padding-bottom: 12px; margin-bottom: 12px; } .da-list { display: flex; flex-direction: column; gap: 8px; } .da-item { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; transition: border-color var(--speed), background var(--speed); } .da-item:hover { border-color: var(--gold); background: var(--gold-soft); } .da-ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; } .da-ic.aud { background: var(--audiencia); } .da-ic.tar { background: var(--gold-strong); } .da-tx { min-width: 0; display: flex; flex-direction: column; } .da-tx b { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .da-tx span { font-size: 11px; color: var(--ink-3); } .da-vacio { font-size: 13px; color: var(--ink-3); font-style: italic; padding: 6px 2px; } .da-bar-row { display: grid; grid-template-columns: 1fr 78px auto; align-items: center; gap: 10px; margin-bottom: 10px; } .da-bar-lbl { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .da-bar-track { height: 8px; background: var(--paper); border-radius: 5px; overflow: hidden; border: 1px solid var(--line); } .da-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-strong)); border-radius: 5px; } .da-bar-n { font-size: 12px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .da-vigia { font-size: 13px; line-height: 1.55; color: var(--ink-2); background: var(--gold-soft); border: 1px solid var(--gold); border-radius: var(--r-sm); padding: 12px; cursor: pointer; } .da-vigia b { color: var(--acento-txt); } .da-vigia span { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--acento-txt); } .da-vigia.off { background: var(--paper); border-color: var(--line); color: var(--ink-3); cursor: default; } .da-vigia i { color: var(--acento-txt); margin-right: 4px; } /* ---------- Calendario ---------- */ .cal-header-main { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .cal-header-main h2 { /* La letra de INTERFAZ, no la de títulos: aquí hay un AÑO. La de títulos no alinea cifras, así que "Julio 2026" se veía irregular y, al pasar de un mes a otro, los números cambiaban de sitio. Con la de interfaz todas las cifras miden lo mismo y el título se queda quieto. */ font-family: var(--font-ui); font-size: 19px; font-weight: 700; color: var(--ink); text-transform: capitalize; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .btn-nav-cal { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-2); font-size: 13px; transition: background var(--speed), color var(--speed), border-color var(--speed); } .btn-nav-cal:hover { background: var(--navy-900); color: var(--gold); border-color: var(--navy-900); } /* ============================================================ 📅 31-08-2026 · EL CALENDARIO EN EL CELULAR ------------------------------------------------------------ Lo trajo Piero con la captura del teléfono: *«el calendario en Agenda se ve muy apretado en celular… que salgan más anchos los cuadros y se pueda deslizar a la derecha sin que se rompa el calendario saliendo de los márgenes»*. Y la captura no engañaba: siete columnas a `1fr` dentro de 375 px dan casillas de 44 px de ancho por 92 de alto — columnas verticales donde no cabe ni el número del día con una etiqueta debajo. 🔑 LA SOLUCIÓN: en el celular la rejilla deja de encogerse (`min-width`) y el CONTENEDOR se desliza. Los nombres de los días y las casillas viven en la MISMA rejilla, así que se deslizan juntos: no hay forma de que la cabecera se desalinee de su columna, que es como se rompen estos calendarios. ⚠️ `overflow: hidden` era justo lo que impedía deslizar. Se cambia por `overflow-x: auto` con `overscroll-behavior-x: contain`, para que llegar al final del calendario NO arrastre la página entera hacia atrás. 🪤 Y el desbordamiento se queda DENTRO de la tarjeta: es el contenedor el que se desliza, no el `body`. Por eso `max-width: 100%` — sin él, la rejilla ancha empuja la tarjeta y el que se sale de los márgenes es el sitio entero, que es exactamente lo que él pedía evitar (y la trampa del `100vw`). ============================================================ */ .calendar-scroll-wrapper { overflow: hidden; max-width: 100%; } .cal-grid-main { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .cal-day-name-main { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--accent-ink); padding: 8px 0 6px; position: sticky; top: 0; z-index: 1; background: var(--card); } .cal-day-cell { min-height: 92px; padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); transition: border-color var(--speed), box-shadow var(--speed); overflow: hidden; } /* Al abrir el Socio, el panel se comprime en UNA columna ordenada (no desordenado) */ body.socio-abierto .layout-panel-resumen, body.socio-abierto .layout-panel, body.socio-abierto .analisis-grid { grid-template-columns: 1fr; } .cal-day-cell:hover { border-color: var(--gold); } .cal-day-cell.today { border: 2px solid var(--gold); background: var(--gold-soft); } .cal-day-cell.today .day-number { color: var(--acento-txt); } .day-number { font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 4px; font-variant-numeric: tabular-nums; } .event-tag { display: block; font-size: 11px; font-weight: 600; color: #fff; padding: 4px 8px; border-radius: 5px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: filter 120ms; } .event-tag:hover { filter: brightness(1.2); } /* Sugerido por el Vigía y SIN confirmar: fantasma punteado. Debe leerse a simple vista que todavía no es un plazo agendado, solo una propuesta. */ .event-tag.sug { background: transparent; color: var(--acento-txt); border: 1px dashed var(--gold); font-style: italic; } /* ⚖️ 12-09-2026 · EL PLAZO QUE AÚN NO CORRE (aceptado desde un aviso del CEJ, sin cédula del SINOE todavía). Se ve como el sugerido —hueco y punteado, que es como se pinta lo que está a medias en este calendario— pero en el AZUL de lo que viene, no en el dorado de «falta que lo confirmes»: esto ya está aceptado, lo que falta no es tu decisión sino la notificación del juzgado. ⛔ NUNCA rojo ni ámbar: su fecha no es un vencimiento. Ver `esPlazoProvisional`. */ .event-tag.prov { background: color-mix(in srgb, var(--senal-info) 10%, transparent); color: var(--info-txt); border: 1px dashed color-mix(in srgb, var(--senal-info) 60%, transparent); } /* 📅 El calendario en pantalla estrecha: casillas ANCHAS y se desliza. Ver el porqué largo en `.calendar-scroll-wrapper`. 76 px de ancho es lo medido para que quepa «12» y una etiqueta corta debajo sin cortarla; a `1fr` salían 44 px y por eso se veía como una reja. 🔑 El deslizamiento se anuncia con `scroll-snap` por columnas: al soltar, la semana queda encajada y no a medio día, que es lo que hace que estos calendarios parezcan rotos. ⚠️ Se aplica a 640 px y no a 480: entre esas dos medidas (tabletas de pie, ventanas a media pantalla) el problema es el mismo y hasta hoy no lo cubría nadie. */ @media (max-width: 640px) { .calendar-scroll-wrapper { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; /* Sitio para la barra de deslizar, para que no tape la última fila. */ padding-bottom: 6px; } .cal-grid-main { grid-template-columns: repeat(7, 76px); min-width: max-content; gap: 5px; } .cal-day-cell, .cal-day-name-main { scroll-snap-align: start; } .cal-day-cell { min-height: 78px; padding: 6px; } .day-number { font-size: 13px; } .event-tag { font-size: 10.5px; padding: 3px 6px; margin-bottom: 3px; } /* La pista de que hay más a la derecha: una sombra en el borde que se va sola al llegar al final. Sin ella, el sábado y el domingo son invisibles y nadie desliza lo que no sabe que existe. */ .calendar-scroll-wrapper { background: linear-gradient(to right, var(--card) 30%, rgba(0,0,0,0)) left center / 24px 100% no-repeat, linear-gradient(to left, var(--card) 30%, rgba(0,0,0,0)) right center / 24px 100% no-repeat, radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.16), transparent) left center / 12px 100% no-repeat, radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), transparent) right center / 12px 100% no-repeat; background-attachment: local, local, scroll, scroll; } } /* ---------- Tablas ---------- */ table { width: 100%; border-collapse: collapse; font-size: 13px; } thead th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--ink-3); padding: 12px 16px; border-bottom: 2px solid var(--line); background: var(--paper); } tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; } tbody tr { transition: background 120ms; } tbody tr:hover { background: var(--gold-soft); } .summary-tasks-box { margin-top: 20px; } .summary-tasks-box .card-body { overflow-x: auto; } .badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-lg); } .badge-rojo { background: var(--danger-bg); color: var(--danger-txt); } /* Insignias de estado en tablas — mismo estilo, texto blanco legible */ .tag-estado { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-lg); color: #fff; white-space: nowrap; } .tag-estado.te-vencido { background: var(--danger); } .tag-estado.te-hoy { background: var(--warning); color: #fff; } .tag-estado.te-prox { background: var(--info); } .alerta-dinamica-card { margin-top: 20px; } @keyframes pulse-alert { 0%, 100% { box-shadow: var(--shadow-1); } 50% { box-shadow: 0 0 0 4px rgba(179, 54, 42, 0.15); } } /* ---------- Formularios ---------- */ .form-group { margin-bottom: 16px; } .form-group label, /* Mismo aspecto, distinto significado. Una etiqueta