:root{ --navy:#004090; --navy2:#0060B0; --navy-deep:#00336d; --cyan:#20B0F0; --cyan-deep:#0E8FD6; --ink:#0E1424; --gray:#5B6478; --gray-soft:#8A93A6; --line:#E4E7EE; --line-soft:#EEF1F6; --block:#F4F7FB; --bg:#FFFFFF; --amber:#B7791F; --amber-bg:#FBF3E2; --rust:#B4502E; --rust-bg:#FBEEE9; --good:#1E7F5C; --good-bg:#E7F4EE; --r:10px; --r-sm:7px; --shadow:0 1px 2px rgba(14,20,36,.04), 0 6px 18px rgba(14,20,36,.06); /* --tb calza con la altura real de .sb-head: 13+13 de padding + 32 de logo + 1 de borde */ --sb:252px; --tb:58px; } *{box-sizing:border-box; margin:0; padding:0;} /* ---------- dónde está el cursor del teclado ---------- Un solo anillo para todo lo que se puede enfocar. Antes había diecinueve reglas sueltas —casi todas en Correspondencia y Reuniones— y el resto de los controles no señalaban nada: quien navega con el teclado no sabía dónde estaba parado. :focus-visible y no :focus, que es la diferencia entre marcar cuando hace falta y marcar siempre: con :focus, cada clic del ratón deja el anillo pegado en el botón pulsado hasta que se pulse en otro sitio. Va arriba del todo y sin !important a propósito: es el suelo, no el techo. Cualquier regla posterior más específica —las que ya existen— lo sustituye sin pelear. */ :focus-visible{ outline:2px solid var(--navy2); outline-offset:2px; border-radius:4px; } /* El borde del velo y el de la tarjeta del modal se enfocan por programa (para atrapar el foco) y no son controles: marcarlos confunde. */ .modalbg:focus-visible, .modalcard:focus-visible{outline:none;} html{overflow-y:scroll;} /* barra siempre presente: sin brincos de ancho al cambiar de tab */ /* Red de seguridad contra el desbordamiento horizontal de la página entera: reportado por el usuario con capturas de móvil donde el contenido aparecía desplazado, con solo un borde de texto visible a la izquierda y el resto en blanco — un elemento más ancho que la pantalla empujaba el scroll horizontal de toda la página en vez de quedarse contenido en su propio recuadro (que es lo que .tscroll/.vscroll sí hacen para las tablas ya identificadas). Con esto, cualquier desborde que se escape se recorta en vez de mover la página entera. */ /* hidden primero y clip después: los navegadores viejos se quedan con hidden y los que entienden clip usan clip, que es el que hace falta. `overflow-x:hidden` en el body lo convierte en un contenedor de desplazamiento, y eso descoloca los doce position:sticky de esta hoja —empezando por la barra superior—, porque un sticky se pega a su contenedor de desplazamiento más cercano y ése no rueda. `clip` recorta igual pero NO crea contenedor, así que los sticky siguen pegándose a la ventana. */ html,body{overflow-x:hidden; overflow-x:clip;} html,body{font-family:'Helvetica Neue',Arial,sans-serif; color:var(--ink); background:var(--block); -webkit-font-smoothing:antialiased;} body{font-size:13px; line-height:1.45;} .tnum{font-variant-numeric:tabular-nums;} a{color:inherit; text-decoration:none;} svg{display:block;} /* ===================== SIDEBAR ===================== */ .sidebar{position:fixed; top:0; left:0; bottom:0; width:var(--sb); z-index:30; /* var(--navy), no el hex suelto que tenía antes (#003a82, muy cerca del --navy por defecto pero fijo): con un color fijo en el primer alto de la franja, el interruptor de paleta del topbar cambiaba el resto de la pantalla pero la sidebar —lo más grande y lo primero que se ve— se quedaba a medias, todavía azul con cualquier paleta elegida. */ background:linear-gradient(180deg,var(--navy) 0%, var(--navy-deep) 100%); color:#fff; display:flex; flex-direction:column; overflow:hidden;} /* El logo del CIIP se muestra completo (acrónimo + nomenclatura, sin recortar) y "Atlas" queda a su misma altura de caja, ambos centrados entre sí por el centro de caja. El sidebar se ensanchó (252→268px) para darle a esta pareja espacio real de sobra, en vez de depender del recorte: width/max-width fijos en .sb-head y overflow:hidden en ambos niveles quedan solo como cinturón de seguridad, no como solución. Importante: la altura real de esta cabecera (padding + el más alto de sus dos hijos + borde) tiene que calzar con --tb, la altura de .topbar (línea ~67) — son dos elementos independientes que se tocan en el mismo borde superior; si se desalinean, el contenido blanco "asoma" antes de que termine el azul del logo. Si vuelve a cambiar el tamaño del logo o de "Atlas", recalcular --tb a la par. */ /* Logo institucional + "Atlas" en Instrument Serif (la tipografía de la marca del producto), a la izquierda y contenidos: 32px de logo, 24px de "Atlas" y un separador fino. --tb (59) calza la cuenta 13+32+13+1. */ .sb-head{width:100%; max-width:100%; padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.10); display:flex; align-items:center; justify-content:flex-start; gap:12px; overflow:hidden;} .sb-head img{height:32px; width:auto; display:block; flex-shrink:0;} .sb-head .pn{font-family:'Instrument Serif',Georgia,serif; font-size:30px; font-weight:400; letter-spacing:.01em; line-height:1; white-space:nowrap; flex-shrink:0; border-left:1px solid rgba(255,255,255,.25); padding-left:12px;} /* align-items:baseline (no center): el logo (imagen, 2 líneas — CIIP + subtítulo) y "Atlas" (texto, 1 línea) tienen alturas de caja distintas, así que centrarlos por caja completa no los deja "a la par" — la línea de base es el punto en común real entre una imagen y un texto. Reemplaza el ajuste a mano que había antes (translateY fijo, afinado para una combinación de tamaños que ya no cuadraba). */ .sb-head{padding:16px 18px 14px; border-bottom:1px solid rgba(255,255,255,.10); display:flex; align-items:baseline; gap:11px;} .sb-head img{height:30px; width:auto;} .sb-head .pn{font-family:'Instrument Serif',Georgia,serif; font-size:34px; font-weight:400; letter-spacing:.01em; line-height:1;} /* Ya no hay una regla para "Atlas": el logo y la palabra son una sola imagen (assets/logo_ciip_atlas.png, generada por scripts/local/generar-logo-atlas.py). Como texto, el cuadre con el logo dependía del cuerpo de letra —que solo admite enteros— y siempre sobraba o faltaba un píxel abajo; encima obligaba a cargar una fuente externa solo para esto. En la imagen el ajuste es exacto por construcción y no depende de cómo la dibuje cada equipo. */ .sb-nav{flex:1 1 auto; overflow-y:auto; padding:10px 10px 24px;} .sb-nav::-webkit-scrollbar{width:7px;} .sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16); border-radius:8px;} /* EL RÓTULO DE UN GRUPO. Iba a 9.5px contra los 12.5 de los módulos: tres puntos de diferencia es demasiada caída para dos textos que van uno encima del otro, y «Inversión» acababa leyéndose como letra chica al pie del bloque anterior en vez de como el encabezado del que viene debajo. Sube a 11px, que es el tamaño que Atlas le da a este mismo tipo de rótulo en el resto de la casa (.fk-k, .na-sec: 11px y peso de 700 a 800). Queda 1.5px por debajo del módulo, que es la distancia justa: se lee sin esfuerzo y sigue siendo, claramente, el que manda sobre los de abajo. La jerarquía no la carga el cuerpo de letra sino el color —.55 contra el .80 de un módulo— y la sangría: los módulos entran con su icono, el rótulo no. Por eso puede crecer sin ponerse a competir con ellos. */ .sb-sec-h{display:flex; align-items:center; width:100%; gap:8px; margin-top:14px; padding:7px 10px; background:transparent; border:none; color:rgba(255,255,255,.55); font-size:11px; font-weight:700; letter-spacing:.01em; cursor:pointer; border-radius:7px; font-family:inherit;} .sb-sec-h:first-child{margin-top:2px;} .sb-sec-h:hover{background:rgba(255,255,255,.06); color:rgba(255,255,255,.78);} .sb-sec-h .chev{width:11px; height:11px; margin-left:auto; flex:0 0 auto; transition:transform .18s ease;} .sb-sec-h .chev svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:block;} .sb-sec-h[aria-expanded="true"] .chev{transform:rotate(180deg);} .sb-sec-body{overflow:hidden; max-height:0; transition:max-height .22s ease;} .sb-sec-body[data-open="1"]{max-height:600px;} @media (prefers-reduced-motion:reduce){ .sb-sec-body, .sb-sec-h .chev{transition:none;} } .sb-item{display:flex; align-items:center; gap:9px; padding:6.5px 10px; border-radius:7px; color:rgba(255,255,255,.80); font-size:12.5px; font-weight:500; cursor:pointer; position:relative;} .sb-item:hover{background:rgba(255,255,255,.08); color:#fff;} .sb-item .ic{width:15px; height:15px; flex:0 0 auto; opacity:.7;} .sb-item .ic svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:block;} .sb-item.active{background:rgba(32,176,240,.16); color:#fff; font-weight:700;} .sb-item.active::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; background:var(--cyan); border-radius:0 3px 3px 0;} .sb-item.active .ic{opacity:1; color:var(--cyan);} .sb-item .cnt{margin-left:auto; font-size:9.5px; font-weight:700; color:rgba(255,255,255,.55); font-variant-numeric:tabular-nums;} .sb-item .cnt.cnt-zero{display:none;} .sb-item.soon{color:rgba(255,255,255,.45); cursor:default;} .sb-item.soon:hover{background:transparent; color:rgba(255,255,255,.45);} .sb-item.soon .ic{opacity:.4;} .sb-item .soon-tag{margin-left:auto; font-size:8px; font-weight:700; letter-spacing:.06em; text-transform:capitalize; color:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.18); border-radius:20px; padding:1px 6px;} /* ===================== TOPBAR ===================== */ .main{margin-left:var(--sb); transition:margin-left .22s ease;} /* ---------- la pantalla de una institución ---------- Quien entra representando a un ente no trabaja en el CIIP: el menú lateral no le sirve —son módulos a los que no tiene acceso— y verlo ahí, aunque esté deshabilitado, sugiere que hay algo detrás. Se retira entero, y el contenido ocupa el ancho completo. El botón de hamburguesa del encabezado también sobra: no hay menú que abrir. */ body.modo-ente .sidebar, body.modo-ente .nav-btn, body.modo-ente .nav-backdrop{display:none;} body.modo-ente .main{margin-left:0;} .sidebar{transition:transform .22s ease;} @media (min-width:861px){ body.sb-collapsed .sidebar{transform:translateX(-100%);} body.sb-collapsed .main{margin-left:0;} } @media (prefers-reduced-motion:reduce){ .main, .sidebar{transition:none;} } .topbar{position:sticky; top:0; z-index:20; height:var(--tb); background:var(--navy); display:flex; align-items:center; gap:14px; padding:0 20px; color:#fff; box-shadow:0 1px 0 rgba(0,0,0,.08);} .tb-spacer{flex:1 1 auto;} .user{position:relative; display:flex; align-items:center; gap:10px; padding:5px 8px 5px 6px; border-radius:9px; cursor:pointer; user-select:none;} .user:hover{background:rgba(255,255,255,.10);} .avatar{width:38px; height:38px; flex:0 0 38px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--navy2)); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.14);} .avatar.sm{width:34px; height:34px; flex:0 0 34px; font-size:12px; box-shadow:none;} .user .u-meta{line-height:1.2;} /* La campana y el selector de paleta ocupan ~60px más en una barra que ya iba justa: el nombre pasa a recortarse con puntos suspensivos. Sin esto, un nombre largo se parte en dos líneas dentro de una barra de alto fijo y lo que sobra se sale por debajo. */ .user .u-name{font-size:13px; font-weight:700; color:#fff; max-width:38vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .user .u-chev{font-size:11px; color:rgba(255,255,255,.7); transition:transform .16s ease;} .user.open .u-chev{transform:rotate(180deg);} .usermenu{position:absolute; top:calc(100% + 9px); right:0; width:250px; background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:11px; box-shadow:0 8px 30px rgba(14,20,36,.16); padding:6px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .15s ease, transform .15s ease; z-index:60; cursor:default;} .user.open .usermenu{opacity:1; visibility:visible; transform:translateY(0);} .um-head{display:flex; align-items:center; gap:10px; padding:9px 10px 10px;} .um-name{font-size:12.5px; font-weight:700; color:var(--ink);} .um-mail{font-size:10.5px; color:var(--gray); margin-top:1px;} .um-sep{height:1px; background:var(--line-soft); margin:5px 4px;} .um-item{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:7px; font-size:12.5px; font-weight:600; color:#2A3346; cursor:pointer;} .um-item:hover{background:var(--block);} .um-item svg{width:15px; height:15px; flex:0 0 auto; fill:none; stroke:var(--gray); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;} .um-item.danger{color:var(--rust);} .um-item.danger:hover{background:var(--rust-bg);} .um-item.danger svg{stroke:var(--rust);} /* ---------- el buzón interno: la campana de la barra ---------- Mismo desplegable que .usermenu, que tiene justo al lado: blanco, filete, sombra y esquinas de 11px. Lo que cambia es el ancho —un aviso es una frase, no un renglón de menú— y que la lista se desplaza dentro del panel en vez de estirarlo hasta salirse de la pantalla. */ .notis{position:relative; flex:0 0 auto;} /* ===================== CONTENT GRID ===================== */ .content{padding:20px 22px 40px;} .grid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px; align-content:start;} .col12{grid-column:span 12;} .col8{grid-column:span 8;} .col7{grid-column:span 7;} .col6{grid-column:span 6;} .col5{grid-column:span 5;} .col4{grid-column:span 4;} .card{background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px;} .card.flush{padding:0; overflow:hidden;} /* marco activo de un panel de gráfico con un filtro en el sitio puesto (ver crPanel, 4° parámetro "limpiar") — reemplaza el borde gris sutil de .card por uno dorado prominente mientras haya algo seleccionado en ESE panel; vuelve al borde normal en cuanto se limpia. */ .card.cr-panel-on{border:2px solid #B87315;} .sec-h{display:flex; align-items:center; gap:10px; margin-bottom:13px; flex-wrap:wrap;} .sec-h .t{font-size:14px; font-weight:700; color:var(--ink); letter-spacing:-.01em;} .sec-h .sub{font-size:12px; color:var(--gray); font-weight:500;} .sec-h .spacer{flex:1 1 auto;} .sec-h .link{font-size:11px; font-weight:600; color:var(--navy2); cursor:pointer;} .tick{width:7px; height:7px; background:var(--cyan); border-radius:2px; flex:0 0 auto;} /* ---- títulos de sección con regla (contratos suscritos) · opción C de maqueta-titulos-seccion.html ---- El título ocupa lo suyo y una línea que se desvanece llena el resto del ancho: separa las secciones sin dibujar un borde duro y da sensación de anchura, que es lo que pide un panel donde cada bloque ocupa la caja entera. Acotado a los dos contenedores del módulo y no a .sec-h, que lo comparten 33 secciones de Atlas y ninguna otra pidió cambiar. No hace falta tocar el marcado: la regla es un ::after. Se queda en el cian de marca en vez de un color por sección — el módulo ya usa el color para decir sector y estado, y un tercer sistema competiría con esos dos. nowrap con el título a min-width:0: si la fila pudiera partirse, la regla caería sola a una segunda línea y quedaría una raya suelta bajo el título. Así el texto se parte por dentro si hace falta y la regla nunca se despega; el 24px de base es lo que puede encogerse antes de desaparecer. El azul es --cyan-deep (#0E8FD6) y no el --cyan (#20B0F0) del cuadrito genérico: es el mismo que usan los medidores de las tarjetas de este panel y las barras de monto de sus bloques, así que la regla queda del color de los gráficos que encabeza en vez de un tono más pálido que ninguna otra cosa de la pantalla usa. El cuadrito se iguala con ella por lo mismo — si no, el mismo título llevaría dos azules distintos a diez píxeles de distancia. */ #proyhead .sec-h, #proystats .sec-h{gap:12px; flex-wrap:nowrap;} #proyhead .sec-h .t, #proystats .sec-h .t{font-size:14.5px; font-weight:800; min-width:0;} #proyhead .sec-h .tick, #proystats .sec-h .tick{background:var(--cyan-deep);} #proyhead .sec-h::after, #proystats .sec-h::after{content:''; flex:1 1 24px; min-width:24px; height:1px; background:linear-gradient(90deg, var(--cyan-deep), transparent);} /* ---- page header ---- */ .page-h{display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap;} .page-h h1{font-size:22px; font-weight:700; letter-spacing:-.02em;} .page-h .p-sub{font-size:12px; color:var(--gray); margin-top:4px; max-width:760px; line-height:1.5;} .page-h .p-actions{margin-left:auto; display:flex; align-items:center; gap:9px; flex:0 0 auto;} /* ---- summary stat row ---- --cols (opcional, vía crKpiRow): número de columnas, por defecto 4 — compartida por toda la app, así que el resto de los usos (sin la variable puesta) se quedan igual que siempre. */ .stat-row{display:grid; grid-template-columns:repeat(var(--cols,4),1fr); gap:14px;} .stat{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:14px 16px;} .stat .sn{font-size:24px; font-weight:800; letter-spacing:-.02em;} .stat .sn.accent{color:var(--cyan-deep);} .stat .sl{font-size:11px; color:var(--gray); margin-top:3px; line-height:1.35;} /* Denominador de un KPI de proporción ("57 de 63"): entra en la misma línea pero con peso y tamaño de texto secundario, para que el ojo caiga en la cifra y no en el "de 63". Lo pinta chartKpiRow cuando el KPI trae pct. */ .stat .sn .sd{font-size:12px; font-weight:600; color:var(--gray-soft); margin-left:6px; letter-spacing:0;} /* Medidor de la proporción. 3px y en el color de acento: acompaña a la cifra, no compite con los gráficos de abajo. La pista se ve completa aunque el valor sea 0, que es justo el caso que hay que poder distinguir de "sin dato". */ .stat .smeter{height:3px; border-radius:3px; background:var(--line); margin-top:9px; overflow:hidden;} .stat .smeter span{display:block; height:100%; border-radius:3px; background:var(--cyan-deep);} /* KPI clicable (Correspondencia · Próximas acciones): mismo par de colores que .enteli.on (selección real, ya viva en Todos los activos → Ente), no .fchip.on/.segbtn.on (pensados para píldoras/segmentos con fondo sólido, no para tarjetas). .on va después de :hover a propósito: misma especificidad, y así un tile ya seleccionado no parpadea al pasar el mouse. */ .stat.clic{cursor:pointer;} .stat.clic:hover{border-color:#CDD5E1;} .stat.clic.on{background:#EEF5FC; border-color:#CFE0F0;} /* ---- stage funnel ---- */ .funnel{display:flex; align-items:stretch; gap:0;} .fst{flex:1 1 0; border:1px solid var(--line); border-radius:8px; padding:11px 12px; background:var(--bg); min-width:0; cursor:pointer;} .fst:hover{border-color:#CDD5E1;} .fst.inv{background:#F2FAFE; border-color:#CDEBFA;} .fst .fc{font-size:9px; font-weight:800; color:var(--navy2); letter-spacing:.04em;} .fst.inv .fc{color:var(--cyan-deep);} .fst .fnm{font-size:10.5px; font-weight:600; color:var(--ink); margin-top:3px; line-height:1.25;} .fst .fn{font-size:20px; font-weight:800; margin-top:6px; letter-spacing:-.02em;} .fst .fcv{font-size:9.5px; color:var(--gray-soft); margin-top:1px;} .arr{flex:0 0 22px; display:flex; align-items:center; justify-content:center; color:#C2CAD7; font-size:15px; font-weight:800;} /* ---- filter bar ---- */ .filters{display:flex; align-items:center; gap:8px; flex-wrap:wrap;} .fsearch{display:flex; align-items:center; gap:8px; background:var(--block); border:1px solid var(--line); border-radius:8px; padding:8px 12px; flex:1 1 240px; min-width:200px; color:var(--gray-soft);} .fsearch input{border:none; background:transparent; outline:none; font-family:inherit; font-size:12.5px; color:var(--ink); width:100%;} .fchip{font-size:11px; font-weight:600; color:var(--gray); background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:6px 12px; cursor:pointer; white-space:nowrap;} .fchip:hover{border-color:#CDD5E1;} .fchip.on{background:var(--navy); color:#fff; border-color:var(--navy);} /* El recuento dentro de una pastilla. Existía solo para las pestañas (.tabitem .tcount); al pasar las etapas a pastillas, el número quedaba pegado al texto — "En estructuración22". Mismo tratamiento de píldora que en las pestañas, con su separación, y en la pastilla activa se aclara sobre el fondo azul en vez de perderse. */ .fchip .tcount{margin-left:7px; font-size:10px; font-weight:700; color:var(--gray-soft); background:var(--block); border:1px solid var(--line-soft); border-radius:20px; padding:0 6px;} .fchip.on .tcount{color:#fff; background:rgba(255,255,255,.20); border-color:transparent;} .fdiv{width:1px; height:20px; background:var(--line); margin:0 2px;} /* El resumen (recuento) vive en su propia línea siempre: si comparte línea con los chips, su ancho variable según el filtro activo empuja a los chips a otro renglón y toda la barra "salta" al hacer clic. */ #catcount, #opohead{flex:1 1 100%; order:99; text-align:right; margin-top:2px;} /* ---- tab bar ---- */ /* Una sola fila, siempre. Con flex-wrap la última pestaña se caía sola a un segundo renglón —"Documentos" bajo las demás— y dejaba de leerse como parte del mismo grupo. Si no caben, la barra rueda en horizontal en vez de partirse; y se aprieta un poco el relleno para que casi nunca haga falta. */ .tabbar{display:flex; gap:2px; border-bottom:1px solid var(--line); flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;} .tabitem{display:flex; align-items:center; gap:6px; padding:9px 11px; font-size:12.5px; font-weight:600; color:var(--gray); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; flex:0 0 auto;} .tabitem:hover{color:var(--ink);} .tabitem.on{color:var(--navy); font-weight:700; border-bottom-color:var(--cyan);} .tabitem .tcount{font-size:10px; font-weight:700; color:var(--gray-soft); background:var(--block); border:1px solid var(--line-soft); border-radius:20px; padding:0 6px;} .tabitem.on .tcount{color:var(--cyan-deep); background:#E8F6FE; border-color:#CDEBFA;} /* ---- variante de módulo: el primer nivel de pestañas ---- La barra que navega un módulo entero y la que divide lo que se ve dentro de una de sus pestañas eran la misma cosa dibujada dos veces, una encima de otra. Abajo se resolvió con píldoras; aquí, dándole a la de arriba lo que la de abajo no tiene: una SUPERFICIE. Fondo propio de borde a borde, filete al pie y las esquinas de arriba redondeadas, como si el contenido colgara de ella. Así no compiten ni de reojo — una es la banda, la otra son objetos sueltos sobre una tira. Modificador y no cambio de .tabbar: esa clase la comparten nueve pantallas y en cuatro vive dentro de una ficha, donde el subrayado discreto es justo lo que corresponde. */ .tabbar.modulo{background:var(--bg); border-bottom:1px solid var(--line); border-radius:10px 10px 0 0; padding:0 10px; gap:4px;} .tabbar.modulo .tabitem{font-size:13.5px; padding:12px 14px;} /* Subrayado de 3px y no de 2: sobre una banda blanca el de 2 se perdía contra el filete del pie. */ .tabbar.modulo .tabitem.on{color:var(--navy); border-bottom-width:3px;} /* ---- la banda de los dos segundos niveles del módulo ---- La usan el Directorio (sus tres grupos) y el Panorama (sus dos): es el mismo nivel —un grupo dentro de la pestaña— y no había razón para que se vieran distintos. Superficie blanca a lo ancho de la rejilla. Estuvo un tiempo suelta sobre el gris de la página, separada solo con aire, y las píldoras quedaban flotando sin nada que dijera hasta dónde mandan. Con fondo propio se lee como lo que es —una banda que gobierna lo de abajo— y hace juego con las demás superficies del módulo. En píldoras y a la izquierda. En píldoras porque la barra del módulo, justo encima, es la subrayada: dos filas con la misma forma competían por la misma lectura, y cambiar de recurso —no de alineación— es lo que las separa de verdad. Y más baja que la del módulo, pero solo un poco: 43px contra 47. Ese margen de cuatro es todo lo que hace falta —el primer nivel manda y se nota— sin que la banda quede como un filete. Se llegó por los dos extremos: con 10px de relleno subía a 60 y pesaba más que el módulo; con 3px bajaba a 39 y se veía anémica. */ /* La banda blanca de los grupos de Correspondencia. La comparte la pantalla de Avisos (.av-tabs-sec): mismo papel —recortes de una misma lista— y por eso se AÑADE el selector en vez de copiar las reglas, que es como acaban dos bandas pareciéndose menos cada mes. */ .cr-grupos-sec, .av-tabs-sec{display:flex; flex-direction:column; align-items:flex-start; background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:5px 10px; margin-bottom:4px;} /* .cr-grupos.pastillas y no .cr-grupos a secas: la regla base de la variante en píldoras vive más abajo en esta misma hoja y, a igual especificidad, ganaba ella — el relleno se quedaba en 7px y la banda no bajaba de 45. */ .tabbar.pastillas.cr-grupos, .tabbar.pastillas.av-tabs{width:max-content; max-width:100%; padding:2px;} .tabbar.pastillas.cr-grupos .tabitem, .tabbar.pastillas.av-tabs .tabitem{font-size:12px; padding:5px 12px;} /* El aviso de "viendo solo estas" comparte la banda, así que se separa de las píldoras con su propia línea. */ .cr-grupos-sec .cr-remfiltro{width:100%; border-top:1px solid var(--line-soft); margin-top:8px; padding-top:9px;} .cr-remfiltro{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px;} /* ---- el listado: buscador arriba, filtros debajo ---- Las dos filas nacieron pegadas: .filters no traía margen inferior y la barra de desplegables (.sg-toolbar) arranca justo debajo, así que el buscador y los cuatro campos se leían como un solo bloque de controles. Son dos preguntas distintas —qué busco, y sobre qué recorto— y necesitan el aire que las separa. Catorce píxeles, los mismos que .sg-toolbar deja por debajo, para que la barra de filtros respire igual por arriba que por abajo. */ .cr-listado .filters{margin-bottom:14px;} /* La columna derecha de la fila de correspondencia: la fecha cuando se listan documentos, los días esperando cuando es la bandeja de Próximas acciones. Vivía sin regla propia —heredaba el tamaño del cuerpo y se leía tan fuerte como el asunto—; es un dato de apoyo y se comporta como el responsable de una tarea en .sg-resp: ancho fijo, alineado a la derecha, sin partirse en dos renglones. */ .cr-fila-fecha{flex:0 0 auto; min-width:82px; text-align:right; font-size:11.5px; color:var(--gray); white-space:nowrap; padding-top:2px;} /* Aquí vivía .cr-subnav-aire, el intento de separar el segundo nivel solo con espacio y escala. Se retiró: lo que de verdad lo separa del primero es la FORMA —arriba subrayada, abajo píldoras— y con eso la distancia deja de tener que hacer ese trabajo. Los dos niveles del módulo comparten hoy la misma banda blanca (.cr-grupos-sec). */ /* ---- variante en píldoras: el segundo nivel de pestañas ---- La usa hoy el Panorama de Correspondencia, cuyas sub-pestañas caen justo debajo de la barra del módulo: dos filas subrayadas idénticas, una encima de otra, no dejaban ver cuál manda sobre cuál. En píldoras el segundo nivel se lee como parte del primero sin competir con él. Nació para contratos suscritos, y de ahí el resto de este comentario. ---- Modificador y no cambio de .tabbar: esa clase la comparten siete vistas y la ficha del contrato, y ninguna pidió cambiar de aspecto. Sin subrayado: cada sector es una píldora sobre una tira gris y la activa se levanta en blanco. Cuando la fila se parte, no deja un subrayado huérfano bajo la primera línea. Allí iba sin conteo, porque la cifra de cada sector ya la daba el panel de abajo. En Correspondencia sí lo lleva: es el único sitio donde se dice cuántas cartas hay de cada grupo, y son dos píldoras, así que la fila no corre riesgo de partirse. */ .tabbar.pastillas{border-bottom:0; gap:5px; padding:3px; background:var(--block); border-radius:10px;} .tabbar.pastillas .tabitem{border-bottom:0; margin-bottom:0; padding:7px 11px; border-radius:7px; gap:6px;} .tabbar.pastillas .tabitem:hover{background:#E9EEF6; color:var(--ink);} .tabbar.pastillas .tabitem.on{background:var(--bg); font-weight:700; box-shadow:0 1px 3px rgba(14,20,36,.10);} /* El cuadrito de color es el mismo que el sector lleva en "Por sector", en el árbol de mayores compromisos y en las listas: ata la pestaña a sus barras. A media opacidad en las inactivas para que la fila no se lea como un semáforo de siete luces. */ .tabbar.pastillas .tpt{width:8px; height:8px; border-radius:2px; flex:0 0 auto; opacity:.5; transition:opacity .12s ease;} .tabbar.pastillas .tabitem:hover .tpt, .tabbar.pastillas .tabitem.on .tpt{opacity:1;} @media (prefers-reduced-motion:reduce){ .tabbar.pastillas .tpt{transition:none;} } /* ---- master-detail (por ente) ---- */ .md{display:flex; gap:20px; align-items:flex-start;} .md-rail{width:252px; flex:0 0 252px;} .md-list{display:flex; flex-direction:column; gap:3px; margin-top:10px; padding-right:2px;} .md-list::-webkit-scrollbar{width:7px;} .md-list::-webkit-scrollbar-thumb{background:var(--line); border-radius:8px;} .enteli{display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:8px; cursor:pointer; border:1px solid transparent;} .enteli:hover{background:var(--block);} .enteli.on{background:#EEF5FC; border-color:#CFE0F0;} .enteli .el-mono{width:30px; height:30px; border-radius:7px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; flex:0 0 auto; letter-spacing:0;} .enteli .el-name{font-size:11.5px; font-weight:700; line-height:1.2;} .enteli .el-sub{font-size:9.5px; color:var(--gray-soft); margin-top:1px;} .enteli .el-badge{margin-left:auto; display:flex; align-items:center; gap:6px; flex:0 0 auto;} .enteli .el-cnt{font-size:11px; font-weight:800; color:var(--gray); font-variant-numeric:tabular-nums;} .enteli.on .el-cnt{color:var(--navy);} .enteli .el-dot{width:7px; height:7px; border-radius:50%; background:var(--amber);} .md-main{flex:1 1 auto; min-width:0;} .ente-head{display:flex; gap:11px; align-items:flex-start; padding-bottom:13px; border-bottom:1px solid var(--line-soft);} .ente-metastrip{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px;} .seg{display:flex; background:var(--block); border:1px solid var(--line); border-radius:8px; padding:3px; gap:3px;} .segbtn{flex:1 1 0; text-align:center; font-size:11px; font-weight:700; color:var(--gray); padding:6px 8px; border-radius:6px; cursor:pointer;} .segbtn:hover{color:var(--ink);} .segbtn.on{background:#fff; color:var(--navy); box-shadow:0 1px 2px rgba(14,20,36,.08);} .hseg .segbtn{flex:0 0 auto; padding:6px 12px; white-space:nowrap;} /* Un desplegable con la misma piel que .seg. Se usa donde hay que elegir de una lista larga y con nombres largos —los proyectos de una contraparte—, que en botones uno al lado del otro no cabrían. Misma caja, mismo tipo de letra y mismo peso que .segbtn, para que lea como parte de la familia. */ .segsel{position:relative; display:inline-flex; align-items:center; background:var(--block); border:1px solid var(--line); border-radius:8px; padding:3px; max-width:280px;} .segsel::after{content:'▾'; position:absolute; right:11px; font-size:10px; color:var(--gray); pointer-events:none;} .segsel select{appearance:none; -webkit-appearance:none; border:0; background:transparent; cursor:pointer; font-family:inherit; font-size:11px; font-weight:700; color:var(--gray); padding:6px 26px 6px 10px; border-radius:6px; max-width:100%; text-overflow:ellipsis;} .segsel select:hover{color:var(--ink);} .segsel.on{background:#fff; box-shadow:0 1px 2px rgba(14,20,36,.08);} .segsel.on select{color:var(--navy);} /* Buscar dentro de la pestaña de Documentos de una ficha. Mismo alto y misma caja que los .segsel que lleva al lado, para que la fila de controles se lea como una sola —no como un buscador pegado a dos desplegables—. */ /* "Ir al módulo →" al final de cada módulo del manual, dentro de la Guía. Se lee cómo se hace algo y se entra a hacerlo de un clic. */ .gm-ir{display:inline-block; margin-top:14px; font-size:12.5px; font-weight:700; color:var(--navy); background:var(--block); border:1px solid var(--line); border-radius:8px; padding:8px 14px; cursor:pointer;} .gm-ir:hover{background:#fff; border-color:var(--navy); box-shadow:0 1px 2px rgba(14,20,36,.08);} .inv-docq{width:150px; min-width:0; flex:0 1 150px; background:var(--block); border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:11px; font-weight:600; color:var(--ink); padding:8px 10px;} /* Calcado del .segsel de al lado, para que el buscador y los desplegables se lean como una sola fila de controles y no como tres cajas distintas. Las medidas no son a ojo: .segsel es un marco con padding:3px que envuelve un select con padding:6px 26px 6px 10px, así que el alto sale de 3+6 arriba y abajo, y el texto empieza a 3+10 de la izquierda. De ahí 9px 13px, el mismo font-size:11px y el mismo peso 700. El ancho iguala su max-width:280px. El foco sí se distingue —fondo blanco y borde navy—: en un campo donde se escribe hace falta saber si el cursor está dentro, que en un select no. */ .inv-docq{width:280px; max-width:280px; min-width:120px; flex:0 1 auto; background:var(--block); border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:11px; font-weight:700; color:var(--ink); padding:9px 13px;} .inv-docq::placeholder{color:var(--gray); font-weight:700;} .inv-docq:focus{outline:none; background:#fff; border-color:var(--navy); box-shadow:0 1px 2px rgba(14,20,36,.08);} /* El selector de categoría que va EN CADA FILA de documento: más chico que el de la barra, y sin robarle sitio al nombre del archivo. */ /* Lista para vincular representantes que ya existen: casilla, nombre (con las empresas donde ya está, para no confundir a dos que se llaman igual) y su cargo en ESTA empresa. Alta acotada y con desplazamiento: son ~160 personas y la ventana no puede crecer sin fin. */ .cpap-lista{max-height:260px; overflow-y:auto; border:1px solid var(--line); border-radius:8px; padding:4px;} .cpap-row{display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:6px; cursor:pointer;} .cpap-row:hover{background:var(--block);} .cpap-row + .cpap-row{border-top:1px solid var(--line-soft);} .cpap-txt{display:flex; flex-direction:column; min-width:0; flex:1 1 auto;} .cpap-n{font-size:12.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cpap-e{font-size:11px; color:var(--gray-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cpap-cargo{flex:0 0 130px; font-family:inherit; font-size:11px; padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink);} .doc-cat{flex:none; max-width:190px; margin-left:10px;} .doc-cat select{font-size:10.5px; padding:5px 24px 5px 9px;} @media (max-width:720px){ .doc-cat{max-width:140px;} } .chip.navy{background:var(--navy); color:#fff;} /* ---- compact page header ---- */ .page-h2{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:2px;} .page-h2 .p-actions{margin-left:auto; align-self:center; display:flex; align-items:center; gap:10px; flex-wrap:wrap;} .ph-title{font-size:16px; font-weight:700; letter-spacing:-.01em;} .ph-sub{font-size:11.5px; color:var(--gray); font-weight:500;} @media (max-width:900px){ .md{flex-direction:column;} .md-rail{width:100%; flex:1 1 auto;} .md-list{flex-direction:row; overflow-x:auto; max-height:none; gap:7px; padding-bottom:6px;} .enteli{flex:0 0 auto; min-width:150px;} } /* ---- project cards ---- */ .pgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;} /* Las mismas tarjetas dentro de una ficha (los entes adscritos de un ministerio): la columna central es más estrecha que la página, y tres columnas fijas ahí dejan las tarjetas ilegibles. Se reparten por ancho disponible en vez de por número. */ .pgrid.encaja{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));} .pcard{border:1px solid var(--line); border-radius:11px; padding:15px 16px; background:var(--bg); display:flex; flex-direction:column; cursor:pointer; transition:border-color .12s ease, box-shadow .12s ease;} .pcard:hover{border-color:#CDD5E1; box-shadow:var(--shadow);} .pc-top{display:flex; align-items:center; gap:6px 8px; margin-bottom:9px; flex-wrap:wrap;} .pc-stage{font-size:9.5px; font-weight:800; letter-spacing:.03em; border-radius:20px; padding:2px 9px; white-space:nowrap;} .pc-stage.a{background:#EEF0F3; color:var(--gray);} .pc-stage.b{background:var(--amber-bg); color:var(--amber);} .pc-stage.c{background:#E9EFF7; color:var(--navy2);} .pc-stage.inv{background:#E8F6FE; color:var(--cyan-deep);} .pc-sector{font-size:10px; font-weight:600; color:var(--gray); background:var(--block); border:1px solid var(--line-soft); border-radius:20px; padding:2px 9px; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;} .pc-star{color:var(--amber); font-size:12px;} .pc-code{font-family:ui-monospace,'SF Mono',Consolas,monospace; font-size:9.5px; font-weight:600; color:var(--gray-soft); letter-spacing:.01em;} .pc-name{font-size:14px; font-weight:700; letter-spacing:-.01em; line-height:1.25;} .pc-loc{font-size:10.5px; color:var(--gray-soft); margin-top:3px;} .pc-desc{font-size:11.5px; color:#39414F; margin-top:9px; line-height:1.5; flex:1 1 auto;} .pc-foot{display:flex; align-items:center; gap:10px; margin-top:13px; padding-top:11px; border-top:1px solid var(--line-soft);} .pc-amt{font-size:14px; font-weight:800; letter-spacing:-.01em;} .pc-amt small{font-size:9.5px; font-weight:600; color:var(--gray-soft); display:block; letter-spacing:0;} .pc-amt.open{font-size:12px; font-weight:700; color:var(--gray);} .pc-fig{font-size:10px; font-weight:700; color:var(--gray); background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:2px 9px; margin-left:6px; white-space:nowrap;} .fchip.fig{font-size:10.5px; padding:4px 10px;} /* ---- etapas del motor de demanda (contrapartes) ---- */ .pc-stage.contacto{background:#EEF0F3; color:var(--gray);} .pc-stage.match{background:#E8F6FE; color:var(--cyan-deep);} .pc-stage.nda{background:var(--amber-bg); color:var(--amber);} .pc-stage.kyc{background:#E9EFF7; color:var(--navy2);} .pc-stage.negociacion{background:var(--navy); color:#fff;} .f-lbl{font-size:10px; font-weight:700; letter-spacing:.01em; color:var(--gray-soft); margin-right:2px;} .pc-data{margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:4px;} .pc-data .pd-l{font-size:9px; font-weight:700; letter-spacing:.01em; color:var(--gray-soft);} .pc-bar{width:78px; height:5px; border-radius:5px; background:var(--line); overflow:hidden;} .pc-bar i{display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,var(--navy2),var(--cyan));} .empty{padding:34px; text-align:center; color:var(--gray-soft); font-size:12px; border:1px dashed var(--line); border-radius:10px;} /* ---- grouped sections ---- */ .grp{margin-bottom:16px;} .grp:last-child{margin-bottom:0;} .grp-h{display:flex; align-items:center; gap:11px; margin-bottom:11px;} .grp-h .g-name{font-size:14px; font-weight:700;} .grp-h .g-meta{font-size:11px; color:var(--gray);} .grp-h .g-count{background:var(--navy); color:#fff; font-size:11px; font-weight:800; border-radius:20px; min-width:21px; height:21px; padding:0 7px; display:flex; align-items:center; justify-content:center;} .grp-h .spacer{flex:1 1 auto;} /* ---- kanban ---- */ /* Se había borrado por "ya no la usa nadie" (ver historial): vuelve a hacer falta porque la reversión de Contratos suscritos a su versión original (js/views/proyectos.js) envuelve el kanban en .klane otra vez. Mismo min-width:0 defensivo de siempre, contra el desborde de grid. */ .klane{min-width:0;} .kanban{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;} .kcol{background:var(--block); border:1px solid var(--line); border-radius:10px; padding:11px; min-width:0;} .khead{display:flex; align-items:center; gap:9px; padding:2px 4px 11px;} .kdot{width:9px; height:9px; border-radius:50%; flex:0 0 auto;} .kdot.a{background:var(--gray-soft);} .kdot.b{background:var(--amber);} .kdot.c{background:var(--navy2);} .kdot.inv{background:var(--cyan);} .kdot.late{background:var(--rust);} .kdot.warn{background:var(--amber);} /* novedades: feed del día */ .nv-row{display:flex; align-items:flex-start; gap:12px; padding:11px 6px; border-top:1px solid var(--line-soft); cursor:pointer; border-radius:var(--r-sm);} .nv-row:hover{background:var(--block);} .nv-row .kdot{margin-top:5px;} .nv-main{min-width:0; flex:1;} .nv-t{font-size:13px; font-weight:700; color:var(--ink); line-height:1.35;} .nv-d{font-size:11.5px; color:var(--gray); margin-top:1px;} .nv-f{margin-left:auto; flex:none; font-size:10px; color:var(--gray-soft); white-space:nowrap; padding-top:4px;} .ktitle{font-size:11.5px; font-weight:800; letter-spacing:.02em;} .ksub{font-size:10px; color:var(--gray); margin-top:1px;} .kbody{display:flex; flex-direction:column; gap:9px;} /* position:relative para que el aviso de la barra de retraso mida sus coordenadas contra la tarjeta y no contra el contenedor que rueda. Ojo: eso fija el origen, no evita el recorte —a un absolute lo recorta cualquier ancestro con overflow, sea o no su contenedor de referencia—, así que el aviso además tiene que quedarse dentro de la tarjeta. Ver .kc-ret-tx. */ .kcard{background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:10px 11px; cursor:pointer; position:relative; transition:opacity .12s ease, background .12s ease, border-color .12s ease;} .kcard:hover{border-color:#CDD5E1; box-shadow:var(--shadow);} @media (prefers-reduced-motion:reduce){ .kcard{transition:none;} } .kc-name{font-size:12px; font-weight:700; line-height:1.3;} .kc-meta{display:flex; align-items:center; gap:7px; margin-top:6px; font-size:10px; color:var(--gray); flex-wrap:wrap;} /* Un chip es white-space:nowrap y, como elemento flex, no encoge por debajo de su contenido: uno con un vínculo largo —"Tiryaki USA - Negociación Operación Carbonífera Zulia-Falcón"— se salía por el borde de la tarjeta. Se le pone tope y puntos suspensivos, con el texto completo en el title. Mismo tratamiento que ya usan los adjuntos de la línea de tiempo. */ .kcard .chip{max-width:100%; min-width:0; overflow:hidden; text-overflow:ellipsis; display:inline-block;} .kc-amt{font-weight:800; color:var(--ink); white-space:nowrap;} .kc-bar{height:4px; border-radius:4px; background:var(--line); overflow:hidden; margin-top:8px;} .kc-bar i{display:block; height:100%; background:linear-gradient(90deg,var(--navy2),var(--cyan));} .kc-hint{margin-top:8px; font-size:9.5px; font-weight:700; color:var(--cyan-deep);} /* flex-wrap como red de seguridad: el pie de una tarjeta de kanban lleva pastillas y enlaces cuyo largo depende de los datos —los días, las veces que se ha insistido, el rótulo de la acción—, y en una columna de 199px el ancho que sobra es de un puñado de píxeles. Sin esto, el día que un oficio llegue a "↻12" o una acción cambie de nombre, el pie se sale por la derecha en silencio. Envolviendo, en el peor caso baja a una segunda línea. */ .kc-foot2{display:flex; align-items:center; gap:7px; margin-top:8px; flex-wrap:wrap;} .age{display:inline-flex; align-items:center; font-size:9px; font-weight:800; padding:1px 6px; border-radius:20px; background:var(--block); color:var(--gray); border:1px solid var(--line-soft); white-space:nowrap; flex:none;} /* avisos de salida del proyecto y caja de notas (restaurados: cayeron por error al retirar el CSS del embudo de chevrons) */ .cp-alert{margin-top:16px; padding:12px 14px; border-radius:8px; font-size:12.5px; line-height:1.55;} /* La exclusividad, en el azul oscuro de la casa. Iba en amarillo, y el amarillo en Atlas avisa de algo que se está torciendo —una espera larga, un dato sin verificar—. Una exclusividad no se está torciendo: es un estado del proyecto, y de los buenos. En azul dice lo que es, un dato firme que hay que tener presente, y de paso deja de competir con los avisos que sí piden que alguien haga algo. Los otros dos siguen donde estaban: el verde es un cierre y el rojo un descarte, y ahí el color es el significado. */ .cp-alert.exclusividad{background:var(--navy); color:#fff;} /* El aviso de que la lista está filtrada, con clase propia: tomaba prestada la de exclusividad solo por el amarillo. Aquí el amarillo sí es lo suyo —«ojo, no estás viendo todo»— y se queda. */ .cp-alert.filtros{background:var(--amber-bg); color:#7a5414;} .cp-alert.comprometida{background:var(--good-bg); color:#155c40;} .cp-alert.descartada{background:var(--rust-bg); color:#7a3420;} .cp-notabox{margin-bottom:18px;} .cp-notabox textarea{width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 11px; font-family:inherit; font-size:12.5px; color:var(--ink); background:var(--bg); resize:vertical; min-height:56px;} .cp-notabox textarea:focus{outline:none; border-color:var(--navy2);} /* ---------- corregir una actividad en su sitio ---------- Mismo gesto que la minuta de una reunión (.reu-ver): en reposo no se ve un campo de formulario, solo el texto; el fondo al pasar por encima es toda la pista de que se puede tocar. Un historial lleno de cajas de texto se lee como un formulario, y esto es una lista para leer. */ .inv-nota-ver{margin:0 -8px; padding:2px 8px; border-radius:7px; cursor:text; transition:background .12s;} .inv-nota-ver:hover{background:var(--block);} .inv-nota-ver:focus-visible{outline:2px solid var(--navy2); outline-offset:1px;} /* Al corregir, el renglón se cambia por el MISMO formulario del alta —fecha, tipo y resumen—, así que aquí ya no hay un textarea suelto que vestir. */ .inv-nota-form{flex:1 1 auto; min-width:0;} .inv-nota-form .cp-nota-campos{margin-bottom:11px;} /* Las acciones aparecen al pasar por la fila: siempre visibles convertían cada renglón del historial en una barra de botones. */ .inv-nota-acc{display:inline-flex; gap:10px; margin-left:8px; opacity:0; transition:opacity .12s;} .tl-item:hover .inv-nota-acc, .inv-nota-acc:focus-within{opacity:1;} /* En pantalla táctil no hay «pasar por encima»: un botón que solo existe con ratón no existe. */ @media (hover:none){ .inv-nota-acc{opacity:1;} } /* El ámbito, en la cabecera de la tarjeta: al lado del título y con el mismo alto que los demás controles de una .a-sec. Se le pone tope de ancho porque el nombre de un proyecto que nace de una carta es larguísimo y, sin él, empujaba el título fuera de su fila. */ .cp-nota-proy-sel{border:1px solid var(--line); border-radius:8px; padding:6px 9px; font-family:inherit; font-size:12px; color:var(--ink); background:var(--bg); max-width:280px; text-overflow:ellipsis;} .cp-nota-proy-sel:focus{outline:none; border-color:var(--navy2);} /* Fecha y tipo, uno al lado del otro: son dos datos de una línea y apilados empujaban el resumen —lo único largo— fuera de la primera pantalla. */ .cp-nota-campos{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;} .cp-nota-campos .field{margin-bottom:0;} @media (max-width:560px){ .cp-nota-campos{grid-template-columns:1fr;} } /* ---- el documento de una actividad ---- LA MINIATURA ES PEQUEÑA A PROPÓSITO, 48 px. El historial de un inversionista es una lista que se lee de arriba abajo; una vista previa a tamaño de tarjeta convierte cada registro con adjunto en un bloque que hay que saltarse, y hunde los registros que no llevan foto, que son la mayoría. Aquí solo hace falta reconocer que hay un documento y cuál es — para verlo en grande está el documento, a un clic—. El mismo cuadrado sirve para la imagen y para el icono de lo que no lo es, así la fila no cambia de alto entre un PDF y una foto. */ .cp-adj-mini{flex:0 0 auto; width:48px; height:48px; border-radius:8px; border:1px solid var(--line); background:var(--block); background-size:cover; background-position:center; display:block;} .cp-adj-mini.ico{display:flex; align-items:center; justify-content:center; color:var(--gray-soft);} .cp-adj-mini.ico svg{width:20px; height:20px;} .cp-adj{margin-top:10px;} .cp-adj-add{display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:12px; font-weight:700; color:var(--navy2); background:var(--bg); border:1px dashed #C4CEDD; border-radius:9px; padding:8px 13px; cursor:pointer;} .cp-adj-add:hover{border-color:var(--cyan-deep); background:#F3FAFE;} .cp-adj-add svg{width:14px; height:14px;} .cp-adj-sel, .cp-adj-doc{display:flex; align-items:center; gap:10px; min-width:0;} .cp-adj-sel{background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:8px 10px;} /* El nombre se recorta con puntos suspensivos en vez de partir la fila: un acta puede llamarse "Acta de la mesa técnica CIIP-MINTUR 28-08-2026.pdf". */ .cp-adj-sel .n, .cp-adj-doc .n{min-width:0; flex:1 1 auto; font-size:12px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cp-adj-x{flex:0 0 auto; font:inherit; font-size:12px; line-height:1; color:var(--gray-soft); background:none; border:0; cursor:pointer; padding:4px 6px;} .cp-adj-x:hover{color:var(--rust);} /* En el historial va sin recuadro: el renglón ya vive dentro de la línea de tiempo y una caja dentro de otra caja sube el peso visual de justo lo que se quería dejar discreto. */ .cp-adj-doc{margin:7px 0 2px; max-width:420px;} .cp-adj-doc.abrible{cursor:pointer;} .cp-adj-doc.abrible:hover .n{color:var(--navy2); text-decoration:underline;} .cp-adj-doc.abrible:hover .cp-adj-mini{border-color:#CDD5E1;} .cp-notabox-row2{display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:9px;} /* max-width: aunque las opciones ya van recortadas (nomCorto), el control cerrado se dimensiona por la elegida y un nombre de proyecto largo seguía empujando la fila entera. */ .cp-notabox-row2 select{border:1px solid var(--line); border-radius:8px; padding:7px 9px; font-family:inherit; font-size:11.5px; color:var(--ink); background:var(--bg); max-width:280px; text-overflow:ellipsis;} /* El historial empieza donde termina el formulario, y se ve. Sin este filete el subformulario de la tarea quedaba pegado al primer renglón y parecían lo mismo. */ .inv-hist-h{margin:26px 0 6px; padding-top:20px; border-top:1px solid var(--line);} /* .inv-hist-nota se retiró con su párrafo: explicaba que un registro se corrige pulsando encima, que es justo lo que enseñan el cursor y las acciones de la fila. */ .tl-item.sys .tl-t{font-size:12px; font-weight:500; color:var(--gray);} .tl-item.sys .tl-dot{border-color:#C7CEDA;} .tl-item.sys{padding-bottom:12px;} .tl-item.hecha .tl-dot{background:var(--good); border-color:#BFE3CF;} .age.warn{background:var(--amber-bg); color:var(--amber); border-color:transparent;} .age.late{background:var(--rust-bg); color:var(--rust); border-color:transparent;} .kc-sig{font-size:9.5px; font-weight:700; color:var(--cyan-deep); margin-left:auto; text-align:right; line-height:1.35;} .kc-sig.warn{color:var(--amber);} .kc-sig.late{color:var(--rust);} .kc-sig.mute{color:var(--gray-soft);} /* ---- barra de retraso de la tarjeta ---- Era la frase "1801d sin contacto documentado" escrita en la esquina: se leía tarjeta por tarjeta y entre veinte no había forma de ver cuál está peor. La barra sí se compara con la vista; los días siguen escritos al lado, porque la barra tope a 180 no distingue 200 de 1801, y la frase entera aparece al pasar el mouse. */ .kc-ret{margin-left:auto; display:flex; align-items:center; gap:6px; flex:none;} .kc-ret-d{font-size:9.5px; font-weight:800; line-height:1;} .kc-ret-tr{position:relative; width:56px; height:5px; border-radius:5px; background:var(--line-soft); overflow:hidden; flex:none;} .kc-ret-tr i{display:block; height:100%; border-radius:5px; width:var(--p); animation:kc-ret-crece .7s cubic-bezier(.22,.61,.36,1) both;} /* La marca de la cadencia objetivo, a los 90 días. Sin ella la barra diría "cuánto" pero no "cuánto de más": va encima del relleno, en el hueco entre lo esperado y lo real. */ .kc-ret-tr::after{content:''; position:absolute; top:-1px; bottom:-1px; left:var(--meta); width:1px; background:rgba(20,30,50,.35);} @keyframes kc-ret-crece{from{width:0}to{width:var(--p)}} .kc-ret.late .kc-ret-d{color:var(--rust);} .kc-ret.late .kc-ret-tr i{background:var(--rust);} .kc-ret.warn .kc-ret-d{color:var(--amber);} .kc-ret.warn .kc-ret-tr i{background:var(--amber);} .kc-ret.mute .kc-ret-d{color:var(--gray-soft);} .kc-ret.mute .kc-ret-tr i{background:var(--gray-soft);} /* La frase, al pasar por encima. Cubre el cuerpo de la tarjeta en vez de empujarlo: si ocupara sitio, la rejilla entera se recolocaría al mover el ratón por ella. Va DENTRO de la tarjeta (top), no colgada por encima de su borde. Estuvo en bottom:calc(100% - 4px), que la dejaba flotando sobre el borde superior con solo 4px dentro, y ahí las tarjetas de la primera fila de la ventana perdían la frase: anclar a .kcard fija el origen de las coordenadas, pero NO libra del recorte —a un absolute lo recorta cualquier ancestro con overflow, y .kl-body rueda—. Lo único que la salva es no salirse de la tarjeta. Se veía como una franja azul de 4px sobre la tarjeta y nada más. */ .kc-ret-tx{position:absolute; left:9px; right:9px; top:8px; padding:6px 9px; border-radius:7px; background:var(--navy-deep, #0A1730); color:#fff; font-size:10px; font-weight:700; line-height:1.4; text-align:left; opacity:0; visibility:hidden; transform:translateY(3px); transition:opacity .14s ease, transform .14s ease, visibility .14s; pointer-events:none; box-shadow:0 6px 18px rgba(14,20,36,.22); z-index:3;} .kcard:hover .kc-ret-tx{opacity:1; visibility:visible; transform:translateY(0);} @media (prefers-reduced-motion:reduce){ .kc-ret-tr i{animation:none;} .kc-ret-tx{transition:none; transform:none;} } /* ---- oficios: filas escaneables agrupadas por estado ---- */ .ofi-row{display:flex; align-items:center; gap:14px; padding:12px 6px; border-top:1px solid var(--line-soft); cursor:pointer; border-radius:var(--r-sm);} .ofi-row:hover{background:var(--block);} .ofi-mono{flex:none; width:38px; height:38px; border-radius:8px; background:var(--block); border:1px solid var(--line-soft); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; color:var(--navy); letter-spacing:.03em;} .ofi-main{min-width:0; flex:1;} .ofi-act{font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .ofi-act .ente{font-weight:600; color:var(--gray-soft); font-size:11px;} .ofi-que{font-size:11.5px; color:var(--gray); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .ofi-right{flex:none; display:flex; align-items:center; gap:16px; text-align:right;} .ofi-d{font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.1; white-space:nowrap;} .ofi-d small{display:block; font-size:8.5px; font-weight:700; letter-spacing:.01em; color:var(--gray-soft);} .ofi-d.warn{color:var(--amber);} .ofi-d.late{color:var(--rust);} .ofi-d.mute{color:var(--gray-soft);} .ofi-doc{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border:1px solid var(--line); border-radius:6px; color:var(--gray-soft); vertical-align:middle; cursor:pointer;} .ofi-doc:hover{color:var(--navy); border-color:#CDD5E1; background:var(--block);} .pick-note{background:#E8F6FE; border:1px solid #CBE9FB; color:var(--cyan-deep); font-size:12.5px; font-weight:600; padding:11px 16px; border-radius:var(--r-sm);} /* ---- oficios: vista Gantt ---- */ .gantt{position:relative;} .gantt-axis{display:flex; align-items:center; gap:14px; height:24px; position:relative; border-bottom:1px solid var(--line); margin-bottom:2px;} .gantt-axis .g-label-sp{width:190px; flex:none;} .gantt-axis .g-track-sp{position:relative; flex:1 1 auto; height:100%;} .gantt-axis .g-mo{position:absolute; top:2px; font-size:9.5px; font-weight:800; letter-spacing:.03em; text-transform:capitalize; color:var(--gray-soft); transform:translateX(-1px); white-space:nowrap;} .gantt-axis .g-hoy-lbl{position:absolute; top:2px; font-size:9.5px; font-weight:800; color:var(--navy); transform:translateX(-50%); white-space:nowrap;} .gantt-rows{display:flex; flex-direction:column;} .grow{display:flex; align-items:center; gap:14px; padding:8px 0; border-bottom:1px solid var(--line-soft); cursor:pointer;} .grow:hover{background:var(--block);} .gr-label{width:190px; flex:none; min-width:0; display:flex; flex-direction:column; justify-content:center;} .gr-label b{font-size:11.5px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .gr-label span{font-size:10px; color:var(--gray-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .gr-track{position:relative; flex:1 1 auto; height:16px;} .gr-bar{position:absolute; top:3px; height:10px; border-radius:5px;} .gr-bar.over{background-image:repeating-linear-gradient(45deg, currentColor 0 3px, transparent 3px 7px); opacity:.9; border-radius:0 5px 5px 0;} .g-hoy-line{position:absolute; top:26px; bottom:0; width:0; border-left:1px dashed var(--navy2); z-index:1;} .gantt-note{margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); font-size:11px; color:var(--gray); line-height:1.6;} @media (max-width:900px){ .gr-label, .gantt-axis .g-label-sp{width:120px;} .gr-label span{display:none;} } /* configuración en tabs */ .conf-2col{display:grid; grid-template-columns:1fr 1fr; gap:32px;} @media (max-width:980px){ .conf-2col{grid-template-columns:1fr;} } .conf-hint{font-size:11.5px; color:var(--gray); margin:-2px 0 12px; line-height:1.5;} .conf-check{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink); margin-bottom:9px; cursor:pointer;} .conf-check input{accent-color:var(--navy);} .conf-check-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:2px 12px;} .conf-check-grid .conf-check{margin-bottom:0;} .pf-photo-row{display:flex; align-items:center; gap:16px; margin-bottom:20px;} .pf-photo{width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--navy2)) center/cover no-repeat; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:20px; flex:0 0 auto; box-shadow:0 0 0 2px rgba(255,255,255,.14);} .pf-photo-acts{display:flex; gap:8px; flex-wrap:wrap;} .g-count.late{background:var(--rust-bg); color:var(--rust);} .pcard.off .pc-photo{filter:grayscale(1); opacity:.75;} .a-off{display:inline-flex; align-items:center; font-size:10px; font-weight:800; padding:3px 10px; border-radius:20px; background:var(--rust-bg); color:var(--rust); white-space:nowrap;} /* ---- seguimiento: un oficio por fila, plegado ---- Con nueve oficios la página ya era larga y con cincuenta sería impracticable. Cada uno enseña plegado lo justo para reconocerlo y saber si urge —número, asunto, días y estado— y se abre para trabajarlo. */ .ofi-seg{display:flex; flex-direction:column; gap:8px;} .ofi-seg-i{background:var(--bg); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);} .ofi-seg-i.abierto{border-color:#C9D8EC;} .ofi-seg-cab{display:flex; align-items:center; gap:10px; padding:12px 16px; cursor:pointer; flex-wrap:wrap;} .ofi-seg-cab:hover{background:var(--block);} .ofi-seg-i.abierto .ofi-seg-cab{border-bottom:1px solid var(--line-soft);} .ofi-seg-car{color:var(--gray-soft); font-size:15px; transition:transform .15s ease; flex:0 0 auto;} .ofi-seg-car.on{transform:rotate(90deg);} .ofi-seg-num{font-size:12px; font-weight:700; color:var(--navy); white-space:nowrap; font-variant-numeric:tabular-nums; flex:0 0 auto;} .ofi-seg-nm{font-size:13.5px; font-weight:600; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .ofi-seg-cuerpo{padding:16px 18px 18px;} /* Lo que llega de vuelta: el acuse sellado, la respuesta, el comprobante. */ .ofi-seg-adj{margin-top:18px; padding-top:15px; border-top:1px solid var(--line-soft);} .ofi-adj-list{display:flex; flex-direction:column; gap:8px; margin-top:9px;} .ofi-adj{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12.5px;} .ofi-adj-ic{flex:0 0 auto; font-size:9px; font-weight:800; letter-spacing:.03em; color:var(--gray); background:var(--block); border:1px solid var(--line); border-radius:4px; padding:3px 6px;} /* Enlace de verdad: abre el archivo en una pestaña del navegador, con su visor de PDF y sus controles, que es donde se lee y se imprime. */ .ofi-adj-nm{font-weight:600; color:var(--navy2); text-decoration:none; cursor:pointer; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .ofi-adj-nm:hover{text-decoration:underline;} .ofi-adj-m{color:var(--gray-soft); font-size:11.5px; flex:1 1 auto; min-width:0;} @media (prefers-reduced-motion:reduce){ .ofi-seg-car{transition:none;} } /* ---- la barra de pasos de un oficio ---- Un trámite con cuatro momentos —membrete, redacción, despacho, seguimiento— que antes había que descubrir pulsando. La barra los enseña todos desde el principio y deja ir y volver: mismo lenguaje que las pestañas del sistema, pero numerado, porque aquí el orden sí importa. */ .ofi-pasos{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 18px; border-bottom:1px solid var(--line);} .ofi-paso{display:flex; align-items:center; gap:8px; padding:10px 13px 12px; font-size:12.5px; font-weight:600; color:var(--gray); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;} .ofi-paso:hover{color:var(--ink);} .ofi-paso.on{color:var(--navy); font-weight:700; border-bottom-color:var(--cyan);} .ofi-paso .n{display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; border-radius:50%; background:var(--block); border:1px solid var(--line); font-size:10.5px; font-weight:700; color:var(--gray-soft);} .ofi-paso.on .n{background:var(--navy); border-color:var(--navy); color:#fff;} /* Un paso ya recorrido se marca en ámbar, el mismo con el que Atlas señala en todas partes lo que está en curso. Estuvo en verde: el verde de la casa quiere decir "cerrado, conforme" —una respuesta recibida, un contrato vigente— y un oficio a medio trámite no está cerrado por haber pasado por un paso. */ .ofi-paso.hecho .n{background:var(--amber-bg); border-color:var(--amber); color:var(--amber);} .ofi-paso-card{padding:20px 22px;} /* ---- redactar un oficio: la hoja y sus campos ---- Dos columnas: el documento a la izquierda, tan parecido al papel como se pueda, y los datos a la derecha. La hoja va sobre blanco puro y con serifa aunque el resto de Atlas no lo sea: lo que se está escribiendo es un oficio en papel membretado, y verlo con la tipografía de la aplicación hacía difícil juzgar cómo va a quedar impreso. */ .ofi-red{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:22px; align-items:start;} @media (max-width:940px){ .ofi-red{grid-template-columns:1fr;} } .ofi-hoja{background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden;} .ofi-hoja-cab img{display:block; width:100%; height:auto;} .ofi-hoja-cuerpo{padding:26px 46px 30px; font-family:'Times New Roman',Times,serif; font-size:14.5px; line-height:1.75; color:#111; text-align:justify;} .ofi-hoja-cuerpo p{margin:0 0 13px;} .ofi-num{text-align:right; font-size:12.5px; color:#555; line-height:1.6; margin-bottom:20px;} .ofi-sinnum{color:#999;} /* Lo que pone la plantilla: se ve, para juzgar el documento entero, pero no se toca desde aquí. En gris apagado para que se distinga de lo redactado sin necesidad de un cartel que lo explique. */ .ofi-fijo{color:#555;} .ofi-fijo-nota{font-family:'Helvetica Neue',Arial,sans-serif; font-size:10.5px; color:#A0A0A0;} /* Lo editable, en tinta plena y con su superficie: es la única parte de la hoja en la que se escribe, y tiene que verse antes de intentarlo. */ .ofi-editable{color:#111; min-height:120px; padding:10px 12px; margin:0 -12px 13px; border-radius:5px; outline:1px dashed #C9D4E3;} .ofi-editable:hover{background:#FAFCFF;} .ofi-editable:focus{outline:2px solid var(--cyan-deep); outline-offset:0; background:#fff;} .ofi-editable ol{margin:0 0 10px 20px; line-height:1.55;} /* El pie del membrete: la ola tricolor y el escudo. Va pegado al fondo de la hoja, como en el documento impreso. */ .ofi-hoja-piemem img{display:block; width:100%; height:auto;} /* Destinatario y firma: editables sobre la hoja, línea a línea. Se ven como texto normal y solo se marcan al pasar por encima o al escribir, para que el documento se lea como un documento y no como un formulario. */ .ofi-dest{margin-bottom:16px;} .ofi-inline{display:block; min-height:0; padding:1px 6px; margin:0 -6px; outline:1px dashed transparent; border-radius:4px;} .ofi-inline:hover{outline-color:#D6DEE9; background:#FAFCFF;} .ofi-inline:focus{outline:2px solid var(--cyan-deep); background:#fff;} /* Un campo vacío no puede quedar invisible: se dice qué va ahí. */ .ofi-inline:empty::before{content:attr(data-ph); color:#B8BFCC;} #ofiRDestNombre, .ofi-firma-nm{font-weight:700;} /* Centrado, como en la plantilla impresa: .firma de los oficios con cintillo lleva text-align:center, y al pasar a redactar encima de la plantilla el bloque se quedó alineado a la izquierda. El nombre y el cargo dejaban de caer bajo la firma escaneada y el oficio en pantalla no se parecía al que salía impreso. */ .ofi-firma{margin-top:34px; text-align:center;} /* La firma escaneada, sobre el nombre. Sin marco ni fondo: es tinta. */ .ofi-firma-img{min-height:0;} .ofi-firma-img img{display:block; max-height:74px; max-width:230px; margin:0 auto -6px;} /* Las firmas ya usadas, para elegir sin volver a subirlas. */ .ofi-firmas{display:flex; align-items:center; gap:8px; flex-wrap:wrap;} .ofi-firma-op{width:74px; height:42px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg); display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; padding:3px;} .ofi-firma-op img{max-width:100%; max-height:100%; object-fit:contain;} .ofi-firma-op:hover{border-color:var(--navy2);} .ofi-firma-op.on{border-color:var(--navy); box-shadow:0 0 0 2px rgba(0,64,144,.14);} .ofi-firma-op.nueva{font-size:19px; color:var(--gray-soft); border-style:dashed;} .ofi-firma-op.nueva:hover{color:var(--navy2);} /* El aviso de que el texto se pasa de la hoja: solo aparece cuando pasa. */ .ofi-largo{font-size:11.5px; color:var(--amber); line-height:1.45; margin:0 0 13px; display:none;} .ofi-largo.on{display:block;} /* El saludo que pone la plantilla, dentro del bloque que se escribe: se lee seguido con lo redactado, pero en gris, para que se vea dónde empieza lo propio sin una línea que lo explique. */ .ofi-lead{color:#555;} .ofi-hoja-pie{padding:11px 46px 14px; border-top:1px solid var(--line-soft); font-family:'Helvetica Neue',Arial,sans-serif; font-size:10.5px; color:var(--gray-soft);} .ofi-hoja-pie b{color:var(--gray);} .ofi-red-rail > .a-card{padding:16px 18px; margin-bottom:14px;} .ofi-red-hint{font-size:11.5px; color:var(--gray-soft); line-height:1.5;} .ofi-red-hint .op-link{font-size:11.5px;} .ofi-aviso-ente{font-size:11.5px; color:var(--amber); line-height:1.45; margin-top:6px;} .ofi-aviso-ente:empty{display:none;} .ofi-red-acts{display:flex; align-items:center; gap:10px; flex-wrap:wrap;} /* ---- chips ---- */ .chip{display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; border-radius:20px; padding:2px 8px; white-space:nowrap;} .chip.sector{background:var(--block); color:var(--gray); border:1px solid var(--line); font-weight:600;} .chip.good{background:var(--good-bg); color:var(--good);} .chip.warn{background:var(--amber-bg); color:var(--amber);} .chip.info{background:#E8F6FE; color:var(--cyan-deep);} .chip.mute{background:#EEF0F3; color:var(--gray);} .chip.rust{background:var(--rust-bg); color:var(--rust);} /* ---- estado de una correspondencia, en versión mínima ---- Un punto del color que ya usan las gráficas del módulo (CR_ESTADO_COLOR) y el nombre al lado. Sin fondo ni borde a propósito: va en el pie de la tarjeta del Directorio y junto al título de la ficha, y en los dos sitios acompaña al dato principal en vez de competir con él — un .chip lleno ahí pesaba más que el asunto de la carta. El .chip sigue existiendo para el historial, donde el estado SÍ es el dato. */ .cr-est{display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; color:var(--gray); white-space:nowrap; letter-spacing:.01em;} .cr-est i{width:7px; height:7px; border-radius:50%; flex:0 0 auto;} /* En la cabecera de la ficha convive con los .chip del título, que son más altos; sube medio punto para no quedar hundido entre ellos. */ .a-h2 .cr-est{font-size:11px;} /* La tarjeta desde la que se cambia el estado, arriba de la pestaña Historial: el estado actual a la izquierda y el desplegable al lado, en la misma línea, para que se lea "está en X, cámbialo a Y" de un vistazo. En pantalla estrecha se parten en dos renglones. */ /* Aquí vivía la tarjeta del editor de estado (.cr-est-card y compañía). Se fue con él: los dos ejes de Seguimiento dicen lo mismo con más precisión. .cr-est —el punto de color con el nombre del estado— se queda: lo siguen usando las listas y las fichas. */ /* ---- tables ---- */ table.tbl{width:100%; border-collapse:collapse; font-size:11.5px;} table.tbl th{text-align:left; font-size:10.5px; font-weight:800; letter-spacing:.01em; color:var(--gray-soft); padding:0 10px 8px; border-bottom:1px solid var(--line);} table.tbl td{padding:10px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle; font-size:13.5px;} table.tbl tr:last-child td{border-bottom:none;} table.tbl tr.click{cursor:pointer;} table.tbl tr.click:hover td{background:var(--block);} /* La corrida que se está mirando abajo, en #/respaldos — mismo criterio de fondo que .click:hover pero fijo, para que no se confunda con "el mouse está encima" al alejar el cursor. */ table.tbl tr.rp-on td{background:var(--block);} table.tbl td.who{font-weight:700; color:var(--ink);} table.tbl td.num{font-variant-numeric:tabular-nums; font-weight:700;} .mini{font-size:10.5px; color:var(--gray);} /* ---- ficha / plantilla / ente cards ---- */ .libgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;} .libgrid.two{grid-template-columns:repeat(2,1fr);} .fcard{border:1px solid var(--line); border-radius:11px; padding:16px 17px; background:var(--bg); display:flex; flex-direction:column;} .fcard .fc-top{display:flex; align-items:center; gap:8px; margin-bottom:9px; flex-wrap:wrap;} .fcard .fc-line{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .fcard .fc-name{font-size:14px; font-weight:700; letter-spacing:-.01em; line-height:1.25;} .fcard .fc-line{font-size:10.5px; color:var(--gray-soft); margin-top:2px;} .fcard .fc-body{font-size:11.5px; color:#39414F; margin-top:10px; line-height:1.5; flex:1 1 auto;} .fcard .fc-rows{margin-top:11px; display:flex; flex-direction:column; gap:5px;} .fcard .fc-row{display:flex; gap:8px; font-size:11px;} .fcard .fc-row .k{color:var(--gray-soft); font-weight:700; min-width:76px; flex:0 0 auto;} .fcard .fc-row .v{color:var(--ink);} .fcard .fc-foot{display:flex; align-items:center; gap:8px; margin-top:13px; padding-top:12px; border-top:1px solid var(--line-soft); flex-wrap:wrap;} .taglist{display:flex; flex-wrap:wrap; gap:5px; margin-top:4px;} .ente-ic{width:40px; height:40px; border-radius:9px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex:0 0 auto; letter-spacing:0;} .ente-sub{font-size:10px; color:var(--gray-soft); margin-top:1px;} .trmt{display:flex; gap:8px; align-items:flex-start; font-size:11px; color:#39414F; padding:5px 0; line-height:1.4;} .trmt .d{color:var(--cyan-deep); font-weight:800; flex:0 0 auto;} /* ---- buttons ---- */ .btn{font-size:11.5px; font-weight:700; border-radius:8px; padding:7px 13px; cursor:pointer; border:1px solid transparent; white-space:nowrap; font-family:inherit;} .btn.primary{background:var(--cyan); color:#06283b;} .btn.navy{background:var(--navy); color:#fff;} .btn.ghost{background:#fff; border-color:var(--line); color:var(--ink);} .btn.ghost:hover{border-color:#CDD5E1;} .btn.danger{background:var(--rust); color:#fff;} .btn.sm{font-size:10.5px; padding:5px 10px;} /* Acciones del rail de fichas (Editar / Eliminar): ancho completo y tamaño legible */ .btn-rail{width:100%; justify-content:center; text-align:center; font-size:13px; padding:11px 14px; min-height:44px; display:inline-flex; align-items:center;} /* El bloque que las agrupa. Va en UN solo elemento a propósito: .a-rail separa 24px a sus hijos directos, así que tres botones sueltos quedaban a un mundo de distancia unos de otros —y a distinta distancia en cada módulo, según dónde estuvieran puestos—. Dentro del bloque mandan estos 8px, iguales en todas las fichas. Lo escribe railAcciones() en js/core.js. */ .rail-acc{display:flex; flex-direction:column; gap:8px;} .rail-pie{font-size:10.5px; color:var(--gray-soft); text-align:center; line-height:1.45;} /* El enlace al ente custodio, en su propio renglón bajo el nombre. Pegado detrás se partía a mitad de frase —el rail es angosto y el nombre de un ministerio se lleva casi todo el ancho—, así que la flecha acababa sola en la línea siguiente. Aquí no se parte nunca: es su propia línea. */ .act-rail-ir{display:inline-block; margin-top:4px; font-size:12px; white-space:nowrap;} .btn:disabled{opacity:.5; cursor:default;} /* ---- modal genérico ---- */ .modalbg{position:fixed; inset:0; background:rgba(10,20,40,.5); z-index:110; display:none; align-items:center; justify-content:center; padding:20px;} .modalbg.open{display:flex;} /* LA TARJETA NO SE DESPLAZA ENTERA: se desplaza solo su cuerpo. Antes el overflow vivía aquí, así que en un formulario largo —editar una tarea es el caso— la cabecera y el PIE se iban hacia arriba con el resto: había que desplazarse hasta el fondo para encontrar "Guardar", y el aspa de cerrar desaparecía por el techo. Con la tarjeta como columna flexible, cabecera y pie se quedan fijos y el desplazamiento queda donde tiene que estar, en el contenido. min-height:0 en el cuerpo es lo que permite que un hijo flexible se encoja por debajo de su contenido; sin él, el cuerpo se estira y vuelve a empujar el pie fuera de la pantalla. */ .modalcard{background:#fff; border-radius:12px; width:100%; max-width:440px; max-height:88vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(14,20,36,.28);} .modal-h{flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 18px; border-bottom:1px solid var(--line);} .modal-t{font-size:14px; font-weight:700; color:var(--ink);} /* Es un