/* Tipografia de marca, autoalojada (nada de Google Fonts): Avenir Next Cyr
para titulos/cifras/navegacion y Argentum Sans para cuerpo y tablas.
WOFF2 convertido de los archivos del sistema de diseno 2026. */
@font-face{
font-family:'Avenir Next Cyr';
src:url('/assets/fonts/AvenirNextCyr-Demi.woff2') format('woff2');
font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
font-family:'Argentum Sans';
src:url('/assets/fonts/ArgentumSans-Regular.woff2') format('woff2');
font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
font-family:'Argentum Sans';
src:url('/assets/fonts/ArgentumSans-Medium.woff2') format('woff2');
font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
font-family:'Argentum Sans';
src:url('/assets/fonts/ArgentumSans-Bold.woff2') format('woff2');
font-weight:700;font-style:normal;font-display:swap;
}
:root{
/* Paleta oficial OPESA 2026: un solo dorado como fuente de verdad. */
--gold:#CDAF5E; --gold-deep:#A88F45; --gold-light:#E1CF9E; --gold-soft:#F4EEDC;
/* Dorado como TEXTO: el de marca no alcanza 4.5:1 sobre blanco (2.1:1) ni el
profundo (3.1:1). Este sí (5.7:1 sobre blanco, 4.9:1 sobre --gold-soft). */
--gold-ink:#7A6428;
--olive:#8E9B9E; --olive-deep:#6E7A7D;
--infra-gray:#8E9B9E;
--charcoal:#515151; --charcoal-deep:#3A3A3A; --ink:#232320;
--bg:#F7F4EC; --surface:#FFFFFF; --surface-2:#FBFBF9; --surface-3:#EFEFEA;
--line:#E5E6E2; --line-2:#D4D5D0;
--text:#26241F; --text-2:#575852; --text-3:#6B6C64;
--text-tertiary:#6B6C64; --text-secondary:#575852; --border-strong:#D4D5D0;
--critico:#B23B3B; --critico-deep:#9A2B2B; --critico-bg:#FBF0EF;
--checar:#B4702A; --checar-bg:#FCF4EA;
--ajustado:#98761F; --ajustado-bg:#FAF5E6;
--bueno:#2A7A4E; --bueno-bg:#EDF5F0;
--excelente:#1B6142; --excelente-bg:#E9F2ED;
--neutro:#7E7C76; --neutro-bg:#F2F1EC;
--info:#38618C; --info-bg:#EEF2F7;
/* Flechas de datos que pasan solo una parte (editor de flujo y aviso de la sección). */
--dato:#2F6F73; --dato-bg:#EDF4F4;
/* Gris perla para zonas de transición (súper-encabezados) */
--perla:#F8F8F6;
/* Marca MANUAL de color en el Catálogo (clic derecho > Marcar de color).
A propósito distinta del semáforo de arriba: es una etiqueta que pone
la persona, no un estado que calcula la app, y no debe leerse como uno. */
--mk-amarillo:#A8862A; --mk-amarillo-bg:#FBF3DC;
--mk-azul:#3E6E9E; --mk-azul-bg:#E7EFF7;
--mk-verde:#3E8A5C; --mk-verde-bg:#E7F3EA;
--mk-rojo:#B0483C; --mk-rojo-bg:#FBEAE7;
--mk-morado:#7D5FA6; --mk-morado-bg:#F0EAF8;
--r:4px; --r-sm:3px; --r-xs:2px;
/* ESCALA TIPOGRAFICA. Antes habia 59 tamaños distintos en 465
declaraciones — siete de ellos entre 10 y 10.8px. Nadie percibe la
diferencia entre 10.4 y 10.6, pero si percibe el resultado: es lo que
hace que una pantalla se sienta armada a pedazos en vez de disenada.
Los pasos salen de donde YA se agrupaban los 59, no de una tabla
bonita, asi que el cambio visual es minimo y la consistencia maxima. */
/* Fluida: crece con el ancho real, sin escalones. Cada paso = clamp(1.04B, 0.01875B·vw + 0.8B, 1.28B). */
--t-micro:clamp(9.9px, 0.119vw + 8.47px, 12.2px); --t-xs:clamp(10.9px, 0.131vw + 9.33px, 13.4px);
--t-sm:clamp(12px, 0.144vw + 10.27px, 14.7px); --t-base:clamp(13px, 0.156vw + 11.13px, 16px);
--t-md:clamp(14px, 0.168vw + 11.98px, 17.3px); --t-lg:clamp(15.6px, 0.188vw + 13.35px, 19.2px);
--t-xl:clamp(19.8px, 0.238vw + 16.94px, 24.3px); --t-2xl:clamp(25px, 0.3vw + 21.39px, 30.7px);
--t-3xl:clamp(31.2px, 0.375vw + 26.7px, 38.4px);
--font:"Argentum Sans","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
--sbw:242px; color-scheme:light;
/* Titulos y cifras con la voz de marca (Avenir Next Cyr); el cuerpo sigue
con Argentum Sans. */
--slab:"Avenir Next Cyr","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
/* UNA SOLA PIEL. Cuatro alturas y nada más: 0 la página, 1 borde de 1 px,
2 popover/menú (--elev-2), 3 cajón/ventana (--elev-3). Los nombres
relieve/hundido se quedan por sus 41 usos; ya no hay sombra neomórfica
detrás de ninguno, en ningún tema. */
--relieve:0 0 0 1px var(--line);
--relieve-sm:0 0 0 1px var(--line);
--relieve-alto:0 0 0 1px var(--line-2), 0 6px 18px rgba(35,35,32,.10);
--hundido:inset 0 0 0 1px var(--line-2);
--hundido-sm:inset 0 0 0 1px var(--line-2);
--elev-2:0 6px 16px rgba(35,35,32,.10);
--elev-3:0 18px 44px rgba(35,35,32,.20);
/* Lo que faltaba del sistema de diseño (diseno/mejora-uxui/pantallas/_ds/…/tokens).
Marca, tal como la define el PDF de identidad. */
--opesa-gold:#CDAF5E; --opesa-infra-gray:#8E9B9E; --opesa-charcoal:#515151;
--opesa-warm-white:#F7F4EC; --opesa-white:#FFFFFF; --opesa-logo-gray:#9A9796;
--gold-on:#231E0C; /* texto sobre dorado */
--chrome:#EBEBE7; /* barra de arriba y cintas */
--hover-row:#E7E7E3;
/* Alias semánticos: lo que se pinta dice para qué es, no de qué color es. */
--surface-page:var(--bg); --surface-card:var(--surface); --surface-sunken:var(--surface-3);
--surface-inverse:var(--ink);
--text-body:var(--text); --text-accent:var(--gold-ink); --text-on-accent:var(--gold-on);
--text-on-inverse:#F0EEE7;
--accent:var(--gold); --accent-hover:var(--gold-deep); --accent-tint:var(--gold-soft);
--focus-ring:var(--gold-deep); --border-default:var(--line); --border-input:var(--line-2);
/* Espaciado: base de 8 px con los pasos finos que la app ya usa. */
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
--space-6:24px; --space-7:28px; --space-8:32px; --space-10:40px; --space-12:56px;
--pad-content:24px 28px 56px; --pad-panel:20px 22px; --pad-card:18px 20px; --pad-modal:26px;
--gap-grid:12px; --gap-cols:18px;
--r-pill:26px; --r-round:50%;
--elev-1:0 0 0 1px var(--line);
--elev-modal:0 24px 60px rgba(20,19,16,.32);
--elev-fab:0 10px 26px rgba(24,22,16,.3);
--focus-halo:0 0 0 3px var(--gold-soft);
--ease-in:cubic-bezier(.2,.85,.35,1);
/* Chasis */
--rail-w:60px; --crumb-h:38px; --content-max:1680px; --tap-min:44px;
/* Tipografía: los nombres del sistema de diseño para las dos familias. */
--font-display:var(--slab); --font-body:var(--font);
--t-deck-title:44pt; --t-deck-subtitle:28pt; --t-deck-body:18pt; --t-deck-caption:12pt;
--t-page-title:19px; --t-home-title:26px; --t-kpi:23px; --t-hero:34px;
--lh-body:1.5; --tracking-eyebrow:.15em; --tracking-crumb:.16em; --tracking-title:-.02em;
/* Navegación 2a e Inicio: el riel y la marca son oscuros en los dos temas. */
--riel-fondo:var(--ink); --riel-realce:#35332D; --riel-texto:#B7B3A8; --riel-tenue:#8C887C;
--riel-claro:#F0EEE7; --riel-linea:rgba(255,255,255,.09); --riel-tira:rgba(255,255,255,.16);
--riel-dentro:rgba(255,255,255,.14); --riel-cuenta:#8C6A1E; --riel-aviso:#E6AC6C; --riel-scroll:#46443D;
--cuenta-oro:#CDAF5E; --cuenta-alerta:#B23B3B; --pestana-x-hover:rgba(140,136,124,.22);
--pista-fondo:var(--ink); --pista-texto:#EAE8E1; --pista-borde:#4E4A41; --velo-recorrido:rgba(38,36,31,.28);
--sombra-globo:0 8px 24px rgba(20,19,16,.28); --sombra-lista:0 18px 44px rgba(20,19,16,.22);
--sombra-alza:0 6px 18px rgba(35,35,32,.10); --sombra-pista:0 18px 44px rgba(35,35,32,.25);
/* Acceso, estados y errores (Fase 1): lo que va sobre tinta, en los dos temas; el fondo toma el tono C en oscuro. */
--oscuro-fondo:var(--ink); --oscuro-texto:#F0EEE7; --oscuro-texto-2:#CFC8B4; --oscuro-linea:#5C5A54; --punto-caida:#EE9C93;
/* Inicio del celular: la barra de abajo mide 57 px más lo que pida el borde del teléfono. */
--ic3-nav:calc(57px + max(6px, env(safe-area-inset-bottom))); --ic3-velo:rgba(35,35,32,.4); --ic3-foco:rgba(35,35,32,.58);
--ic3-sombra-hoja:0 -12px 40px rgba(20,19,16,.25); --ic3-sombra-pista:0 8px 20px rgba(20,19,16,.25); --ic3-sombra-fab:0 6px 16px rgba(122,100,40,.35);
--ic3-sombra-borde:0 6px 16px rgba(20,19,16,.18);
/* Dashboard de la obra (21a): el color de cada rubro en el mapa y en las barras, y su letra encima. */
--dm-r0:#CDAF5E; --dm-r1:#8E9B9E; --dm-r2:#6E7A7D; --dm-r3:#515151;
--dm-f0:#231E0C; --dm-f1:#FFFFFF; --dm-f2:#FFFFFF; --dm-f3:#FFFFFF;
--sombra-aviso:0 8px 24px rgba(20,19,16,.2);
}
html,body,input,select,textarea,button{color-scheme:light;}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--font);background:var(--bg);color:var(--text);
font-size:var(--t-md);line-height:1.5;-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}
/* En el teléfono ningún campo baja de 16 px: el iPhone acerca la pantalla al enfocar uno más chico y la captura se desacomoda.
Un campo que ya es más grande (la cantidad, el acceso) declara su tamaño en --campo-fs y lo conserva. */
@media (max-width:720px){
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image]),
select,textarea{font-size:max(16px,var(--campo-fs,0px)) !important;}
.lg-fld input{--campo-fs:17px;}
}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:1px;}
table{border-collapse:collapse;}
/* Quien pide menos movimiento en el sistema operativo, lo tiene aquí también. */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
transition-duration:.001ms !important;scroll-behavior:auto !important;}
}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);}
.hide{display:none !important;}
/* Escala única del sistema de iconos: el grosor del trazo crece con el
tamaño, para que un icono de 14 px no se vea más grueso que uno de 24.
Los tamaños de contexto (.mic, .evd-b, .thumb) usan estas clases en vez
de sobrescribir tamaño y trazo a mano — un solo lugar decide cómo se
dibuja un icono de cada medida. */
svg.i{width:16px;height:16px;stroke:currentColor;fill:none;
stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;}
svg.i.sm{width:14px;height:14px;stroke-width:1.7;}
svg.i.lg{width:18px;height:18px;stroke-width:1.8;}
svg.i.xl{width:22px;height:22px;stroke-width:2;}
svg.i.\32xl{width:24px;height:24px;stroke-width:2.2;}
/* Icono dentro de una línea de texto: se alinea con la palabra que lo
acompaña en celdas, etiquetas y avisos. */
.ic-in{display:inline-flex;align-items:center;vertical-align:-2px;}
.fld{margin-bottom:15px;}
.fld label{display:block;font-size:var(--t-sm);font-weight:600;color:var(--text-2);margin-bottom:5px;}
.fld input,.fld select,.fld textarea{width:100%;border:1px solid var(--line-2);
background:var(--surface);border-radius:var(--r-sm);padding:9px 11px;
font-size:var(--t-base);font-weight:500;transition:border-color .14s,box-shadow .14s;}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:var(--text-3);}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--gold-deep);
box-shadow:0 0 0 3px var(--gold-soft);outline:none;}
.fld textarea{min-height:62px;resize:vertical;}
.btn{border:1px solid var(--line-2);background:var(--surface);color:var(--text);
border-radius:var(--r-sm);padding:7.5px 14px;cursor:pointer;display:inline-flex;
align-items:center;gap:6px;font-size:var(--t-base);font-weight:550;
transition:background .14s,border-color .14s,color .14s,box-shadow .14s,transform .08s;}
.btn:hover{border-color:var(--text-3);background:var(--surface-2);}
.btn:active{background:var(--surface-3);transform:scale(.965);}
/* Un botón deshabilitado "respira" — es la señal de que la app está
trabajando, no de que se congeló. Los pocos botones que están inactivos
de verdad (nada que hacer todavía, no un proceso en curso) llevan
.btn-inactivo para quedarse quietos y no fingir que están ocupados. */
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;animation:btnBreathe 1.35s ease-in-out infinite;}
.btn.btn-inactivo:disabled{opacity:.45;animation:none;}
@keyframes btnBreathe{0%,100%{opacity:.5;}50%{opacity:.85;}}
/* Un botón que está enviando no se apaga: conserva su color y se lee completo, porque el avance de la subida va escrito en él. */
.btn[aria-busy="true"]:disabled,.st-cta[aria-busy="true"]:disabled{opacity:1;animation:none;cursor:progress;}
.ej-cta .st-cta[aria-busy="true"] svg.i{animation:btnGira 1s linear infinite;}
@keyframes btnGira{to{transform:rotate(360deg);}}
.btn.primary{background:var(--gold);border-color:var(--gold);color:#231E0C;font-weight:600;}
.btn.primary:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff;}
.btn.dark{background:var(--charcoal-deep);border-color:var(--charcoal-deep);color:#fff;}
.btn.dark:hover{background:var(--ink);}
.btn.danger{background:var(--critico);border-color:var(--critico);color:#fff;}
.btn.danger:hover{background:var(--critico-deep);border-color:var(--critico-deep);}
.btn.sm{padding:5.5px 11px;font-size:var(--t-sm);}
.btn.full{width:100%;justify-content:center;padding:11px;font-size:var(--t-md);}
.msg{padding:9px 12px;border-radius:var(--r-sm);font-size:var(--t-base);line-height:1.5;
margin-bottom:15px;border-left:2px solid;}
.msg.err{background:var(--critico-bg);color:var(--critico);border-left-color:var(--critico);}
.msg.ok{background:var(--bueno-bg);color:var(--bueno);border-left-color:var(--bueno);}
/* ---------- SIDEBAR ---------- */
.sidebar{position:fixed;top:0;left:0;width:var(--sbw);height:100vh;background:var(--surface-3);box-shadow:inset -7px 0 12px -10px rgba(110,110,102,.35);
display:flex;flex-direction:column;z-index:50;overflow-y:auto;transition:transform .24s ease;}
.sidebar::-webkit-scrollbar{width:5px;}
.sidebar::-webkit-scrollbar-thumb{background:#D4D5D0;border-radius:3px;}
.sb-brand{padding:20px 18px 17px;display:flex;align-items:center;gap:9px;
border-bottom:1px solid #E1E2DE;}
.sb-brand img.marca{width:142px;max-width:100%;height:auto;flex:none;}
.sb-brand .n{font-size:20px;font-weight:700;color:#33312A;letter-spacing:-.025em;line-height:1;}
.sb-brand .s{font-size:7.2px;font-weight:700;letter-spacing:.16em;color:#83847B;
text-transform:uppercase;margin-top:4px;}
.sb-group{padding:19px 18px 7px;font-size:var(--t-micro);font-weight:700;letter-spacing:.15em;
text-transform:uppercase;color:var(--text-3);}
.sb-nav{display:flex;flex-direction:column;gap:1px;padding:0 9px;}
.sb-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-sm);
border:none;background:none;cursor:pointer;text-align:left;color:var(--text-2);font-size:var(--t-base);
font-weight:500;transition:background .14s,color .14s;width:100%;position:relative;}
.sb-item:hover{background:#E7E7E3;color:var(--text);}
.sb-item:active{transform:scale(.98);}
.sb-item.on{background:var(--surface-3);box-shadow:var(--hundido);color:var(--gold-ink);font-weight:600;}
.sb-item.on::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:0;background:var(--gold);}
.sb-item .bdg{margin-left:auto;color:#83847B;font-size:var(--t-xs);font-weight:600;
font-variant-numeric:tabular-nums;}
.sb-item.on .bdg{color:var(--gold-ink);}
.sb-sub{display:flex;flex-direction:column;gap:0;padding:2px 0 4px 30px;}
.sb-sub button{border:none;background:none;text-align:left;cursor:pointer;padding:6.5px 11px;
font-size:var(--t-sm);color:#7A7458;border-radius:var(--r-xs);font-weight:500;}
.sb-sub button:hover{color:var(--text);background:#E7E7E3;}
.sb-sub button.on{color:var(--gold-ink);font-weight:600;}
.sb-foot{margin-top:auto;padding:15px 14px;border-top:1px solid #E1E2DE;}
.sb-who{font-size:var(--t-sm);color:#3C3A33;font-weight:600;}
.sb-role{font-size:var(--t-micro);color:var(--text-3);text-transform:uppercase;letter-spacing:.12em;
font-weight:700;margin-bottom:13px;}
.sb-actions{display:flex;flex-direction:column;gap:1px;}
.sb-btn{border:none;background:none;color:var(--text-2);border-radius:var(--r-xs);
padding:7.5px 10px;font-size:var(--t-sm);font-weight:500;cursor:pointer;display:flex;
align-items:center;gap:9px;transition:background .14s,color .14s;text-align:left;}
.sb-btn:hover{background:#E7E7E3;color:var(--text);}
.sb-btn.gold{background:var(--ink);color:var(--gold-light);font-weight:600;border-radius:var(--r-sm);padding:9px 12px;margin-bottom:5px;box-shadow:3px 3px 8px rgba(60,58,51,.28);}
.sb-btn.gold:hover{background:#33322C;color:var(--gold-light);}
/* El nombre de la obra es informacion, no un boton: mismo chip, sin clic. */
.sb-obra-chip{background:var(--ink);color:var(--gold-light);font-weight:600;
border-radius:var(--r-sm);padding:9px 12px;margin-bottom:5px;font-size:var(--t-sm);
display:flex;align-items:center;gap:9px;cursor:default;
box-shadow:3px 3px 8px rgba(60,58,51,.28);}
/* ---------- MAIN ---------- */
.main{margin-left:var(--sbw);min-height:100vh;}
.topbar{background:var(--bg);border-bottom:1px solid #E1E2DE;padding:15px 28px;
display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
position:sticky;top:0;z-index:30;}
.topbar h1{margin:0;font-size:19px;font-weight:650;letter-spacing:-.02em;color:var(--text);}
.topbar .crumb{font-size:var(--t-sm);color:var(--text-3);margin-top:3px;}
.content{padding:24px 28px 56px;max-width:1680px;}
.sec{display:none;} .sec.on{display:block;animation:secIn .28s cubic-bezier(.2,.85,.35,1) both;}
@keyframes secIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}
.sync{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);
font-weight:500;color:var(--text-3);}
.dot{width:6px;height:6px;border-radius:50%;background:var(--bueno);}
.dot.busy{background:var(--checar);animation:pulse 1.1s ease-in-out infinite;}
.dot.bad{background:var(--critico);}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.25;}}
/* ---------- KPI ---------- */
.grid-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));
gap:12px;margin-bottom:26px;}
.kpi{background:var(--bg);border:none;border-radius:var(--r);box-shadow:var(--relieve);
padding:17px 19px 15px;display:flex;flex-direction:column;gap:3px;min-width:0;position:relative;}
.grid-kpi .kpi:first-child{border-top:2px solid var(--gold);}
.kpi-ic{position:absolute;top:14px;right:15px;color:var(--gold-ink);opacity:.45;}
.kpi-lb{font-size:var(--t-xs);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#8A7233;padding-right:22px;line-height:1.4;}
.kpi-v{font-size:23px;font-weight:650;letter-spacing:-.026em;margin-top:5px;line-height:1.1;}
.kpi-s{font-size:var(--t-sm);color:var(--text-3);}
.kpi-s.pos{color:var(--bueno);} .kpi-s.neg{color:var(--critico);}
/* ---------- PANELES ---------- */
.panel{padding:20px 22px;margin-bottom:18px;}
.panel-t{font-size:var(--t-md);font-weight:600;color:var(--text);letter-spacing:-.012em;}
.panel-s{font-size:var(--t-sm);color:var(--text-3);margin-bottom:18px;margin-top:2px;}
.panel-h{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.three-col{display:grid;grid-template-columns:276px minmax(0,1fr) 340px;gap:18px;align-items:start;}
@media (max-width:1400px){.three-col{grid-template-columns:1fr 1fr;}}
@media (max-width:1050px){.two-col,.three-col{grid-template-columns:1fr;}}
.gauge-wrap{position:relative;width:158px;height:158px;margin:0 auto;}
.gauge-wrap svg{width:100%;height:100%;transform:rotate(-90deg);}
.gauge-arc{transition:stroke-dashoffset .5s cubic-bezier(.4,0,.2,1);}
.gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;}
.gauge-pct{font-size:27px;font-weight:650;letter-spacing:-.03em;}
.gauge-cap{font-size:var(--t-xs);color:var(--text-3);margin-top:1px;}
.center-col{display:flex;flex-direction:column;align-items:center;gap:14px;}
.inline-in{display:flex;align-items:center;gap:8px;}
.inline-in label{font-size:var(--t-sm);font-weight:500;color:var(--text-2);}
.inline-in input{width:102px;border:1px solid var(--line-2);background:var(--surface);
border-radius:var(--r-sm);padding:6px 9px;font-size:var(--t-base);font-weight:550;
text-align:right;font-variant-numeric:tabular-nums;}
.inline-in input:hover{border-color:var(--text-3);}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
border-radius:var(--r-xs);font-size:var(--t-sm);font-weight:550;}
.badge.ok{background:var(--bueno-bg);color:var(--bueno);}
.badge.over{background:var(--critico-bg);color:var(--critico);}
.split-bar{display:flex;height:34px;border-radius:var(--r-xs);overflow:hidden;background:var(--surface-2);}
.split-seg{display:flex;align-items:center;justify-content:center;font-size:var(--t-sm);
font-weight:550;transition:flex-basis .5s cubic-bezier(.4,0,.2,1);min-width:0;
overflow:hidden;white-space:nowrap;}
.split-seg.mau{background:var(--olive-deep);color:#fff;}
.split-seg.gan{background:var(--gold);color:#231E0C;}
.split-seg.neg{background:var(--critico);color:#fff;}
.legend3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:22px;margin-top:20px;}
.lg2{min-width:0;}
.lg2 .k{display:flex;align-items:center;gap:7px;font-size:var(--t-sm);color:var(--text-2);font-weight:500;}
.lg2 .v{font-size:17px;font-weight:650;margin-top:4px;letter-spacing:-.025em;}
.lg2 .p{font-size:var(--t-xs);color:var(--text-3);margin-top:2px;}
.sw{width:8px;height:8px;border-radius:2px;flex:none;display:inline-block;}
/* Curva S. El SVG se escala solo al ancho de la tarjeta; en pantalla chica
se desplaza a lo ancho en vez de encogerse hasta ser ilegible. */
.cs-wrap{overflow-x:auto;margin-top:6px;}
.cs-svg{display:block;width:100%;min-width:560px;height:auto;}
.cs-grid{stroke:var(--line);stroke-width:1;}
.cs-tick{font-size:var(--t-micro);fill:var(--text-3);font-variant-numeric:tabular-nums;}
.cs-hoy{stroke:var(--gold-deep);stroke-width:1.2;stroke-dasharray:3 3;}
.cs-l{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;}
.cs-base{stroke:var(--text-tertiary);stroke-dasharray:5 4;stroke-width:1.8;}
.cs-plan{stroke:var(--gold);}
.cs-real{stroke:var(--bueno);stroke-width:2.6;}
.cs-leg{display:flex;flex-wrap:wrap;gap:16px;font-size:var(--t-sm);color:var(--text-2);
margin-top:10px;}
.cs-leg span{display:flex;align-items:center;gap:6px;}
/* ---------- Desempeno: cabecera EVM y drill-down ----------
Los cuatro pilares van pegados arriba y NO viven dentro de las pestanas:
la salud del proyecto es el marco en el que se lee todo lo demas. */
.evm{position:sticky;top:0;z-index:7;display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
background:var(--line);border:1px solid var(--line);border-radius:var(--r);
overflow:hidden;margin-bottom:14px;}
@media(max-width:820px){ .evm{grid-template-columns:repeat(2,minmax(0,1fr));} }
.evm-m,.evm-i{background:var(--surface);padding:12px 15px;display:flex;
flex-direction:column;gap:2px;justify-content:center;}
.evm-i{background:var(--perla);}
.evm-lb{font-size:var(--t-xs);color:var(--text-3);text-transform:uppercase;
letter-spacing:.06em;font-weight:600;}
.evm-v{font-size:19px;font-weight:650;letter-spacing:-.02em;line-height:1.15;
font-variant-numeric:tabular-nums;}
.evm-s{font-size:var(--t-xs);color:var(--text-tertiary);line-height:1.35;}
/* Semaforo tipografico: abajo de 1.00 el numero se vuelve rojo y mas pesado */
.evm-i.mal .evm-v{color:var(--critico);font-weight:800;font-size:22px;}
.evm-i.mal{background:var(--critico-bg);}
.evm-i.bien .evm-v{color:var(--bueno);}
.evm-i.vacio .evm-v{color:var(--text-tertiary);}
/* Alerta que ademas lleva a arreglar el problema */
.alerta-accion{display:flex;align-items:center;gap:12px;width:100%;
background:var(--critico-bg);border:1px solid transparent;
border-left:3px solid var(--critico);border-radius:var(--r-sm);
padding:12px 15px;margin-bottom:14px;cursor:pointer;font:inherit;
text-align:left;transition:border-color .14s,background .14s;}
.alerta-accion:hover{border-color:var(--critico);}
.aa-ic{color:var(--critico);flex:none;}
.aa-tx{flex:1;min-width:0;font-size:var(--t-base);line-height:1.5;}
.aa-tx b{display:block;color:var(--text);}
.aa-tx span{color:var(--text-2);font-size:var(--t-sm);}
.aa-ir{flex:none;font-size:var(--t-sm);font-weight:700;color:var(--critico);white-space:nowrap;}
/* Codigo clicable en el mapa de atrasos */
.code.enlace{background:none;border:0;font:inherit;font-weight:600;font-size:var(--t-sm);
color:var(--gold-ink);cursor:pointer;padding:0;text-decoration:underline;
text-underline-offset:2px;font-variant-numeric:tabular-nums;}
.code.enlace:hover{color:var(--charcoal);}
/* Panel del concepto atrasado */
.pc-riesgo{display:flex;align-items:center;justify-content:space-between;
background:var(--critico-bg);border-radius:var(--r-sm);padding:12px 14px;
color:var(--critico);font-size:var(--t-sm);}
.pc-riesgo b{font-size:19px;font-weight:700;letter-spacing:-.02em;}
.pc-chips{display:flex;flex-wrap:wrap;gap:6px;}
.pc-hist{display:flex;flex-direction:column;gap:4px;}
.pc-h{display:grid;grid-template-columns:78px 1fr auto;gap:8px;align-items:center;
font-size:var(--t-sm);padding:5px 7px;border-radius:var(--r-xs);background:var(--surface-2);}
.pc-h.pend{opacity:.65;}
.pc-h-f{color:var(--text-3);}
.pc-h-q{font-weight:600;}
/* Reportes sin cuadrilla */
.huerfanos{display:flex;align-items:center;justify-content:space-between;
gap:12px;flex-wrap:wrap;background:var(--checar-bg);border-radius:var(--r-xs);
padding:10px 13px;margin-top:10px;font-size:var(--t-sm);color:var(--text-2);}
/* Heatmap de rentabilidad / CPI */
td.heat-bien{background:rgba(42,122,78,.13);}
td.heat-ok{background:rgba(42,122,78,.06);}
td.heat-flojo{background:rgba(180,112,42,.10);}
td.heat-mal{background:rgba(178,59,59,.11);}
/* Curva S: tercera linea y tooltip */
.cs-costo{stroke:var(--info);stroke-width:1.9;}
.cs-hit{fill:transparent;cursor:crosshair;}
.cs-cursor{stroke:var(--gold-deep);stroke-width:1;stroke-dasharray:3 3;pointer-events:none;}
.cs-wrap{position:relative;}
.cs-tip{position:absolute;top:8px;width:230px;background:var(--charcoal);
color:var(--gold-light);border-radius:var(--r-sm);padding:10px 12px;font-size:var(--t-sm);
line-height:1.5;pointer-events:none;opacity:0;visibility:hidden;
transition:opacity .12s;box-shadow:0 8px 24px rgba(35,35,32,.3);z-index:5;}
.cs-tip.on{opacity:1;visibility:visible;}
.cs-tip b{display:block;margin-bottom:6px;color:var(--gold-light);}
.cs-tf{display:flex;justify-content:space-between;gap:10px;}
.cs-tf span:first-child{color:#B9B6AE;}
.cs-tf.tot{border-top:1px solid #4A4942;margin-top:5px;padding-top:5px;font-weight:700;}
.cs-tip .pos{color:#8FD3AC;} .cs-tip .neg{color:#F3A2A2;}
/* ---------- Cronograma: pulso, lienzo y trazo ---------- */
.cr-pulso{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,2fr);
gap:16px;margin-bottom:16px;}
@media(max-width:900px){ .cr-pulso{grid-template-columns:1fr;} }
.cr-hero{background:var(--surface);border:1px solid var(--line);
border-radius:var(--r);padding:20px 22px;border-top:3px solid var(--gold);}
.cr-hero-lb{font-size:var(--t-sm);color:var(--text-2);text-transform:uppercase;
letter-spacing:.07em;font-weight:600;}
.cr-hero-v{font-size:34px;font-weight:700;letter-spacing:-.03em;margin:6px 0 4px;
line-height:1;font-variant-numeric:tabular-nums;color:var(--gold-ink);}
.cr-hero-s{font-size:var(--t-sm);color:var(--text-3);margin-bottom:10px;}
.cr-hero-track{height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden;}
.cr-hero-track i{display:block;height:100%;background:var(--gold);border-radius:5px;
transition:width .6s cubic-bezier(.22,1,.36,1);}
.cr-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
@media(max-width:620px){ .cr-mini{grid-template-columns:1fr;} }
.cr-m{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
padding:13px 15px;display:flex;flex-direction:column;gap:2px;justify-content:center;}
.cr-m.alerta{border-color:var(--checar);background:var(--checar-bg);}
.cr-m-lb{font-size:var(--t-xs);color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;}
.cr-m-v{font-size:20px;font-weight:700;letter-spacing:-.02em;
font-variant-numeric:tabular-nums;line-height:1.15;}
.cr-m-s{font-size:var(--t-xs);color:var(--text-tertiary);}
/* Barra de vistas del Catalogo: dice que estas viendo la MISMA tabla de dos
maneras, no dos modulos. Recta y delgada, pegada arriba como la cinta. */
.cv-barra{display:flex;align-items:stretch;border:1px solid var(--border-strong);
background:var(--surface-2);margin-bottom:0;}
.cv-lb{display:flex;align-items:center;padding:0 13px;font-size:var(--t-micro);font-weight:700;
letter-spacing:.09em;text-transform:uppercase;color:var(--text-tertiary);
border-right:1px solid var(--line);}
.cv-t{border:0;background:transparent;font:inherit;font-size:var(--t-sm);font-weight:600;
color:var(--text-2);padding:8px 18px;cursor:pointer;letter-spacing:.03em;
text-transform:uppercase;border-right:1px solid var(--line);
border-bottom:2px solid transparent;white-space:nowrap;}
.cv-t:hover{background:var(--surface-3);color:var(--text);}
.cv-t.on{background:var(--surface);color:var(--gold-ink);border-bottom-color:var(--gold);}
.cv-n{font-style:normal;font-size:var(--t-micro);font-weight:700;margin-left:7px;padding:1px 5px;
background:var(--checar-bg);color:var(--checar);font-variant-numeric:tabular-nums;}
.cv-t.on .cv-n{background:var(--gold-soft);color:var(--gold-ink);}
/* La etapa del proyecto, encima del menú. Explica por qué el menú se ve
corto en Validación: sin esto, un menú recortado parece una falla. */
.etp{padding:11px 13px;margin:0 0 4px;border-bottom:1px solid var(--line);}
/* Hecha (dorado claro), la actual (dorado lleno y más gruesa) y pendiente
(gris): se lee de un vistazo en cuál va, aunque no haya texto. */
.etp-tira{display:flex;align-items:center;gap:4px;margin-bottom:8px;}
.etp-p{flex:1;height:3px;border-radius:2px;background:color-mix(in srgb, var(--text-3) 42%, transparent);}
.etp-p.ya{background:var(--gold-light);}
.etp-p.on{background:var(--gold);height:5px;}
.etp-n{font-size:var(--t-base);font-weight:700;color:var(--text);letter-spacing:.01em;}
.etp-d{font-size:var(--t-xs);color:var(--text-2);line-height:1.5;margin-top:3px;}
.etp-tapa{color:var(--critico);font-weight:600;}
.etp-b{margin-top:9px;width:100%;justify-content:center;}
/* Una salida que todavía no se puede tomar: qué es, qué falta y, si procede, cómo pasar de todas formas. Sin caja de color. */
.etp-f{margin-top:10px;padding:2px 0 2px 11px;border-left:2px solid var(--checar);font-size:var(--t-xs);line-height:1.5;color:var(--text-2);}
.etp-f-t{display:flex;align-items:center;gap:6px;color:var(--text);}
.etp-f-t svg{flex:none;color:var(--checar);}
.etp-f-t b{font-weight:650;font-size:var(--t-xs);letter-spacing:.01em;}
.etp-f-r{margin-top:2px;}
.etp-f-b{display:inline-block;margin-top:7px;padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);cursor:pointer;}
.etp-f-b:hover{text-decoration-color:currentColor;}
/* Lo de ADENTRO de la etapa (flujo interno): el punto donde va, o cómo van los frentes. */
.etp-dentro{margin-top:9px;padding-top:8px;border-top:1px dashed var(--line-2);}
.etp-dl{font-size:var(--t-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);}
.etp-n2{font-size:var(--t-sm);font-weight:700;color:var(--text);margin-top:2px;}
/* ---- Evidencia por criterio: explicación, razón y fotos ---- */
.crit{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 13px;}
/* El punto que NO cumple se marca en rojo mientras falta su razón: la regla
es del servidor, pero verla aquí evita el viaje de ida y vuelta. */
.crit.exige-nota{border-color:var(--critico);background:var(--critico-bg);}
.crit.exige-nota .crit-nota{border-color:var(--critico);}
/* La explicación NO va debajo del punto: quien ya sabe qué revisar no
quiere leer un párrafo por criterio para llegar a los chips. Va como un
botón «?» junto al título, y se consulta FLOTANDO — sin empujar nada. */
.crit-h{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.crit-h > label{margin:0;}
.crit-ayuda{position:relative;line-height:0;}
.crit-ayuda summary{cursor:pointer;list-style:none;display:inline-flex;
align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;
background:var(--gold-soft);color:var(--gold-ink);font-size:var(--t-xs);font-weight:700;
line-height:1;user-select:none;}
.crit-ayuda summary::-webkit-details-marker{display:none;}
.crit-ayuda summary:hover{background:var(--gold);color:#fff;}
.crit-ayuda[open] summary{background:var(--gold);color:#fff;}
.crit-ayuda > div{position:absolute;z-index:40;top:calc(100% + 7px);left:-8px;
width:min(340px,74vw);padding:11px 13px;background:var(--surface);
border:1px solid var(--border-strong);border-radius:var(--r-sm);
box-shadow:0 10px 26px rgba(20,18,12,.16);
font-size:var(--t-sm);line-height:1.65;color:var(--text-2);}
.crit-ayuda b{display:none;}
/* En el teléfono no cabe colgada del «?»: con el título corto se salía de la
pantalla por la derecha. Ahí baja como hoja al pie —que es donde alcanza
el pulgar— y lleva el nombre del punto, porque despegada del criterio ya
no se sabría de cuál habla. */
@media (max-width:640px){
.crit-ayuda > div{position:fixed;inset:auto 12px 12px;width:auto;
max-height:54vh;overflow:auto;font-size:var(--t-base);
box-shadow:0 -10px 34px rgba(20,18,12,.3);}
.crit-ayuda b{display:block;margin-bottom:6px;color:var(--text);
font-size:var(--t-base);letter-spacing:.01em;}
}
.crit-ev{margin-top:9px;display:flex;flex-direction:column;gap:7px;}
.crit-nota{width:100%;font:inherit;font-size:var(--t-sm);resize:vertical;}
.crit-fotos-barra{display:flex;align-items:center;gap:9px;}
.crit-foto-btn{cursor:pointer;display:inline-flex;align-items:center;gap:5px;margin:0;}
.crit-fotos-cuenta{font-size:var(--t-xs);color:var(--text-3);}
.crit-fotos{display:flex;flex-wrap:wrap;gap:7px;}
.crit-foto{position:relative;width:62px;height:62px;border-radius:var(--r-sm);
overflow:hidden;border:1px solid var(--line-2);}
.crit-foto img{width:100%;height:100%;object-fit:cover;display:block;}
.crit-foto-x{position:absolute;top:2px;right:2px;width:19px;height:19px;border:0;
border-radius:50%;background:rgba(20,18,12,.72);color:#fff;font-size:var(--t-base);
line-height:1;cursor:pointer;padding:0;}
/* ---- Editor de flujo: lienzo de nodos con conectores ---- */
/* DOS clases a propósito: `.modal` fija su ancho más abajo en esta misma
hoja, así que un `.fx-modal` suelto perdía por orden y el lienzo salía
del ancho de un diálogo normal. El editor necesita lienzo. */
.modal.fx-modal{max-width:1180px;width:96vw;}
.fx-wrap{display:grid;grid-template-columns:1fr 290px;gap:12px;align-items:stretch;}
.fx-lienzo{position:relative;height:420px;overflow:auto;background:var(--surface-2);
border:1px solid var(--border-strong);border-radius:var(--r-sm);
/* La cuadrícula da sensación de lienzo y ayuda a alinear a ojo. */
background-image:radial-gradient(var(--line-2) 1px, transparent 1px);
background-size:22px 22px;touch-action:none;}
.fx-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.fx-svg [data-cx]{pointer-events:auto;cursor:pointer;}
.fx-linea{fill:none;stroke:var(--gold);stroke-width:2;opacity:.85;}
.fx-linea:hover{stroke-width:3;opacity:1;}
.fx-linea.tendida{stroke-dasharray:5 4;opacity:.6;}
.fx-etq{fill:var(--text-2);font-size:var(--t-micro);font-weight:600;cursor:pointer;}
.fx-etq:hover{fill:var(--gold-deep);}
.fx-nodo{position:absolute;width:170px;min-height:62px;box-sizing:border-box;
background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);
padding:10px 12px;cursor:grab;user-select:none;box-shadow:0 2px 8px rgba(20,18,12,.10);}
.fx-nodo:active{cursor:grabbing;}
.fx-nodo.sel{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft);}
.fx-nodo.cerrada{border-style:dashed;}
.fx-nodo-t{font-size:var(--t-base);font-weight:700;color:var(--text);line-height:1.3;}
.fx-nodo-m{font-size:var(--t-xs);color:var(--text-2);margin-top:3px;}
.fx-puerto{position:absolute;top:50%;width:13px;height:13px;margin-top:-6.5px;border-radius:50%;
background:var(--surface);border:2px solid var(--gold);}
.fx-ent{left:-7px;}
.fx-sal{right:-7px;cursor:crosshair;}
.fx-sal:hover{background:var(--gold);transform:scale(1.25);}
.fx-lado{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;
overflow:auto;height:420px;box-sizing:border-box;}
.fx-lado-t{font-size:var(--t-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--text-tertiary);margin:14px 0 7px;}
.fx-chk{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:var(--t-sm);}
.fx-chk input{width:auto;min-height:0;}
.fx-mods{display:flex;flex-direction:column;gap:6px;}
.fx-mod,.fx-comp{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;align-items:start;
padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;}
.fx-mod.on,.fx-comp.on{border-color:var(--gold);background:var(--gold-soft);}
.fx-mod input,.fx-comp input{width:auto;min-height:0;margin-top:2px;}
.fx-mod-n{font-size:var(--t-sm);font-weight:600;color:var(--text);}
.fx-mod-d{grid-column:2;font-size:var(--t-xs);color:var(--text-2);line-height:1.45;}
.fx-mod-f{grid-column:2;font-size:var(--t-xs);color:var(--checar);line-height:1.45;}
.fx-comps{display:flex;flex-direction:column;gap:6px;}
.fx-sub{z-index:200;}
/* Marcos: agrupan etapas («todo esto es Ejecución»). Debajo de las cajas y sin
atrapar el puntero: son dibujo, no motor. */
.fx-marco{position:absolute;border:1.5px dashed var(--gold);border-radius:12px;
background:rgba(205,175,94,.07);pointer-events:none;}
.fx-marco-t{position:absolute;top:7px;left:12px;font-size:var(--t-micro);font-weight:700;
letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);}
.fx-nodo-s{display:inline-flex;align-items:center;gap:4px;margin-top:5px;font-size:var(--t-micro);
font-weight:700;color:var(--gold-ink);background:var(--gold-soft);border-radius:10px;padding:1px 7px;}
.fx-nodo.fin{border-width:2px;}
.fx-miga{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 8px;}
.fx-miga:empty{display:none;}
.fx-miga-t{font-weight:700;color:var(--text);}
@media (max-width:900px){
.fx-wrap{grid-template-columns:1fr;}
.fx-lado{height:auto;max-height:260px;}
}
/* En pantalla angosta las pestañas (nowrap) se salían de su barra y
empujaban la PÁGINA entera: Obra, Dinero y Documentos scrolleaban de
lado. Que ruede la barra, no el documento — scroll interno del
componente sí, scroll horizontal de página no. */
@media (max-width:720px){
.cv-barra{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.cv-lb,.cv-t{flex:0 0 auto;}
}
/* Viabilidad, seguimiento, interferencias, cierre y KPI de proveedores:
panel fijo a la izquierda + contenido. La rejilla venia en un style= EN
LINEA, que ningun @media puede tumbar — por eso en el telefono la segunda
columna se salia de la pantalla y arrastraba el documento de lado. Vive
aqui para poder colapsarla; el ancho de escritorio es el mismo de antes. */
.via-grid,.seg-grid,.int-grid,.cie-grid,.kpi-grid{
display:grid;grid-template-columns:300px 1fr;gap:16px;}
.int-grid{grid-template-columns:340px 1fr;}
.int-filtros{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 10px;}
.int-filtros .in{width:auto;text-align:left;}
/* Sin esto la columna no se encoge aunque sea 1fr: un item de grid trae
min-width:auto, o sea "nunca mas angosto que mi contenido". Con una tabla
de 8 columnas adentro, la columna se estiraba a 849px y el .tbl-scroll que
ya la envuelve no podia recortar nada. Con min-width:0 la tabla vuelve a
rodar dentro de SU contenedor, que es lo que se queria. */
.via-grid>*,.seg-grid>*,.int-grid>*,.cie-grid>*,.kpi-grid>*{min-width:0;}
@media (max-width:900px){
.via-grid,.seg-grid,.int-grid,.cie-grid,.kpi-grid{grid-template-columns:1fr;}
}
/* ================= PIEL DE SOFTWARE =================
Se aplica solo a las pantallas que se OPERAN durante horas (cronograma y
catalogo), no a toda la app. El resto sigue siendo el tablero de siempre.
No cambia la identidad —mismo dorado, misma tipografia, mismos tokens de
color—; cambia la POSTURA: esquinas rectas, herramientas pegadas arriba,
indicadores en una barra de estado en vez de tarjetas grandes, y densidad
de hoja de calculo. Lo redondo y aireado se lee como un tablero para mirar;
esto es una mesa de trabajo. */
.modo-sw{--r:0;--r-sm:0;--r-xs:0;}
.modo-sw .card,.modo-sw .panel,.modo-sw .btn,.modo-sw .tag,
.modo-sw input,.modo-sw select,.modo-sw textarea,
.modo-sw .cr-ribbon,.modo-sw .cr-cons,.modo-sw .g2,.modo-sw .g2-insp{border-radius:0;}
.modo-sw .card{box-shadow:none;border:1px solid var(--border-strong);}
/* La cinta manda: pegada al borde de arriba, sin aire por encima. */
.modo-sw .cr-ribbon{margin-top:0;margin-bottom:0;border-bottom:0;}
/* Barra de estado: una sola tira de lecturas, como el pie de un CAD.
Los mismos numeros de antes, pero sin robarle la mitad de la pantalla al
Gantt, que es lo que de verdad hay que mirar. */
.modo-sw .cr-pulso{display:flex;align-items:stretch;gap:0;margin:0 0 12px;
border:1px solid var(--border-strong);border-top:0;background:var(--surface-2);
flex-wrap:wrap;}
.modo-sw .cr-hero{flex:none;min-width:210px;border:0;border-right:1px solid var(--line);
border-top:0;padding:7px 14px;background:var(--surface);
display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
.modo-sw .cr-hero-lb{font-size:var(--t-micro);letter-spacing:.09em;color:var(--text-tertiary);
font-weight:700;order:1;}
.modo-sw .cr-hero-v{font-size:19px;margin:0;order:2;}
.modo-sw .cr-hero-s{font-size:var(--t-xs);margin:0;order:3;flex-basis:100%;}
/* La barra de avance se vuelve una linea al pie de su celda: sigue estando,
deja de ser un adorno de 8 px. */
.modo-sw .cr-hero-track{order:4;flex-basis:100%;height:3px;border-radius:0;margin-top:4px;}
.modo-sw .cr-hero-track i{border-radius:0;}
.modo-sw .cr-mini{display:flex;flex:1;min-width:0;gap:0;}
.modo-sw .cr-m{flex:1;min-width:0;border:0;border-right:1px solid var(--line);
padding:7px 14px;gap:0;background:var(--surface);}
.modo-sw .cr-m:last-child{border-right:0;}
.modo-sw .cr-m-lb{font-size:var(--t-micro);letter-spacing:.09em;color:var(--text-tertiary);font-weight:700;}
.modo-sw .cr-m-v{font-size:16px;}
.modo-sw .cr-m-s{font-size:var(--t-xs);}
/* El encabezado del panel se vuelve una barra de titulo delgada. */
.modo-sw .panel-h{padding:6px 12px;border-bottom:1px solid var(--line);
background:var(--surface-2);margin:0;align-items:center;}
.modo-sw .panel-t{font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.07em;}
.modo-sw .panel-s{font-size:var(--t-xs);}
.modo-sw .alert{border-radius:0;}
.modo-sw .cr-lb-tira{border-radius:0;}
.cr-lb-tira{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
background:var(--surface-2);border-left:3px solid var(--gold);
border-radius:var(--r-xs);padding:9px 13px;margin-bottom:12px;
font-size:var(--t-sm);color:var(--text-2);}
.cr-tip{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);color:var(--text-3);
margin:0 0 10px;}
/* Capa de fondo: días muertos. Va ENCIMA del tinte del renglón pero
translúcida, porque los renglones se pintan después en el DOM y taparían
una capa que estuviera al fondo. */
.g2-fondo{position:absolute;inset:0;z-index:1;pointer-events:none;
display:grid;grid-template-columns:repeat(var(--cols),minmax(30px,1fr));}
.g2-muerto{grid-row:1;height:100%;background:rgba(35,35,32,.045);}
.g2-fondo i{align-self:stretch;}
/* Día de corte. Cruza todo el lienzo, encabezados incluidos. */
.g2-hoy{position:absolute;top:0;bottom:0;width:0;z-index:2;pointer-events:none;
border-left:1.5px dashed var(--gold-deep);}
.g2-hoy span{position:absolute;top:2px;left:3px;font-size:8.5px;font-weight:700;
color:var(--gold-ink);background:var(--surface);padding:0 3px;border-radius:2px;
letter-spacing:.05em;text-transform:uppercase;}
/* Las barras se pintan ENCIMA de las líneas de dependencia (z-index 3),
para que ninguna conexión cruce por encima de una barra y estorbe. */
.g2-cal .gt-bar,.g2-cal .gt-hito{z-index:4;}
.g2 .gt-links{z-index:3;}
.g2 .gt-guia{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:visible;}
.g2.sin-rel .gt-links{display:none;}
.gt-guia-tx{font-size:var(--t-micro);fill:var(--critico);font-weight:700;
paint-order:stroke;stroke:#fff;stroke-width:3px;}
/* Ruta crítica: barra más gruesa además del color, para reconocerla de lejos */
.g2-cal .gt-bar.critico{height:19px;box-shadow:0 0 0 1px rgba(178,59,59,.35);}
.g2-cal .gt-bar.sum.critico{height:11px;}
/* Avance ejecutado: barra interna más oscura y delgada, no un velo claro */
.gt-done{position:absolute;left:0;top:50%;transform:translateY(-50%);
height:7px;background:rgba(20,18,12,.42);border-radius:2px;
transition:width .5s cubic-bezier(.22,1,.36,1);}
.gt-bar.sum .gt-done{height:4px;}
.gt-bar.critico .gt-done{background:rgba(90,18,18,.55);}
/* Aislar ruta crítica */
.g2-cal .g2-r.apagada{opacity:.22;}
.g2-cal .g2-r.apagada .gt-bar{filter:grayscale(1);}
/* Fantasma de la línea base: dónde estaba el bloque cuando se congeló */
.gt-sim{grid-row:1;align-self:center;height:15px;margin:0 2px;box-sizing:border-box;
border:1.5px dashed var(--gold-deep);border-radius:3px;background:rgba(205,175,94,.16);
pointer-events:none;position:relative;z-index:2;}
.gt-sim.movido{border-color:var(--ink);}
.gt-sim.critico{border-color:var(--critico);}
.lg-sim{width:20px;height:9px;display:inline-block;box-sizing:border-box;
border:1.5px dashed var(--gold-deep);border-radius:2px;}
.cr-sim-banda{display:flex;align-items:center;gap:10px;padding:8px 12px;margin-bottom:10px;
border:1px dashed var(--gold-deep);border-radius:var(--r-sm);background:var(--gold-soft);
font-size:var(--t-sm);line-height:1.4;}
.cr-sim-banda>div{flex:1;}
.gt-base{grid-row:1;align-self:center;height:4px;margin-top:17px;
border-radius:2px;background:repeating-linear-gradient(90deg,
var(--text-tertiary) 0 4px, transparent 4px 7px);
opacity:.75;pointer-events:none;}
/* Hito: rombo, sin barra ni avance */
.gt-hito{grid-row:1;align-self:center;position:relative;display:flex;
align-items:center;justify-content:center;height:15px;}
.gt-rombo{width:12px;height:12px;background:var(--charcoal);
transform:rotate(45deg);border-radius:2px;flex:none;}
.gt-rombo.critico{background:var(--critico);}
/* Anclas de trazo: aparecen al pasar el cursor por la barra */
.gt-anchor{position:absolute;top:50%;width:11px;height:11px;margin-top:-5.5px;
border-radius:50%;background:var(--surface);border:2px solid var(--gold-deep);
cursor:crosshair;opacity:0;transition:opacity .12s,transform .12s;
touch-action:none;z-index:5;}
.gt-anchor.izq{left:-6px;} .gt-anchor.der{right:-6px;}
.gt-bar:hover .gt-anchor,.gt-hito:hover .gt-anchor,
.gt-anchor.sel,.gt-anchor.destino{opacity:1;}
.gt-anchor:hover,.gt-anchor.destino{transform:scale(1.35);background:var(--gold);}
.gt-anchor.sel{background:var(--gold-deep);}
body.trazando{cursor:crosshair;user-select:none;}
body.trazando .gt-anchor{opacity:1;}
/* Soltar del backlog al lienzo */
.g2-in.soltar{outline:2px dashed var(--gold);outline-offset:-3px;}
.cp-item[draggable]{cursor:grab;}
.cp-item[draggable]:active{cursor:grabbing;}
.cp-agarre{float:right;color:var(--text-tertiary);}
.drop-pop{position:fixed;z-index:60;background:var(--surface);
border:1px solid var(--line-2);border-radius:var(--r);padding:14px 16px;
box-shadow:0 12px 34px rgba(35,35,32,.24);width:270px;}
.dp-t{font-weight:700;font-size:var(--t-base);color:var(--gold-ink);}
.dp-s{font-size:var(--t-sm);color:var(--text-2);margin-bottom:10px;line-height:1.4;}
.dp-f{display:flex;align-items:center;justify-content:space-between;gap:10px;
margin-bottom:9px;font-size:var(--t-sm);color:var(--text-2);}
.dp-f input{width:80px;}
.dp-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:4px;}
/* Leyenda */
.lg-hito{width:9px;height:9px;background:var(--charcoal);transform:rotate(45deg);
display:inline-block;border-radius:1px;}
.lg-base{width:16px;height:3px;display:inline-block;border-radius:2px;
background:repeating-linear-gradient(90deg,var(--text-tertiary) 0 4px,transparent 4px 7px);}
/* Casillas de selección de las tablas. */
.ck{width:15px;height:15px;accent-color:var(--gold-deep);cursor:pointer;}
/* ---------- Dashboard de ejecución (panel de desviaciones) ----------
Dos bloques de pulso arriba: a la izquierda el dinero de la EMPRESA
(avance y utilidad), a la derecha la caja del CONTRATISTA, con fondo
distinto a propósito — es dinero de otro y no debe confundirse con el
nuestro. En medio, el protagonista: la tabla de variaciones. */
.dr-filtro{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
justify-content:flex-end;margin-bottom:14px;}
.pulso{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
gap:16px;align-items:stretch;margin-bottom:18px;}
@media (max-width:1050px){ .pulso{grid-template-columns:1fr;} }
.pulso-a{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:720px){ .pulso-a{grid-template-columns:1fr;} }
.pcard{position:relative;overflow:hidden;background:var(--surface);
border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;
border-top:3px solid var(--gold);}
.pcard.sano{border-top-color:var(--bueno);}
.pcard.riesgo{border-top-color:var(--checar);background:var(--checar-bg);}
.pcard.critico{border-top-color:var(--critico);background:var(--critico-bg);}
/* El sparkline va al FONDO, detrás del número: es contexto de tendencia,
no un dato que se lea con precisión. */
.spark{position:absolute;left:0;right:0;bottom:0;width:100%;height:38px;
opacity:.24;pointer-events:none;}
.pcard-lb{font-size:var(--t-sm);color:var(--text-2);text-transform:uppercase;
letter-spacing:.06em;font-weight:600;position:relative;}
.pcard-v{font-size:26px;font-weight:700;letter-spacing:-.03em;margin:6px 0 4px;
font-variant-numeric:tabular-nums;line-height:1.1;position:relative;}
.pcard.riesgo .pcard-v{color:var(--checar);}
.pcard.critico .pcard-v{color:var(--critico);}
.pcard-s{font-size:var(--t-sm);color:var(--text-3);position:relative;}
.pcard-spi{margin-top:8px;font-size:var(--t-sm);font-weight:650;position:relative;}
.pcard-spi.neutro{color:var(--text-tertiary);font-weight:500;}
/* Caja del contratista: fondo distinto para separarla del dinero propio */
.pulso-b{background:var(--surface-3);border:1px solid var(--line);
border-radius:var(--r);padding:16px 18px;}
.pb-tit{display:flex;align-items:center;gap:7px;font-size:var(--t-sm);font-weight:700;
color:var(--charcoal);text-transform:uppercase;letter-spacing:.06em;
padding-bottom:9px;border-bottom:1px solid var(--line);margin-bottom:4px;}
.pb-row{display:grid;grid-template-columns:1fr auto;gap:2px 10px;
padding:9px 0;border-bottom:1px solid var(--line);position:relative;}
.pb-row:last-child{border-bottom:0;}
.pb-lb{font-size:var(--t-sm);color:var(--text-2);display:flex;align-items:center;gap:5px;}
.pb-v{font-size:16px;font-weight:700;text-align:right;
font-variant-numeric:tabular-nums;grid-row:1;grid-column:2;}
.pb-s{font-size:var(--t-xs);color:var(--text-tertiary);grid-column:1 / -1;}
.tip-ic{display:inline-flex;color:var(--text-tertiary);cursor:help;}
.pb-tip{position:absolute;right:0;bottom:calc(100% + 4px);z-index:9;width:250px;
background:var(--charcoal);color:var(--gold-light);padding:10px 12px;border-radius:var(--r-sm);
font-size:var(--t-sm);line-height:1.55;opacity:0;visibility:hidden;transition:opacity .12s;
box-shadow:0 6px 20px rgba(35,35,32,.28);}
.pb-tip .sano{color:#8FD3AC;} .pb-tip .critico{color:#F3A2A2;}
.tip-host:hover .pb-tip,.tip-host.tocado .pb-tip{opacity:1;visibility:visible;}
/* Tabla maestra de variaciones */
table.data.va td{vertical-align:middle;}
.va-row.riesgo{background:var(--critico-bg);}
/* Los números negativos van más grandes y en negritas: el ojo tiene que
caer primero en la zona de riesgo, no leer la tabla renglón por renglón. */
.va-mal{font-weight:800;font-size:var(--t-md);}
.mini-bar{height:8px;border-radius:4px;background:var(--surface-2);
overflow:hidden;min-width:56px;margin-bottom:3px;}
.mini-bar i{display:block;height:100%;border-radius:4px;background:var(--gold);}
.mini-bar.centro i{background:var(--bueno);}
.mini-bar.centro i.neg{background:var(--critico);}
.va-det td{background:var(--surface-2);padding:0;}
.va-caja{padding:12px 14px;}
.va-cab{font-size:var(--t-sm);color:var(--text-2);margin-bottom:9px;}
table.mini-tbl{width:100%;font-size:var(--t-sm);}
table.mini-tbl th{font-size:var(--t-xs);}
/* ---------- Dashboard preliminar (vista de dirección) ----------
Tres bloques en orden de decisión: rentabilidad, riesgo, concentración.
Los colores de margen son los mismos en todo el tablero (sano/riesgo/
critico) para que verde signifique lo mismo en la tarjeta, en la barra
del tope y en cada rubro. */
.sano{color:var(--bueno);} .riesgo{color:var(--checar);} .critico{color:var(--critico);}
/* Resumen ejecutivo: la lectura en una sola voz antes de las cifras
sueltas - lo primero que lee un director, en su idioma, no en el de un
reporte contable. Se apoya en el mismo dorado que usan los PDFs para que
la pantalla y el papel se sientan del mismo sistema. */
.resumen-ejec{display:flex;gap:14px;align-items:flex-start;background:var(--gold-soft);
border:1px solid var(--gold-light);border-left:4px solid var(--gold-deep);
border-radius:var(--r);padding:16px 20px;margin-bottom:18px;}
.re-ic{flex:none;width:32px;height:32px;border-radius:50%;background:var(--gold-deep);
color:#fff;display:flex;align-items:center;justify-content:center;}
.re-tx{min-width:0;}
.re-lb{font-size:var(--t-xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
color:var(--gold-ink);margin-bottom:5px;}
.re-tx p{margin:0;font-size:var(--t-md);line-height:1.65;color:var(--text);}
.re-tx p b{font-weight:700;}
.hero-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:18px;}
@media (max-width:900px){ .hero-row{grid-template-columns:1fr;} }
.hero{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
padding:20px 22px;border-top:3px solid var(--gold);}
.hero.sano{border-top-color:var(--bueno);}
.hero.riesgo{border-top-color:var(--checar);}
.hero.critico{border-top-color:var(--critico);}
.hero-lb{font-size:var(--t-sm);color:var(--text-2);text-transform:uppercase;
letter-spacing:.07em;font-weight:600;}
.hero-v{font-size:29px;font-weight:700;letter-spacing:-.03em;margin:8px 0 6px;
font-variant-numeric:tabular-nums;line-height:1.1;}
.hero.sano .hero-v{color:var(--bueno);}
.hero.riesgo .hero-v{color:var(--checar);}
.hero.critico .hero-v{color:var(--critico);}
.hero-s{font-size:var(--t-sm);color:var(--text-3);}
.hero-badge{display:inline-block;padding:2px 9px;border-radius:20px;font-weight:700;
font-size:var(--t-sm);background:var(--surface-2);}
.hero-badge.sano{background:var(--bueno-bg);color:var(--bueno);}
.hero-badge.riesgo{background:var(--checar-bg);color:var(--checar);}
.hero-badge.critico{background:var(--critico-bg);color:var(--critico);}
.dos-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
gap:18px;align-items:start;margin-bottom:18px;}
@media (max-width:1050px){ .dos-col{grid-template-columns:1fr;} }
/* Barra del tope */
.tope-cifra{display:flex;align-items:baseline;gap:8px;margin:4px 0 10px;}
.tope-cifra .num{font-size:24px;font-weight:700;letter-spacing:-.02em;
font-variant-numeric:tabular-nums;}
.tope-de{font-size:var(--t-sm);color:var(--text-3);}
.tope-track{height:14px;border-radius:8px;background:var(--surface-2);overflow:hidden;}
.tope-fill{display:block;height:100%;border-radius:8px;background:var(--bueno);
transition:width .6s cubic-bezier(.22,1,.36,1);}
.tope-fill.cerca{background:var(--checar);}
.tope-fill.over{background:var(--critico);}
.tope-pie{display:flex;justify-content:space-between;gap:10px;margin-top:8px;
font-size:var(--t-sm);color:var(--text-2);}
/* Alertas */
.al-lista{display:flex;flex-direction:column;gap:8px;}
.al-item{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;
border-radius:var(--r-sm);background:var(--surface-2);
border-left:3px solid var(--text-tertiary);}
.al-item.critico{background:var(--critico-bg);border-left-color:var(--critico);}
.al-item.riesgo{background:var(--checar-bg);border-left-color:var(--checar);}
.al-item.info{background:var(--info-bg);border-left-color:var(--info);}
.al-ic{flex:none;line-height:1;margin-top:1px;}
.al-item.critico .al-ic{color:var(--critico);}
.al-item.riesgo .al-ic{color:var(--checar);}
.al-item.info .al-ic{color:var(--info);}
.al-tx{flex:1;min-width:0;font-size:var(--t-base);line-height:1.5;}
.al-tx b{display:block;color:var(--text);}
.al-tx span{color:var(--text-2);font-size:var(--t-sm);}
.al-item .btn{flex:none;align-self:center;}
.al-ok{display:flex;gap:12px;align-items:center;padding:18px;color:var(--bueno);}
.al-ok b{display:block;color:var(--text);font-size:var(--t-base);}
.al-ok span{color:var(--text-2);font-size:var(--t-sm);}
/* Rubros: barras horizontales ordenadas por importe */
.rb-lista{display:flex;flex-direction:column;gap:3px;}
.rb-row{display:grid;grid-template-columns:minmax(90px,168px) minmax(0,1fr) 78px;
gap:12px;align-items:center;position:relative;width:100%;
background:none;border:0;font:inherit;color:inherit;text-align:left;
padding:6px 8px;border-radius:var(--r-xs);cursor:pointer;}
.rb-row:hover{background:var(--surface-2);}
.rb-n{font-size:var(--t-sm);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;}
.rb-track{height:16px;border-radius:4px;background:var(--surface-2);overflow:hidden;}
.rb-fill{display:block;height:100%;border-radius:4px;background:var(--gold);
transition:width .5s cubic-bezier(.22,1,.36,1);}
.rb-fill.sano{background:var(--bueno);}
.rb-fill.riesgo{background:var(--checar);}
.rb-fill.critico{background:var(--critico);}
.rb-v{text-align:right;font-size:var(--t-sm);font-weight:650;
font-variant-numeric:tabular-nums;color:var(--text);}
/* El tooltip vive dentro del renglón para no depender de posicionar en JS.
Se muestra con hover en escritorio y con .tocado en pantallas táctiles,
donde el hover no existe. */
.rb-tip{position:absolute;left:170px;bottom:calc(100% - 2px);z-index:9;
background:var(--charcoal);color:var(--gold-light);padding:9px 12px;border-radius:var(--r-sm);
font-size:var(--t-sm);line-height:1.55;white-space:nowrap;pointer-events:none;
opacity:0;visibility:hidden;transition:opacity .12s;
box-shadow:0 6px 20px rgba(35,35,32,.28);}
.rb-tip .sano{color:#8FD3AC;} .rb-tip .riesgo{color:#F0BE84;} .rb-tip .critico{color:#F3A2A2;}
.rb-row:hover .rb-tip, .rb-row.tocado .rb-tip{opacity:1;visibility:visible;}
.rb-leyenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;
font-size:var(--t-sm);color:var(--text-3);}
.rb-leyenda span{display:flex;align-items:center;gap:6px;}
.rb-pt{width:9px;height:9px;border-radius:2px;display:inline-block;}
.rb-pt.sano{background:var(--bueno);} .rb-pt.riesgo{background:var(--checar);}
.rb-pt.critico{background:var(--critico);}
.rb-pt.neutro{background:var(--text-tertiary);}
.rb-fill.neutro{background:var(--text-tertiary);}
.rb-tip .neutro{color:#C8C9C4;}
@media (max-width:620px){
.rb-row{grid-template-columns:minmax(70px,1fr) 64px;}
.rb-track{grid-column:1 / -1;grid-row:2;}
.rb-tip{left:0;white-space:normal;max-width:250px;}
}
/* Desglose fiscal: existe para cotizar, pero cerrado por default */
details.fiscal{margin-top:18px;}
details.fiscal summary{cursor:pointer;display:flex;justify-content:space-between;
align-items:center;gap:12px;flex-wrap:wrap;list-style:none;}
details.fiscal summary::-webkit-details-marker{display:none;}
details.fiscal summary::after{content:"▾";color:var(--text-3);font-size:var(--t-sm);}
details.fiscal[open] summary::after{content:"▴";}
details.fiscal summary:hover .panel-t{color:var(--gold-ink);}
details.fiscal .kv:first-of-type{margin-top:12px;}
/* ---------- Editor de minutas ----------
La hoja replica la proporción de la página del PDF: CARTA, 215.9 x 279mm
(ver .pag en src/lib/plantillaMinuta.js — los dos números tienen que ir
juntos). Antes decía 192x245, que no era la proporción de ninguna de las
dos hojas. Todo lo que se coloca encima se posiciona en PORCENTAJE, así
que la misma minuta se ve igual en un teléfono que en un monitor grande
— y en el PDF. */
.mn-barra{display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:10px;position:sticky;top:0;z-index:6;}
.mn-pags{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:10px 0;}
/* Las firmas se VEN (una firma que no se ve no sirve de evidencia) y la
oficina puede quitar la que salió mal. */
.mn-firmas{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.mn-firma{display:flex;gap:8px;align-items:center;border:1px solid var(--line);
border-radius:var(--r-sm);background:var(--surface);padding:4px 6px 4px 4px;font-size:var(--t-sm);}
.mn-firma img{width:84px;height:32px;object-fit:contain;background:#fff;border-radius:3px;}
.mn-pag-b{border:1px solid var(--line);background:var(--surface);color:var(--text-2);
border-radius:var(--r-xs);width:30px;height:30px;cursor:pointer;font:inherit;font-size:var(--t-sm);}
.mn-pag-b.on{background:var(--gold);border-color:var(--gold-deep);color:#fff;font-weight:700;}
.mn-lienzo{background:var(--surface-3);padding:16px;border-radius:var(--r);
display:flex;justify-content:center;overflow:auto;}
.mn-hoja{position:relative;width:100%;max-width:760px;aspect-ratio:215.9/279;
background:#fff;box-shadow:0 3px 18px rgba(35,35,32,.16);flex:none;
padding:14px 16px;box-sizing:border-box;}
.mn-mem{display:flex;gap:10px;align-items:flex-start;
border-bottom:1px solid var(--gold);padding-bottom:7px;}
.mn-mem-c{flex:1;font-size:9px;line-height:1.45;color:var(--text);min-width:0;}
.mn-mem-s{color:var(--text-3);}
.mn-mem-logo{font-size:15px;font-weight:bold;color:var(--gold-ink);letter-spacing:.04em;}
/* La zona cubre TODA la hoja, membrete incluido: es lo mismo que hace el
PDF, así que un bloque puesto muy arriba se encima igual en los dos. */
.mn-zona{position:absolute;left:0;right:0;top:0;bottom:0;}
.mn-el{position:absolute;cursor:move;touch-action:none;line-height:1.5;
color:#26241F;padding:1px;}
.mn-el img{width:100%;display:block;border:1px solid #C9C9C9;pointer-events:none;}
.mn-el:hover{outline:1px dashed var(--gold-light);}
.mn-el.sel{outline:2px solid var(--gold);}
.mn-el.editando{cursor:text;outline:2px solid var(--gold-deep);background:#FFFDF6;}
.mn-tx{white-space:pre-wrap;word-wrap:break-word;outline:none;}
/* Tabla dentro de la minuta. `table-layout:fixed` es obligatorio: sin eso el
navegador reparte el ancho por el contenido y las columnas se mueven solas
al escribir, que en un formato de obra es inaceptable — el ancho lo manda
la columna, no lo que se teclee. */
.mn-tb{width:100%;border-collapse:collapse;table-layout:fixed;}
.mn-tb td,.mn-tb th{border:1px solid #C9C9C9;padding:2px 4px;vertical-align:top;
word-wrap:break-word;overflow-wrap:anywhere;outline:none;text-align:left;}
.mn-tb th{background:#4D4D4D;color:#fff;font-weight:600;font-size:.86em;
letter-spacing:.04em;text-transform:uppercase;}
.mn-tb tr.z td{background:#FAFAFA;}
.mn-el.editando .mn-tb td,.mn-el.editando .mn-tb th{cursor:text;}
.mn-el.editando .mn-tb td:focus,.mn-el.editando .mn-tb th:focus{
background:#FFF6D8;box-shadow:inset 0 0 0 2px var(--gold);}
/* Rejilla de la tarjeta de propiedades para escribir los encabezados. */
.mn-cols{display:flex;flex-direction:column;gap:6px;max-height:210px;overflow-y:auto;}
.mn-col-r{display:flex;gap:6px;align-items:center;}
.mn-col-r .in{flex:1;min-width:0;}
.mn-col-r .mn-col-w{width:74px;flex:none;}
.mn-rz{position:absolute;right:-6px;bottom:-6px;width:13px;height:13px;
background:var(--gold);border:2px solid #fff;border-radius:50%;
cursor:ew-resize;box-shadow:0 1px 3px rgba(0,0,0,.3);display:none;}
.mn-el.sel .mn-rz{display:block;}
.mn-props{margin-top:12px;}
.mn-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
gap:9px;max-height:340px;overflow-y:auto;padding:2px;}
.mn-gal-b{border:1px solid var(--line);border-radius:var(--r-xs);background:var(--surface);
padding:4px;cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:3px;}
.mn-gal-b:hover{border-color:var(--gold);background:var(--gold-soft);}
.mn-gal-b img{width:100%;height:80px;object-fit:cover;border-radius:2px;}
@media(max-width:620px){
.mn-lienzo{padding:8px;}
.mn-barra{position:static;}
}
/* Carga de trabajo por semana: barras horizontales, una por semana. */
.ct-barras{display:flex;flex-direction:column;gap:4px;margin-top:12px;
max-height:300px;overflow-y:auto;}
.ct-fila{display:grid;grid-template-columns:86px 1fr 74px 78px;gap:9px;align-items:center;
font-size:var(--t-sm);color:var(--text-2);font-variant-numeric:tabular-nums;
padding:3px 5px;border-radius:var(--r-xs);}
.ct-fila.hoy{background:var(--gold-soft);}
.ct-track{background:var(--surface-2);border-radius:3px;height:14px;overflow:hidden;}
.ct-track i{display:block;height:100%;background:var(--gold);border-radius:3px;}
.ct-fila.pico .ct-track i{background:var(--critico);}
.ct-fila.pico .ct-monto{color:var(--critico);font-weight:700;}
.ct-monto{text-align:right;font-weight:600;}
.ct-blq{color:var(--text-tertiary);font-size:var(--t-xs);}
@media(max-width:620px){
.ct-fila{grid-template-columns:70px 1fr 62px;}
.ct-blq{display:none;}
}
/* Termómetro de Pagos: barra = % devengado sobre lo contratado, con
marcadores verticales de dónde va lo estimado y lo desembolsado. */
.termo-track{position:relative;height:28px;border-radius:var(--r-xs);
background:var(--surface-2);margin:8px 0 34px;overflow:visible;}
.termo-fill{position:absolute;top:0;left:0;height:100%;
border-radius:var(--r-xs) 0 0 var(--r-xs);
background:linear-gradient(90deg,var(--gold-light),var(--gold-deep));
transition:width .5s cubic-bezier(.4,0,.2,1);}
.termo-fill.over{background:var(--critico);}
.termo-mk{position:absolute;top:-5px;bottom:-5px;width:3px;border-radius:2px;
transform:translateX(-50%);background:var(--info);}
.termo-mk.des{background:var(--critico);}
.termo-mk.over{box-shadow:0 0 0 2px var(--critico-bg);}
.termo-mk .tip{position:absolute;top:-19px;left:50%;transform:translateX(-50%);
font-size:var(--t-xs);font-weight:650;white-space:nowrap;color:var(--info);}
.termo-mk.des .tip{color:var(--critico);}
.termo-legend{display:flex;flex-wrap:wrap;gap:18px;font-size:var(--t-sm);color:var(--text-2);
align-items:center;}
.termo-legend b{color:var(--text);font-weight:650;font-variant-numeric:tabular-nums;}
.kv{display:flex;justify-content:space-between;font-size:var(--t-sm);padding:7px 0;
border-top:1px solid var(--line);}
.kv.tot{border-top:1px solid var(--line-2);margin-top:2px;font-weight:650;
font-size:var(--t-md);padding-top:11px;}
.kv .l{color:var(--text-2);} .kv.tot .l{color:var(--text);}
.bar-list{display:flex;flex-direction:column;gap:13px;}
.bar-row .btop{display:flex;justify-content:space-between;gap:10px;font-size:var(--t-sm);margin-bottom:5px;}
.bar-row .bn{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bar-row .bv{font-weight:600;flex:none;font-variant-numeric:tabular-nums;}
.bar-track{height:4px;border-radius:2px;background:var(--surface-3);overflow:hidden;}
.bar-fill{height:100%;border-radius:2px;background:var(--gold);
transition:width .5s cubic-bezier(.4,0,.2,1);}
.bar-fill.g{background:var(--bueno);}
.wf{display:flex;flex-direction:column;gap:9px;}
.wf-row{display:grid;grid-template-columns:150px 1fr 92px;gap:12px;
align-items:center;font-size:var(--t-sm);}
.wf-lb{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wf-track{position:relative;height:6px;background:var(--surface-3);border-radius:3px;overflow:hidden;}
.wf-seg{position:absolute;top:0;bottom:0;border-radius:3px;}
.wf-val{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;}
/* ---------- TABLAS ---------- */
.tbl-card{padding:0;overflow:hidden;margin-bottom:18px;}
/* ---------- Asistente de proyecto nuevo ---------- */
.asis-tira{display:flex;gap:6px;margin:-4px 0 18px;flex-wrap:wrap;}
.asis-p{display:flex;align-items:center;gap:6px;font-size:var(--t-sm);font-weight:550;
color:var(--text-3);padding:5px 10px;border-radius:999px;background:var(--surface-2);
border:1px solid var(--line);}
.asis-p.on{color:var(--text);border-color:var(--gold-deep);background:var(--gold-soft);}
.asis-p.ok{color:var(--text-2);}
.asis-n{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;
border-radius:50%;background:var(--line-2);color:var(--surface);font-size:var(--t-micro);font-weight:700;}
.asis-p.on .asis-n{background:var(--gold-deep);color:#fff;}
.asis-p.ok .asis-n{background:var(--gold);color:#231E0C;}
.asis-otro{margin-top:14px;font-size:var(--t-sm);color:var(--text-3);text-align:center;}
.asis-sub{border-top:1px solid var(--line);margin-top:16px;padding-top:14px;}
/* Estas SÍ se quedan marcadas al elegir: la decisión tiene que verse mientras
se llena el resto del formulario. Ver el comentario de .tipo-card. */
.tipo-op.on{border-color:var(--gold-deep);background:var(--gold-soft);
box-shadow:inset 0 0 0 1px var(--gold-deep);}
.tipo-op.on .tipo-ic{background:var(--gold);color:#fff;}
.tipo-op.chico{padding:12px 13px;}
.tipo-op.chico .tipo-t{margin:0 0 3px;}
.tipo-grid.dos{grid-template-columns:1fr 1fr;}
@media (max-width:480px){ .tipo-grid.dos{grid-template-columns:1fr;} }
/* ---------- Cronograma empalmado del maestro ----------
Un renglón por subproyecto sobre el MISMO calendario. Las barras se
posicionan en % del rango total, así que el ancho de la pantalla no cambia
lo que se compara. */
.cm-cal{display:flex;align-items:stretch;gap:10px;margin-bottom:6px;}
.cm-lbl{flex:0 0 168px;display:flex;flex-direction:column;justify-content:center;gap:1px;
min-width:0;}
.cm-lbl b{font-size:var(--t-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cm-lbl span{font-size:var(--t-xs);color:var(--text-3);}
.cm-pista{position:relative;flex:1;min-height:26px;background:var(--surface-2);
border-radius:var(--r-xs);border:1px solid var(--line);}
.cm-cal .cm-pista{background:transparent;border:none;min-height:20px;}
.cm-mes{position:absolute;top:0;height:20px;line-height:20px;font-size:var(--t-micro);
color:var(--text-3);border-left:1px solid var(--line-2);padding-left:5px;
overflow:hidden;white-space:nowrap;text-transform:uppercase;letter-spacing:.03em;}
.cm-lineas{display:flex;flex-direction:column;gap:5px;}
.cm-fila{display:flex;align-items:stretch;gap:10px;cursor:pointer;padding:3px 0;
border-radius:var(--r-xs);transition:background .12s;}
.cm-fila:hover{background:var(--surface-2);}
.cm-fila.vacia .cm-lbl b{color:var(--text-3);}
.cm-fila.vacia .cm-pista{background:repeating-linear-gradient(45deg,
var(--surface-2) 0 6px, var(--surface-3) 6px 12px);}
.cm-barra{position:absolute;top:4px;height:18px;background:var(--gold-soft);
border:1px solid var(--gold);border-radius:3px;overflow:hidden;
display:flex;align-items:center;}
.cm-barra i{position:absolute;left:0;top:0;bottom:0;background:var(--gold);opacity:.55;}
.cm-barra span{position:relative;font-size:var(--t-micro);padding:0 5px;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;color:var(--text);}
/* Un hito no dura: es un rombo, no una barra de un día. */
.cm-hito{position:absolute;top:6px;width:13px;height:13px;margin-left:-6px;
background:var(--gold-deep);transform:rotate(45deg);border-radius:2px;}
.cm-err{position:absolute;left:8px;top:5px;font-size:var(--t-xs);color:var(--critico);}
@media (max-width:640px){ .cm-lbl{flex:0 0 104px;} }
/* ================= MODO ENFOQUE =================
Catálogo y cronograma como herramienta técnica (tipo Excel/SAP): sin barra
lateral ni encabezado, la cuadrícula se queda con la pantalla, una barra de
título angosta arriba y una de estado abajo, como cualquier software de
escritorio. Sergio: «que se vea más técnico y preciso». */
.enf-barra,.enf-estado,.enf-aviso{display:none;}
/* La barra de vistas (Catálogo · Captura · Revisión) se queda: es parte de la herramienta. */
body.enfoque .sidebar,body.enfoque .topbar,body.enfoque .railp,
body.enfoque .fab,body.enfoque .fab-menu{display:none !important;}
body.enfoque .main{margin-left:0;}
body.enfoque .content{max-width:none;padding:46px 12px 34px;}
body.enfoque .enf-barra{display:flex;align-items:center;gap:10px;position:fixed;top:0;left:0;right:0;
height:36px;padding:0 12px;background:var(--ink);color:#EDE9DC;z-index:60;font-size:var(--t-sm);}
.enf-t{font-weight:700;color:var(--gold-light);letter-spacing:.02em;}
.enf-p{color:#B8B4A6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body.enfoque .enf-barra .btn{background:transparent;border-color:#5A574D;color:#EDE9DC;
min-height:0;padding:3px 9px;box-shadow:none;}
body.enfoque .enf-barra .btn:hover{border-color:var(--gold);color:var(--gold-light);}
.enf-barra kbd{font-size:var(--t-micro);opacity:.7;}
body.enfoque .enf-estado{display:flex;align-items:center;gap:18px;position:fixed;left:0;right:0;bottom:0;
height:24px;padding:0 12px;background:var(--surface-3);border-top:1px solid var(--line-2);z-index:60;
font-size:var(--t-xs);color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;}
.enf-estado b{color:var(--text);font-weight:700;}
.enf-estado .enf-der{margin-left:auto;color:var(--text-3);}
/* Cambios guardados desde otra ventana del mismo proyecto. */
.enf-aviso.on{display:flex;align-items:center;gap:10px;position:fixed;right:14px;bottom:34px;z-index:170;
background:var(--ink);color:#EDE9DC;border-radius:var(--r-sm);padding:9px 12px;font-size:var(--t-sm);
box-shadow:0 10px 26px rgba(20,18,12,.3);}
.enf-aviso .btn{min-height:0;padding:3px 9px;}
/* Por qué una partida está en color (modalPorqueSemaforo). */
.pq-lista{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.pq-lista li{display:flex;gap:10px;align-items:flex-start;line-height:1.45;}
.pq-lista .cat-ctx-dot{flex:none;margin-top:4px;}
.pq-lista em{font-style:normal;color:var(--gold-ink);}
/* Tirador de relleno: la esquina inferior-derecha de la selección, para
arrastrar hacia abajo como el "punto" de Excel. */
body.cat-rellenando, body.cat-rellenando *{cursor:crosshair !important;}
/* «Solo agregar»: lo de etapas anteriores se ve sin campos, en un tono más quieto. */
tr.cat-fija td{color:var(--text-2);}
/* Arriba de la pantalla: cómo abre la etapa este módulo (Solo agregar o Solo consulta). */
.est-mod{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:8px 12px;border:1px solid transparent;border-radius:var(--r-sm);
font-size:var(--t-sm);line-height:1.4;}
.est-mod svg.i{flex:none;}
.est-mod.agregar{background:var(--info-bg);color:var(--info);border-color:color-mix(in srgb,var(--info) 30%,transparent);}
.est-mod.consulta{background:var(--ajustado-bg);color:var(--ajustado);border-color:color-mix(in srgb,var(--ajustado) 30%,transparent);}
/* Lo que la sección recibe solo en parte por una flecha de datos. */
.est-mod.parte{background:var(--dato-bg);color:var(--dato);border-color:color-mix(in srgb,var(--dato) 30%,transparent);}
/* Los puntos de color de las reglas del semáforo. */
.cat-ctx-dot{width:18px;height:18px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;}
.cat-ctx-dot:hover{border-color:var(--text-3);}
.cat-ctx-dot.on{border-color:var(--text);}
/* Editor de columnas */
.cat-cls{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow:auto;
margin-top:6px;}
.cat-cl{display:flex;align-items:center;gap:10px;padding:9px 11px;
border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);}
.cat-cl-d{color:var(--text-3);letter-spacing:-2px;font-size:var(--t-sm);}
.cat-cl-n{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0;}
.cat-cl-n b{font-size:var(--t-base);}
.cat-cl-n span{font-size:var(--t-xs);color:var(--text-3);}
/* Revisión de importación multicatálogo: un renglón por partida que entra,
con contra qué se alinea. El color de la izquierda dice de un vistazo qué
va a pasar: verde se alinea, gris nace nueva, ámbar necesita que decidas. */
.imp-tot{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;}
.imp-p{font-size:var(--t-xs);font-weight:700;padding:2px 8px;border-radius:10px;}
.imp-p.ok{background:var(--bueno-bg);color:var(--bueno);}
.imp-p.nue{background:var(--surface-3);color:var(--text-2);}
.imp-p.dud{background:var(--checar-bg);color:var(--checar);}
.imp-lista{max-height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;
border:1px solid var(--line);border-radius:var(--r-sm);padding:8px;background:var(--surface-2);}
.imp-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:10px;
align-items:start;padding:7px 9px;background:var(--surface);border-radius:var(--r-xs);
border-left:3px solid var(--line-2);}
.imp-r.ok{border-left-color:var(--bueno);}
.imp-r.dud{border-left-color:var(--checar);}
.imp-r.nue{border-left-color:var(--line-2);}
.imp-x{min-width:0;display:flex;flex-direction:column;gap:1px;}
.imp-x b{font-size:var(--t-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.imp-x span{font-size:var(--t-xs);color:var(--text-3);font-variant-numeric:tabular-nums;}
.imp-m{min-width:0;display:flex;flex-direction:column;gap:3px;}
.imp-m select{width:100%;font-size:var(--t-sm);padding:3px 5px;}
.imp-m em{font-style:normal;font-size:var(--t-xs);color:var(--text-3);line-height:1.35;}
.imp-m em.imp-av{color:var(--checar);}
/* Validación del Excel. Esquinas rectas y una barra de color a la izquierda:
esto es una lista de errores para corregir, no una tarjeta decorativa. */
.xv-bl,.xv-av{margin:10px 0;border:1px solid var(--line);border-left:3px solid var(--line-2);
background:var(--surface-2);padding:10px 12px;}
.xv-bl{border-left-color:var(--critico);}
.xv-av{border-left-color:var(--checar);}
.xv-bt{font-size:var(--t-base);font-weight:700;letter-spacing:.02em;text-transform:uppercase;}
.xv-bl .xv-bt{color:var(--critico);}
.xv-av .xv-bt{color:var(--checar);}
.xv-bs{font-size:var(--t-sm);color:var(--text-2);margin:3px 0 9px;line-height:1.45;}
.xv-h{border-top:1px solid var(--line);padding:8px 0 7px;}
.xv-h:first-of-type{border-top:0;padding-top:2px;}
.xv-t{font-size:var(--t-base);font-weight:600;display:flex;align-items:center;gap:7px;}
.xv-t i{font-style:normal;font-size:var(--t-xs);font-weight:700;padding:1px 6px;
background:var(--surface-3);color:var(--text-2);font-variant-numeric:tabular-nums;}
.xv-h.mal .xv-t i{background:var(--critico-bg);color:var(--critico);}
.xv-h.ojo .xv-t i{background:var(--checar-bg);color:var(--checar);}
.xv-f{font-size:var(--t-xs);color:var(--text-2);margin-top:3px;font-variant-numeric:tabular-nums;}
.xv-e{font-size:var(--t-xs);color:var(--text-3);margin-top:2px;
font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
overflow:hidden;text-overflow:ellipsis;}
.xv-c{font-size:var(--t-sm);color:var(--text-2);margin-top:4px;line-height:1.45;}
/* Topes: un renglon por techo autorizado, con la barra de color a la
izquierda diciendo si ya se rebaso. */
.tp-lista{display:flex;flex-direction:column;gap:6px;margin:10px 0;max-height:340px;
overflow-y:auto;}
.tp-r{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:10px;
align-items:center;padding:8px 10px;background:var(--surface-2);
border:1px solid var(--line);border-left:3px solid var(--line-2);}
.tp-r.ok{border-left-color:var(--bueno);}
.tp-r.ojo{border-left-color:var(--checar);}
.tp-r.mal{border-left-color:var(--critico);background:var(--critico-bg);}
.tp-x{min-width:0;display:flex;flex-direction:column;gap:1px;}
.tp-x b{font-size:var(--t-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tp-x span{font-size:var(--t-xs);color:var(--text-3);}
.tp-n{min-width:0;display:flex;flex-direction:column;gap:1px;text-align:right;
font-variant-numeric:tabular-nums;font-size:var(--t-base);}
.tp-n span{font-size:var(--t-xs);color:var(--text-3);}
.tp-a{display:flex;gap:2px;}
.imp-cst{margin-top:12px;border:1px solid var(--line);border-left:3px solid var(--gold);
background:var(--surface-2);padding:10px 12px;}
.imp-cst-t{font-size:var(--t-sm);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
color:var(--text-2);}
.imp-cst-s{font-size:var(--t-xs);color:var(--text-3);margin:3px 0 8px;line-height:1.45;}
.imp-cst select{width:100%;max-width:340px;font-size:var(--t-sm);padding:4px 6px;}
.imp-cst-n{font-size:var(--t-sm);color:var(--text-2);margin-top:7px;line-height:1.45;}
.cat-fx{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.cat-fx span{font-size:var(--t-sm);color:var(--text-3);white-space:nowrap;}
.cat-fx select{flex:1;min-width:120px;}
.cat-fx input[type=number]{flex:1;min-width:90px;}
.cat-fx #cc-op{flex:0 0 56px;min-width:56px;}
/* Importar */
.cat-map{display:flex;align-items:center;gap:10px;padding:7px 0;
border-bottom:1px solid var(--line);}
.cat-map-x{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.cat-map-x b{font-size:var(--t-base);}
.cat-map-x span{font-size:var(--t-xs);color:var(--text-3);overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;}
.cat-map-f{color:var(--text-3);}
.cat-map select{flex:1.2;min-width:150px;}
.cat-ck{display:flex;align-items:center;gap:8px;font-size:var(--t-base);color:var(--text-2);
margin:10px 0 6px;cursor:pointer;}
.cat-ck input{width:auto;}
.tbl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:15px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.tbl-count{font-size:var(--t-base);color:var(--text-2);}
.tbl-scroll{overflow-x:auto;}
/* E4-T9: visor de comparación de planos. `overflow:hidden` + transform en
la imagen: el zoom/arrastre mueve la imagen DENTRO del marco, sin
empujar el resto del modal. */
.pl-visor{position:relative;overflow:hidden;height:260px;background:var(--surface-3);
border:1px solid var(--line-2);border-radius:var(--r-sm);display:flex;align-items:center;
justify-content:center;cursor:grab;}
.pl-visor:active{cursor:grabbing;}
.pl-visor img{max-width:100%;max-height:100%;transform-origin:center center;
will-change:transform;user-select:none;-webkit-user-drag:none;}
.pl-visor .pl-pdf{width:100%;height:100%;border:0;background:#fff;cursor:auto;}
/* Quién ejecuta el bloque y los retrasos que se le han declarado. */
.mb-retrasos{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);
padding:8px 12px;margin:0 0 12px;}
.mb-ret-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
font-size:var(--t-sm);color:var(--text-2);}
.mb-ret-l{margin-top:6px;display:flex;flex-direction:column;gap:4px;}
.mb-ret{display:flex;gap:6px;align-items:baseline;font-size:var(--t-sm);border-top:1px solid var(--line);
padding-top:4px;}
.mb-ret .mini{flex:1;min-width:0;}
table.data{width:100%;font-size:var(--t-base);}
table.data thead th{position:sticky;top:0;background:var(--surface);text-align:left;
padding:11px 14px;font-size:var(--t-xs);color:var(--text-3);font-weight:550;
border-bottom:1px solid var(--line-2);white-space:nowrap;user-select:none;z-index:2;}
table.data thead th.num,table.data td.num{text-align:right;}
table.data thead th.ed{color:var(--gold-ink);}
table.data tbody td{padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:middle;}
table.data tbody tr:last-child td{border-bottom:none;}
table.data tbody tr:hover{background:var(--surface-2);}
tr.dim{color:var(--text-3);}
tr.dim .code{color:var(--text-3);}
.code{font-weight:600;font-size:var(--t-sm);white-space:nowrap;cursor:help;
font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.cpt{max-width:290px;} .cpt span{display:block;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;cursor:help;color:var(--text-2);}
mark{background:#F4EBC9;color:var(--text);padding:0 1px;border-radius:2px;}
.nd{color:var(--text-3);font-size:var(--t-sm);}
.in{width:82px;text-align:right;border:1px solid var(--line);background:var(--surface);
border-radius:var(--r-xs);padding:5px 7px;font-size:var(--t-base);font-weight:550;
font-variant-numeric:tabular-nums;transition:all .12s;color:var(--text);}
.in::placeholder{color:var(--text-3);}
.in:hover{border-color:var(--text-3);}
.in:focus{border-color:var(--gold-deep);background:var(--surface);
box-shadow:0 0 0 3px var(--gold-soft);outline:none;}
.in.edited{border-color:var(--line-2);background:var(--gold-soft);}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-sm);
font-weight:500;white-space:nowrap;color:var(--text-2);}
.pill .pd{width:6px;height:6px;border-radius:50%;flex:none;}
.pill.critico{color:var(--critico);} .pill.checar{color:var(--checar);}
.pill.ajustado{color:var(--ajustado);} .pill.bueno{color:var(--bueno);}
.pill.excelente{color:var(--excelente);} .pill.espera{color:var(--text-3);}
.pill.libre{color:var(--info);} .pill.topado{color:var(--ajustado);}
.tag{display:inline-block;font-size:var(--t-xs);font-weight:550;padding:2px 7px;
border-radius:3px;background:var(--surface-3);color:var(--text-2);}
.tag.critico{background:var(--critico-bg);color:var(--critico);}
.tag.libre{background:var(--info-bg);color:var(--info);}
.tag.topado{background:var(--ajustado-bg);color:var(--ajustado);}
.tag.bueno{background:var(--bueno-bg);color:var(--bueno);}
.pos{color:var(--bueno);} .neg{color:var(--critico);}
.mini{font-size:var(--t-xs);color:var(--text-3);}
.sug{cursor:pointer;border:1px solid var(--line-2);background:var(--surface);
color:var(--gold-ink);border-radius:var(--r-xs);padding:3px 8px;
font-size:var(--t-sm);font-weight:600;font-variant-numeric:tabular-nums;transition:all .12s;}
.sug:hover{background:var(--gold-soft);border-color:var(--gold);}
.xbtn{border:none;background:none;color:var(--text-3);cursor:pointer;
padding:4px;border-radius:var(--r-xs);display:inline-flex;transition:all .12s;}
.xbtn:hover{color:var(--critico);background:var(--critico-bg);}
.xbtn:active{transform:scale(.88);}
.empty{padding:52px 20px;text-align:center;color:var(--text-3);font-size:var(--t-base);}
.prog{display:flex;align-items:center;gap:9px;min-width:104px;}
.prog-t{flex:1;height:4px;border-radius:2px;background:var(--surface-3);overflow:hidden;}
.prog-f{height:100%;border-radius:2px;transition:width .4s;}
.prog-n{font-size:var(--t-sm);font-weight:550;flex:none;width:36px;text-align:right;
font-variant-numeric:tabular-nums;}
/* ---------- FILTROS ---------- */
.fbar{padding:0;margin-bottom:18px;overflow:hidden;}
.ftabs{display:flex;border-bottom:1px solid var(--line);padding:0 8px;}
.ftab{border:none;background:none;padding:13px 14px;cursor:pointer;font-size:var(--t-base);
font-weight:500;color:var(--text-3);position:relative;transition:color .14s;
display:inline-flex;align-items:center;gap:7px;}
.ftab:hover{color:var(--text);}
.ftab.on{color:var(--text);font-weight:600;}
.ftab.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;
height:2px;background:var(--gold-deep);}
.fbody{padding:17px 20px;}
.chips{display:flex;flex-wrap:wrap;gap:6px;}
.chip{border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-xs);
padding:5px 11px;font-size:var(--t-sm);font-weight:500;cursor:pointer;
display:inline-flex;align-items:center;gap:7px;transition:all .13s;color:var(--text-2);}
.chip:hover{border-color:var(--text-3);color:var(--text);}
.chip:active{transform:scale(.96);}
.chip.on{background:var(--gold-soft);border-color:var(--gold);color:var(--gold-ink);font-weight:600;}
.chip .cn{color:var(--text-3);font-size:var(--t-xs);font-variant-numeric:tabular-nums;}
.chip.on .cn{color:var(--gold-ink);opacity:.7;}
/* Calificación de proveedores: la estrella se lee como estrella, no como texto de chip. */
.chip.star{font-size:18px;line-height:1;padding:6px 10px;}
.srow{display:flex;gap:10px;align-items:center;padding:13px 20px;
border-top:1px solid var(--line);flex-wrap:wrap;}
.sin{flex:1;min-width:200px;border:1px solid var(--line-2);background:var(--surface);
border-radius:var(--r-sm);padding:8px 13px;font-size:var(--t-base);transition:border-color .14s;}
.sin:hover{border-color:var(--text-3);}
.sin:focus{border-color:var(--gold-deep);box-shadow:0 0 0 3px var(--gold-soft);outline:none;}
.hint{font-size:var(--t-sm);color:var(--text-3);margin-top:14px;line-height:1.6;}
.hint b{color:var(--text-2);font-weight:600;}
.frm{display:grid;gap:14px;}
.frm-r{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:14px;align-items:end;}
.alert{padding:12px 15px;border-radius:var(--r-sm);font-size:var(--t-base);line-height:1.6;
border-left:2px solid var(--checar);background:var(--checar-bg);margin-bottom:16px;
color:var(--text-2);}
.alert.ok{border-left-color:var(--bueno);background:var(--bueno-bg);}
.alert.bad{border-left-color:var(--critico);background:var(--critico-bg);}
.alert.info{border-left-color:var(--info);background:var(--info-bg);}
.alert b{color:var(--text);font-weight:600;}
.trow{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:10px 0;border-top:1px solid var(--line);font-size:var(--t-base);color:var(--text-2);}
.trow .num{font-weight:600;color:var(--text);}
.switch{position:relative;width:34px;height:19px;flex:none;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;inset:0;background:var(--surface-3);border:1px solid var(--line-2);
border-radius:9px;cursor:pointer;transition:.16s;}
.slider::before{content:"";position:absolute;width:13px;height:13px;left:2px;top:2px;
background:var(--surface);border-radius:50%;transition:.16s;
box-shadow:0 1px 2px rgba(0,0,0,.18);}
.switch input:checked + .slider{background:var(--gold);border-color:var(--gold-deep);}
.switch input:checked + .slider::before{transform:translateX(15px);}
/* ---------- MODAL / TOAST / TIP ---------- */
/* Por encima de los cajones (149/150): un modal que se abre DESDE un
cajon —el editor de flujo, el de campos— tiene que quedar arriba, no
debajo del panel que lo abrio. Mismo motivo para el toast y el tip:
un aviso que nadie ve es un aviso que no existe. */
.backdrop{position:fixed;inset:0;background:rgba(35,35,32,.42);
display:flex;align-items:center;justify-content:center;z-index:160;padding:24px;
animation:bdIn .16s ease both;}
.modal{background:var(--surface);border-radius:var(--r);padding:26px;max-width:540px;
width:100%;max-height:86vh;overflow-y:auto;box-shadow:0 20px 56px rgba(0,0,0,.24);
animation:modalIn .22s cubic-bezier(.2,.85,.35,1) both;}
.modal h3{margin:0 0 9px;font-size:16px;font-weight:650;letter-spacing:-.015em;}
.modal p{margin:0 0 15px;font-size:var(--t-base);color:var(--text-2);line-height:1.62;}
.macts{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;}
@keyframes bdIn{from{opacity:0;}to{opacity:1;}}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(8px);
background:var(--ink);color:#F0EEE7;padding:11px 18px;border-radius:var(--r-sm);
font-size:var(--t-base);font-weight:500;z-index:190;opacity:0;pointer-events:none;
transition:opacity .22s cubic-bezier(.2,.85,.35,1),transform .22s cubic-bezier(.2,.85,.35,1);
max-width:90vw;box-shadow:0 8px 24px rgba(0,0,0,.2);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.err{background:var(--critico);}
#tip{position:fixed;z-index:175;pointer-events:none;opacity:0;transition:opacity .12s;
background:var(--ink);color:#EAE8E1;border-radius:var(--r-sm);padding:11px 13px;
font-size:var(--t-sm);line-height:1.58;max-width:392px;box-shadow:0 8px 24px rgba(0,0,0,.22);}
#tip.show{opacity:1;}
.sb-cerrar{display:none;position:absolute;top:16px;right:12px;border:none;background:none;
color:#8B8981;cursor:pointer;padding:5px;border-radius:3px;}
.sb-cerrar:hover{color:#E6E6E2;background:#2F2E2A;}
.sb-velo{display:none;position:fixed;inset:0;background:rgba(35,35,32,.4);z-index:45;}
@media (max-width:900px){
.sidebar{transform:translateX(-100%);} body.sb-abierto .sidebar{transform:none;}
.main{margin-left:0 !important;} .sb-cerrar{display:block;}
body.sb-abierto .sb-velo{display:block;}
.content{padding:18px 16px 44px;} .topbar{padding:10px 16px;gap:8px;}
/* En el teléfono la cabecera no puede comerse media pantalla: sin subtítulo,
título más chico y las acciones en un solo renglón (tablero Jornada). */
.topbar h1{font-size:18px;} .topbar .crumb{display:none;}
.topbar .acts{gap:6px;} .topbar .tb-inicio span{display:none;} .topbar .tb-inicio{padding:6px 9px;}
.topbar .sync{font-size:var(--t-xs);}
}
/* ---------- SELECTOR DE PROYECTOS ---------- */
#selector{position:fixed;inset:0;background:var(--bg);z-index:70;overflow-y:auto;padding:0;}
.sel-top{background:var(--ink);padding:26px 30px 24px;}
.sel-top .brand{display:flex;align-items:center;gap:10px;max-width:1080px;margin:0 auto;}
.sel-top .brand img.marca{width:150px;height:auto;flex:none;}
.sel-top .who{margin-left:auto;text-align:right;}
.sel-top .who b{display:block;font-size:var(--t-base);color:#DCDCD8;font-weight:600;}
.sel-top .who span{font-size:var(--t-micro);color:#6E6C65;text-transform:uppercase;
letter-spacing:.12em;font-weight:700;}
.sel-body{max-width:1080px;margin:0 auto;padding:30px;}
.sel-h{display:flex;align-items:flex-end;justify-content:space-between;
gap:14px;flex-wrap:wrap;margin-bottom:20px;}
.sel-h h2{margin:0;font-size:19px;font-weight:650;letter-spacing:-.02em;}
.sel-h p{margin:3px 0 0;font-size:var(--t-base);color:var(--text-2);}
.sel-sec{margin-bottom:30px;}
.sel-sec:last-child{margin-bottom:0;}
.sel-sec-t{margin:0 0 12px;font-size:var(--t-md);font-weight:700;letter-spacing:.02em;
color:var(--text-2);text-transform:uppercase;display:flex;align-items:center;gap:9px;}
.sel-sec-n{font-size:var(--t-xs);font-weight:650;color:var(--text-3);background:var(--surface-2);
border:1px solid var(--line);border-radius:999px;padding:1px 9px;text-transform:none;letter-spacing:0;}
.sel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(286px,1fr));gap:14px;}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
padding:18px 19px;cursor:pointer;transition:border-color .14s,box-shadow .14s,transform .14s;
text-align:left;font:inherit;color:inherit;display:flex;flex-direction:column;gap:9px;}
.pcard:hover{border-color:var(--gold);box-shadow:0 4px 16px rgba(35,35,32,.09);transform:translateY(-1px);}
.pcard:active{transform:translateY(0) scale(.99);box-shadow:0 1px 4px rgba(35,35,32,.1);}
.pcard .pn{font-size:15.4px;font-weight:650;letter-spacing:-.015em;line-height:1.25;}
.pcard .pmeta{font-size:var(--t-sm);color:var(--text-3);line-height:1.55;}
.pcard .pstats{display:flex;gap:16px;border-top:1px solid var(--line);padding-top:10px;margin-top:auto;}
.pcard .pstat{min-width:0;}
.pcard .pstat b{display:block;font-size:16px;font-weight:650;letter-spacing:-.02em;
font-variant-numeric:tabular-nums;}
.pcard .pstat span{font-size:var(--t-xs);color:var(--text-3);}
.pcard.nuevo{border-style:dashed;border-color:var(--line-2);background:var(--surface-2);
align-items:center;justify-content:center;text-align:center;min-height:172px;color:var(--text-2);}
.pcard.nuevo:hover{border-color:var(--gold-deep);color:var(--gold-ink);background:var(--gold-soft);}
.pcard.nuevo .pn{font-size:var(--t-md);font-weight:600;}
.pcard-wrap{position:relative;}
.pcard-wrap .pcard{width:100%;box-sizing:border-box;}
.pcard-del{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;
border:1px solid var(--line);background:var(--surface);color:var(--text-3);cursor:pointer;
display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .14s,color .14s,border-color .14s;}
.pcard-wrap:hover .pcard-del{opacity:1;}
.pcard-del:hover{color:var(--critico);border-color:var(--critico);}
/* Overlay de carga al abrir un proyecto/vista: la pantalla de selección no
cambia hasta que getEstado() resuelve, así que sin esto un clic se sentía
como si no hubiera respondido. */
#app-loading{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;
justify-content:center;background:rgba(20,19,16,.42);backdrop-filter:blur(1.5px);}
#app-loading.hide{display:none;}
.al-box{display:flex;flex-direction:column;align-items:center;gap:14px;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
padding:26px 34px;box-shadow:0 12px 32px rgba(20,19,16,.28);}
.al-spin{width:34px;height:34px;border-radius:50%;
border:3px solid var(--line-2);border-top-color:var(--gold);
animation:al-rot .7s linear infinite;}
.al-txt{font-size:var(--t-base);font-weight:600;color:var(--text-2);}
@keyframes al-rot{to{transform:rotate(360deg);}}
/* Elegir entre "proyecto de obra" y "visita" en el modal de creación. */
.tipo-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.tipo-op{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
padding:18px 14px;text-align:center;cursor:pointer;font:inherit;color:inherit;
display:flex;flex-direction:column;align-items:center;gap:8px;
transition:border-color .14s,box-shadow .14s,transform .14s,background .14s;}
.tipo-op:hover{border-color:var(--gold);background:var(--gold-soft);box-shadow:0 4px 14px rgba(35,35,32,.08);
transform:translateY(-1px);}
.tipo-op:active{transform:translateY(0) scale(.98);}
.tipo-ic{width:38px;height:38px;border-radius:50%;background:var(--gold-soft);color:var(--gold-ink);
display:flex;align-items:center;justify-content:center;}
.tipo-op:hover .tipo-ic{background:var(--gold);color:#fff;}
.tipo-t{font-size:var(--t-base);font-weight:650;}
.tipo-s{font-size:var(--t-xs);color:var(--text-3);line-height:1.5;}
/* Elegir entre dos opciones dentro de un modal (material vs. trabajo extra).
A diferencia de .tipo-op, estas se QUEDAN marcadas al elegir: la decisión
se ve mientras se llena el resto del formulario. */
.tipos{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.tipo-card{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
padding:12px 13px;text-align:left;cursor:pointer;font:inherit;color:inherit;
transition:border-color .14s,background .14s;}
.tipo-card:hover{border-color:var(--gold);background:var(--gold-soft);}
.tipo-card.on{border-color:var(--gold-deep);background:var(--gold-soft);
box-shadow:inset 0 0 0 1px var(--gold-deep);}
.tipo-d{font-size:var(--t-xs);color:var(--text-3);line-height:1.5;margin-top:4px;}
@media (max-width:480px){ .tipos{grid-template-columns:1fr;} }
/* Botón secundario discreto: acciones que existen pero no son el camino
principal ("Ya terminé" junto a "Reportar"). */
.btn.ghost{background:transparent;color:var(--text-2);border-color:var(--line-2);}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold-ink);background:var(--gold-soft);}
@media (max-width:480px){ .tipo-grid{grid-template-columns:1fr;} }
.sel-vacio{background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r);
padding:52px 30px;text-align:center;}
.sel-vacio h3{margin:0 0 7px;font-size:16px;font-weight:650;}
.sel-vacio p{margin:0 auto 20px;font-size:var(--t-base);color:var(--text-2);max-width:460px;line-height:1.65;}
.drop{border:1px dashed var(--line-2);border-radius:var(--r);padding:24px;text-align:center;
background:var(--surface-2);cursor:pointer;transition:all .14s;}
.drop:hover,.drop.over{border-color:var(--gold);background:var(--gold-soft);}
.drop .dt{font-size:var(--t-base);font-weight:600;margin-bottom:3px;}
.drop .ds{font-size:var(--t-sm);color:var(--text-3);}
.drop.listo{border-color:var(--bueno);background:var(--bueno-bg);border-style:solid;}
.prev-tbl{max-height:230px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-sm);}
.tag.multi{background:var(--info-bg);color:var(--info);}
/* ---------- Cronograma ---------- */
.segmented{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;}
.seg{border:0;background:var(--surface);color:var(--text-2);font:inherit;font-size:var(--t-sm);
font-weight:600;padding:6px 13px;cursor:pointer;border-right:1px solid var(--line);}
.seg:last-child{border-right:0;}
.seg.on{background:var(--gold-soft);color:var(--gold-ink);}
.seg:hover:not(.on){background:var(--surface-2);}
/* El Gantt vive ahora en dos paneles (.g2): la tabla fija a la izquierda y
el calendario a la derecha. Lo que sigue son los estilos compartidos de
las barras, que usan los dos Gantt (el general y el del bloque). */
/* Nombre clicable de una etapa, bloque o partida en el panel fijo. */
.gt-name{border:0;background:0;font:inherit;font-size:var(--t-sm);color:var(--text);
cursor:pointer;padding:0;text-align:left;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;min-width:0;}
.gt-name:hover{color:var(--gold-ink);text-decoration:underline;}
.gt-bar{grid-row:1;height:15px;border-radius:3px;background:var(--gold);position:relative;
user-select:none;-webkit-user-select:none;
margin:0 2px;display:flex;align-items:center;justify-content:flex-end;padding-right:4px;
min-width:12px;overflow:visible;}
.gt-bar.movible{cursor:grab;}
.gt-bar.arrastrando{cursor:grabbing;opacity:.9;box-shadow:var(--elev-2);z-index:4;transition:none;}
.gt-bar.sum{height:8px;background:var(--charcoal);border-radius:2px;}
.gt-bar.sub{background:var(--info);}
.gt-bar.critico{background:var(--critico);}
.gt-bar.sum.critico{background:var(--critico);}
/* Partida que corre todos los días del bloque (limpieza, acarreo): se pinta
a rayas para que no se confunda con una tarea de arranque y fin propios. */
.gt-bar.diaria{background:repeating-linear-gradient(45deg,
var(--gold) 0 6px, var(--gold-light) 6px 12px);}
.gt-crit{display:inline-flex;align-items:center;gap:3px;font-size:var(--t-micro);font-weight:700;
color:var(--critico);margin-left:4px;flex:none;}
.gt-done{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.45);
border-radius:3px 0 0 3px;}
.gt-pct{font-size:8.5px;color:#fff;font-weight:700;position:relative;z-index:1;
text-shadow:0 1px 1px rgba(0,0,0,.25);}
.gt-nofecha{grid-column:1 / -1;font-size:var(--t-micro);color:var(--text-tertiary);
text-align:center;font-style:italic;}
.gt-money{border-left:1px solid var(--border-strong);height:100%;display:flex;flex-direction:column;
align-items:flex-end;justify-content:center;gap:1px;padding:0 9px;font-size:var(--t-xs);
font-variant-numeric:tabular-nums;color:var(--text-2);background:inherit;}
.gt-money span:last-child{font-size:var(--t-micro);color:var(--text-tertiary);}
.gt-head .gt-money{font-size:var(--t-micro);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.06em;}
.gt-head .gt-money span:last-child{font-size:var(--t-micro);color:var(--text-tertiary);}
/* Conexiones dibujadas encima del calendario. `pointer-events:none` en el
lienzo y `auto` en las líneas: así el SVG no bloquea los clics de las
barras, pero cada línea sí se puede tocar para quitarla. */
/* Monto y avance pegados al extremo de la barra, como en el cronograma de
Excel. `overflow:visible` en la barra permite que salga fuera de ella. */
.gt-val{position:absolute;left:100%;top:50%;transform:translateY(-50%);
margin-left:7px;font-style:normal;font-size:var(--t-micro);font-weight:600;
color:var(--text-2);white-space:nowrap;font-variant-numeric:tabular-nums;
pointer-events:none;}
.gt-etapa .gt-val,.gt-bloque .gt-val{color:var(--charcoal);font-weight:700;}
/* Los extras van en otro color: no son parte del contrato, y verlos sumados
al monto del bloque haría creer que la partida vale más de lo pactado. */
.gt-extra{color:var(--checar);font-weight:700;}
/* Sabados y domingos sombreados: el dia del mes solo no dice si se trabaja. */
.gt-head .gt-c.finde{background:var(--surface-3);}
.gt-head .gt-c.finde b{color:var(--text-tertiary);}
/* ---------- Gantt de dos paneles ----------
Izquierda: tabla de datos que NO se desplaza.
Derecha: calendario que corre solo.
Las alturas de fila son fijas e iguales en los dos paneles para que los
renglones queden alineados; por eso todo usa --g2-fila y --g2-h. */
.g2{--g2-fila:30px; --g2-h:24px;
display:flex;margin-top:14px;border:1px solid var(--border-strong);
border-radius:var(--r-sm);overflow:hidden;background:var(--surface);}
.g2-fija{flex:none;border-right:2px solid var(--border-strong);background:var(--surface);
z-index:2;box-shadow:2px 0 4px rgba(20,18,12,.05);}
.g2-cal{flex:1;overflow-x:auto;overflow-y:hidden;min-width:0;}
.g2-in{position:relative;min-width:100%;width:max-content;}
/* Inspector de la tarea seleccionada — el panel derecho del rediseño.
Es donde por fin se VEN los números que el motor CPM ya calculaba y nadie
mostraba: inicio/fin temprano y tardío, y las dos holguras. Entra como
tercer hermano del flex de .g2, así que no toca el lienzo ni las columnas
fijas: si no hay nada seleccionado, simplemente no se pinta. */
.g2-insp{flex:none;width:270px;border-left:2px solid var(--border-strong);
background:var(--surface-2);overflow-y:auto;font-size:var(--t-base);}
.insp-h{padding:9px 12px;border-bottom:1px solid var(--line);background:var(--surface);
position:sticky;top:0;z-index:1;}
.insp-h b{display:block;font-size:var(--t-base);line-height:1.25;}
.insp-h span{font-size:var(--t-xs);color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;}
.insp-x{position:absolute;top:7px;right:8px;border:none;background:transparent;
color:var(--text-3);cursor:pointer;padding:4px;border-radius:var(--r-xs);
display:flex;align-items:center;justify-content:center;}
.insp-x:hover{background:var(--surface-3);color:var(--text);}
.insp-sec{padding:9px 12px;border-bottom:1px solid var(--line);}
.insp-sec > h5{margin:0 0 7px;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.1em;
color:var(--text-3);font-weight:700;}
.insp-g{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;}
.insp-f{display:flex;flex-direction:column;gap:1px;min-width:0;}
.insp-f span{font-size:var(--t-xs);color:var(--text-3);}
.insp-f b{font-size:var(--t-sm);font-variant-numeric:tabular-nums;font-weight:600;}
.insp-crit{color:var(--critico);}
.insp-hol{display:flex;align-items:baseline;gap:5px;}
.insp-hol em{font-style:normal;font-size:var(--t-xs);color:var(--text-3);}
.insp-rel{display:flex;align-items:center;gap:6px;padding:4px 0;border-bottom:1px solid var(--line);}
.insp-rel:last-child{border-bottom:none;}
.insp-rel-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-sm);}
.insp-rel-t{font-size:var(--t-micro);font-weight:700;color:var(--gold-ink);background:var(--gold-soft);
padding:1px 4px;border-radius:var(--r-xs);flex:none;}
.insp-rel input{width:46px;padding:1px 3px;font-size:var(--t-xs);text-align:right;flex:none;
border:1px solid var(--line-2);border-radius:var(--r-xs);background:var(--surface);}
.insp-vacio{padding:22px 14px;color:var(--text-3);font-size:var(--t-sm);text-align:center;line-height:1.5;}
tr.g2-r.sel-insp, .g2-r.sel-insp{background:var(--gold-soft) !important;}
.g2-r{height:var(--g2-fila);border-bottom:1px solid var(--line);
align-items:center;box-sizing:border-box;}
.g2-r.g2-h1,.g2-r.g2-h2{height:var(--g2-h);}
.g2-fija .g2-r{display:grid;
grid-template-columns:196px 54px 54px 34px 48px 62px;}
.g2-cal .g2-r{display:grid;
grid-template-columns:repeat(var(--cols),minmax(30px,1fr));
position:relative;}
.g2-fija .g2-r > div{padding:0 7px;font-size:var(--t-sm);line-height:1.15;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
display:flex;align-items:center;gap:5px;min-width:0;}
.g2-fija .g2-r > div.num{justify-content:flex-end;font-variant-numeric:tabular-nums;}
.g2-c5,.g2-c6{font-size:var(--t-xs);color:var(--text-2);}
.g2-c3{font-size:var(--t-micro);color:var(--text-tertiary);}
/* Encabezados */
.g2-h1,.g2-h2{background:var(--surface-2);}
.g2-fija .g2-h1{display:block;}
.g2-tit{padding:0 7px;font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.07em;
color:var(--text-tertiary);font-weight:700;line-height:var(--g2-h);}
.g2-fija .g2-h2 > div{font-size:9px;text-transform:uppercase;letter-spacing:.05em;
color:var(--text-tertiary);font-weight:700;}
.g2-cal .g2-h1{grid-template-columns:repeat(var(--cols),minmax(30px,1fr));}
.g2-cal .g2-h2 .gt-c{display:flex;flex-direction:column;align-items:center;
justify-content:center;border-left:1px solid var(--line);height:100%;line-height:1.05;}
.g2-cal .g2-h2 .gt-c b{font-size:var(--t-micro);}
.g2-cal .g2-h2 .gt-c span{font-size:7.5px;color:var(--text-tertiary);}
.g2-cal .g2-h2 .gt-c.finde{background:var(--surface-3);}
.g2-cal .g2-h1 .gt-mes{border-left:1px solid var(--border-strong);height:100%;}
/* Jerarquia: etapa mas oscura, bloque medio, partida clara y sangrada */
.g2-etapa{background:#F1F1EE;font-weight:700;}
.g2-bloque{background:var(--surface-2);font-weight:600;}
.g2-partida{background:var(--surface);}
.g2-fija .g2-partida .g2-c1{padding-left:16px;font-weight:400;}
.g2-fija .g2-partida .g2-c2{padding-left:14px;}
.g2-r:last-child{border-bottom:0;}
/* Rejilla del calendario: sin esto los tramos vacios se ven como una
mancha blanca y se pierde la nocion de que ahi siguen habiendo dias. */
.g2-cal .g2-r:not(.g2-h1):not(.g2-h2){
background-image:linear-gradient(90deg, var(--line) 0 1px, transparent 1px 100%);
background-size:calc(100% / var(--cols)) 100%;}
.g2-cal .g2-etapa{background-color:#F1F1EE;}
.g2-cal .g2-bloque{background-color:var(--surface-2);}
.g2-cal .gt-bar{grid-row:1;align-self:center;}
.g2 .gt-links{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:visible;}
@media(max-width:760px){
.g2-fija .g2-r{grid-template-columns:60px 130px 0 0 0 0 0;}
.g2-c3,.g2-c4,.g2-c5,.g2-c6,.g2-c7{display:none !important;}
}
/* ---------- CINTA DE OPCIONES (ribbon) ----------
Los controles del cronograma eran una tira de 11 botones sin jerarquía:
para hallar uno había que leerlos todos. Aquí se agrupan por el MOMENTO en
que se usan (defino el marco → asigno trabajo → analizo → muestro) y solo
se despliega el grupo activo, que es como se organiza cualquier software
de ingeniería. La piel no cambia: mismos tokens, mismo dorado. */
.cr-ribbon{border:1px solid var(--border-strong);border-radius:var(--r-sm);
background:var(--surface);margin-top:14px;overflow:hidden;}
.cr-rb-top{display:flex;align-items:stretch;gap:0;background:var(--surface-2);
border-bottom:1px solid var(--border-strong);flex-wrap:wrap;}
.cr-rb-tabs{display:flex;align-items:stretch;flex:1;min-width:0;}
.cr-rb-tab{border:0;background:transparent;font:inherit;font-size:var(--t-sm);font-weight:600;
color:var(--text-2);padding:8px 16px;cursor:pointer;letter-spacing:.03em;
border-right:1px solid var(--line);border-bottom:2px solid transparent;
text-transform:uppercase;white-space:nowrap;}
.cr-rb-tab:hover{background:var(--surface-3);color:var(--text);}
/* La pestaña activa se marca con la ceja dorada, no con relleno: así la cinta
no compite con las barras del Gantt, que son lo que hay que mirar. */
.cr-rb-tab.on{background:var(--surface);color:var(--gold-ink);
border-bottom-color:var(--gold);}
.cr-rb-ws{display:flex;align-items:center;gap:7px;padding:5px 10px;flex:none;
border-left:1px solid var(--line);}
.cr-rb-ws > span{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.08em;
color:var(--text-tertiary);font-weight:700;}
.cr-rb-body{display:flex;align-items:flex-start;gap:0;padding:0;flex-wrap:wrap;}
.cr-rb-grupo{display:flex;flex-direction:column;gap:6px;padding:9px 14px;
border-right:1px solid var(--line);min-height:52px;}
.cr-rb-grupo:last-child{border-right:0;}
.cr-rb-acts{display:flex;gap:7px;flex-wrap:wrap;align-items:center;}
.cr-rb-gl{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.1em;
color:var(--text-tertiary);font-weight:700;}
.cr-rb-vacio{padding:12px 14px;font-size:var(--t-sm);color:var(--text-3);}
/* ---------- ÁRBOL WBS (panel izquierdo) ----------
Cuarto hermano del flex de .g2, ANTES de las columnas fijas. No toca el
lienzo: el SVG de dependencias sigue viviendo dentro de .g2-in y midiendo
contra su propia caja. */
.g2-wbs{flex:none;width:206px;border-right:1px solid var(--border-strong);
background:var(--surface-2);display:flex;flex-direction:column;min-width:0;}
.wbs-h{padding:6px 9px;border-bottom:1px solid var(--line);background:var(--surface);
display:flex;align-items:center;justify-content:space-between;gap:6px;}
.wbs-h b{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.09em;
color:var(--text-tertiary);font-weight:700;}
.wbs-h .xbtn{padding:1px 4px;}
.wbs-filtros{padding:6px 9px;border-bottom:1px solid var(--line);
display:flex;flex-direction:column;gap:4px;background:var(--surface);}
.wbs-chk{display:flex;align-items:center;gap:6px;font-size:var(--t-xs);color:var(--text-2);
cursor:pointer;line-height:1.2;}
.wbs-chk input{margin:0;flex:none;accent-color:var(--gold-deep);}
.wbs-tree{flex:1;overflow-y:auto;overflow-x:hidden;padding:3px 0 8px;max-height:520px;}
.wbs-n{display:flex;align-items:center;gap:4px;width:100%;border:0;background:transparent;
font:inherit;font-size:var(--t-xs);color:var(--text-2);text-align:left;cursor:pointer;
padding:2px 8px 2px 4px;line-height:1.3;min-height:20px;}
.wbs-n:hover{background:var(--surface-3);color:var(--text);}
.wbs-n.sel{background:var(--gold-soft);color:var(--gold-ink);font-weight:700;}
.wbs-n.nivel-e{font-weight:700;color:var(--text);font-size:var(--t-sm);}
.wbs-n.nivel-b{padding-left:16px;}
/* La partida no se puede seleccionar por sí sola (el inspector solo entiende
bloques), pero al hacerle clic selecciona el bloque del que cuelga: es lo
que uno espera al ir buscando "dónde está esta clave". */
.wbs-n.nivel-p{padding-left:30px;color:var(--text-3);font-size:var(--t-xs);}
.wbs-lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wbs-tw{flex:none;width:13px;height:13px;display:inline-flex;align-items:center;
justify-content:center;color:var(--text-tertiary);font-size:8px;line-height:1;}
.wbs-tw.hoja{visibility:hidden;}
.wbs-pt{flex:none;font-size:8.6px;color:var(--text-tertiary);
font-variant-numeric:tabular-nums;}
.wbs-crit{flex:none;width:5px;height:5px;border-radius:50%;background:var(--critico);}
.wbs-sf{flex:none;width:5px;height:5px;border-radius:50%;background:var(--checar);}
.wbs-vacio{padding:16px 10px;font-size:var(--t-xs);color:var(--text-3);text-align:center;line-height:1.5;}
/* Con el árbol abierto las columnas fijas se aprietan un poco para no dejar
al calendario sin ancho. No se esconde ninguna: solo se estrechan.
Va dentro de la consulta de ancho porque abajo de 1100 px el árbol no se
dibuja: si la regla viviera suelta le ganaría por especificidad al layout
móvil y dejaría las columnas apretadas sin motivo. */
@media(min-width:1101px){
.g2.con-wbs .g2-fija .g2-r{grid-template-columns:62px 158px 40px 58px 68px 68px 32px;}
}
/* ---------- CONSOLA DE ADVERTENCIAS (panel inferior) ---------- */
.cr-cons{margin-top:12px;border:1px solid var(--border-strong);border-radius:var(--r-sm);
background:var(--surface);overflow:hidden;}
.cr-cons-h{display:flex;align-items:center;gap:8px;padding:6px 11px;
background:var(--surface-2);border-bottom:1px solid var(--line);cursor:pointer;}
.cr-cons-h b{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.09em;
color:var(--text-tertiary);font-weight:700;}
.cr-cons-n{font-size:var(--t-micro);font-weight:700;padding:1px 6px;border-radius:9px;
background:var(--surface-3);color:var(--text-2);font-variant-numeric:tabular-nums;}
.cr-cons-n.hay{background:var(--checar-bg);color:var(--checar);}
.cr-cons-n.mal{background:var(--critico-bg);color:var(--critico);}
.cr-cons-h .cr-cons-tw{margin-left:auto;color:var(--text-tertiary);font-size:9px;}
.cr-cons-body{max-height:186px;overflow-y:auto;}
.cr-cons-body.cerrada{display:none;}
/* ===================== CRONOGRAMA v3 (Fase 3 del rediseño · §10) =====================
Fiel a diseno/mejora-uxui/pantallas/Cronograma v3.dc.html. Prefijo cr3- para no
chocar con el cronograma anterior (cr-, crw-, wbs-), que se queda en el código
sin usarse hasta que alguien lo retire a fondo. */
.cr3{position:relative;display:flex;flex-direction:column;height:calc(100vh - 56px*var(--esc) - var(--franja-red,0px));min-height:calc(480px*var(--esc));background:var(--bg);}
body.enfoque .cr3{height:calc(100vh - var(--franja-red,0px));}
@media(max-width:900px){ .cr3{height:calc(100vh - 150px);} }
.cr3-cab{flex:none;height:calc(56px*var(--esc));display:flex;align-items:center;gap:calc(16px*var(--esc));padding:0 calc(18px*var(--esc)) 0 calc(20px*var(--esc));}
.cr3-cab-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
.cr3-ceja{font-size:calc(10.5px*var(--esc));font-weight:600;letter-spacing:.14em;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cr3-tit{display:flex;align-items:baseline;gap:calc(14px*var(--esc));min-width:0;}
.cr3-tit-n{font-family:var(--font-display);font-weight:600;font-size:calc(21px*var(--esc));letter-spacing:-.015em;}
.cr3-tit-r{min-width:0;font-size:calc(13px*var(--esc));color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;}
.cr3-seg{flex:none;position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:2px;background:var(--surface-3);border-radius:3px;}
.cr3-seg-i{position:absolute;top:2px;bottom:2px;border-radius:2px;background:var(--surface);box-shadow:0 0 0 1px var(--line-2);transition:left .2s,width .2s;}
.cr3-seg button{position:relative;min-width:calc(66px*var(--esc));height:28px;padding:0 10px;border:0;background:none;color:var(--text-2);font-family:var(--font-body);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;}
.cr3-seg button.on{color:var(--text);font-weight:600;}
.cr3-sync{flex:none;display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-3);white-space:nowrap;}
.cr3-sync i{width:7px;height:7px;border-radius:50%;background:var(--bueno);display:inline-block;}
.cr3-sync.va i{background:var(--gold);animation:c13Respira 1s ease-in-out infinite;}
.cr3-lb-w{position:relative;flex:none;}
.cr3-lb-b{height:30px;display:flex;align-items:center;gap:6px;padding:0 10px;border:1px solid var(--line-2);border-radius:3px;background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;}
.cr3-lb-b:hover{border-color:var(--text-3);}
.cr3-lb-pop{position:absolute;right:0;top:36px;z-index:30;width:min(310px,88vw);background:var(--surface);border:1px solid var(--line-2);border-radius:4px;box-shadow:0 12px 32px rgba(20,19,16,.18);padding:14px;display:flex;flex-direction:column;gap:10px;animation:c13Pop .16s both;}
.cr3-ibs{flex:none;display:flex;gap:2px;}
.cr3-ib{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:1px solid transparent;border-radius:3px;background:none;color:var(--text-2);cursor:pointer;}
.cr3-ib:hover{border-color:var(--line-2);background:var(--surface-2);color:var(--text);}
.cr3-ib.on{background:var(--gold-soft);color:var(--gold-ink);}
/* La cinta con pestañas Definir/Asignar/Analizar/Mostrar (y Financiero en ese
modo), cuadrícula de íconos y grupos con su leyenda abajo, al píxel del
paquete (10.1 y 10.5). */
.cr3-rb{position:relative;flex:none;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line-2);}
.cr3-rb-tabs{height:30px;display:flex;align-items:flex-end;gap:2px;padding:0 10px 0 12px;background:var(--surface-2);border-bottom:1px solid var(--line);}
.cr3-rb-tab{flex:none;height:29px;padding:0 14px;border:1px solid transparent;border-bottom:0;border-radius:3px 3px 0 0;margin-bottom:-1px;background:transparent;color:var(--text-2);font-family:var(--font-body);font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap;box-shadow:inset 0 2px 0 transparent;}
.cr3-rb-tab:hover{color:var(--text);}
.cr3-rb-tab.on{border-color:var(--line);background:var(--surface);color:var(--text);font-weight:600;box-shadow:inset 0 2px 0 var(--gold);}
.cr3-rb-tab.fin{color:var(--gold-ink);font-weight:600;}
.cr3-rb-fold{flex:none;align-self:center;width:24px;height:22px;margin-left:4px;border:0;background:none;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .18s;}
.cr3-rb-fold.cerrada{transform:rotate(180deg);}
.cr3-rb-body{height:86px;display:flex;align-items:stretch;padding:0 4px;overflow-x:auto;overflow-y:hidden;}
.cr3-rb-grp{flex:none;display:flex;flex-direction:column;padding:5px 8px 3px;border-right:1px solid var(--line);}
.cr3-rb-grp:last-child{border-right:0;}
.cr3-rb-row{flex:1;display:flex;align-items:flex-start;gap:4px;}
.cr3-rb-col{display:flex;flex-direction:column;gap:1px;}
.cr3-rb-cap{text-align:center;font-size:9.5px;font-weight:600;letter-spacing:.14em;color:var(--text-3);padding-top:2px;white-space:nowrap;}
.cr3-rb-big{position:relative;flex:none;min-width:56px;max-width:84px;height:62px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;padding:7px 6px 0;border:1px solid transparent;border-radius:2px;background:transparent;color:var(--text);font-family:var(--font-body);font-size:11.5px;line-height:1.2;text-align:center;cursor:pointer;}
.cr3-rb-big:hover{background:var(--surface-2);border-color:var(--line-2);}
.cr3-rb-big:active{transform:scale(.965);}
.cr3-rb-big.on,.cr3-rb-big.pri{background:var(--gold-soft);border-color:var(--gold);color:var(--gold-ink);}
.cr3-rb-big .ico{display:flex;color:var(--text-2);}
.cr3-rb-big.on .ico,.cr3-rb-big.pri .ico{color:var(--gold-ink);}
.cr3-rb-big .i{width:22px;height:22px;}
.cr3-rb-badge{position:absolute;top:3px;right:4px;font-size:9.5px;font-weight:650;color:var(--checar);}
.cr3-rb-sm{flex:none;height:21px;display:flex;align-items:center;gap:6px;padding:0 7px 0 5px;border:1px solid transparent;border-radius:2px;background:transparent;color:var(--text);font-family:var(--font-body);font-size:12px;cursor:pointer;white-space:nowrap;}
.cr3-rb-sm:hover{background:var(--surface-2);border-color:var(--line-2);}
.cr3-rb-sm:active{transform:scale(.97);}
.cr3-rb-sm.on{background:var(--gold-soft);border-color:var(--gold);color:var(--gold-ink);}
.cr3-rb-sm .ico{display:flex;color:var(--text-2);}
.cr3-rb-sm.on .ico{color:var(--gold-ink);}
.cr3-rb-sm .i{width:14px;height:14px;}
.cr3-rb-sm .k{font-size:10px;color:var(--text-3);margin-left:2px;}
.cr3-rb-big[aria-disabled="true"],.cr3-rb-sm[aria-disabled="true"]{opacity:.45;cursor:default;}
.cr3-rb-big[aria-disabled="true"]:hover,.cr3-rb-sm[aria-disabled="true"]:hover{background:transparent;border-color:transparent;}
.cr3-rb-vacio{padding:0 14px;display:flex;align-items:center;font-size:12.5px;color:var(--text-3);}
.cr3-strip{flex:none;display:flex;align-items:center;gap:12px;height:30px;padding:0 18px 0 17px;background:var(--info-bg);border-bottom:1px solid var(--line);box-shadow:inset 3px 0 0 var(--info);}
.cr3-strip b{flex:none;font-size:10px;font-weight:650;letter-spacing:.12em;color:var(--info);}
.cr3-strip span{flex:1;min-width:0;font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cr3-strip button{flex:none;height:22px;padding:0 10px;border:1px solid var(--info);border-radius:2px;background:var(--surface);color:var(--info);font-family:var(--font-body);font-size:12px;font-weight:600;cursor:pointer;}
.cr3-link{flex:none;display:flex;align-items:center;gap:12px;height:30px;padding:0 18px 0 20px;background:var(--ink);color:#F0EEE7;font-size:13px;}
.cr3-link button{height:22px;padding:0 10px;border:1px solid #5C5A54;border-radius:2px;background:none;color:#F0EEE7;font-family:var(--font-body);font-size:12px;cursor:pointer;}
.cr3-filtros{flex:none;display:flex;align-items:center;gap:4px;height:34px;box-sizing:border-box;padding:0 18px 0 20px;background:var(--surface);border-bottom:1px solid var(--line);overflow-x:auto;}
.cr3-flabel{font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--text-3);margin-right:6px;white-space:nowrap;flex:none;}
.cr3-chip{flex:none;height:22px;display:flex;align-items:center;gap:6px;padding:0 8px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);color:var(--text-2);font-family:var(--font-body);font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;}
.cr3-chip.on{background:var(--gold-soft);border-color:var(--gold-deep);color:var(--gold-ink);font-weight:600;}
.cr3-chip span{color:var(--text-3);font-variant-numeric:tabular-nums;}
.cr3-chip.on span{color:var(--gold-deep);}
.cr3-chip i{width:7px;height:7px;display:inline-block;flex:none;}
.cr3-agr{flex:none;display:flex;border:1px solid var(--line-2);border-radius:2px;overflow:hidden;}
.cr3-agr button{height:20px;padding:0 9px;border:0;border-right:1px solid var(--line);background:var(--surface);color:var(--text-2);font-family:var(--font-body);font-size:12px;cursor:pointer;}
.cr3-agr button:last-child{border-right:0;}
.cr3-agr button.on{background:var(--gold-soft);color:var(--gold-ink);font-weight:600;}
.cr3-leyenda{flex:0 1 auto;min-width:0;overflow:hidden;display:flex;align-items:center;gap:12px;font-size:11.5px;color:var(--text-3);white-space:nowrap;margin-left:auto;}
.cr3-leyenda span{display:flex;align-items:center;gap:6px;}
.cr3-leyenda i{display:inline-block;}
.cr3-body{flex:1;min-height:0;display:flex;}
.cr3-sc{flex:1;min-width:0;overflow:auto;outline:none;background:var(--surface);position:relative;scrollbar-width:thin;}
.cr3-ghead{position:sticky;top:0;z-index:6;display:flex;flex-direction:column;background:var(--surface);}
.cr3-gh1{display:flex;height:22px;background:var(--surface);border-bottom:1px solid var(--line);}
.cr3-gh2{display:flex;height:34px;background:var(--surface-2);border-bottom:1px solid var(--text-3);}
.cr3-lcol{position:sticky;left:0;z-index:4;box-sizing:border-box;background:var(--surface);border-right:1px solid var(--line-2);flex:none;}
.cr3-gh1 .cr3-lcol{display:flex;align-items:center;gap:8px;padding:0 12px;font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--text-3);white-space:nowrap;}
.cr3-gh1 .cr3-lcol i{width:8px;height:2px;background:var(--gold);display:inline-block;}
.cr3-gh2 .cr3-lcol{display:flex;background:var(--surface-2);}
.cr3-gh2 .cr3-lcol>div{display:flex;flex-direction:column;justify-content:center;padding:0 8px 0 12px;border-right:1px solid var(--line);line-height:1.15;}
.cr3-gh2 .cr3-lcol b{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--text-2);}
.cr3-gh2 .cr3-lcol span{font-size:9.5px;color:var(--text-3);}
.cr3-mo.oculto{color:transparent;}
.cr3-mo{position:absolute;top:0;bottom:0;box-sizing:border-box;display:flex;align-items:center;padding:0 8px;border-right:1px solid var(--line-2);font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--text-2);white-space:nowrap;overflow:hidden;}
.cr3-hoy-chip{position:absolute;top:4px;height:14px;padding:0 5px;background:var(--gold-deep);color:#fff;font-size:9px;font-weight:700;letter-spacing:.1em;line-height:14px;white-space:nowrap;z-index:2;}
.cr3-dia{position:absolute;top:0;bottom:0;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid var(--line);line-height:1.15;overflow:hidden;}
.cr3-dia b{font-size:11px;font-variant-numeric:tabular-nums;font-weight:600;}
.cr3-dia span{font-size:9.5px;color:var(--text-3);}
.cr3-fin-linea{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--gold-deep);z-index:2;pointer-events:none;}
.cr3-finde{position:absolute;top:0;bottom:0;background:color-mix(in oklab,var(--text-3) 7%,transparent);z-index:1;pointer-events:none;}
.cr3-grow{display:flex;box-sizing:border-box;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line);}
.cr3-grow .cr3-lcol{display:flex;align-items:center;gap:8px;padding:0 12px;overflow:hidden;}
.cr3-grow-nombre{font-family:var(--font-display);font-size:13px;font-weight:600;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.cr3-grow.top .cr3-grow-nombre{font-family:var(--font-body);font-size:11px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;}
.cr3-gtoggle{width:20px;height:20px;border:0;background:none;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s;flex:none;}
.cr3-gtoggle.cerrado{transform:rotate(-90deg);}
.cr3-grow-cnt{flex:none;font-size:11.5px;color:var(--text-3);white-space:nowrap;}
.cr3-grow-rango{flex:none;font-size:12px;color:var(--text-2);white-space:nowrap;font-variant-numeric:tabular-nums;margin-left:auto;}
.cr3-grow-pct{flex:none;min-width:40px;text-align:right;font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;}
.cr3-row{display:flex;height:30px;box-sizing:border-box;border-bottom:1px solid var(--line);cursor:pointer;}
.cr3-row:hover{background:var(--hover-row);}
.cr3-row.sel .cr3-lcol{box-shadow:inset 2px 0 0 var(--gold-deep);}
.cr3-row .cr3-lcol{display:flex;}
.cr3-cclave{width:108px;flex:none;display:flex;align-items:center;padding:0 8px 0 12px;border-right:1px solid var(--line);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;}
.cr3-cdesc{flex:1;min-width:0;display:flex;align-items:center;padding:0 10px;border-right:1px solid var(--line);font-size:12px;}
.cr3-cdesc span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cr3-cx{width:60px;flex:none;display:flex;align-items:center;justify-content:flex-end;padding:0 8px;border-right:1px solid var(--line);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;}
.cr3-lane{position:relative;flex:none;}
.cr3-barra{position:absolute;top:8px;height:14px;box-sizing:border-box;padding:0;border:1px solid var(--line-2);border-radius:0;overflow:visible;z-index:3;}
.cr3-barra.crit{border-color:var(--critico);}
.cr3-barra .fill{position:absolute;left:0;top:0;bottom:0;}
.cr3-barra .esp{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--text);}
.cr3-barra .resize{position:absolute;right:-4px;top:-2px;bottom:-2px;width:8px;cursor:ew-resize;}
.cr3-barra.sel{outline:2px solid var(--gold-deep);outline-offset:2px;}
.cr3-hito{position:absolute;top:10px;width:10px;height:10px;transform:rotate(45deg);z-index:3;}
.cr3-hito.sel{outline:2px solid var(--gold-deep);}
.cr3-base{position:absolute;top:25px;height:2px;background:var(--text-3);opacity:.6;z-index:2;}
.cr3-ghost{position:absolute;top:6px;height:18px;border:1.5px dashed var(--gold-deep);border-radius:2px;z-index:2;opacity:.85;pointer-events:auto;}
.cr3-gl{position:absolute;top:15px;height:0;border-top:1.5px dashed var(--gold-deep);opacity:.55;z-index:1;pointer-events:none;}
.cr3-ghost-t{position:absolute;top:0;height:29px;display:flex;align-items:center;font-size:11px;font-weight:600;white-space:nowrap;color:var(--gold-ink);z-index:3;}
.cr3-hol{position:absolute;top:15px;height:0;border-top:1px dashed var(--text-3);z-index:2;}
.cr3-lbl{position:absolute;top:0;height:29px;display:flex;align-items:center;font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none;color:var(--text-2);z-index:3;}
.cr3-vacio{position:sticky;left:0;padding:40px 24px;display:flex;flex-direction:column;gap:6px;}
.cr3-vacio button{align-self:flex-start;border:0;background:none;padding:0;color:var(--gold-ink);font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;}
.cr3-sin{position:absolute;left:8px;top:100%;margin-top:4px;z-index:40;width:min(580px,92vw);max-height:max(280px,min(62vh,560px,calc(100vh - 420px)));display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-2);border-radius:4px;box-shadow:0 12px 32px rgba(20,19,16,.18);overflow:hidden;}
.cr3-sin-lista{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;}
.cr3-sin-h{flex:none;display:flex;align-items:center;gap:10px;padding:12px 14px 10px;border-bottom:1px solid var(--line);}
.cr3-sin-h b{font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--text-3);display:block;}
.cr3-sin-h p{font-size:12.5px;color:var(--text-3);margin:2px 0 0;}
.cr3-sin-cerrar{width:26px;height:26px;border:0;background:none;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;}
.cr3-sin-f{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--line);}
.cr3-sin-f b{width:108px;flex:none;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cr3-sin-f .d{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.cr3-sin-f .d span{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.cr3-sin-f .d em{font-style:normal;font-size:11.5px;color:var(--text-3);}
.cr3-sin-f button{flex:none;height:26px;padding:0 10px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:12.5px;font-weight:500;cursor:pointer;}
.cr3-sin-f button:disabled{opacity:.4;cursor:default;}
.fld .cr3-op,.frm>.cr3-op{display:flex;align-items:center;gap:8px;width:auto;margin:0;padding:6px 0;font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--text);cursor:pointer;}
.cr3-op input[type=radio]{flex:none;width:16px;height:16px;min-height:0;margin:0;padding:0;border:0;box-shadow:none;accent-color:var(--gold-deep);}
.fld input:disabled{opacity:.55;cursor:not-allowed;}
.cr3-fechas{display:grid;grid-template-columns:1fr 1fr 110px;gap:12px;}
.cr3-fechas .fld{min-width:0;}
.cr3-op input[type=checkbox]{flex:none;width:16px;height:16px;min-height:0;margin:0;padding:0;border:0;box-shadow:none;accent-color:var(--gold-deep);}
.cr3-op-nota{font-size:12px;color:var(--text-3);padding:4px 0;}
.cr3-sin-pie{flex:none;display:flex;justify-content:flex-end;padding:10px 14px;border-top:1px solid var(--line);background:var(--surface);}
.cr3-props{width:284px;flex:none;overflow:auto;background:var(--surface);border-left:1px solid var(--line-2);scrollbar-width:thin;}
.cr3-pr-eyebrow{padding:14px 16px 12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px;}
.cr3-pr-eyebrow>b{font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--text-3);}
.cr3-pr-id{display:flex;align-items:baseline;gap:8px;}
.cr3-pr-id span:first-child{font-family:var(--font-display);font-weight:600;font-size:17px;font-variant-numeric:tabular-nums;}
.cr3-pr-tag{font-size:10px;font-weight:650;letter-spacing:.1em;padding:2px 6px;border-radius:2px;}
.cr3-pr-desc{font-size:13px;line-height:1.4;color:var(--text-2);}
.cr3-pr-sec{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:7px;}
.cr3-pr-sec>b, .cr3-pr-lbl{font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--text-3);}
.cr3-pr-fecha{display:flex;align-items:center;gap:8px;}
.cr3-pr-fecha>span{width:70px;font-size:12.5px;color:var(--text-3);flex:none;}
.cr3-pr-stepper{flex:1;display:flex;align-items:center;height:26px;border:1px solid var(--line-2);border-radius:2px;overflow:hidden;}
.cr3-pr-stepper button{width:26px;height:100%;border:0;background:var(--surface-2);color:var(--text-2);cursor:pointer;font-size:14px;flex:none;}
.cr3-pr-stepper button:first-child{border-right:1px solid var(--line);}
.cr3-pr-stepper button:last-child{border-left:1px solid var(--line);}
.cr3-pr-stepper span{flex:1;text-align:center;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;}
.cr3-pr-grid{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:12.5px;font-variant-numeric:tabular-nums;}
.cr3-pr-grid span:nth-child(odd){color:var(--text-3);}
.cr3-pr-grid span:nth-child(even){text-align:right;}
.cr3-pr-nota{font-size:11.5px;line-height:1.45;color:var(--text-3);}
.cr3-pr-dep{display:flex;align-items:center;gap:8px;min-height:24px;}
.cr3-pr-dep i{width:6px;height:6px;flex:none;display:inline-block;}
.cr3-pr-dep b{flex:none;white-space:nowrap;border:0;background:none;padding:0;font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--text);cursor:pointer;font-variant-numeric:tabular-nums;}
.cr3-pr-dep span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:var(--text-3);white-space:nowrap;}
.cr3-pr-dep button{flex:none;width:22px;height:22px;border:0;background:none;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.cr3-pr-dep button:hover{color:var(--critico);}
.cr3-pr-link{border:0;background:none;padding:0;color:var(--gold-ink);font-family:var(--font-body);font-size:12px;font-weight:600;cursor:pointer;align-self:flex-start;}
.cr3-pr-av{display:flex;align-items:center;gap:10px;}
.cr3-pr-av .bar{position:relative;flex:1;height:6px;background:var(--line);}
.cr3-pr-av .bar i{display:block;height:100%;background:var(--gold);}
.cr3-pr-av .esp{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--text);}
.cr3-pr-av b{width:40px;text-align:right;font-size:13px;font-weight:650;font-variant-numeric:tabular-nums;}
.cr3-pr-vacio{padding:24px 16px;font-size:13px;color:var(--text-3);line-height:1.5;}
.cr3-pr-catrow{display:flex;font-size:12.5px;font-variant-numeric:tabular-nums;}
.cr3-pr-catrow span{flex:1;color:var(--text-3);}
.cr3-pr-catrow b{font-weight:600;}
.cr3-pr-per{display:grid;grid-template-columns:1fr 64px 64px;font-size:12px;font-variant-numeric:tabular-nums;}
.cr3-pr-per>span{padding:4px 0;border-bottom:1px solid var(--line);}
.cr3-pr-per>span.h{border-bottom:1px solid var(--line-2);font-size:10px;font-weight:600;letter-spacing:.08em;color:var(--text-3);}
.cr3-pr-per>span.num{text-align:right;}
.cr3-cons{flex:none;background:var(--surface);border-top:1px solid var(--line-2);}
.cr3-cons-h{width:100%;height:26px;display:flex;align-items:center;gap:8px;padding:0 18px 0 20px;border:0;background:none;color:var(--text);font-family:var(--font-body);cursor:pointer;text-align:left;}
.cr3-cons-h b{font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--text-2);}
.cr3-cons-n{min-width:16px;height:15px;padding:0 5px;box-sizing:border-box;border-radius:2px;background:var(--checar-bg);color:var(--checar);font-size:10px;font-weight:700;line-height:15px;text-align:center;}
.cr3-cons-r{flex:1;min-width:0;font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cr3-cons-chev{color:var(--text-3);transition:transform .15s;}
.cr3-cons-chev.abierto{transform:rotate(180deg);}
.cr3-cons-body{max-height:124px;overflow:auto;border-top:1px solid var(--line);}
.cr3-cons-row{display:flex;align-items:center;gap:12px;padding:5px 18px 5px 20px;border-bottom:1px solid var(--line);}
.cr3-cons-tag{width:62px;flex:none;text-align:center;font-size:10px;font-weight:650;letter-spacing:.1em;padding:2px 0;border-radius:2px;}
.cr3-cons-row>span{flex:1;min-width:0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cr3-cons-row button{flex:none;border:0;background:none;color:var(--gold-ink);font-family:var(--font-body);font-size:12px;font-weight:600;cursor:pointer;}
.cr3-status{flex:none;height:24px;display:flex;align-items:center;gap:18px;padding:0 12px 0 20px;background:var(--chrome);border-top:1px solid var(--line);font-size:11.5px;color:var(--text-2);white-space:nowrap;font-variant-numeric:tabular-nums;overflow:hidden;}
.cr3-status>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.cr3-esc{display:flex;border:1px solid var(--line-2);border-radius:2px;overflow:hidden;flex:none;}
.cr3-esc button{height:18px;padding:0 8px;border:0;background:none;color:var(--text-2);font-family:var(--font-body);font-size:11px;cursor:pointer;}
.cr3-esc button.on{background:var(--gold-soft);color:var(--gold-ink);font-weight:600;}
.cr3-fin-cell{position:absolute;top:0;bottom:0;box-sizing:border-box;border-right:1px solid var(--line-2);padding:0 6px;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;}
.cr3-fin-cell .p{font-size:10px;color:var(--text-3);}
.cr3-fin-cell .r{font-size:11.5px;font-weight:650;}
.cr3-fin-cell.atrasado .r{color:var(--critico);}
.cr3-fin-cell.abajo .r{color:var(--checar);}
.cr3-fin-foot{position:sticky;bottom:0;z-index:5;display:flex;flex-direction:column;background:var(--surface-2);border-top:1px solid var(--text-3);}
.cr3-fin-foot-row{display:flex;height:32px;border-bottom:1px solid var(--line);}
.cr3-cobrar-foot{position:sticky;bottom:0;z-index:5;display:flex;height:80px;background:var(--surface);border-top:1px solid var(--text-3);}
.cr3-cobrar-foot .cr3-lcol{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 14px;}
.cr3-cobrar-foot .cr3-lcol>b{font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--text-3);}
.cr3-cobrar-foot .cr3-lcol>div{display:flex;gap:22px;font-size:12.5px;font-variant-numeric:tabular-nums;}
.cr3-cobrar-foot .cr3-lcol>div span{color:var(--text-3);}
.cr3-week{position:absolute;bottom:8px;background:var(--gold-soft);}
.cr3-week-lbl{position:absolute;bottom:2px;text-align:center;font-size:10px;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap;}
@media(max-width:900px){
.cr3-cab{flex-wrap:wrap;height:auto;padding:8px 12px;gap:8px;}
.cr3-tools{flex-wrap:wrap;}
.cr3-props{display:none;}
}
/* Histograma de recursos: una barra por día, alta en proporción al pico.
Los días con la misma cuadrilla en dos frentes salen en rojo — es lo
único que de verdad hay que ver de un vistazo. */
.hg-wrap{padding:10px 12px 8px;}
.hg{display:flex;align-items:flex-end;gap:1px;height:84px;
border-bottom:1px solid var(--line-2);}
.hg-b{flex:1 1 0;min-width:2px;background:var(--gold);border-radius:1px 1px 0 0;
transition:background .12s;}
.hg-b:hover{background:var(--gold-deep);}
.hg-b.mal{background:var(--critico);}
.hg-pie{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
margin-top:5px;font-size:var(--t-xs);color:var(--text-3);
font-variant-numeric:tabular-nums;}
.hg-conf{border-top:1px solid var(--line);padding:8px 12px;font-size:var(--t-sm);
color:var(--text-2);display:flex;flex-direction:column;gap:4px;}
.hg-conf b{font-variant-numeric:tabular-nums;color:var(--critico);}
.cons-it{display:flex;align-items:flex-start;gap:8px;width:100%;border:0;background:transparent;
font:inherit;text-align:left;padding:6px 11px;border-bottom:1px solid var(--line);
cursor:pointer;color:var(--text-2);font-size:var(--t-sm);line-height:1.35;}
.cons-it:last-child{border-bottom:0;}
.cons-it:hover{background:var(--surface-2);}
.cons-it.inerte{cursor:default;}
.cons-it.inerte:hover{background:transparent;}
.cons-sev{flex:none;font-size:8.8px;font-weight:700;text-transform:uppercase;
letter-spacing:.06em;padding:1px 5px;border-radius:var(--r-xs);margin-top:1px;
min-width:52px;text-align:center;}
.cons-sev.err{background:var(--critico-bg);color:var(--critico);}
.cons-sev.adv{background:var(--checar-bg);color:var(--checar);}
.cons-sev.inf{background:var(--info-bg);color:var(--info);}
.cons-tx{flex:1;min-width:0;}
.cons-tx em{font-style:normal;color:var(--text-3);font-size:var(--t-xs);display:block;margin-top:1px;}
.cons-ok{padding:14px 11px;font-size:var(--t-sm);color:var(--text-3);text-align:center;}
/* Parpadeo al llegar desde la consola: sin esto el renglón culpable queda
seleccionado en algún punto del scroll y nadie lo encuentra. */
@keyframes crFlash{0%,100%{background-color:transparent}35%{background-color:var(--gold-soft)}}
.g2-r.flash{animation:crFlash 1.1s var(--ease) 2;}
/* ---------- Banda de dinero por periodo (workspace Financiero) ---------- */
.g2-r.g2-dinero{background:var(--surface-2);border-top:1px solid var(--border-strong);
font-weight:600;}
.g2-cal .g2-dinero .gt-dn{display:flex;align-items:center;justify-content:center;
border-left:1px solid var(--line);height:100%;font-size:8.6px;
color:var(--gold-ink);font-variant-numeric:tabular-nums;overflow:hidden;}
.g2-fija .g2-dinero > div{font-size:var(--t-micro);color:var(--text-tertiary);
text-transform:uppercase;letter-spacing:.05em;font-weight:700;}
@media(max-width:1100px){ .g2-wbs{display:none;} }
/* ---------- Calendario de rango (un mes, dos clics) ---------- */
.rg-wrap{display:flex;flex-direction:column;gap:4px;align-items:center;}
/* El calendario va centrado en su contenedor: pegado a la izquierda de un
modal ancho se ve perdido. */
.rg{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;
width:330px;max-width:100%;margin:0 auto;user-select:none;
background:var(--surface);box-shadow:0 1px 3px rgba(20,18,12,.05);}
.rg-wrap .fld{width:100%;max-width:520px;}
/* Campo que abre el calendario: sustituye a los dos sin ancho fijo se dibuja tan ancho como su
opción más larga (un nombre de regla o de proyecto puede ser una frase
completa) — en un celular angosto eso empujaba TODA la pantalla a un
lado (Automatización y Bitácora del sistema). El texto se trunca dentro
del control; la lista desplegada sigue mostrando la opción completa. */
.aud-filtros .in{width:auto;max-width:100%;text-align:left;}
.aud-det summary{cursor:pointer;}
.ev-crit{border-top:1px solid var(--line);padding:10px 0;}
.ev-fotos{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.ev-fotos figure{margin:0;width:96px;}
.ev-fotos img{width:96px;height:96px;object-fit:cover;display:block;border:1px solid var(--line);border-radius:var(--r-sm);}
.ev-fotos figcaption{font-size:10.5px;line-height:1.3;margin-top:3px;font-variant-numeric:tabular-nums;}
.aud-det pre{white-space:pre-wrap;word-break:break-word;font-size:11.5px;max-height:280px;overflow:auto;
margin:6px 0 0;padding:8px 10px;background:var(--surface-2);border-radius:var(--r-sm);}
.sp-sol a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}
/* En el teléfono ocupa toda la pantalla: 430px de panel sobre 375 de ancho
dejaría el contenido asomándose por debajo, que es peor que taparlo. */
@media (max-width:640px){ .bandeja{width:100%;max-width:100%;} }
.cp-item{border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;margin-bottom:9px;}
.cp-cod{font-family:inherit;font-weight:700;font-size:var(--t-base);color:var(--gold-ink);}
.cp-cpt{font-size:var(--t-sm);color:var(--text-2);margin-top:2px;line-height:1.4;}
.cp-meta{display:flex;flex-wrap:wrap;gap:9px;font-size:var(--t-xs);color:var(--text-tertiary);
margin-top:7px;font-variant-numeric:tabular-nums;}
.cp-item .btn{margin-top:9px;width:100%;justify-content:center;}
/* Agenda "que toca hoy" en la pantalla de captura */
.ag-lista{display:flex;flex-direction:column;gap:8px;}
.ag-item{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;
display:grid;grid-template-columns:78px 1fr auto;gap:4px 10px;align-items:center;}
.ag-cod{font-weight:700;font-size:var(--t-base);color:var(--gold-ink);}
.ag-cpt{font-size:var(--t-base);color:var(--text);}
.ag-meta{grid-column:1 / 3;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
font-size:var(--t-xs);color:var(--text-tertiary);font-variant-numeric:tabular-nums;}
.ag-btns{grid-row:1 / 3;grid-column:3;display:flex;flex-direction:column;gap:6px;
align-self:center;}
.ag-item .btn{white-space:nowrap;}
@media(max-width:620px){
.ag-item{grid-template-columns:1fr;}
.ag-meta{grid-column:1;}
.ag-btns{grid-row:auto;grid-column:1;flex-direction:row;}
.ag-item .btn{flex:1;justify-content:center;}
}
/* Revision de reportes */
/* Acciones de una entrada de reporte: con etiqueta, alineadas a la derecha. */
.ent-acts{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;
align-items:center;margin-top:10px;}
.ent-acts .mini{margin-right:auto;}
.btn.danger-suave{color:var(--critico);border-color:var(--line-2);}
.btn.danger-suave:hover{border-color:var(--critico);background:var(--critico-bg);}
/* ---------- Jornada de la residente ----------
El panel cambia de color con el estado para que se lea de reojo: dorado
mientras se prepara, verde cuando ya se mando. */
.card.panel.jornada{border-left:4px solid var(--line-2);}
.card.panel.jornada.preparacion,.card.panel.jornada.documentos{
border-left-color:var(--gold-deep);background:var(--gold-soft);}
.card.panel.jornada.confirmado{border-left-color:var(--bueno);background:var(--bueno-bg);}
.jp-pasos{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;}
.jp-paso{display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
background:var(--surface-2);border:1px solid var(--line);font-size:var(--t-sm);
color:var(--text-3);white-space:nowrap;}
.jp-paso i{display:flex;align-items:center;justify-content:center;width:17px;height:17px;
border-radius:50%;background:var(--line);color:var(--text-3);font-style:normal;
font-size:var(--t-xs);font-weight:700;flex:none;}
.jp-paso.hecho{color:var(--bueno);border-color:var(--bueno);background:var(--bueno-bg);}
.jp-paso.hecho i{background:var(--bueno);color:#fff;}
.jp-paso.activo{color:var(--gold-ink);border-color:var(--gold-deep);background:#fff;
font-weight:650;box-shadow:0 1px 5px rgba(142,118,53,.16);}
.jp-paso.activo i{background:var(--gold-deep);color:#fff;}
/* Rastro de reaperturas: informativo, no una reprimenda — gris, no rojo. */
.jp-reab{display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding:8px 12px;
border-radius:var(--r-sm);background:var(--surface-2);border-left:3px solid var(--line-2);
font-size:var(--t-sm);color:var(--text-2);line-height:1.5;}
.jp-reab svg{flex:none;margin-top:1px;color:var(--text-3);}
/* ---------- Especialidades ----------
Contadores grandes: esto se toca con el pulgar, de pie y con el sol de
frente. `.pl-b`/`.pl-e` (pildora base) las reusa .mnf-fila de minutas, así
que se quedan aunque ya no las use el pase de lista de antes. */
.pl-b,.pl-e{border:1px solid var(--line-2);background:var(--surface);color:var(--text-2);
border-radius:999px;padding:7px 10px;font:inherit;font-size:var(--t-sm);font-weight:650;
cursor:pointer;min-height:38px;transition:background .12s,color .12s,border-color .12s;}
.pl-b.on{background:var(--critico);border-color:var(--critico);color:#fff;}
.pl-e.on{background:var(--checar);border-color:var(--checar);color:#fff;}
.pl-b:disabled,.pl-e:disabled{opacity:.45;cursor:default;}
.esp-total{font-size:var(--t-sm);color:var(--text-2);}
.esp-lista{display:flex;flex-direction:column;gap:6px;max-height:460px;overflow:auto;}
.esp-fila{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:9px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);}
.esp-n{font-size:var(--t-base);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.esp-contador{display:flex;align-items:center;gap:10px;flex:none;}
.esp-num{min-width:28px;text-align:center;font-size:var(--t-base);font-weight:650;
font-variant-numeric:tabular-nums;}
/* ---------- Datos del dia ---------- */
.sum-lista{display:flex;flex-direction:column;gap:7px;}
.sum-row{display:grid;
grid-template-columns:minmax(0,2fr) minmax(0,.8fr) 74px minmax(0,1.3fr) 38px;
gap:7px;align-items:center;}
.sum-row input,.sum-row select{min-width:0;}
/* Reportes que campo ya mando: lo primero de Revision. */
.jv-lista{display:flex;flex-direction:column;gap:8px;}
.jv-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 13px;
border:1px solid var(--gold-light);border-left:3px solid var(--gold-deep);
border-radius:var(--r-sm);background:var(--gold-soft);}
.jv-info{flex:1;min-width:0;}
.jv-info b{display:block;font-size:var(--t-md);}
.jv-info span{font-size:var(--t-sm);color:var(--text-2);}
.jv-info .mal{color:var(--critico);}
.jv-acts{display:flex;gap:7px;flex-wrap:wrap;}
/* Lo que la oficina pidio corregir en una entrada: va pegado a la entrada,
no en un aviso general — es donde se tiene que leer. */
.ent-correccion{display:flex;gap:8px;align-items:flex-start;margin:8px 0;
padding:8px 11px;border-radius:var(--r-sm);background:var(--critico-bg);
border-left:3px solid var(--critico);font-size:var(--t-sm);line-height:1.5;}
.ent-correccion.hecha{background:var(--bueno-bg);border-left-color:var(--bueno);}
.ent-correccion svg{flex:none;margin-top:2px;color:var(--critico);}
.ent-correccion.hecha svg{color:var(--bueno);}
.ent-correccion b{display:block;}
.ent-correccion .ok{color:var(--bueno);font-weight:650;}
.alert.venc{display:flex;gap:10px;align-items:flex-start;}
.alert.venc svg{flex:none;margin-top:2px;}
.venc-x{display:inline-block;background:rgba(255,255,255,.6);border-radius:999px;
padding:2px 9px;margin:2px 6px 2px 0;font-size:var(--t-sm);font-variant-numeric:tabular-nums;}
.jp-ok{color:var(--bueno);}
/* Separa lo que se llena UNA vez al dia de lo que se captura muchas veces.
Sin este rotulo, pasar lista parecia parte de cada reporte. */
.grupo-dia{border:1px solid var(--line-2);border-radius:var(--r);
background:var(--surface-2);padding:14px;margin-bottom:18px;}
.grupo-dia .card.panel{margin-bottom:12px;}
.grupo-dia .card.panel:last-child{margin-bottom:0;}
.grupo-h{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;color:var(--gold-ink);}
.grupo-h svg{flex:none;margin-top:2px;}
.grupo-h b{display:block;font-size:var(--t-md);color:var(--text);letter-spacing:-.01em;}
.grupo-h span{font-size:var(--t-sm);color:var(--text-2);}
.grupo-h.suelto{margin:0 0 12px;padding-top:4px;}
/* Plegado, no escondido: el resumen del renglon dice si falta algo. */
details.grupo-dia > summary{cursor:pointer;list-style:none;align-items:center;}
details.grupo-dia > summary::-webkit-details-marker{display:none;}
details.grupo-dia > summary::after{content:'▾';margin-left:auto;color:var(--text-3);
font-size:var(--t-md);transition:transform .15s;}
details.grupo-dia[open] > summary::after{transform:rotate(180deg);}
details.grupo-dia > summary:hover{color:var(--gold-ink);}
details.grupo-dia > summary .tag{margin-left:8px;}
/* Justificar atrasos antes de cerrar el dia. */
.atr-lista{display:flex;flex-direction:column;gap:10px;max-height:46vh;overflow:auto;}
.atr-item{border:1px solid var(--critico);border-left:3px solid var(--critico);
border-radius:var(--r-sm);background:var(--critico-bg);padding:10px 12px;}
.atr-t{font-size:var(--t-base);font-weight:650;margin-bottom:2px;}
.atr-s{font-size:var(--t-sm);color:var(--text-2);margin-bottom:8px;}
.atr-item textarea{width:100%;min-height:52px;}
@media (max-width:620px){
.sum-row{grid-template-columns:minmax(0,1fr) 74px 38px;}
.sum-row input[data-sum="material"]{grid-column:1 / -1;}
.sum-row input[data-sum="proveedor"]{grid-column:1 / -1;}
}
/* ---------- Visor de documentos ----------
La hoja se dibuja a tamaño real (A4) con la tipografia y las medidas del
formato. Es lo mismo que se imprime: no hay una version "de pantalla" y
otra "de papel" que puedan separarse. */
#docview{position:fixed;inset:0;z-index:8000;background:#33322C;display:flex;
flex-direction:column;}
#docview.hide{display:none;}
body.con-docview{overflow:hidden;}
/* El visor (8000) tapaba todo lo que se abría desde él: el modal, el aviso y el
tip quedaban DEBAJO (160-175) y el botón parecía no hacer nada. Mientras el
visor está abierto, suben por encima. */
body.con-docview .backdrop{z-index:8100;}
body.con-docview .toast{z-index:8110;}
body.con-docview #tip{z-index:8120;}
.dv-barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px;
background:var(--surface);border-bottom:1px solid var(--line);flex:none;}
.dv-t{font-size:var(--t-md);font-weight:650;}
.dv-est{font-size:var(--t-sm);color:var(--text-3);}
.dv-acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;}
.dv-scroll{flex:1;overflow:auto;padding:16px;}
/* La falla al abrir un documento: su motivo y «Reintentar» en el mismo renglón, o debajo si no cabe. */
.dv-falla{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin:16px;}
.dv-falla .btn{min-height:44px;}
/* align-items:flex-start es obligatorio: con el `stretch` de siempre, el
contenedor estiraba la hoja a SU alto, y como ajustarLienzo() fija ese
alto a partir del de la hoja, se realimentaban y la hoja crecia sola —
lo que metia una segunda pagina en blanco en el PDF. */
.dv-lienzo{display:flex;justify-content:center;align-items:flex-start;}
/* El Reporte Ejecutivo del servidor: su propio documento en un marco, con la
misma sombra de hoja. flex:none por lo mismo que .doc-hoja. */
.dv-marco{flex:none;display:block;border:0;background:#fff;width:216mm;height:279mm;
box-shadow:0 8px 30px rgba(0,0,0,.35);}
/* Qué entradas lleva el documento de un periodo: fuera de la hoja, no se imprime. */
.dv-entradas{margin:10px 16px 0;border:1px solid var(--line);border-radius:var(--r-sm);
background:var(--surface);flex:none;}
.dv-entradas summary{cursor:pointer;padding:8px 12px;display:flex;gap:8px;align-items:center;
font-size:var(--t-sm);color:var(--text-2);}
.dv-entradas-l{max-height:30vh;overflow:auto;border-top:1px solid var(--line);}
.dv-ent{display:flex;gap:10px;align-items:center;padding:6px 12px;border-top:1px solid var(--line);
font-size:var(--t-sm);}
.dv-ent:first-child{border-top:0;}
.dv-ent-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dv-ent.fuera .dv-ent-t{color:var(--text-3);text-decoration:line-through;}
/* 210mm de ancho: la hoja de verdad. El alto es minimo, no fijo — un dia con
mucha lista crece a una segunda pagina en vez de recortarse. */
/* CARTA (216 x 279mm), no A4: los PDF que Ivan mando miden 612x792 puntos,
que es tamaño carta. En A4 el documento salia mas angosto y mas largo que
el original, y por eso las proporciones no coincidian.
278mm y no 279: al rasterizar a escala 2 el redondeo se pasa por un pixel
y ese pixel abre una segunda hoja en blanco. */
/* flex:none es obligatorio: .dv-lienzo es flex y por omision los hijos
ENCOGEN. En una ventana mas angosta que la hoja, esta se comprimia sola y
el PDF salia con medidas que no eran las del papel (195mm en vez de 216).
La hoja mide lo que mide; para caber en pantalla se ESCALA, no se aplasta. */
.doc-hoja{flex:none;width:216mm;min-height:278mm;box-sizing:border-box;background:#fff;
padding:8mm 11mm 5mm;display:flex;flex-direction:column;gap:2.2mm;
font-family:'Argentum Sans','Arial Narrow',system-ui,sans-serif;
color:#3D3D3D;font-size:8.2pt;line-height:1.25;
box-shadow:0 8px 30px rgba(0,0,0,.35);}
.doc-hoja table{border-collapse:collapse;}
/* Un dia normal cabe en una hoja. Si de verdad crece (lista larga, muchas
actividades) se pagina, pero sin partir una seccion a la mitad ni cortar
un renglon — que es peor que una segunda pagina. */
.doc-hoja section, .doc-hoja footer{break-inside:avoid;page-break-inside:avoid;}
/* Una ficha de entrada NUNCA se parte entre dos hojas: su foto quedaria en
una pagina y su descripcion en la otra. La seccion que las contiene si
puede partirse — si no, veinte entradas empujarian todo a una hoja sola. */
.doc-ficha{break-inside:avoid;page-break-inside:avoid;}
.doc-hoja section:has(.doc-ficha){break-inside:auto;page-break-inside:auto;}
.doc-hoja tr{break-inside:avoid;page-break-inside:avoid;}
.doc-hoja thead{display:table-header-group;}
/* Lo redactable se ve redactable: subrayado dorado discreto, sin caja de
formulario — el documento tiene que seguir pareciendo un documento. */
.doc-ed{outline:none;border-bottom:1px dashed rgba(205,175,94,.55);
min-width:12mm;display:inline-block;}
.doc-ed:hover{background:rgba(205,175,94,.10);}
.doc-ed:focus{background:rgba(205,175,94,.16);border-bottom-color:var(--gold-deep);}
.doc-ed.vacio::before{content:attr(data-ph);color:#B4B4B4;font-style:italic;}
/* Boton de revision dentro del documento: es una herramienta de pantalla,
nunca parte del papel. */
.doc-corr{display:inline-flex;align-items:center;gap:4px;margin-top:2mm;
border:1px solid var(--line-2);background:#fff;color:var(--text-2);
border-radius:999px;padding:2px 9px;font:inherit;font-size:6.6pt;cursor:pointer;}
.doc-corr:hover{border-color:var(--critico);color:var(--critico);}
.doc-corr-nota{margin-top:1.4mm;padding:1.2mm 2mm;border-left:2pt solid #B4453A;
background:#FBEFEE;color:#7A2F27;font-size:6.6pt;line-height:1.4;}
@media print{ .doc-corr{display:none !important;} }
/* El PDF se toma de esta misma pantalla, no de la impresora: por eso
`doc-pdf` —que pone generarPDFdelDoc mientras la fotografía— repite lo que ya
hace @media print, para que el papel no cargue con las herramientas de
pantalla ni con el subrayado de lo redactable. Cualquier herramienta nueva
DENTRO de la hoja tiene que ocultarse aquí. */
.doc-hoja.doc-pdf .doc-corr{display:none !important;}
.doc-hoja.doc-pdf .doc-ed{border-bottom:0 !important;background:none !important;}
/* Herramientas de pantalla del reporte suelto («Agregar semáforo») y la línea del tipo y el semáforo cuando
no trae nada que se imprima: ni la leyenda escrita ni un semáforo puesto. */
.doc-hoja.doc-pdf .doc-solo-pantalla{display:none !important;}
.doc-hoja.doc-pdf .doc-tipo:not(:has(.doc-ed:not(.vacio))):not(:has(.doc-sem)){display:none !important;}
@media print{
.doc-solo-pantalla{display:none !important;}
.doc-tipo:not(:has(.doc-ed:not(.vacio))):not(:has(.doc-sem)){display:none !important;}
}
/* Un campo vacío que dice «Escriba aquí…» no lleva esa instrucción al papel;
uno que dice algo del documento («Sin incidencias.») sí. */
.doc-hoja.doc-pdf .doc-ed.vacio:not([data-ph-imprime])::before{content:none;}
@media print{ .doc-ed.vacio:not([data-ph-imprime])::before{content:none;} }
@media print{
/* Al imprimir, el documento es lo UNICO que existe. */
body.con-docview > *{display:none !important;}
body.con-docview #docview{display:block !important;position:static;background:#fff;}
body.con-docview{overflow:visible !important;}
.dv-barra, #dv-msg, .dv-entradas{display:none !important;}
.dv-scroll{overflow:visible !important;padding:0 !important;}
.dv-lienzo{display:block !important;height:auto !important;}
.doc-hoja{width:auto !important;min-height:0 !important;box-shadow:none !important;
transform:none !important;padding:0 !important;}
.doc-ed{border-bottom:0 !important;background:none !important;}
@page{size:letter;margin:8mm 11mm;}
}
.jp-listo{display:flex;gap:12px;align-items:center;margin-top:14px;color:var(--bueno);}
.jp-listo b{display:block;color:var(--text);font-size:var(--t-base);}
.jp-listo span{color:var(--text-2);font-size:var(--t-sm);}
.jp-docs{display:flex;flex-direction:column;gap:12px;margin-top:14px;}
.jp-resumen{display:flex;gap:9px;align-items:center;padding:9px 12px;border-radius:var(--r-sm);
background:var(--surface-2);border:1px solid var(--line);font-size:var(--t-base);color:var(--text-2);}
.jp-doc{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
padding:14px 16px;}
.jp-doc-h{display:flex;gap:9px;align-items:center;color:var(--gold-ink);margin-bottom:10px;}
.jp-doc-h b{display:block;color:var(--text);font-size:var(--t-md);}
.jp-doc-h span{color:var(--text-3);font-size:var(--t-sm);}
/* Lo que la residente NO puede tocar se dice explicito, no se esconde: que
sepa que las cifras salen solas es lo que le da confianza al documento. */
.jp-doc-fijo{display:flex;gap:8px;align-items:flex-start;padding:8px 11px;margin-bottom:11px;
border-radius:var(--r-sm);background:var(--surface-3);color:var(--text-3);font-size:var(--t-sm);
line-height:1.5;}
.jp-doc-fijo svg{flex:none;margin-top:1px;}
/* Vista previa del ejecutivo: lo que va a salir en el PDF, con los mismos
datos. Fondo distinto para que se lea como "documento", no como formulario. */
.jp-prev{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);
padding:12px 14px;margin-bottom:11px;}
.jp-prev-t{font-size:var(--t-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--text-3);margin-bottom:9px;}
.jp-kpis{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:11px;}
.jp-kpis>div{flex:1;min-width:74px;background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-sm);padding:8px 10px;}
.jp-kpis b{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em;
font-variant-numeric:tabular-nums;line-height:1.2;}
.jp-kpis span{font-size:var(--t-micro);color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;}
/* La celda de "lo completa administración" va donde iría la cifra, y se ve
como un dato pendiente, no como un error. */
.admin-celda{display:flex;gap:7px;align-items:center;background:var(--gold-soft) !important;
border-color:var(--gold-light) !important;color:var(--gold-ink);
font-size:var(--t-sm);font-style:italic;line-height:1.4;}
.admin-celda svg{flex:none;}
td.admin-celda{text-align:left;}
table.jp-tabla{font-size:var(--t-sm);background:var(--surface);}
table.jp-tabla thead th{background:var(--surface-3);font-size:var(--t-xs);padding:6px 9px;}
table.jp-tabla tbody td{padding:6px 9px;}
/* Motivo del rechazo, visible para quien capturo el reporte. */
.rechazo-nota{display:flex;gap:9px;align-items:flex-start;margin-top:8px;
padding:9px 12px;border-radius:var(--r-sm);background:var(--critico-bg);
border-left:3px solid var(--critico);color:var(--critico);}
.rechazo-nota span{font-size:var(--t-base);line-height:1.5;color:var(--text);}
.rechazo-nota b{display:block;font-size:var(--t-xs);text-transform:uppercase;
letter-spacing:.06em;color:var(--critico);margin-bottom:2px;}
.rev-item{border-top:1px solid var(--line);padding:12px 0;}
.rev-item.dup{background:var(--critico-bg);border-left:3px solid var(--critico);
padding-left:10px;margin-left:-10px;}
.tag.bueno{background:var(--bueno-bg);color:var(--bueno);}
.tag.checar{background:var(--checar-bg);color:var(--checar);}
.cp-just{display:flex;gap:6px;margin-top:8px;}
.cp-just .in{flex:1;font-size:var(--t-sm);padding:6px 8px;}
.cp-just-ro{margin-top:8px;font-size:var(--t-sm);color:var(--text-2);background:var(--surface-2);
border-radius:var(--r-xs);padding:7px 9px;line-height:1.4;}
.hojas{display:flex;flex-direction:column;gap:7px;margin-top:4px;}
.hoja-op{display:flex;align-items:center;gap:10px;border:1px solid var(--line);
border-radius:var(--r-sm);padding:10px 12px;cursor:pointer;background:var(--surface);
text-align:left;font:inherit;color:inherit;transition:border-color .13s,background .13s;}
.hoja-op:hover{border-color:var(--gold);background:var(--gold-soft);}
.hoja-op.sel{border-color:var(--gold-deep);background:var(--gold-soft);}
.hoja-op .hn{font-weight:600;font-size:var(--t-base);}
.hoja-op .hd{font-size:var(--t-sm);color:var(--text-3);margin-top:1px;}
.hoja-op .hm{margin-left:auto;font-size:var(--t-xs);color:var(--text-3);white-space:nowrap;}
.off{position:fixed;bottom:0;left:0;right:0;background:var(--checar);color:#fff;
font-size:var(--t-sm);font-weight:600;text-align:center;padding:7px;z-index:60;}
/* El aviso de entradas que ya fallaron 3 veces se apila arriba de la franja
naranja: mismo lugar, tono critico, y se puede descartar. */
#aviso-cola{position:fixed;bottom:34px;left:0;right:0;background:var(--critico);color:#fff;
font-size:var(--t-sm);font-weight:600;text-align:center;padding:7px 12px;z-index:60;
display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;}
#aviso-cola button{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.55);
color:#fff;border-radius:var(--r-xs);padding:3px 12px;font-size:var(--t-sm);font-weight:600;cursor:pointer;}
.pend{display:inline-flex;align-items:center;gap:5px;background:var(--checar-bg);
color:var(--checar);border-radius:var(--r-xs);padding:3px 8px;font-size:var(--t-xs);font-weight:600;}
/* «Borrador recuperado»: lo que se capturó y no se guardó vuelve al formulario, con «Descartar». La pregunta de confirmar va en el
mismo aviso (dentro de una ventana, la de confirmar taparía el formulario). Lo usan todos los formularios con borrador. */
.bor-aviso{margin:0 0 12px;border:1px solid var(--st-info-bd);border-radius:2px;background:var(--st-info-bg);color:var(--st-info);
font-size:var(--t-sm);font-weight:600;}
.bor-aviso-1,.bor-aviso-2{display:flex;align-items:center;justify-content:space-between;gap:4px 10px;padding:4px 4px 4px 12px;}
.bor-aviso-2,.bor-aviso.pregunta .bor-aviso-1{display:none;}
.bor-aviso.pregunta .bor-aviso-2{display:flex;flex-wrap:wrap;}
.bor-aviso-b{display:flex;flex-wrap:wrap;margin-left:auto;}
.bor-aviso-x{min-height:44px;padding:0 12px;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;}
/* ================= CAPTURA EN CAMPO (mobile-first) =================
Ésta es la única pantalla que se usa de pie, a pleno sol y a veces con
guantes. Todo lo de aquí abajo existe por eso y NO se aplica al resto de
la app: contraste alto (fondo blanco, tinta casi negra), zonas táctiles
de 48px o más, y cero adorno que estorbe entre el dedo y el dato.
El alcance es `.cap` — la tarjeta de "Nuevo reporte" — para no repintar
de paso los tableros del admin, que se ven en escritorio. */
.cap{background:#fff;}
.cap .panel-t{color:#121212;}
.cap .panel-s,.cap .hint{color:#4A4A4A;}
.cap .fld label{color:#2B2B2B;font-size:var(--t-base);font-weight:650;margin-bottom:6px;}
/* 16px en los campos no es capricho de diseño: por debajo de eso Safari en
iPhone hace zoom solo al enfocar y descuadra toda la pantalla. */
.cap .fld input,.cap .fld select,.cap .fld textarea{color:#121212;background:#fff;
border-color:#A9A296;font-size:16px;min-height:48px;padding:11px 13px;}
.cap .fld textarea{min-height:96px;line-height:1.55;}
.cap .fld input:focus,.cap .fld select:focus,.cap .fld textarea:focus{
border-color:var(--gold-deep);box-shadow:0 0 0 3px var(--gold-soft);}
.cap .fld input[readonly]{background:var(--surface-2);color:#3A3A3A;}
.cap .btn{min-height:48px;font-size:var(--t-md);}
.cap .btn.sm{min-height:40px;}
.cap .btn.primary{background:var(--gold);border-color:var(--gold-deep);color:#121212;font-weight:700;}
.cap .btn.primary:hover{background:var(--gold-light);border-color:var(--gold-deep);color:#121212;}
.cap .chip{min-height:44px;}
/* El botón de guardar es el destino de toda la pantalla: ancho completo y
alto de pulgar, no un botón chico perdido en una esquina. */
.cap-guardar{width:100%;justify-content:center;min-height:56px !important;
font-size:15.4px !important;letter-spacing:.01em;}
/* ---- Buscador predictivo de conceptos ---- */
/* El real sigue existiendo debajo (oculto): es la fuente de verdad
que ya leen el guardado, la agenda y el aviso de multi-rubro. Esto es una
capa de búsqueda encima, no un reemplazo del dato. */
.cbx{position:relative;}
.cbx-in{width:100%;border:1px solid #A9A296;background:#fff;color:#121212;
border-radius:var(--r-sm);padding:11px 40px 11px 13px;font-size:16px;
min-height:48px;font-weight:500;transition:border-color .14s,box-shadow .14s;}
.cbx-in::placeholder{color:#7C7669;}
.cbx-in:focus{border-color:var(--gold-deep);box-shadow:0 0 0 3px var(--gold-soft);outline:none;}
.cbx-lupa{position:absolute;right:13px;top:14px;color:#7C7669;pointer-events:none;}
.cbx-pop{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 5px);
background:#fff;border:1px solid #A9A296;border-radius:var(--r-sm);
max-height:min(56vh,380px);overflow-y:auto;-webkit-overflow-scrolling:touch;
box-shadow:0 14px 36px rgba(18,18,18,.22);}
.cbx-g{position:sticky;top:0;background:#F2F2EF;color:#4A4436;font-size:var(--t-xs);
font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:7px 13px;
border-bottom:1px solid #DEDEDA;}
.cbx-g.rec{background:var(--gold-soft);color:var(--gold-ink);}
.cbx-op{display:block;width:100%;text-align:left;border:none;background:none;
font:inherit;color:#121212;padding:11px 13px;min-height:56px;cursor:pointer;
border-bottom:1px solid #F1EFE7;}
.cbx-op:last-child{border-bottom:none;}
.cbx-op:hover,.cbx-op.on{background:var(--gold-soft);}
.cbx-op .cb-cod{font-weight:700;font-size:var(--t-base);color:var(--gold-ink);}
.cbx-op .cb-cpt{font-size:var(--t-md);color:#121212;line-height:1.35;}
.cbx-op .cb-meta{font-size:var(--t-sm);color:#5A554A;margin-top:2px;}
.cbx-op mark{background:#F2E3A8;color:#121212;padding:0 1px;border-radius:2px;}
.cbx-vacio{padding:16px 13px;font-size:var(--t-base);color:#5A554A;}
/* Lo ya elegido se queda a la vista mientras se llena el resto: en campo se
levanta la mirada a cada rato y hay que poder confirmar qué se está
reportando sin volver a abrir el buscador. */
.cbx-sel{display:flex;align-items:flex-start;gap:9px;margin-top:8px;padding:10px 12px;
background:var(--gold-soft);border-left:3px solid var(--gold-deep);border-radius:var(--r-xs);}
.cbx-sel .cs-t{font-size:var(--t-base);color:#121212;line-height:1.4;flex:1;min-width:0;}
.cbx-sel .cs-t b{color:var(--gold-ink);}
.cbx-sel .cs-x{border:none;background:none;color:#5A554A;cursor:pointer;padding:4px;
min-width:34px;min-height:34px;display:flex;align-items:center;justify-content:center;}
.cbx-sel .cs-x:hover{color:var(--critico);}
/* ---- Límites de ejecución y excedente ---- */
.lim{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;padding:9px 11px;
background:var(--surface-2);border-radius:var(--r-xs);font-size:var(--t-base);
color:#3A3A3A;font-variant-numeric:tabular-nums;line-height:1.4;}
.lim span{white-space:nowrap;}
.lim b{color:#121212;font-weight:700;}
.lim .rest{color:var(--bueno);}
.lim.apretado{background:var(--checar-bg);} .lim.apretado .rest{color:var(--checar);}
.lim.exceso{background:var(--critico-bg);} .lim.exceso .rest{color:var(--critico);}
.cap .fld input.excede{border-color:var(--critico) !important;
box-shadow:0 0 0 3px rgba(178,59,59,.18) !important;color:var(--critico);font-weight:700;}
.cap .fld input.excede.sacude{animation:sacudeCampo .34s cubic-bezier(.36,.07,.19,.97);}
@keyframes sacudeCampo{10%,90%{transform:translateX(-2px);}30%,70%{transform:translateX(3px);}
50%{transform:translateX(-3px);}}
.exc-caja{margin-top:9px;border:1px solid var(--critico);border-left-width:3px;
background:var(--critico-bg);border-radius:var(--r-xs);padding:12px 13px;}
.exc-caja .ec-t{font-size:var(--t-base);font-weight:700;color:var(--critico);margin-bottom:4px;}
.exc-caja .ec-d{font-size:var(--t-base);color:#3A3A3A;line-height:1.55;}
.exc-caja label{display:flex;align-items:center;gap:10px;margin-top:11px;cursor:pointer;
font-size:var(--t-base);font-weight:650;color:#121212;min-height:44px;}
.exc-caja label input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--critico);}
/* ---- Dictado por voz ---- */
.dic-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.mic{width:52px;height:52px;min-height:52px;border-radius:50%;border:1px solid var(--gold-deep);
background:var(--gold);color:#121212;cursor:pointer;display:flex;align-items:center;
justify-content:center;flex:none;transition:background .14s,transform .1s;}
.mic:hover{background:var(--gold-light);}
.mic:active{transform:scale(.94);}
.mic.on{background:var(--critico);border-color:var(--critico);color:#fff;
animation:pulsoMic 1.2s ease-in-out infinite;}
@keyframes pulsoMic{0%,100%{box-shadow:0 0 0 0 rgba(178,59,59,.42);}
70%{box-shadow:0 0 0 12px rgba(178,59,59,0);}}
.dic-est{font-size:var(--t-sm);color:#4A4A4A;line-height:1.45;}
.dic-est.viva{color:var(--critico);font-weight:650;}
/* ---- Galería de evidencia ---- */
.evd{border:1.5px dashed #A9A296;border-radius:var(--r);background:#FCFBF7;padding:13px;}
/* Un solo botón, a todo lo ancho: el selector nativo del teléfono ya
pregunta cámara/galería/archivos. */
.evd-b{display:flex;width:100%;flex-direction:row;align-items:center;justify-content:center;gap:9px;
min-height:64px;border:1px solid #A9A296;background:#fff;color:#121212;border-radius:var(--r-sm);
cursor:pointer;font:inherit;font-size:var(--t-md);font-weight:650;
transition:border-color .14s,background .14s,transform .08s;}
.evd-b svg.i{color:var(--gold-ink);}
.evd-b:hover{border-color:var(--gold-deep);background:var(--gold-soft);}
.evd-b:active{transform:scale(.97);}
.evd-b.foto{border-color:var(--gold-deep);background:var(--gold-soft);}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:9px;margin-top:12px;}
/* Cuadrado de verdad, sin depender de aspect-ratio: el celular de obra no
siempre trae el navegador del año. */
/* El marco va por dentro (box-shadow), no como border: el padding en
porcentaje se mide contra el ancho del contenedor, así que un borde de
1px dejaba los cuadros 2px más altos que anchos — y una retícula
casi-cuadrada se nota. */
.thumb{position:relative;width:100%;padding-top:100%;overflow:hidden;
box-shadow:inset 0 0 0 1px #A9A296;border-radius:var(--r-xs);background:#F2F2EF;}
.thumb img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;}
.thumb .cargando{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;
align-items:center;justify-content:center;font-size:var(--t-xs);color:#5A554A;}
.thumb .x{position:absolute;top:4px;right:4px;width:30px;height:30px;border-radius:50%;
border:none;background:rgba(18,18,18,.74);color:#fff;cursor:pointer;
display:flex;align-items:center;justify-content:center;padding:0;}
.thumb .x:hover{background:var(--critico);}
.evd-cont{margin-top:10px;font-size:var(--t-sm);color:#4A4A4A;}
/* En pantalla chica la captura ocupa todo el ancho y las columnas se apilan:
una fila de tres campos a 360px no es un formulario, es un acertijo. */
@media (max-width:620px){
.cap .frm-r{grid-template-columns:1fr !important;}
.thumbs{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));}
}
@media print{
.sidebar,.topbar .acts,.fbar,.xbtn,#tip,#toast,#modal-root,.rail,#selector,.off{display:none !important;}
.main{margin-left:0 !important;} .topbar{position:static;border-bottom:1px solid var(--line-2);}
.content{padding:0 !important;max-width:none !important;}
.card{border:1px solid var(--line) !important;break-inside:avoid;}
.tbl-scroll{overflow:visible !important;} table.data{font-size:8.4px !important;}
table.data td,table.data th{padding:4px 6px !important;} table.data thead th{position:static !important;}
.in{border:none !important;background:none !important;width:auto !important;padding:0 !important;}
.grid-kpi{gap:0;}
}
/* ============================================================
ESTILO "REPORTES OPESA" APLICADO AL DASHBOARD
Ivan definio este lenguaje visual en los .dc.html de los reportes y
minutas que ya genera la plataforma (Avenir Next Cyr, dorado
#CDAF5E, tarjetas con acento de color arriba, cabecera de tabla oscura)
y pidio que el Dashboard se vea del mismo sistema. Todo va scoped bajo
#sec-dash para no tocar la tipografia ni los colores del resto de la
app - la herencia de font-family hace el trabajo pesado, solo hay que
recolorear los acentos semanticos (sano/riesgo/critico) al tono exacto
que usan los PDF en vez del que usa la app.
============================================================ */
#sec-dash{
--rg-gold:#CDAF5E; --rg-ink:#4D4D4D; --rg-gray:#A8A8A8;
--rg-bueno:#5A8F4E; --rg-bueno-bg:#EDF3EB;
--rg-riesgo:#A88F45; --rg-riesgo-bg:#FAF4E4;
--rg-critico:#B4453A; --rg-critico-bg:#FBEFEE;
font-family:'Argentum Sans','Arial Narrow',system-ui,sans-serif;
}
#sec-dash .panel-t{font-size:var(--t-base);font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--rg-ink);}
#sec-dash .hero-lb, #sec-dash .pcard-lb{letter-spacing:.1em;color:var(--rg-gray);}
#sec-dash .re-lb{color:#A88F45;}
#sec-dash .hero, #sec-dash .pcard{border-top-color:var(--rg-gold);}
#sec-dash .resumen-ejec{background:#FBFBF9;border-color:#DFD3AE;border-left-color:var(--rg-gold);
box-shadow:1.5px 1.5px 0 rgba(205,175,94,.12);}
#sec-dash .re-ic{background:var(--rg-gold);}
#sec-dash .sano{color:var(--rg-bueno);}
#sec-dash .riesgo{color:var(--rg-riesgo);}
#sec-dash .critico{color:var(--rg-critico);}
#sec-dash .hero.sano, #sec-dash .pcard.sano{border-top-color:var(--rg-bueno);}
#sec-dash .hero.riesgo, #sec-dash .pcard.riesgo{border-top-color:var(--rg-riesgo);background:var(--rg-riesgo-bg);}
#sec-dash .hero.critico, #sec-dash .pcard.critico{border-top-color:var(--rg-critico);background:var(--rg-critico-bg);}
#sec-dash .hero.sano .hero-v, #sec-dash .pcard.sano .pcard-v{color:var(--rg-bueno);}
#sec-dash .hero.riesgo .hero-v, #sec-dash .pcard.riesgo .pcard-v{color:var(--rg-riesgo);}
#sec-dash .hero.critico .hero-v, #sec-dash .pcard.critico .pcard-v{color:var(--rg-critico);}
#sec-dash .hero-badge.sano{background:var(--rg-bueno-bg);color:var(--rg-bueno);}
#sec-dash .hero-badge.riesgo{background:var(--rg-riesgo-bg);color:var(--rg-riesgo);}
#sec-dash .hero-badge.critico{background:var(--rg-critico-bg);color:var(--rg-critico);}
#sec-dash .tope-fill{background:var(--rg-bueno);}
#sec-dash .tope-fill.cerca{background:var(--rg-riesgo);}
#sec-dash .tope-fill.over{background:var(--rg-critico);}
#sec-dash .al-item.critico{background:var(--rg-critico-bg);border-left-color:var(--rg-critico);}
#sec-dash .al-item.riesgo{background:var(--rg-riesgo-bg);border-left-color:var(--rg-riesgo);}
#sec-dash .al-item.critico .al-ic{color:var(--rg-critico);}
#sec-dash .al-item.riesgo .al-ic{color:var(--rg-riesgo);}
#sec-dash .al-ok{color:var(--rg-bueno);}
#sec-dash .rb-fill.sano, #sec-dash .rb-pt.sano{background:var(--rg-bueno);}
#sec-dash .rb-fill.riesgo, #sec-dash .rb-pt.riesgo{background:var(--rg-riesgo);}
#sec-dash .rb-fill.critico, #sec-dash .rb-pt.critico{background:var(--rg-critico);}
#sec-dash .va-row.riesgo{background:var(--rg-critico-bg);}
#sec-dash .mini-bar.centro i{background:var(--rg-bueno);}
#sec-dash .mini-bar.centro i.neg{background:var(--rg-critico);}
#sec-dash table.data.va thead th{
background:var(--rg-ink);color:#fff;letter-spacing:.08em;text-transform:uppercase;
font-size:var(--t-xs);font-weight:600;
}
/* ============================================================
REDISENO v4 - "Obra": hueso con relieve + dato plano
------------------------------------------------------------
Reglas del sistema:
1. RELIEVE solo en el chasis (barra lateral, rail, KPI, botones de
barra, login). El DATO (tablas, Gantt, formularios) va PLANO sobre
blanco: una tabla de costos con sombras es una tabla ilegible.
2. NEGRO Y ORO solo en piezas de identificacion: marca, item activo,
boton de proyecto, boton primario. Nunca en zonas de cifra.
3. SEMAFOROS discretos: tipografia y punto de color. El fondo tenido se
reserva para lo critico de verdad.
4. Esquinas de 6px, nunca mas. La captura en campo NO lleva relieve.
Este bloque va al final a proposito: sobreescribe por nombre de clase,
sin tocar el HTML ni el JavaScript que los genera.
============================================================ */
body{font-size:var(--t-md);background:var(--bg);}
.topbar h1,.modal h3,.sel-h h2,.lg-t,.sel-vacio h3,.dv-t,.pcard .pn,
.cr-hero-lb+.cr-hero-v,.panel-t{font-family:var(--slab);letter-spacing:0;}
.topbar h1{font-size:22px;font-weight:600;}
.panel-t{font-size:16px;font-weight:600;text-transform:none;}
.modal h3{font-size:18px;font-weight:600;}
.sel-h h2{font-size:22px;font-weight:600;}
.kpi-v,.hero-v,.pcard-v,.cr-hero-v,.cr-m-v,.evm-v,.gauge-pct,.tope-cifra .num,
.jp-kpis b,.pb-v,.pcard .pstat b{font-family:var(--slab);font-weight:600;
letter-spacing:-.015em;font-variant-numeric:tabular-nums;
font-feature-settings:"tnum";}
/* Toda cifra de la app va tabular: sin esto los montos "bailan" de ancho. */
.num,.kpi-s,.hero-s,.pcard-s,.cr-m-s,td,th{font-variant-numeric:tabular-nums;
font-feature-settings:"tnum";}
.topbar h1{letter-spacing:-.01em;}
.panel-t,.modal h3,.sel-h h2,.lg-t,.sel-vacio h3,.dv-t,.pcard .pn{letter-spacing:-.005em;}
/* --- Chasis: barra lateral tallada del mismo hueso --- */
.sidebar{background:var(--surface-3);box-shadow:inset -7px 0 12px -10px rgba(110,110,102,.35);}
.sidebar::-webkit-scrollbar-thumb{background:#D4D5D0;}
.sb-brand{border-bottom:1px solid #E1E2DE;}
.sb-brand .n{font-family:var(--slab);font-weight:600;color:#33312A;letter-spacing:0;}
.sb-brand .s{color:#83847B;}
.sb-group{color:#7B7C74;letter-spacing:.18em;}
.sb-item{color:#575852;border-radius:var(--r);}
.sb-item:hover{background:#E7E7E3;color:#26241F;}
.sb-item.on{background:var(--surface-3);box-shadow:var(--hundido);color:var(--gold-ink);}
.sb-item.on::before{background:var(--gold);top:8px;bottom:8px;width:2.5px;}
.sb-item .bdg{color:#83847B;}
.sb-item.on .bdg{color:var(--gold-ink);}
/* La cuenta de «Calidad» (NO APTO) va en rojo; en compu, en su globo rojo. */
#sidebar .sb-item .bdg.alerta{color:var(--critico);}
/* Automatización y auditoría, al pie del riel de la obra, como una opción más. */
.sb-pie-obra{display:contents;}
.sb-sub button{color:#7A7458;}
.sb-sub button:hover{color:#26241F;background:#E7E7E3;}
.sb-sub button.on{color:var(--gold-ink);}
.sb-foot{border-top:1px solid #E1E2DE;}
.sb-who{color:#3C3A33;}
.sb-role{color:#7B7C74;}
.sb-btn{color:#575852;border-radius:var(--r);}
.sb-btn:hover{background:#E7E7E3;color:#26241F;}
.sb-btn.gold{background:var(--ink);color:var(--gold-light);box-shadow:3px 3px 8px rgba(60,58,51,.28);}
.sb-btn.gold:hover{background:#141310;color:var(--gold-light);}
.sb-cerrar{color:#7B7C74;}
.sb-cerrar:hover{background:#E7E7E3;color:#26241F;}
/* --- Rail de identificacion: mismo hueso, un tono mas hondo --- */
.railp{display:flex;align-items:center;justify-content:space-between;gap:20px;
height:38px;padding:0 28px;background:#EBEBE7;border-bottom:1px solid #D4D5D0;
font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:#7A7B72;position:sticky;top:0;z-index:31;}
.railp .rp-l,.railp .rp-r{display:flex;align-items:center;gap:12px;min-width:0;}
.railp .rp-l span:first-child{color:var(--gold-ink);}
.railp em{font-style:normal;color:#B5AC93;}
.railp .rp-r{font-weight:600;letter-spacing:.1em;color:#7B7C74;}
.railp span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.railp:empty,.railp.hide{display:none;}
@media (max-width:900px){ .railp{padding:0 16px;} .railp .rp-r{display:none;} }
/* --- Barra superior --- */
.topbar{background:var(--bg);border-bottom:1px solid var(--line-2);top:38px;}
.topbar .crumb{color:var(--text-3);font-size:var(--t-sm);}
.topbar .btn:not(.primary){background:var(--bg);border-color:transparent;box-shadow:var(--relieve-sm);}
.topbar .btn:not(.primary):hover{background:var(--bg);box-shadow:var(--relieve-alto);}
.topbar .btn:active{box-shadow:var(--hundido-sm);}
/* --- Tarjetas de cifra: relieve --- */
.kpi,.hero,.cr-hero,.cr-m{background:var(--bg);border:none;box-shadow:var(--relieve);}
.grid-kpi .kpi{padding:18px 20px 16px;}
.kpi-lb,.hero-lb,.pcard-lb,.cr-hero-lb,.cr-m-lb,.evm-lb{
text-transform:uppercase;letter-spacing:.14em;font-weight:700;
font-size:var(--t-xs);color:var(--gold-ink);}
.kpi-v{font-size:26px;}
.kpi-s,.hero-s,.pcard-s{color:var(--text-2);}
.kpi-ic{opacity:.35;}
.hero,.cr-hero{border-top:2px solid var(--gold);}
.pulso-b{background:var(--surface-3);border:none;box-shadow:var(--hundido-sm);}
.evm{border:none;background:var(--line);box-shadow:var(--relieve-sm);}
/* --- Paneles y tablas: planos sobre blanco --- */
.card{border-color:var(--line);box-shadow:0 4px 14px rgba(110,110,102,.09);}
.panel-s{color:var(--text-3);}
table.data thead th{background:#F8F8F6;color:#7A7B72;text-transform:uppercase;
letter-spacing:.12em;font-size:var(--t-xs);font-weight:700;
border-bottom:1.5px solid var(--gold);}
table.data thead th.ed{color:var(--gold-ink);}
table.data tbody td{padding:10px 14px;}
table.data tbody tr:hover{background:#FAF8F0;}
.tbl-head{padding:15px 20px;}
.tbl-count{color:var(--text-3);}
/* --- Botones: planos sobre blanco, con relieve sobre hueso --- */
.btn{border-radius:var(--r);font-weight:600;border-color:var(--line-2);}
.btn:hover{background:var(--surface-2);border-color:var(--text-3);}
.btn.primary{background:var(--gold);border-color:var(--gold);color:#231E0C;font-weight:700;}
.btn.primary:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff;}
.btn.dark{background:var(--ink);border-color:var(--ink);}
.sel-body .btn:not(.primary),.sel-h .btn:not(.primary){background:var(--bg);
border-color:transparent;box-shadow:var(--relieve-sm);}
.sel-body .btn:not(.primary):hover{box-shadow:var(--relieve-alto);background:var(--bg);}
.sel-body .btn.primary,.sel-h .btn.primary,.topbar .btn.primary{
background:var(--gold);border-color:var(--gold);color:#231E0C;box-shadow:var(--relieve-sm);}
.sel-body .btn.primary:hover,.sel-h .btn.primary:hover,.topbar .btn.primary:hover{
background:var(--gold-deep);border-color:var(--gold-deep);color:#fff;box-shadow:var(--relieve-alto);}
/* --- Campos: hundidos, nunca cajas duras --- */
.fld input,.fld select,.fld textarea,.sin,.in,.rg-campo{
border-radius:var(--r);border-color:var(--line-2);background:var(--surface-2);
box-shadow:var(--hundido-sm);}
.fld input:focus,.fld select:focus,.fld textarea:focus,.sin:focus,.in:focus{
background:#fff;border-color:var(--gold-deep);box-shadow:0 0 0 3px var(--gold-soft);}
.fld label{font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:#7A7B72;}
.chip,.tag,.pill,.hoja-op,.tipo-card,.jp-paso{border-radius:var(--r-xs);}
.segmented{border-radius:var(--r);overflow:hidden;}
.seg.on{background:var(--gold-soft);color:var(--gold-ink);font-weight:700;}
/* --- Modales y avisos --- */
.backdrop{background:rgba(38,36,31,.5);}
.modal{border-radius:var(--r);box-shadow:0 24px 60px rgba(20,19,16,.32);}
.msg,.alert{border-radius:var(--r-xs);}
/* --- Selector de proyectos --- */
#selector{background:var(--bg);}
.sel-top{background:var(--surface-3);border-bottom:1px solid #D4D5D0;}
.sel-top .who b{color:#3C3A33;}
.sel-top .who span{color:#7B7C74;}
.sel-sec-t{color:#7B7C74;letter-spacing:.16em;font-size:var(--t-xs);}
.sel-sec-n{background:var(--surface-3);border-color:var(--line-2);color:#7A7B72;}
.sel-grid .pcard{background:var(--bg);border:none;box-shadow:var(--relieve);}
.sel-grid .pcard:hover{box-shadow:var(--relieve-alto);transform:translateY(-1px);}
.sel-grid .pcard.nuevo{background:var(--surface-3);box-shadow:var(--hundido-sm);
border:1px dashed var(--line-2);}
.pcard .pstats{border-top-color:var(--line-2);}
.sel-vacio{background:var(--surface-3);box-shadow:var(--hundido-sm);border:1px dashed var(--line-2);}
/* --- Inicio: recientes arriba + lista con vista previa. Sustituye la rejilla
de tarjetas: con muchas obras se saturaba la pantalla. --- */
.sel-body{max-width:1240px;}
.ini-recs{margin-bottom:22px;}
.ini-rec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px;}
.ini-rec-h>span{font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--text-3);}
.ini-rec-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:12px;}
.ini-rc{background:var(--bg);border:none;border-radius:var(--r);padding:13px 15px;
display:flex;align-items:center;gap:12px;cursor:pointer;text-align:left;
font:inherit;color:inherit;box-shadow:var(--relieve);
transition:box-shadow .14s,transform .14s;}
.ini-rc:hover{box-shadow:var(--relieve-alto);transform:translateY(-1px);}
.ini-rc:active{transform:scale(.995);box-shadow:var(--hundido-sm);}
.ini-rc-ini{width:36px;height:36px;border-radius:var(--r-xs);background:var(--surface-3);
box-shadow:var(--hundido-sm);display:flex;align-items:center;justify-content:center;
font-size:var(--t-base);font-weight:700;color:var(--gold-ink);flex:none;}
.ini-rc-n{font-size:var(--t-md);font-weight:600;letter-spacing:-.01em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ini-rc-s{font-size:var(--t-sm);color:var(--text-3);margin-top:2px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ini-panes{display:grid;grid-template-columns:340px 1fr;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
overflow:hidden;min-height:430px;}
.ini-list{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;}
.ini-tabs{display:flex;gap:2px;padding:11px 12px 0;border-bottom:1px solid var(--line);}
.ini-tab{background:none;border:none;font:inherit;cursor:pointer;padding:7px 12px;
font-size:var(--t-base);color:var(--text-3);border-bottom:2px solid transparent;
margin-bottom:-1px;display:flex;align-items:center;gap:6px;}
.ini-tab i{font-style:normal;font-size:var(--t-xs);color:var(--text-tertiary);
font-variant-numeric:tabular-nums;}
.ini-tab.on{color:var(--text);font-weight:600;border-bottom-color:var(--gold-deep);}
.ini-tab.on i{color:var(--text-3);}
/* Tira de carpetas. Solo se pinta si existe alguna, asi que no hay estado
"vacio" que disenar: o hay carpetas o la fila no esta. */
/* Reacomodar entradas. La manija va pegada al borde izquierdo, tenue y siempre a la vista: en el teléfono
también se arrastra (touch-action:none para que el dedo no desplace la página). Una copia de la tarjeta
(.ord-en-vuelo, en el body) sigue al puntero y la tarjeta de verdad queda como hueco punteado (.ord-hueco),
que se mueve entre las demás. */
.ent-arr{position:relative;}
.ent-manija{position:absolute;left:-6px;top:14px;width:30px;height:34px;padding:0;
border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:grab;
color:var(--text-3);opacity:.55;transition:opacity .12s;border-radius:var(--r-xs);
background:var(--surface);touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
.ent-arr:hover .ent-manija,.ent-manija:focus-visible{opacity:1;}
.ent-manija:active{cursor:grabbing;}
body.ord-arrastrando,body.ord-arrastrando *{cursor:grabbing !important;-webkit-user-select:none;user-select:none;}
.ent-arr.ord-en-vuelo{position:fixed !important;margin:0 !important;z-index:7000;pointer-events:none;
transform:none !important;animation:none !important;box-shadow:0 16px 38px rgba(35,35,32,.30);}
.ent-arr.ord-en-vuelo.ord-aterriza{box-shadow:0 0 0 rgba(35,35,32,0);}
.ent-arr.ord-hueco{background:var(--gold-soft) !important;border-color:var(--gold) !important;
border-style:dashed !important;box-shadow:none !important;animation:none !important;}
.ent-arr.ord-hueco > *{visibility:hidden;}
@media (prefers-reduced-motion:reduce){ .ent-arr, .ent-arr.ord-en-vuelo{transition:none !important;} }
/* La entrada que se acaba de agregar se marca un instante, para encontrarla entre las demás. */
.ent-arr.ent-nueva{animation:entNueva 2.2s ease-out;}
@keyframes entNueva{0%{box-shadow:0 0 0 3px var(--gold);}100%{box-shadow:0 0 0 3px transparent;}}
@media (prefers-reduced-motion:reduce){ .ent-arr.ent-nueva{animation:none;outline:2px solid var(--gold);} }
/* La barra sobre la lista de entradas de un reporte suelto: avisa que hay orden acomodado a mano. */
.ord-barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;
font-size:var(--t-sm);color:var(--text-2);}
/* Casilla con su texto (sin descripción, semáforo encendido…). Dentro de un .fld la etiqueta heredaría las
mayúsculas de los campos y la casilla el ancho completo de un campo de texto: se corrigen las dos. */
.chk,.fld label.chk,.cap .fld label.chk{display:flex;align-items:center;gap:9px;font-size:var(--t-sm);
font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-2);cursor:pointer;margin-bottom:0;}
.chk input,.fld label.chk input,.cap .fld label.chk input{width:18px;height:18px;min-height:0;padding:0;margin:0;
flex:none;accent-color:var(--gold-deep);}
.fld textarea:disabled{opacity:.5;cursor:not-allowed;}
/* La nota de una entrada que se guardó sin descripción, con su motivo, cuando eso todavía se permitía: solo se lee. */
.alert.nota-sinde{margin-bottom:0;}
.frm details.mas-datos{margin:6px 0 2px;}
.frm details.mas-datos summary{cursor:pointer;font-size:var(--t-sm);color:var(--text-2);padding:4px 0;}
/* Semáforo: el punto de color, el menú que se abre junto a la entrada y la ventana del catálogo. */
.sem-pt{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;}
.menu-sem{position:fixed;z-index:8200;min-width:210px;max-width:290px;background:var(--surface);
border:1px solid var(--line-2);border-radius:var(--r-sm);box-shadow:var(--elev-2);padding:5px;
display:flex;flex-direction:column;gap:1px;}
.menu-sem-i{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 10px;border:0;
background:none;border-radius:var(--r-xs);font:inherit;font-size:var(--t-sm);color:var(--text);cursor:pointer;}
.menu-sem-i:hover,.menu-sem-i:focus-visible{background:var(--surface-3);}
.menu-sem-i.on{font-weight:600;}
.menu-sem-adm{margin-top:3px;border-top:1px solid var(--line);border-radius:0 0 var(--r-xs) var(--r-xs);color:var(--text-2);}
.sm-lista{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.sm-fila{display:flex;align-items:center;gap:10px;}
.sm-nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sm-nuevo{display:flex;gap:8px;}
.sm-nuevo input{flex:1;min-width:0;}
.sm-edit{flex:1;min-width:0;}
.sm-selector{width:38px;height:32px;padding:0;border:1px solid var(--line-2);background:none;}
.sm-colores{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.sm-color{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;}
.sm-color.on{border-color:var(--text);box-shadow:0 0 0 2px var(--surface) inset;}
/* En el teléfono todo lo que se toca mide al menos 44 px (pase móvil). */
@media (pointer:coarse){
.ent-manija{width:44px;height:44px;left:-10px;}
.chk,.fld label.chk,.cap .fld label.chk{min-height:44px;}
.frm details.mas-datos summary{padding:12px 0;}
.menu-sem-i{padding:13px 12px;}
.sm-color{width:40px;height:40px;}
.sm-fila .btn.sm{min-height:44px;}
}
/* Interruptor obra / oficina. Va arriba del formulario y siempre visible:
cambia como se comportan fecha, hora y fotos. */
/* Los datos de la barra de arriba, corregibles en su sitio. La marca es
discreta: es un dato que se lee todo el dia, no un formulario. */
.bc-ed{outline:none;border-bottom:1px dashed rgba(205,175,94,.5);cursor:text;}
.bc-ed:hover{background:rgba(205,175,94,.12);}
.bc-ed:focus{background:rgba(205,175,94,.2);border-bottom-color:var(--gold);}
/* Campo de varios nombres (proveedores, clientes) en el alta. */
.var-add{display:flex;gap:7px;align-items:center;}
.var-add input{flex:1;min-width:0;}
.var-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px;}
.var-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);
border:1px solid var(--line);border-radius:999px;padding:3px 6px 3px 11px;font-size:var(--t-base);}
.var-chip button{border:none;background:none;cursor:pointer;
color:var(--text-3);padding:0 3px;display:inline-flex;align-items:center;}
.var-chip button:hover{color:var(--critico);}
.pend-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px;}
.pend-t{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);
padding:7px 12px;font:inherit;font-size:var(--t-base);color:var(--text-2);cursor:pointer;}
.pend-t:hover{border-color:var(--gold);}
.pend-t.on{background:var(--gold);border-color:var(--gold);color:#1b1b1b;font-weight:600;}
.pend-t i{font-style:normal;font-size:var(--t-xs);opacity:.7;}
.modo-cap{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.modo-b{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
background:var(--surface);border-radius:999px;padding:6px 13px;font:inherit;
font-size:var(--t-base);color:var(--text-2);cursor:pointer;}
.modo-b:hover{border-color:var(--gold);}
.modo-b.on{background:var(--gold);border-color:var(--gold);color:#1b1b1b;font-weight:600;}
.modo-b svg{width:14px;height:14px;}
.modo-h{font-size:var(--t-sm);color:var(--text-3);flex:1 1 240px;min-width:0;}
/* Zona de fotos cuando se le arrastra algo encima. */
.evd.soltar{outline:2px dashed var(--gold);outline-offset:3px;}
.mf-subir{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--line);}
.cons-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:12px;margin-bottom:14px;}
.cons-fila{cursor:pointer;}
.cons-fila:hover{background:var(--surface-2);}
.sb-subs .sb-item{font-size:var(--t-base);}
.sb-subs .sb-padre{border-bottom:1px solid var(--line);}
.vi-firma{border-top:1px solid var(--line);margin-top:12px;padding-top:11px;}
.vi-firma-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--t-base);}
.vi-firma-h .btn{margin-left:auto;}
.vi-firma-d{font-size:var(--t-sm);color:var(--text-2);margin-top:3px;padding-left:22px;}
/* «Datos de contacto» del reporte: una tarjeta por persona y, bajo el nombre, la
lista de las registradas que coinciden con lo que se escribe. */
.dc-modal{max-width:720px;width:96vw;max-height:92vh;overflow:auto;}
.dc-fila{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);
padding:10px 14px 0;margin-bottom:12px;}
.dc-fila-h{display:flex;justify-content:flex-end;margin-bottom:4px;}
.dc-busca{position:relative;}
.dc-sug{position:absolute;left:0;right:0;top:100%;z-index:30;margin-top:2px;max-height:250px;overflow:auto;
background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);
box-shadow:0 12px 30px rgba(20,19,16,.2);}
.dc-sug button{display:block;width:100%;text-align:left;border:0;background:none;
font:inherit;padding:9px 12px;cursor:pointer;}
.dc-sug button + button{border-top:1px solid var(--line);}
.dc-sug button:hover,.dc-sug button.on{background:var(--gold-soft);}
.dc-sug b{display:block;font-weight:600;color:var(--text);}
.dc-sug span{display:block;font-size:var(--t-sm);color:var(--text-2);}
/* Encabezado de carpeta: plegable y destino al arrastrar. */
.ini-carp-h{display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none;
padding:9px 14px 6px;font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--text-tertiary);}
.ini-carp-h:hover{color:var(--text-2);background:var(--surface-2);}
.ini-carp-fl{display:flex;align-items:center;transition:transform .15s;flex:0 0 auto;}
.ini-carp-fl svg{width:13px;height:13px;}
.ini-carp-h.cerrada .ini-carp-fl{transform:rotate(-90deg);}
.ini-carp-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ini-carp-h i{font-style:normal;opacity:.6;margin-left:auto;}
/* Al arrastrarle un proyecto —o una carpeta— encima. */
.ini-carp-h.carp-destino{background:var(--gold-soft);color:var(--gold-ink);
box-shadow:inset 2px 0 0 0 var(--gold);}
.ini-carp-h.vacia{opacity:.6;}
.ini-carp-vacia{padding:7px 14px 10px 32px;font-size:var(--t-sm);font-style:italic;
color:var(--text-tertiary);}
.ini-row.arrastrando{opacity:.45;}
/* CARPETAS DENTRO DE CARPETAS: la sangría es lo único que dice quién cuelga
de quién, así que se marca también con una guía vertical. Se topa en el
nivel 5 para que un acomodo hondo no empuje el nombre fuera de un teléfono. */
.ini-carp-h,.ini-carp-c{--carp-sangria:calc(min(var(--carp-nivel,0),5)*18px);}
.ini-carp-h{position:relative;padding-left:calc(14px + var(--carp-sangria));}
.ini-carp-c{padding-left:var(--carp-sangria);}
/* Una guía fina a la izquierda de lo anidado: con tres niveles la sangría
sola se lee mal, y una línea es más barata que un árbol de conectores. */
.ini-carp-h[data-carp-padres]:not([data-carp-padres=""])::before{
content:"";position:absolute;top:2px;bottom:2px;width:1px;background:var(--line-2);
left:calc(6px + var(--carp-sangria));}
.ini-carp-h.arrastrando{opacity:.45;}
.ini-carp-sub{font-size:var(--t-xs);font-weight:600;letter-spacing:.04em;
text-transform:none;opacity:.7;margin-left:8px;}
@media (max-width:720px){
.ini-carp-h,.ini-carp-c{--carp-sangria:calc(min(var(--carp-nivel,0),4)*12px);}
}
.ini-carps{display:flex;gap:6px;flex-wrap:wrap;align-items:center;
padding:10px 14px;border-bottom:1px solid var(--line);}
.ini-carp{background:var(--surface-2);border:1px solid var(--line);
border-radius:999px;padding:4px 11px;font:inherit;font-size:var(--t-sm);
color:var(--text-2);cursor:pointer;display:flex;align-items:center;gap:6px;}
.ini-carp:hover{border-color:var(--gold);color:var(--text);}
.ini-carp.on{background:var(--gold);border-color:var(--gold);color:#1b1b1b;font-weight:600;}
.ini-carp i{font-style:normal;font-size:var(--t-xs);opacity:.72;}
.ini-rows-lb i{font-style:normal;opacity:.6;}
.ini-busca{padding:11px 14px;border-bottom:1px solid var(--line);}
.ini-busca input{width:100%;background:var(--surface-2);border:1px solid var(--line);
border-radius:var(--r-sm);padding:6px 10px;font-size:var(--t-base);color:var(--text);}
.ini-busca input:focus{outline:none;border-color:var(--gold);}
.ini-rows{overflow-y:auto;max-height:520px;padding-bottom:6px;}
.ini-rows-lb{padding:10px 14px 5px;font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--text-tertiary);}
.ini-row{width:100%;background:none;border:none;border-left:3px solid transparent;
font:inherit;color:inherit;text-align:left;cursor:pointer;padding:9px 14px;
display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.ini-row:hover{background:var(--surface-2);}
.ini-row.on{background:var(--bg);border-left-color:var(--gold);}
.ini-row-n{font-size:var(--t-base);letter-spacing:-.01em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ini-row.on .ini-row-n{font-weight:600;}
.ini-row-s{font-size:var(--t-xs);color:var(--text-tertiary);margin-top:1px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ini-row-f{font-size:var(--t-xs);color:var(--text-tertiary);flex:none;
font-variant-numeric:tabular-nums;}
.ini-row-vacio{padding:22px 14px;font-size:var(--t-base);color:var(--text-3);}
.ini-prev{padding:24px 26px 26px;min-width:0;}
.ini-prev-lb{font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--gold-ink);}
.ini-prev-n{font-family:var(--slab);font-size:24px;font-weight:600;
letter-spacing:-.02em;margin-top:6px;line-height:1.2;}
.ini-prev-m{font-size:var(--t-base);color:var(--text-2);margin-top:4px;line-height:1.55;}
.ini-prev-notas{font-size:var(--t-base);color:var(--text-3);margin-top:8px;line-height:1.6;max-width:620px;}
.ini-av{margin-top:20px;}
.ini-av-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px;}
.ini-av-h span{font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--text-3);}
.ini-av-h b{font-size:var(--t-base);font-weight:600;font-variant-numeric:tabular-nums;}
.ini-av-t{height:8px;border-radius:4px;background:var(--surface-3);
box-shadow:var(--hundido-sm);overflow:hidden;}
.ini-av-t i{display:block;height:100%;background:var(--gold);border-radius:4px;}
.ini-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:20px 0;}
.ini-k{background:var(--bg);border-radius:var(--r);padding:13px 14px;box-shadow:var(--relieve-sm);}
.ini-k span{display:block;font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--gold-ink);}
.ini-k b{display:block;font-family:var(--slab);font-size:24px;font-weight:600;
letter-spacing:-.02em;margin-top:3px;font-variant-numeric:tabular-nums;}
.ini-sec-lb{font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--text-3);margin-bottom:8px;}
.ini-reps{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:20px;}
.ini-rep{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:9px 13px;border-bottom:1px solid var(--line);font-size:var(--t-base);}
.ini-rep:last-child{border-bottom:none;}
.ini-rep i{font-style:normal;font-weight:600;flex:none;font-size:var(--t-sm);}
.ini-rep-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2);}
.ini-acts{display:flex;gap:9px;flex-wrap:wrap;align-items:center;}
.ini-borrar{margin-left:auto;}
.ini-cargando{font-size:var(--t-base);color:var(--text-tertiary);padding:14px 0;}
@media (max-width:980px){
.ini-panes{grid-template-columns:1fr;}
.ini-list{border-right:none;border-bottom:1px solid var(--line);}
.ini-rows{max-height:280px;}
}
/* --- Cronograma: rectas y planas --- */
.g2{border-radius:var(--r);border-color:var(--border-strong);}
.gt-bar{border-radius:3px;}
.g2-etapa,.g2-cal .g2-etapa{background-color:#E9E9E5;}
.cr-lb-tira{background:var(--surface-2);border-left:3px solid var(--gold);}
.drop-pop{border-radius:var(--r);}
/* --- Captura en campo: PLANA y de maximo contraste, sin relieve --- */
.cap .fld input,.cap .fld select,.cap .fld textarea,.cap .cbx-in{
box-shadow:none;background:#fff;border:1px solid #575852;border-radius:var(--r);}
.cap .fld input:focus,.cap .fld textarea:focus,.cap .cbx-in:focus{
box-shadow:0 0 0 3px var(--gold-soft);border-color:var(--gold-deep);}
.cap .btn{box-shadow:none;background:#fff;border:1px solid #575852;color:#121212;}
.cap .btn.primary{background:var(--gold);border-color:var(--gold-deep);}
.cap .fld label{color:#2B2B2B;font-size:var(--t-sm);}
.evd{border-width:1px;border-radius:var(--r);}
.evd-b{border-radius:var(--r);border-color:#575852;}
.thumb{border-radius:var(--r-xs);box-shadow:inset 0 0 0 1px #A9A296;}
/* --- Dashboard: se unifica al sistema nuevo (ya sin tipografia aparte) --- */
#sec-dash{font-family:var(--font);}
#sec-dash .panel-t{font-family:var(--slab);font-size:16px;font-weight:600;
letter-spacing:0;text-transform:none;color:var(--text);}
#sec-dash .hero-lb,#sec-dash .pcard-lb{letter-spacing:.14em;color:var(--gold-ink);}
#sec-dash table.data.va thead th{background:#F8F8F6;color:#7A7B72;
border-bottom:1.5px solid var(--gold);letter-spacing:.12em;}
#sec-dash .resumen-ejec{background:var(--gold-soft);border-color:var(--gold-light);
box-shadow:none;}
/* --- Cronograma: columnas de dato como tipografia, no como bloques --- */
.g2-tit{color:#7A7B72;font-weight:700;letter-spacing:.1em;font-size:var(--t-micro);}
.gt-name{font-size:var(--t-sm);font-weight:500;}
.g2-c3,.g2-c4,.g2-c5,.g2-c6,.g2-c7{font-variant-numeric:tabular-nums;
font-feature-settings:"tnum";font-size:var(--t-xs);color:var(--text-2);}
.g2-c3 b,.g2-c4 b,.g2-c5 b,.g2-c6 b,.g2-c7 b{font-weight:600;color:var(--text);}
.g2-r .est{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-xs);
font-weight:700;letter-spacing:.02em;background:none;border:0;padding:0;}
.g2-r .est::before{content:"";width:6px;height:6px;border-radius:50%;
background:currentColor;flex:none;}
.gt-crit{gap:4px;font-size:var(--t-micro);letter-spacing:.06em;}
.gt-pct{font-size:9px;letter-spacing:.02em;font-variant-numeric:tabular-nums;
text-shadow:0 1px 1px rgba(0,0,0,.3);}
.gt-val{font-variant-numeric:tabular-nums;font-size:var(--t-micro);font-weight:600;}
.g2-hoy{border-left:1.5px solid var(--gold-deep);}
.g2-hoy span{color:var(--gold-ink);letter-spacing:.1em;}
.gt-leyenda{color:var(--text-3);font-size:var(--t-xs);letter-spacing:.04em;}
/* --- Calendario de rango y revision: hueso hundido --- */
.rg{background:var(--bg);border:none;box-shadow:var(--relieve-sm);}
.rg-h b{font-family:var(--slab);font-weight:600;letter-spacing:0;}
.rg-nav{background:var(--bg);border-color:transparent;box-shadow:var(--relieve-sm);}
.rg-nav:hover{box-shadow:var(--relieve-alto);}
.rg-nav:active{box-shadow:var(--hundido-sm);}
.rg-sem span{letter-spacing:.08em;color:#898A81;}
.rg-d{background:transparent;font-variant-numeric:tabular-nums;}
.rg-d.nohabil{background:var(--surface-3);box-shadow:var(--hundido-sm);}
.rg-pie{color:var(--text-2);font-variant-numeric:tabular-nums;}
.rev-item{border-top-color:var(--line-2);}
.rev-item.dup{border-left-width:2px;}
/* --- Etiquetas de estado: color en la letra, no en la caja --- */
.chip,.tag,.pill{letter-spacing:.05em;font-weight:700;font-size:var(--t-xs);}
/* ============================================================
MOVIMIENTO Y RETROALIMENTACION (parte 1)
Una sola curva y tres duraciones para toda la app: si cada cosa se
mueve a su ritmo, la interfaz se siente hecha por pedazos.
============================================================ */
:root{
--ease:cubic-bezier(.22,.75,.28,1);
--dur:230ms; --dur-corta:150ms; --dur-larga:340ms;
}
/* --- Clic: se hunde y baja de escala. El relieve ya estaba, faltaba usarlo. --- */
.btn,.sb-item,.sb-btn,.sb-cerrar,.seg,.chip,.pcard,.rg-d,.rg-nav,.evd-b,.tipo-card{
transition:background var(--dur-corta) var(--ease),
border-color var(--dur-corta) var(--ease),
box-shadow var(--dur) var(--ease),
color var(--dur-corta) var(--ease),
transform 90ms var(--ease);}
.btn:active,.sb-btn:active,.sb-cerrar:active,.seg:active,.rg-nav:active{
transform:scale(.98);box-shadow:var(--hundido-sm);}
.sel-body .btn:active,.sel-h .btn:active,.topbar .btn:active{
transform:scale(.98);box-shadow:var(--hundido-sm);}
.pcard:active{transform:scale(.995);box-shadow:var(--hundido-sm);}
.sb-item:hover{transform:translateX(2px);}
table.data tbody tr{transition:background var(--dur-corta) var(--ease);}
/* --- Entrada en cascada: encabezado, cifras, tabla. --- */
.sec.on{animation:none;}
.sec.on>*{animation:cascIn var(--dur-larga) var(--ease) both;}
.sec.on>*:nth-child(1){animation-delay:0ms;}
.sec.on>*:nth-child(2){animation-delay:55ms;}
.sec.on>*:nth-child(3){animation-delay:105ms;}
.sec.on>*:nth-child(4){animation-delay:150ms;}
.sec.on>*:nth-child(5){animation-delay:190ms;}
.sec.on>*:nth-child(n+6){animation-delay:225ms;}
@keyframes cascIn{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:translateY(0);}}
.grid-kpi>*{animation:cascIn var(--dur-larga) var(--ease) both;}
.grid-kpi>*:nth-child(1){animation-delay:60ms;}
.grid-kpi>*:nth-child(2){animation-delay:110ms;}
.grid-kpi>*:nth-child(3){animation-delay:160ms;}
.grid-kpi>*:nth-child(4){animation-delay:205ms;}
.grid-kpi>*:nth-child(n+5){animation-delay:245ms;}
table.data tbody tr:nth-child(-n+14){animation:filaIn 260ms var(--ease) both;}
table.data tbody tr:nth-child(1){animation-delay:40ms;}
table.data tbody tr:nth-child(2){animation-delay:70ms;}
table.data tbody tr:nth-child(3){animation-delay:95ms;}
table.data tbody tr:nth-child(4){animation-delay:118ms;}
table.data tbody tr:nth-child(5){animation-delay:138ms;}
table.data tbody tr:nth-child(6){animation-delay:156ms;}
table.data tbody tr:nth-child(n+7){animation-delay:172ms;}
@keyframes filaIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
/* --- Cronograma: la barra crece sin deformar el texto de adentro. --- */
.gt-bar,.gt-hito{animation:barraCrece 520ms var(--ease) both;}
@keyframes barraCrece{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}
.cr-hero-track i{transition:width 620ms var(--ease);}
.gauge-arc{transition:stroke-dashoffset 720ms var(--ease);}
/* --- Destello: la fila o tarjeta que acaba de guardarse. --- */
@keyframes destello{
0%{box-shadow:inset 0 0 0 2px var(--gold);background-color:var(--gold-soft);}
100%{box-shadow:inset 0 0 0 0 rgba(205,175,94,0);background-color:transparent;}}
.destella{animation:destello 1100ms var(--ease) both;}
/* --- Aviso flotante: sube, se queda, se va solo. --- */
.toast{bottom:26px;padding:12px 18px 12px 15px;border-radius:var(--r);
border-left:3px solid var(--gold);
box-shadow:0 14px 34px rgba(24,22,16,.34);
transform:translateX(-50%) translateY(14px) scale(.98);
transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
font-weight:600;letter-spacing:.01em;}
.toast.show{transform:translateX(-50%) translateY(0) scale(1);}
.toast.err{border-left-color:#7A2020;}
/* --- Velo de carga: dice que esta pasando. --- */
#app-loading{background:rgba(244,244,242,.80);backdrop-filter:blur(3px);
animation:bdIn var(--dur-corta) var(--ease) both;}
.al-box{gap:16px;}
.al-spin{border-color:var(--line-2);border-top-color:var(--gold-deep);}
.al-txt{font-size:var(--t-base);letter-spacing:.02em;color:var(--text-2);
animation:respira 1.6s ease-in-out infinite;}
@keyframes respira{0%,100%{opacity:1;}50%{opacity:.55;}}
/* --- Estado de guardado: pastilla, no texto suelto. --- */
.sync{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;
border-radius:999px;background:var(--bg);box-shadow:var(--relieve-sm);
font-size:var(--t-sm);font-weight:600;letter-spacing:.03em;color:var(--text-2);
transition:box-shadow var(--dur) var(--ease),color var(--dur) var(--ease);}
.sync .dot{transition:background var(--dur) var(--ease);}
.sync.pend{color:var(--checar);}
/* --- Modal: entra con cuerpo. --- */
.modal{animation:modalIn var(--dur-larga) var(--ease) both;}
.backdrop{animation:bdIn var(--dur-corta) var(--ease) both;backdrop-filter:blur(2px);}
/* --- El selector: la entrada a la app tambien respira. --- */
.sel-grid>*{animation:cascIn var(--dur-larga) var(--ease) both;}
.sel-grid>*:nth-child(1){animation-delay:40ms;}
.sel-grid>*:nth-child(2){animation-delay:85ms;}
.sel-grid>*:nth-child(3){animation-delay:125ms;}
.sel-grid>*:nth-child(n+4){animation-delay:160ms;}
/* ============================================================
A MANO Y A TECLA (parte 2)
============================================================ */
/* --- Selector de proyecto en el rail --- */
.rp-proy{display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;
font:inherit;color:var(--gold-ink);background:transparent;padding:3px 8px;
border-radius:var(--r-xs);letter-spacing:.16em;text-transform:uppercase;
font-weight:700;font-size:var(--t-xs);max-width:42vw;
transition:background var(--dur-corta) var(--ease);}
.rp-proy:hover{background:rgba(205,175,94,.16);}
.rp-proy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;}
.rp-proy svg{width:12px;height:12px;flex:none;opacity:.7;
transition:transform var(--dur) var(--ease);}
.rp-proy[aria-expanded="true"] svg{transform:rotate(180deg);}
.rp-pop{position:fixed;z-index:60;min-width:288px;max-width:min(94vw,380px);
background:var(--bg);border-radius:var(--r);box-shadow:var(--relieve-alto);
padding:7px;max-height:60vh;overflow:auto;
animation:cascIn 200ms var(--ease) both;}
.rp-pop.hide{display:none;}
.rp-pop-t{padding:8px 11px 6px;font-size:var(--t-micro);font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--text-3);}
.rp-op{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;
border:0;background:transparent;cursor:pointer;font:inherit;padding:9px 11px;
border-radius:var(--r-xs);color:var(--text);
transition:background var(--dur-corta) var(--ease);}
.rp-op:hover,.rp-op.foco{background:var(--surface-3);}
.rp-op b{font-size:var(--t-base);font-weight:600;letter-spacing:0;text-transform:none;}
.rp-op span{font-size:var(--t-xs);color:var(--text-3);letter-spacing:0;text-transform:none;}
.rp-op.on{box-shadow:inset 0 0 0 1px var(--gold);}
.rp-op.on b{color:var(--gold-ink);}
/* --- Boton flotante: accion principal de la seccion + su menu --- */
.fab{position:fixed;right:26px;bottom:26px;z-index:45;display:flex;align-items:center;gap:1px;}
.fab.hide{display:none;}
.fab-main,.fab-mas{border:0;cursor:pointer;font:inherit;font-weight:700;
background:var(--gold);color:#231E0C;box-shadow:0 10px 26px rgba(24,22,16,.3);
transition:transform 110ms var(--ease),box-shadow var(--dur) var(--ease),
background var(--dur-corta) var(--ease);}
.fab-main{display:flex;align-items:center;gap:9px;height:52px;padding:0 20px;
border-radius:26px 6px 6px 26px;font-size:var(--t-md);letter-spacing:.01em;}
.fab-mas{width:44px;height:52px;border-radius:6px 26px 26px 6px;
display:grid;place-items:center;}
.fab-main svg,.fab-mas svg{width:19px;height:19px;}
.fab-main:hover,.fab-mas:hover{background:var(--gold-light);
box-shadow:0 14px 32px rgba(24,22,16,.36);}
.fab-main:active,.fab-mas:active{transform:scale(.97);}
.fab-solo .fab-main{border-radius:26px;}
.fab-menu{position:fixed;right:26px;bottom:88px;z-index:46;min-width:246px;
background:var(--bg);border-radius:var(--r);box-shadow:var(--relieve-alto);
padding:7px;animation:cascIn 200ms var(--ease) both;}
.fab-menu.hide{display:none;}
.fab-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
border:0;background:transparent;cursor:pointer;font:inherit;font-size:var(--t-base);
font-weight:500;padding:10px 11px;border-radius:var(--r-xs);color:var(--text);
transition:background var(--dur-corta) var(--ease);}
.fab-menu button:hover{background:var(--surface-3);}
.fab-menu svg{width:16px;height:16px;flex:none;color:var(--gold-ink);}
@media (max-width:900px){ .fab{right:16px;bottom:16px;} .fab-menu{right:16px;bottom:78px;} }
/* En obra estorba: la captura ya tiene sus propios botones grandes. */
.cap .fab,body.en-campo .fab{display:none !important;}
/* --- Punto de guardado por bloque --- */
.blk-dot{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);
font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);}
.blk-dot::before{content:"";width:7px;height:7px;border-radius:50%;
background:var(--bueno);flex:none;transition:background var(--dur) var(--ease);}
.blk-dot.pend{color:var(--checar);}
.blk-dot.pend::before{background:var(--checar);animation:pulse 1.1s ease-in-out infinite;}
/* --- Paleta de comandos (Ctrl+K) --- */
.cmd-bd{position:fixed;inset:0;z-index:9200;background:rgba(38,36,31,.5);
backdrop-filter:blur(3px);display:flex;align-items:flex-start;
justify-content:center;padding:12vh 16px 16px;
animation:bdIn var(--dur-corta) var(--ease) both;}
.cmd-bd.hide{display:none;}
.cmd{width:100%;max-width:620px;background:var(--bg);border-radius:var(--r);
box-shadow:0 26px 64px rgba(20,19,16,.4);overflow:hidden;
animation:modalIn var(--dur-larga) var(--ease) both;}
.cmd-in{width:100%;border:0;background:var(--surface-2);box-shadow:var(--hundido-sm);
padding:17px 20px;font:inherit;font-size:15.5px;color:var(--text);outline:0;}
.cmd-in::placeholder{color:var(--text-3);}
.cmd-lista{max-height:52vh;overflow:auto;padding:7px;}
.cmd-gr{padding:9px 11px 5px;font-size:var(--t-micro);font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--text-3);}
.cmd-it{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
border:0;background:transparent;cursor:pointer;font:inherit;font-size:var(--t-md);
padding:10px 11px;border-radius:var(--r-xs);color:var(--text);
transition:background var(--dur-corta) var(--ease);}
.cmd-it:hover,.cmd-it.foco{background:var(--surface-3);}
.cmd-it.foco{box-shadow:inset 0 0 0 1px var(--gold);}
.cmd-it svg{width:16px;height:16px;flex:none;color:var(--gold-ink);}
.cmd-it .cmd-tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cmd-it .cmd-sub{font-size:var(--t-xs);color:var(--text-3);flex:none;}
.cmd-vacio{padding:26px 14px;text-align:center;font-size:var(--t-base);color:var(--text-3);}
.cmd-pie{display:flex;gap:16px;flex-wrap:wrap;padding:10px 18px;
border-top:1px solid var(--line-2);font-size:var(--t-xs);color:var(--text-3);
letter-spacing:.04em;}
kbd{font-family:inherit;font-size:var(--t-micro);font-weight:700;padding:2px 6px;
border-radius:4px;background:var(--surface-3);box-shadow:var(--hundido-sm);
color:var(--text-2);letter-spacing:.06em;}
/* --- Tabla de atajos (?) --- */
.atj{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 22px;}
.atj div{display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--t-base);color:var(--text-2);}
/* ============================================================
MODO OSCURO (automatico, segun el sistema operativo)
Solo el chasis y las superficies de dato. La captura en campo y las
hojas de documento (.doc-hoja) se quedan claras a proposito: una son
papel, la otra se usa a pleno sol.
============================================================ */
/* ============================================================
MODO OSCURO — por atributo, no por @media. public/assets/tema.js pone
data-tema en ANTES del primer pintado: «sistema» (default) sigue
a prefers-color-scheme, «claro» y «oscuro» lo fijan por dispositivo.
Solo el chasis y las superficies de dato; la captura en campo y las
hojas de documento se quedan claras a propósito.
============================================================ */
:root[data-tema="oscuro"]{
/* Tono C, casi negro (Sergio, 24 sep): el matiz hueso/olivo del paquete con menos luz. Cada fondo,
superficie y línea es el del paquete con L − 0.12 en OKLab y el croma en la misma proporción;
las letras, el dorado y los colores de estado de cifras y puntos son los del paquete. */
--bg:#1A1813; --surface:#221F1A; --surface-2:#27251F; --surface-3:#13110D;
--line:#2E2B25; --line-2:#3F3C33; --border-strong:#3F3C33;
--text:#F2EEE2; --text-2:#CFC8B4; --text-3:#B8B09A; --text-tertiary:#B8B09A;
--text-secondary:#CFC8B4;
--perla:#221F1A;
/* Oro: sube de luz para seguir leyendose sobre tierra oscura. */
--gold:#D9C184; --gold-light:#E9DCB4; --gold-deep:#B89A4E; --gold-soft:#2C2615;
--gold-ink:#D9C184;
--olive:#A9AFAF; --olive-deep:#C4C9C8;
/* Semaforo: letra clara, fondo apenas tenido. Sin esto los avisos
quedaban como manchas claras con texto invisible. */
--critico:#EE9C93; --critico-deep:#F6B9B1; --critico-bg:#261A16;
--checar:#E6AC6C; --checar-bg:#241C10;
--ajustado:#DDC271; --ajustado-bg:#231E0F;
--bueno:#84CFA1; --bueno-bg:#18211A;
--excelente:#96D6B3; --excelente-bg:#161F19;
--neutro:#BAB4A1; --neutro-bg:#22201B;
--info:#9BBCE4; --info-bg:#181D23;
--dato:#8CC7C9; --dato-bg:#141E1F;
/* Marcas manuales en oscuro: la letra es la de la tabla 9.6 del documento rector; el fondo, el de
la tabla con la misma regla del tono C. */
--mk-amarillo:#E0C46A; --mk-amarillo-bg:#292313;
--mk-azul:#9BBCE4; --mk-azul-bg:#151C24;
--mk-verde:#8FD0A6; --mk-verde-bg:#16201A;
--mk-rojo:#EE9C93; --mk-rojo-bg:#251614;
--mk-morado:#C4AEE6; --mk-morado-bg:#1E1924;
--chrome:#13110D; --hover-row:#25231C;
/* Los tonos que usan las reglas del tema oscuro de abajo: se cambian aquí, en un solo lugar. */
--os-tinta:#070603; --os-tinta-hover:#030201; --os-cinta:#13120E; --os-cinta-sep:#6B6555;
--os-sombra-tarjeta:rgba(16,14,10,.35); --os-realce:#2A2721; --os-realce-2:#312E27; --os-campo:#15130F;
--os-campo-foco:#1E1C17; --os-foco-halo:rgba(217,193,132,.22); --os-placeholder:#8E8877;
--os-sobre-oro:#2A2513; --os-sobre-rojo:#38120F; --os-resumen-borde:#463C1F;
--os-finde:#1B1914;
--os-wbs:#1F1D18; --os-marca:#463A16; --os-marca-texto:#F7F2E3; --os-velo-carga:rgba(4,4,3,.8);
--os-velo-busca:rgba(1,1,1,.62); --os-oro-tenue:rgba(217,193,132,.18); --os-captura:#110F0C;
--os-captura-foco:#191712;
/* Las superficies oscuras que en claro también son oscuras: el visor de documentos, la barra del
modo enfoque y el riel de la tableta. */
--os-visor:#161512; --os-enfoque:#080807;
/* Navegación 2a e Inicio en oscuro: el riel y las pistas, con el tono C de la tinta. */
--gold-on:#231E0C;
--riel-fondo:#080807; --riel-realce:#171613; --riel-texto:#B7B3A8; --riel-tenue:#8C887C;
--dm-r0:#D9C184; --dm-r1:#A3ADAF; --dm-r2:#7C888A; --dm-r3:#C9C1AC;
--dm-f0:#231E0C; --dm-f1:#231E0C; --dm-f2:#FFFFFF; --dm-f3:#231E0C;
--riel-claro:#F0EEE7; --riel-linea:rgba(255,255,255,.09); --riel-tira:rgba(255,255,255,.16);
--riel-dentro:rgba(255,255,255,.14); --riel-cuenta:#8C6A1E; --riel-aviso:#E6AC6C; --riel-scroll:#272521;
--cuenta-oro:#CDAF5E; --cuenta-alerta:#B23B3B; --pestana-x-hover:rgba(140,136,124,.22);
--pista-fondo:#080807; --pista-texto:#EAE8E1; --pista-borde:#2E2B25; --velo-recorrido:rgba(10,9,7,.28);
--oscuro-fondo:#080807;
--sombra-globo:0 8px 24px rgba(20,19,16,.28); --sombra-lista:0 18px 44px rgba(20,19,16,.22);
--sombra-alza:0 6px 18px rgba(35,35,32,.10); --sombra-pista:0 18px 44px rgba(35,35,32,.25);
--sombra-aviso:0 8px 24px rgba(20,19,16,.2);
--elev-2:0 6px 16px rgba(0,0,0,.45);
--elev-3:0 18px 44px rgba(0,0,0,.6);
color-scheme:dark;
}
html[data-tema="oscuro"],:root[data-tema="oscuro"] body,:root[data-tema="oscuro"] input,:root[data-tema="oscuro"] select,:root[data-tema="oscuro"] textarea,:root[data-tema="oscuro"] button{color-scheme:dark;}
/* Lo oscuro en los dos temas, con el tono C en oscuro: el visor de documentos, la barra del modo
enfoque y el riel angosto de la tableta. */
:root[data-tema="oscuro"] #docview{background:var(--os-visor);}
:root[data-tema="oscuro"] body.enfoque .enf-barra{background:var(--os-enfoque);}
@media (min-width:721px) and (max-width:900px){
:root[data-tema="oscuro"] .rail{background:var(--riel-fondo);}
:root[data-tema="oscuro"] .rail .rail-b:hover,:root[data-tema="oscuro"] .rail .rail-b:focus-visible,:root[data-tema="oscuro"] .rail .rail-b.on{background:var(--riel-realce);}
:root[data-tema="oscuro"] .rail .rail-b.primary{background:var(--gold);}
:root[data-tema="oscuro"] .rail .rail-b.primary:hover,:root[data-tema="oscuro"] .rail .rail-b.primary:focus-visible{background:var(--gold-light);}
:root[data-tema="oscuro"] .rail .rail-b .bell-n{box-shadow:0 0 0 2px var(--riel-fondo);}
}
/* Chasis */
:root[data-tema="oscuro"] .sidebar{background:var(--surface-3);}
:root[data-tema="oscuro"] .sb-brand,:root[data-tema="oscuro"] .sb-foot{border-color:var(--line);}
:root[data-tema="oscuro"] .sb-brand .n,:root[data-tema="oscuro"] .sb-who{color:var(--text);}
:root[data-tema="oscuro"] .sb-item{color:var(--text-2);}
:root[data-tema="oscuro"] .sb-item:hover,:root[data-tema="oscuro"] .sb-btn:hover,:root[data-tema="oscuro"] .sb-sub button:hover,:root[data-tema="oscuro"] .sb-cerrar:hover{
background:var(--hover-row);color:var(--text);}
:root[data-tema="oscuro"] .sb-item.on{background:var(--surface-3);box-shadow:var(--hundido);color:var(--gold-ink);}
:root[data-tema="oscuro"] .sb-btn{color:var(--text-2);}
:root[data-tema="oscuro"] .sb-btn.gold{background:var(--os-tinta);color:var(--gold-light);}
:root[data-tema="oscuro"] .sb-obra-chip{background:var(--os-tinta);color:var(--gold-light);}
:root[data-tema="oscuro"] .sb-btn.gold:hover{background:var(--os-tinta-hover);color:var(--gold-light);}
:root[data-tema="oscuro"] .railp{background:var(--os-cinta);border-bottom-color:var(--line);color:var(--text-3);}
:root[data-tema="oscuro"] .railp em{color:var(--os-cinta-sep);}
:root[data-tema="oscuro"] .topbar{background:var(--bg);border-bottom-color:var(--line);}
/* Superficies de dato */
:root[data-tema="oscuro"] .card,:root[data-tema="oscuro"] .modal,:root[data-tema="oscuro"] .tbl-card{background:var(--surface);border-color:var(--line);}
:root[data-tema="oscuro"] .card{box-shadow:0 4px 14px var(--os-sombra-tarjeta);}
:root[data-tema="oscuro"] table.data thead th,:root[data-tema="oscuro"] #sec-dash table.data.va thead th{background:var(--os-realce);color:var(--text-2);}
:root[data-tema="oscuro"] table.data tbody tr:hover{background:var(--os-realce);}
:root[data-tema="oscuro"] .pulso-b{background:var(--surface-3);}
:root[data-tema="oscuro"] .evm{background:var(--line);}
/* Campos y botones */
:root[data-tema="oscuro"] .fld input,:root[data-tema="oscuro"] .fld select,:root[data-tema="oscuro"] .fld textarea,:root[data-tema="oscuro"] .sin,:root[data-tema="oscuro"] .in,:root[data-tema="oscuro"] .rg-campo{
background:var(--os-campo);color:var(--text);border-color:var(--line-2);}
:root[data-tema="oscuro"] .fld input:focus,:root[data-tema="oscuro"] .fld select:focus,:root[data-tema="oscuro"] .fld textarea:focus,:root[data-tema="oscuro"] .sin:focus,:root[data-tema="oscuro"] .in:focus{
background:var(--os-campo-foco);border-color:var(--gold-deep);box-shadow:0 0 0 3px var(--os-foco-halo);}
:root[data-tema="oscuro"] .fld input::placeholder,:root[data-tema="oscuro"] .fld textarea::placeholder{color:var(--os-placeholder);}
:root[data-tema="oscuro"] .btn{background:var(--surface);color:var(--text);border-color:var(--line-2);}
:root[data-tema="oscuro"] .btn:hover{background:var(--os-realce);border-color:var(--text-3);}
:root[data-tema="oscuro"] .btn.primary,:root[data-tema="oscuro"] .sel-body .btn.primary,:root[data-tema="oscuro"] .sel-h .btn.primary,:root[data-tema="oscuro"] .topbar .btn.primary{
background:var(--gold);border-color:var(--gold);color:var(--os-sobre-oro);}
:root[data-tema="oscuro"] .btn.primary:hover,:root[data-tema="oscuro"] .sel-body .btn.primary:hover,:root[data-tema="oscuro"] .sel-h .btn.primary:hover,:root[data-tema="oscuro"] .topbar .btn.primary:hover{background:var(--gold-light);border-color:var(--gold-light);color:var(--os-sobre-oro);}
:root[data-tema="oscuro"] .btn.dark{background:var(--os-tinta);border-color:var(--os-tinta);color:var(--gold-light);}
/* El rojo del tema oscuro es claro: la letra blanca de la version clara
se leería como un borrón. Igual que el primario, lleva letra oscura. */
:root[data-tema="oscuro"] .btn.danger{color:var(--os-sobre-rojo);}
:root[data-tema="oscuro"] .seg.on{background:var(--gold-soft);color:var(--gold-light);}
/* Avisos: fondo tenido, letra clara */
:root[data-tema="oscuro"] .alert,:root[data-tema="oscuro"] .msg{color:var(--text-2);}
:root[data-tema="oscuro"] .alert b,:root[data-tema="oscuro"] .msg b{color:var(--text);}
:root[data-tema="oscuro"] #sec-dash .resumen-ejec{background:var(--gold-soft);border-color:var(--os-resumen-borde);color:var(--text-2);}
/* Pantallas de entrada */
:root[data-tema="oscuro"] #selector,:root[data-tema="oscuro"] .sel-top{background:var(--surface-3);}
:root[data-tema="oscuro"] .sel-top{border-bottom-color:var(--line);}
:root[data-tema="oscuro"] .sel-grid .pcard.nuevo,:root[data-tema="oscuro"] .sel-vacio{background:var(--surface-3);border-color:var(--line-2);}
/* Cronograma */
:root[data-tema="oscuro"] .g2,:root[data-tema="oscuro"] .g2-fija,:root[data-tema="oscuro"] .g2-partida,:root[data-tema="oscuro"] .mb-row{background:var(--surface);}
:root[data-tema="oscuro"] .g2-h1,:root[data-tema="oscuro"] .g2-h2,:root[data-tema="oscuro"] .g2-bloque,:root[data-tema="oscuro"] .g2-cal .g2-bloque{background:var(--os-realce);}
:root[data-tema="oscuro"] .g2-etapa,:root[data-tema="oscuro"] .g2-cal .g2-etapa{background-color:var(--os-realce-2);}
:root[data-tema="oscuro"] .g2-cal .g2-h2 .gt-c.finde{background:var(--os-finde);}
:root[data-tema="oscuro"] .gt-name{color:var(--text);}
:root[data-tema="oscuro"] .g2-tit,:root[data-tema="oscuro"] .gt-leyenda{color:var(--text-3);}
:root[data-tema="oscuro"] .g2-c3,:root[data-tema="oscuro"] .g2-c4,:root[data-tema="oscuro"] .g2-c5,:root[data-tema="oscuro"] .g2-c6,:root[data-tema="oscuro"] .g2-c7{color:var(--text-2);}
:root[data-tema="oscuro"] .g2-c3 b,:root[data-tema="oscuro"] .g2-c4 b,:root[data-tema="oscuro"] .g2-c5 b,:root[data-tema="oscuro"] .g2-c6 b,:root[data-tema="oscuro"] .g2-c7 b{color:var(--text);}
:root[data-tema="oscuro"] .cr-lb-tira{background:var(--surface-2);}
:root[data-tema="oscuro"] .cr-hero-track{background:var(--surface-3);}
/* Cinta, árbol WBS y consola: los grises claros de arriba se leerían como
manchas blancas sobre tierra oscura, así que van a superficies del tema. */
:root[data-tema="oscuro"] .cr-ribbon,:root[data-tema="oscuro"] .cr-cons{background:var(--surface);}
:root[data-tema="oscuro"] .cr-rb-top,:root[data-tema="oscuro"] .cr-rb-tab.on,:root[data-tema="oscuro"] .cr-cons-h{background:var(--os-realce);}
:root[data-tema="oscuro"] .cr-rb-tab.on{background:var(--surface);}
:root[data-tema="oscuro"] .cr-rb-tab:hover{background:var(--os-realce-2);}
:root[data-tema="oscuro"] .g2-wbs{background:var(--os-wbs);}
:root[data-tema="oscuro"] .wbs-h,:root[data-tema="oscuro"] .wbs-filtros{background:var(--surface);}
:root[data-tema="oscuro"] .wbs-n:hover{background:var(--os-realce);}
:root[data-tema="oscuro"] .wbs-n.sel{background:var(--gold-soft);color:var(--gold-light);}
:root[data-tema="oscuro"] .cr-cons-n{background:var(--surface-3);color:var(--text-2);}
:root[data-tema="oscuro"] .cons-it:hover{background:var(--os-realce);}
:root[data-tema="oscuro"] .g2-r.g2-dinero{background:var(--os-realce);}
/* Calendario y revision */
:root[data-tema="oscuro"] .rg{background:var(--bg);}
:root[data-tema="oscuro"] .rg-d{color:var(--text);}
:root[data-tema="oscuro"] .rg-nav{background:var(--bg);color:var(--text-2);}
:root[data-tema="oscuro"] .rg-sem span{color:var(--text-3);}
:root[data-tema="oscuro"] .rev-item{border-top-color:var(--line-2);}
/* Texto secundario: al oscuro va por token, no por hex claro. */
:root[data-tema="oscuro"] .fld label,:root[data-tema="oscuro"] .sb-group,:root[data-tema="oscuro"] .sb-role,:root[data-tema="oscuro"] .sb-cerrar,:root[data-tema="oscuro"] .sel-sec-t,:root[data-tema="oscuro"] .sel-top .who span,:root[data-tema="oscuro"] .railp .rp-r,:root[data-tema="oscuro"] .sb-brand .s,:root[data-tema="oscuro"] .sb-item .bdg,:root[data-tema="oscuro"] .lg-sub,:root[data-tema="oscuro"] .sb-sub button,:root[data-tema="oscuro"] .panel-s,:root[data-tema="oscuro"] .tbl-count,:root[data-tema="oscuro"] .topbar .crumb,:root[data-tema="oscuro"] .hint,:root[data-tema="oscuro"] .rg-nota{color:var(--text-3);}
:root[data-tema="oscuro"] .lg-s,:root[data-tema="oscuro"] .kpi-s,:root[data-tema="oscuro"] .hero-s,:root[data-tema="oscuro"] .pcard-s,:root[data-tema="oscuro"] .rg-pie,:root[data-tema="oscuro"] .trow{color:var(--text-2);}
:root[data-tema="oscuro"] .sel-top .who b{color:var(--text);}
:root[data-tema="oscuro"] .sel-sec-n{background:var(--surface);border-color:var(--line-2);color:var(--text-2);}
:root[data-tema="oscuro"] .sb-sub button.on,:root[data-tema="oscuro"] .sb-item.on .bdg{color:var(--gold-light);}
:root[data-tema="oscuro"] mark{background:var(--os-marca);color:var(--os-marca-texto);}
:root[data-tema="oscuro"] #app-loading{background:var(--os-velo-carga);}
:root[data-tema="oscuro"] @keyframes destello{
0%{box-shadow:inset 0 0 0 2px var(--gold);background-color:var(--gold-soft);}
100%{box-shadow:inset 0 0 0 0 rgba(217,193,132,0);background-color:transparent;}}
:root[data-tema="oscuro"] .sync{background:var(--bg);color:var(--text-2);}
:root[data-tema="oscuro"] .rp-pop,:root[data-tema="oscuro"] .fab-menu,:root[data-tema="oscuro"] .cmd{background:var(--surface);}
:root[data-tema="oscuro"] .rp-op:hover,:root[data-tema="oscuro"] .rp-op.foco,:root[data-tema="oscuro"] .fab-menu button:hover,:root[data-tema="oscuro"] .cmd-it:hover,:root[data-tema="oscuro"] .cmd-it.foco{background:var(--os-realce);}
:root[data-tema="oscuro"] .cmd-in{background:var(--os-campo);}
:root[data-tema="oscuro"] .cmd-bd{background:var(--os-velo-busca);}
:root[data-tema="oscuro"] .rp-proy:hover{background:var(--os-oro-tenue);}
:root[data-tema="oscuro"] .fab-main,:root[data-tema="oscuro"] .fab-mas{color:var(--os-sobre-oro);}
/* --- Captura en campo: sus colores estaban fijos en hex oscuro, asi que
al bajar la luz el fondo se oscurecia y la letra se quedaba negra.
Aqui se invierte por completo, manteniendo el contraste alto que
necesita una pantalla que se usa a pleno sol. --- */
:root[data-tema="oscuro"] .cap .panel-t,:root[data-tema="oscuro"] .cap h1,:root[data-tema="oscuro"] .cap h2,:root[data-tema="oscuro"] .cap h3{color:var(--text);}
:root[data-tema="oscuro"] .cap .panel-s,:root[data-tema="oscuro"] .cap .hint,:root[data-tema="oscuro"] .cap .dic-est,:root[data-tema="oscuro"] .cap .evd-cont{color:var(--text-2);}
:root[data-tema="oscuro"] .cap .fld label{color:var(--text-2);}
:root[data-tema="oscuro"] .cap .fld input,:root[data-tema="oscuro"] .cap .fld select,:root[data-tema="oscuro"] .cap .fld textarea{
background:var(--os-captura);color:var(--text);border-color:var(--line-2);}
:root[data-tema="oscuro"] .cap .fld input::placeholder,:root[data-tema="oscuro"] .cap .fld textarea::placeholder{color:var(--text-3);}
:root[data-tema="oscuro"] .cap .fld input[readonly]{background:var(--surface-3);color:var(--text-2);}
:root[data-tema="oscuro"] .cap .fld input:focus,:root[data-tema="oscuro"] .cap .fld select:focus,:root[data-tema="oscuro"] .cap .fld textarea:focus{
background:var(--os-captura-foco);border-color:var(--gold-deep);}
:root[data-tema="oscuro"] .cbx-in{background:var(--os-captura);color:var(--text);border-color:var(--line-2);}
:root[data-tema="oscuro"] .cbx-in::placeholder{color:var(--text-3);}
:root[data-tema="oscuro"] .cbx-pop,:root[data-tema="oscuro"] .cbx-op{background:var(--surface);color:var(--text);}
:root[data-tema="oscuro"] .cbx-g{background:var(--surface-3);color:var(--text-3);}
:root[data-tema="oscuro"] .cbx-op{border-color:var(--line);}
:root[data-tema="oscuro"] .cbx-op:hover,:root[data-tema="oscuro"] .cbx-op.foco{background:var(--os-realce);}
:root[data-tema="oscuro"] .cbx-op .cb-cpt{color:var(--text);}
:root[data-tema="oscuro"] .cbx-op .cb-meta{color:var(--text-3);}
:root[data-tema="oscuro"] .cbx-op mark{background:var(--os-marca);color:var(--os-marca-texto);}
:root[data-tema="oscuro"] .cbx-sel{background:var(--surface-2);border-color:var(--line-2);}
:root[data-tema="oscuro"] .cbx-sel .cs-t{color:var(--text);}
:root[data-tema="oscuro"] .lim{color:var(--text-2);}
:root[data-tema="oscuro"] .lim b{color:var(--text);}
:root[data-tema="oscuro"] .exc-caja .ec-d{color:var(--text-2);}
:root[data-tema="oscuro"] .exc-caja .ec-b{color:var(--text);}
:root[data-tema="oscuro"] .cap textarea,:root[data-tema="oscuro"] .dic-in{background:var(--os-captura);color:var(--text);border-color:var(--line-2);}
:root[data-tema="oscuro"] .cap .btn{background:var(--surface);color:var(--text);border-color:var(--line-2);}
:root[data-tema="oscuro"] .cap .btn.primary,:root[data-tema="oscuro"] .cap .btn.primary:hover{color:var(--os-sobre-oro);}
:root[data-tema="oscuro"] .cap .per-chip,:root[data-tema="oscuro"] .cap .cbx-chip{background:var(--surface-2);color:var(--text);
border-color:var(--line-2);}
:root[data-tema="oscuro"] .cap .per-chip span,:root[data-tema="oscuro"] .cap .cbx-chip span{color:var(--text-3);}
:root[data-tema="oscuro"] .jp-paso.activo{background:var(--surface-2);}
:root[data-tema="oscuro"] .dic-est{color:var(--text-2);}
:root[data-tema="oscuro"] .cbx-vacio{color:var(--text-3);}
:root[data-tema="oscuro"] .cbx-sel .cs-x{color:var(--text-3);}
:root[data-tema="oscuro"] .evd-b{background:var(--surface);color:var(--text);border-color:var(--line-2);}
/* Papel se queda claro a proposito: es una hoja para imprimir. */
:root[data-tema="oscuro"] .doc-hoja,:root[data-tema="oscuro"] .mn-hoja{color-scheme:light;}
/* ================= E5-T2 · PASE MOVIL =================
Va al final del hoja a proposito: es la ultima palabra de la cascada, y
asi se lee de un jalon todo lo que cambia en telefono. TODO vive dentro
del @media — en escritorio no cambia un pixel.
La navegacion ya estaba resuelta y no se toca: el sidebar sale de
pantalla (translateX) y se abre con el boton "Menu". Las pantallas de
captura tampoco se rediseñan: son la referencia que ya funcionaba. */
@media (max-width:720px){
/* --- Objetivo tactil: 44px es lo que el pulgar acierta sin ampliar --- */
/* .btn.sm se lista aparte porque son DOS clases: le gana en especificidad
a un `.btn` suelto por mucho que este mas abajo, y se quedaba en 40px. */
.btn,.btn.sm,.sb-item,.sb-btn,.sb-sub button,.cv-t,.seg,.modo-b,.ini-tab,.ini-row,.rp-proy,
.cr-rb-tab,.ftab,.tipo-card,
input:not([type=checkbox]):not([type=radio]):not([type=range]),
select,textarea,button[type=submit]{min-height:44px;}
/* Los botones de solo icono cumplian el alto pero no el ancho (38px). */
.btn,.btn.sm{min-width:44px;}
/* El chip es la forma de responder un checklist: si no se acierta, no se
puede contestar la lista en obra, que es donde se contesta. */
.chip{min-height:44px;padding-top:9px;padding-bottom:9px;}
/* Captura NO se rediseña: es la pantalla movil que ya funcionaba y queda
como referencia. Lo unico que se toca es este 4px — `.cap .btn.sm` fija
40px con tres clases y le gana a cualquier `.btn` suelto. Subirlo a 44
no cambia la pantalla, solo la vuelve acertable con el pulgar; en
escritorio se queda en sus 40px de siempre. */
.cap .btn.sm{min-height:44px;}
/* Los iconos chicos (cerrar, quitar, ordenar columna) NO crecen de
tamano: crecen de AREA. Un ::after transparente les da los 44px de
blanco tactil sin engordar la tabla ni la cinta. */
.xbtn,.sb-cerrar,.crit-ayuda summary,.switch,.bell{position:relative;}
.xbtn::after,.sb-cerrar::after,.crit-ayuda summary::after,.switch::after,.bell::after{
content:'';position:absolute;top:50%;left:50%;
width:44px;height:44px;transform:translate(-50%,-50%);}
/* --- Accion principal al alcance del pulgar ---
El caso que lo obliga: en Captura, "Guardar reporte" quedaba a ~2750px
de scroll en un documento de ~3230. Se llenaba el reporte y despues
habia que recorrer la pagina entera para guardarlo. Pegado abajo se
alcanza en cualquier punto del formulario; sigue siendo el mismo boton
en el mismo sitio del documento, solo que no se va de la vista.
Se pega la FILA (.macts), no el boton: un sticky solo tiene rango
dentro de su padre, y el padre del boton mide 56px — pegarlo a el no
hacia nada. La fila, en cambio, vive dentro del formulario (~1240px),
que es el recorrido que hay que cubrir.
Acotado a .cap a proposito: .macts es la fila de acciones de TODOS los
modales, y ahi no se quiere ningun pegado. */
.cap .macts{position:sticky;bottom:12px;z-index:40;
background:var(--surface);padding:8px 0;
box-shadow:0 -8px 20px -8px rgba(24,22,16,.34);}
}
/* ============================================================
PRECISIÓN — la pasada visual con las referencias de Sergio (Wireframes
Kit y Finesse UI en Figma): «que se vea más técnico y preciso, tipo Excel
o SAP», respetando la marca: el dorado, la tinta, el hueso y sus fuentes
no se tocan. Lo que cambia es el trazo: líneas de 1 px en vez de relieve,
esquinas contenidas, tablas densas con encabezado de hoja y avisos con
barra de estado.
Va al final a propósito: manda sobre las capas anteriores redefiniendo
sus tokens (el relieve y el hundido son variables), así que las 41
superficies que los usan cambian juntas y en los dos temas.
============================================================ */
/* (Los tokens de esta capa —radios y anillos— viven ahora en la raíz.) */
/* Superficies de dato: blancas y con filo, sobre el fondo hueso. */
.card{box-shadow:none;}
.kpi,.hero,.cr-hero,.cr-m,.ini-k,.sel-grid .pcard,.ini-rc{background:var(--surface);}
.kpi{border:1px solid var(--line);box-shadow:none;}
.kpi-v{font-variant-numeric:tabular-nums;}
.sel-grid .pcard:hover,.ini-rc:hover{transform:none;}
/* Menú lateral: la opción activa se marca con una barra dorada, no hundida. */
.sb-item.on{background:var(--surface);box-shadow:inset 3px 0 0 var(--gold);}
.sb-item:hover{transform:none;}
/* Tablas como hoja: encabezado gris con línea fina y renglones compactos en
escritorio. En el teléfono se queda la densidad cómoda (44 px) que ya había. */
table.data thead th{background:var(--surface-2);color:var(--text-3);letter-spacing:.08em;
border-bottom:1px solid var(--line-2);}
table.data tbody tr:hover{background:color-mix(in srgb, var(--gold) 7%, var(--surface));}
table.data td.num,table.data th.num{font-variant-numeric:tabular-nums;}
@media (min-width:721px){
table.data thead th{padding:8px 12px;}
table.data tbody td{padding:8px 12px;}
}
/* Formulario fijo + registro (calidad): en laptop la tabla quedaba en ~500 px
y el hallazgo partido en renglones de dos palabras. Hasta 1280 px se apilan. */
@media (max-width:1280px){
.via-grid,.seg-grid,.int-grid,.cie-grid,.kpi-grid{grid-template-columns:1fr;}
}
#int-lista td:nth-child(4){min-width:240px;}
/* Campos de formulario: rellenos con filo inferior; al enfocar, el filo se
vuelve dorado (sin halo difuso). */
.fld input:not([type=checkbox]):not([type=radio]):not([type=file]),.fld select,.fld textarea{
background:var(--surface-2);border:1px solid var(--line);border-bottom-color:var(--line-2);
border-radius:var(--r-xs);box-shadow:none;}
.fld input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,.fld select:focus,.fld textarea:focus{
background:var(--surface);border-color:var(--line-2);border-bottom-color:var(--gold-deep);
box-shadow:inset 0 -1px 0 var(--gold-deep);}
/* Avisos en pantalla y toasts: barra de estado a la izquierda, sobre superficie. */
.alert{border-radius:var(--r-xs);}
.toast{background:var(--surface);color:var(--text);border:1px solid var(--line-2);
border-left:3px solid var(--gold);box-shadow:0 8px 24px rgba(35,35,32,.16);}
.toast.err{background:var(--surface);color:var(--text);border-left-color:var(--critico);}
/* ---------- INICIO: accesos en una barra angosta de iconos ----------
Sergio: los once botones de arriba «se veían feos». Viven en un riel de
60 px a la izquierda; al pasar el mouse (o con el teclado) el nombre sale
hacia enfrente. En el teléfono el riel es la barra de abajo, con nombre corto. */
#selector{padding-left:60px;}
.rail{position:fixed;top:0;left:0;bottom:0;width:60px;z-index:72;background:var(--ink);
display:flex;flex-direction:column;align-items:center;padding:12px 0;overflow-y:auto;}
.rail-g{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;width:100%;}
.rail-g+.rail-g{border-top:1px solid rgba(255,255,255,.09);}
.rail-pie{margin-top:auto;}
.rail .rail-b{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
border:0;border-radius:var(--r-sm);background:transparent;color:#B7B3A8;cursor:pointer;padding:0;box-shadow:none;flex:none;}
.rail .rail-b svg.i{width:18px;height:18px;stroke-width:1.7;}
/* En compu «Nuevo» es un «+» dorado, como en el tablero; en el teléfono sigue siendo el círculo de la barra. */
@media (min-width:901px){
#sel-rail .rail-b.primary{background:transparent;color:var(--gold);}
#sel-rail .rail-b.primary svg.i{width:20px;height:20px;stroke-width:2;}
#sel-rail .rail-b.primary:hover,#sel-rail .rail-b.primary:focus-visible{background:#35332D;color:var(--gold-light);}
}
.rail .rail-b:hover,.rail .rail-b:focus-visible{background:#35332D;color:var(--gold-light);}
.rail .rail-b.primary{background:var(--gold);color:#231E0C;}
.rail .rail-b.primary:hover,.rail .rail-b.primary:focus-visible{background:var(--gold-light);color:#231E0C;}
.rail .rail-b .bell-n{top:1px;right:1px;box-shadow:0 0 0 2px var(--ink);}
.rail-lb{position:absolute;left:calc(100% + 10px);top:50%;transform:translate(-8px,-50%);
white-space:nowrap;padding:6px 11px;border-radius:var(--r-sm);background:var(--ink);color:#F2EFE6;
font-size:var(--t-sm);font-weight:600;letter-spacing:.01em;box-shadow:0 8px 22px rgba(0,0,0,.30);
opacity:0;pointer-events:none;
transition:opacity var(--dur-corta) var(--ease),transform var(--dur-corta) var(--ease);}
.rail-lb::before{content:'';position:absolute;left:-4px;top:50%;width:8px;height:8px;background:inherit;
transform:translateY(-50%) rotate(45deg);}
.rail-corto{display:none;}
.rail .rail-b:hover .rail-lb,.rail .rail-b:focus-visible .rail-lb{opacity:1;transform:translate(0,-50%);}
.cfg-plantilla{padding:12px 18px;border-bottom:1px solid var(--line);background:var(--surface-2);}
.asis-etapas{display:block;margin-bottom:3px;color:var(--text);font-weight:600;}
.asis-etapas b{color:var(--gold-ink);font-weight:600;}
/* ---------- ADENTRO DEL PROYECTO: el menú como riel (solo en compu) ---------- */
#riel-tip{position:fixed;left:0;top:0;z-index:180;transform:translate(-8px,-50%);white-space:nowrap;
padding:6px 11px;border-radius:var(--r-sm);background:var(--ink);color:#F2EFE6;font-size:var(--t-sm);
font-weight:600;letter-spacing:.01em;box-shadow:0 8px 22px rgba(0,0,0,.30);opacity:0;pointer-events:none;
transition:opacity var(--dur-corta) var(--ease),transform var(--dur-corta) var(--ease);}
#riel-tip::before{content:'';position:absolute;left:-4px;top:50%;width:8px;height:8px;background:inherit;
transform:translateY(-50%) rotate(45deg);}
#riel-tip.on{opacity:1;transform:translate(0,-50%);}
.sb-brand img.marca-iso{display:none;}
@media (min-width:901px){
body.sb-riel{--sbw:60px;}
body.sb-riel .sidebar{overflow-x:hidden;}
body.sb-riel .sb-brand{padding:18px 0 16px;justify-content:center;}
body.sb-riel .sb-brand img.marca{display:none;}
body.sb-riel .sb-brand img.marca-iso{display:block;width:36px;height:auto;}
body.sb-riel .sb-group{font-size:0;padding:0;margin:8px 12px 6px;border-top:1px solid var(--line-2);}
body.sb-riel .sb-nav{padding:0 10px;}
body.sb-riel .sb-item{justify-content:center;gap:0;padding:10px 0;font-size:0;}
body.sb-riel .sb-item .bdg{position:absolute;top:2px;right:0;font-size:9px;line-height:1;}
body.sb-riel .sb-sub{display:none;}
body.sb-riel #sb-etapa{cursor:pointer;}
body.sb-riel #sb-etapa .etp{padding:13px 10px;}
body.sb-riel #sb-etapa .etp>*:not(.etp-tira){display:none;}
body.sb-riel #sb-etapa .etp-tira{margin:0;gap:3px;height:7px;}
body.sb-riel #sb-etapa .etp-p{height:4px;}
body.sb-riel #sb-etapa .etp-p.on{height:7px;}
/* Lista para avanzar (administrador): la que sigue sale punteada en dorado. */
body.sb-riel #sb-etapa.etp-avanza .etp-p.on+.etp-p{background:repeating-linear-gradient(90deg,var(--gold) 0 2px,transparent 2px 4px);}
body.sb-riel .sb-foot{padding:10px 0;}
body.sb-riel .sb-who,body.sb-riel .sb-role,body.sb-riel .sb-foot>div[style],body.sb-riel .sb-obra-chip{display:none;}
body.sb-riel .sb-actions{align-items:center;}
body.sb-riel .sb-btn{width:40px;height:38px;justify-content:center;padding:0;gap:0;}
body.sb-riel .sb-btn span{display:none;}
}
/* En el teléfono el riel es la barra de abajo de Inicio Celular.dc.html (3a): clara, con cinco
accesos —Inicio, Mensajes, «+», Avisos y Menú— y lo demás en la hoja de «Menú». Lo activo
va en dorado con su raya arriba; el «+» es el círculo dorado que sobresale. */
/* El teléfono en horizontal (poco alto) es tan angosto de alto como el
teléfono vertical es de ancho: sin sumar esa condición, entraba por
(min-width:721px) y se volvía el riel de escritorio sin desplazamiento,
dejando Proveedores, Usuarios, Tema y Salir fuera de la pantalla. */
@media (max-width:720px), (max-height:500px) and (pointer:coarse){
#selector{padding-left:0;padding-bottom:var(--ic3-nav);}
.rail{top:auto;right:0;width:auto;height:auto;flex-direction:row;padding:6px 6px max(6px, env(safe-area-inset-bottom));
background:var(--surface);border-top:1px solid var(--line);box-shadow:none;justify-content:space-around;align-items:center;}
.rail-g{display:contents;}
.rail .rail-b{display:none;}
.rail .rail-b.rail-core{display:flex;flex:1 1 0;width:auto;min-width:0;height:50px;flex-direction:column;align-items:center;
justify-content:center;gap:3px;padding:0;border-radius:0;color:var(--text-2);box-shadow:none;font-family:var(--font-body);}
.rail .rail-b.rail-core svg.i{width:22px;height:22px;stroke-width:2;}
.rail .rail-b.rail-core:hover,.rail .rail-b.rail-core:focus-visible{background:none;color:var(--text);}
.rail .rail-b.rail-core:active{transform:scale(.94);}
.rail .rail-b.on,.rail .rail-b.on .rail-lb{color:var(--gold-ink);background:none;}
.rail .rail-b.on::after{content:'';position:absolute;top:-6px;left:30%;right:30%;height:2px;background:var(--gold);}
.rail .rail-b.primary,.rail .rail-b.primary:hover{background:none;color:var(--text-2);}
.rail .rail-b.primary svg.i{width:48px;height:48px;margin-top:-18px;padding:13px;border-radius:26px;background:var(--gold);color:var(--gold-on);
box-sizing:border-box;box-shadow:var(--ic3-sombra-fab);}
.rail .rail-b .bell-n{top:2px;left:50%;right:auto;margin-left:6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
background:var(--cuenta-alerta);font-size:10px;line-height:16px;box-shadow:none;}
#sel-inicio{order:1;} #sel-mensajes{order:2;} #sel-nuevo{order:3;} #sel-notis{order:4;} #sel-mas{order:5;}
.rail-lb{position:static;opacity:1;transform:none;background:none;box-shadow:none;padding:0;
font-size:11px;font-weight:650;letter-spacing:0;color:inherit;}
.rail-lb::before{display:none;}
/* El globo de compu no se mueve aquí: en el teléfono el «hover» se queda pegado después de tocar. */
.rail .rail-b:hover .rail-lb,.rail .rail-b:focus-visible .rail-lb{transform:none;}
.rail-largo{display:none;} .rail-corto{display:inline;}
body:has(#selector:not(.hide)) .toast{bottom:calc(var(--ic3-nav) + 12px);}
}
@media (min-width:721px){
/* En escritorio, esquina inferior derecha: no tapa la tabla que se está trabajando. */
.toast{left:auto;right:24px;transform:translateY(8px);max-width:420px;}
.toast.show{transform:translateY(0);}
}
@media (max-width:720px){
/* En el teléfono el aviso se centra con el ancho de su texto, hasta el 92 % de la pantalla (420 px a lo más): con
«left:50%» solo disponía de la mitad y un texto de 90 caracteres llegaba a 6 renglones. Se cierra al tocarlo. */
.toast{left:0;right:0;margin:0 auto;width:max-content;max-width:min(92vw,420px);box-sizing:border-box;line-height:1.4;
overflow-wrap:anywhere;transform:translateY(14px) scale(.98);}
.toast.show{transform:translateY(0) scale(1);pointer-events:auto;cursor:pointer;}
}
/* ---------- MENSAJES (Inicio): áreas, grupos y directos ---------- */
/* Solo escritorio de verdad (mouse): un teléfono en horizontal es táctil y ya
recibió la barra de abajo arriba, con "Más" incluido. */
@media (min-width:721px) and (pointer:fine){
.rail .rail-b.on{background:#35332D;color:var(--gold-light);box-shadow:inset 2px 0 0 var(--gold);}
.rail .rail-b.rail-solo-cel{display:none;}
}
.msj{display:grid;grid-template-columns:296px minmax(0,1fr) 284px;grid-template-rows:minmax(0,1fr);background:var(--bg);border:1px solid var(--line-2);
border-radius:var(--r);overflow:hidden;height:calc(100vh - 168px);min-height:440px;box-shadow:0 1px 0 rgba(35,35,32,.03);}
.msj:not(.con-charla){grid-template-columns:296px minmax(0,1fr);}
.msj:not(.con-charla) .msj-info{display:none;}
.msj.sin-det{grid-template-columns:296px minmax(0,1fr)!important;}
.msj.sin-det .msj-info{display:none;}
.msj-l{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface);}
.msj-lh{display:flex;flex-direction:column;gap:10px;padding:14px 14px 10px;border-bottom:1px solid var(--line);}
.msj-lh-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.msj-lh-top b{font-family:var(--slab);font-weight:600;font-size:20px;letter-spacing:-.02em;}
.msj-lh-bar{display:flex;gap:8px;}
.msj-lh-bar input{flex:1;min-width:0;height:36px;font-size:var(--t-sm);padding:0 10px;}
.msj-filtros{display:flex;gap:6px;}
.msj-filtro{height:28px;padding:0 11px;border:1px solid var(--line-2);border-radius:var(--r-xs);background:var(--surface);
color:var(--text-2);font:inherit;font-size:var(--t-xs);font-weight:600;cursor:pointer;white-space:nowrap;}
.msj-filtro:hover{border-color:var(--gold);}
.msj-filtro.on{background:var(--gold-soft);border-color:var(--gold);color:var(--gold-ink);}
.msj-lista{overflow-y:auto;flex:1;padding:4px 0 10px;}
.msj-sec{padding:12px 14px 5px;font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--text-tertiary);display:flex;align-items:center;gap:8px;}
.msj-sec::after{content:'';flex:1;height:1px;background:var(--line);}
.msj-row{position:relative;width:100%;display:flex;align-items:center;gap:11px;padding:8px 14px;border:0;
background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;min-width:0;transition:background .12s;}
.msj-row::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--gold);border-radius:0 2px 2px 0;opacity:0;}
.msj-row:hover{background:var(--surface-2);}
.msj-row.on{background:var(--gold-soft);} .msj-row.on::before{opacity:1;}
.msj-rc{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.msj-rn-row{display:flex;justify-content:space-between;gap:8px;align-items:baseline;}
.msj-rn{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:1px;}
.msj-row.nuevo .msj-rn{font-weight:700;}
.msj-rs-row{display:flex;justify-content:space-between;gap:8px;align-items:center;}
.msj-rs{font-size:var(--t-xs);color:var(--text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.msj-row.nuevo .msj-rs{color:var(--text);}
.msj-rs.escribe{color:var(--gold-ink);font-weight:600;font-style:italic;}
.msj-rmarcas{display:flex;gap:4px;flex:none;}
.msj-rm{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none;}
.msj-rt{font-size:var(--t-micro);color:var(--text-tertiary);font-variant-numeric:tabular-nums;}
.msj-row.nuevo .msj-rt{color:var(--gold-ink);font-weight:700;}
.msj-n,.msj-at{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--gold-deep);color:#fff;
font-size:11px;font-weight:700;line-height:18px;text-align:center;font-variant-numeric:tabular-nums;box-sizing:border-box;}
.msj-at{background:var(--gold);color:#231E0C;padding:0;width:18px;}
.msj-av{width:32px;height:32px;border-radius:var(--r-xs);flex:none;display:inline-flex;align-items:center;
justify-content:center;background:var(--surface-3);color:var(--text-2);font-size:var(--t-xs);font-weight:700;letter-spacing:.03em;font-family:var(--slab);}
.msj-av.tipo-area,.msj-av.tipo-grupo,.bnd-av.tipo-area,.bnd-av.tipo-grupo{background:var(--ink);color:var(--gold-light);}
.msj-av.mio{background:var(--ink);color:var(--gold-light);}
.msj-r{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg);}
.msj-h{display:flex;align-items:center;gap:12px;padding:0 18px;height:68px;box-sizing:border-box;border-bottom:1px solid var(--line);background:var(--surface);flex:none;}
.msj-ht{flex:1;min-width:0;display:flex;flex-direction:column;}
.msj-ht b{font-family:var(--slab);font-size:18px;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.msj-ht span{font-size:var(--t-xs);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.msj-ht span.escribe{color:var(--gold-ink);font-weight:600;}
.msj-hacts{display:flex;gap:8px;align-items:center;flex:none;}
.msj-pila{height:36px;display:flex;align-items:center;gap:8px;padding:0 10px 0 6px;border:1px solid var(--line-2);
border-radius:var(--r-xs);background:var(--surface);color:var(--text-2);font:inherit;font-size:var(--t-xs);font-weight:600;cursor:pointer;white-space:nowrap;}
.msj-pila:hover{border-color:var(--text-3);}
.msj-pila-av{display:flex;}
.msj-pila-av span{width:22px;height:22px;flex:none;margin-left:-6px;border-radius:var(--r-xs);background:var(--surface-3);
border:2px solid var(--surface);color:var(--text-2);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;}
.msj-pila-av span:first-child{margin-left:0;}
.msj-acu-btn{height:36px;display:flex;align-items:center;gap:7px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-xs);
background:var(--surface);color:var(--text-2);font:inherit;font-size:var(--t-sm);font-weight:650;cursor:pointer;white-space:nowrap;}
.msj-acu-btn:hover{border-color:var(--gold);}
.msj-acu-btn.on{background:var(--gold-soft);border-color:var(--gold);color:var(--gold-ink);}
.msj-atras{display:none;}
.msj-fijado{flex:none;display:flex;align-items:center;gap:10px;padding:9px 18px;border:0;border-bottom:1px solid var(--line);
background:var(--gold-soft);color:var(--text);font:inherit;text-align:left;cursor:pointer;width:100%;}
.msj-fijado:hover{background:var(--gold-light);}
.msj-fijado svg.i{color:var(--gold-ink);flex:none;}
.msj-fijado-t{flex:1;min-width:0;line-height:1.3;}
.msj-fijado-eyebrow{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--gold-ink);}
.msj-fijado-txt{display:block;font-size:var(--t-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.msj-cuerpo{flex:1;overflow-y:auto;padding:20px 22px 12px;display:flex;flex-direction:column;gap:2px;}
.msj-dia{display:flex;align-items:center;gap:12px;margin:6px 0 14px;font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;color:var(--text-tertiary);}
.msj-dia::before,.msj-dia::after{content:'';flex:1;height:1px;background:var(--line-2);}
.msj-sys{align-self:center;display:flex;align-items:center;gap:7px;margin:4px 0 12px;font-size:12.5px;color:var(--text-3);}
.msj-m{position:relative;display:flex;gap:10px;padding:5px 0;margin-top:14px;max-width:78%;}
.msj-m.mio{flex-direction:row-reverse;margin-left:auto;}
.msj-m.sigue{margin-top:4px;}
.msj-m.sigue .msj-av{visibility:hidden;}
.msj-mc{min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:5px;}
.msj-m.mio .msj-mc{align-items:flex-end;}
.msj-mh{display:flex;align-items:baseline;gap:8px;padding:0 2px;white-space:nowrap;}
.msj-mh b{font-size:13.5px;font-weight:650;}
.msj-mh span{font-size:var(--t-micro);color:var(--text-tertiary);font-variant-numeric:tabular-nums;}
.msj-bub{display:flex;flex-direction:column;gap:7px;padding:10px 14px;background:var(--surface);border:1px solid var(--line);
border-radius:4px;box-shadow:0 1px 0 rgba(35,35,32,.03);max-width:100%;}
.msj-m.mio .msj-bub{background:var(--gold-soft);border-color:var(--gold-light);box-shadow:none;}
.msj-m.menc-a-mi .msj-bub{border-left:3px solid var(--gold);}
.msj-menc-banner{font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--gold-ink);}
.msj-mt{font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text);text-wrap:pretty;}
.menc{font-weight:650;color:var(--gold-ink);background:var(--gold-soft);border-radius:2px;padding:0 3px;}
.msj-m.mio .menc{background:var(--surface);}
.menc.area{color:var(--info);background:var(--info-bg);}
.msj-toolbar{position:absolute;top:-30px;left:0;right:auto;z-index:5;display:flex;gap:1px;padding:3px;
background:var(--surface);border:1px solid var(--line-2);border-radius:3px;box-shadow:0 6px 16px rgba(35,35,32,.12);
opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .15s,transform .15s;}
.msj-m.mio .msj-toolbar{left:auto;right:0;}
.msj-m.primero .msj-toolbar{top:-6px;}
.msj-m:hover .msj-toolbar,.msj-m:focus-within .msj-toolbar,.msj-m.abierto .msj-toolbar{opacity:1;transform:none;pointer-events:auto;}
@media (hover:none){ .msj-toolbar{display:none;} .msj-m.abierto .msj-toolbar{display:flex;} }
.msj-toolbar button{height:26px;display:flex;align-items:center;gap:5px;padding:0 8px;border:0;border-radius:2px;
background:none;color:var(--text-2);font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;}
.msj-toolbar button:hover{background:var(--surface-3);color:var(--text);}
.msj-toolbar button svg.i{width:14px;height:14px;}
.msj-pie{display:flex;flex-direction:column;gap:8px;padding:8px 22px 18px;flex:none;background:var(--bg);}
.msj-rapidas{display:flex;gap:6px;flex-wrap:wrap;}
.msj-rapida{height:28px;padding:0 11px;border:1px solid var(--line-2);border-radius:var(--r-xs);background:var(--surface);
color:var(--text-2);font:inherit;font-size:var(--t-xs);font-weight:600;cursor:pointer;}
.msj-rapida:hover{border-color:var(--gold);background:var(--gold-soft);color:var(--gold-ink);}
.msj-caja{background:var(--surface);border:1px solid var(--line-2);border-radius:4px;transition:border-color .15s,box-shadow .15s;}
.msj-caja:focus-within{border-color:var(--gold-deep);box-shadow:0 0 0 3px var(--gold-soft);}
.msj-caja textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;resize:none;min-height:52px;max-height:120px;
line-height:1.45;padding:12px 14px 4px;border:0;background:none;color:var(--text);}
.msj-caja textarea:focus{outline:none;}
.msj-tools{display:flex;align-items:center;gap:2px;padding:6px 8px 8px;}
.msj-hint{flex:1;font-size:var(--t-micro);color:var(--text-3);text-align:right;padding-right:10px;}
.msj-err-envio{font-size:var(--t-sm);color:var(--critico);font-weight:600;margin-right:8px;}
.msj-vacio{padding:32px 20px;text-align:center;color:var(--text-3);font-size:var(--t-base);}
.msj-nada{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;}
.msj-nada svg{width:28px;height:28px;color:var(--line-2);}
.msj-nada p{margin:0;}
/* Mensajes según el tablero: presencia, vista previa, panel derecho, sello. */
.msj-lh .msj-ico{flex:none;width:36px;height:36px;padding:0;justify-content:center;}
.msj-avw{position:relative;flex:none;display:inline-flex;}
.msj-pres{position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;background:var(--bueno);border:2px solid var(--surface);}
.msj-rs.bor{font-style:italic;} .msj-rs.menc{color:var(--gold-ink);font-weight:600;}
.msj-av.tipo-reg{background:var(--surface-3);color:var(--text-2);}
.msj-av.tipo-reg.mal{background:var(--critico-bg);color:var(--critico);}
.msj-av.mini{width:26px;height:26px;font-size:10px;}
.msj-ayuda{font-size:var(--t-micro);color:var(--text-3);padding:0 16px 10px;background:var(--surface-2);flex:none;}
.msj-vivo{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:var(--r-sm);background:var(--surface-3);color:var(--text-2);font-size:var(--t-sm);font-weight:600;}
.msj-vivo i{width:6px;height:6px;border-radius:50%;background:var(--text-3);}
.msj-vivo.on{background:var(--bueno-bg);color:var(--bueno);} .msj-vivo.on i{background:var(--bueno);}
.msj-info{border-left:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;min-width:0;min-height:0;overflow:auto;}
.msj-info:empty{display:none;}
.mi-obra{padding:18px 18px 16px;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:center;}
.mi-obra-ring{flex:none;}
.mi-obra b{display:block;font-weight:650;font-size:14.5px;margin-top:2px;}
.mi-obra a{font-size:13px;font-weight:600;}
.mi-sec{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px;}
.mi-sec-h{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.mi-sec-h h4{margin:0;font-size:var(--t-micro);font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--text-3);}
.mi-sec-h .mini{flex:1;min-width:0;white-space:nowrap;font-size:12px;color:var(--text-3);}
.mi-sec h4{margin:0 0 2px;font-size:var(--t-micro);font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--text-3);}
.mi-p{display:flex;align-items:center;gap:9px;font-size:var(--t-sm);color:var(--text);min-width:0;}
.mi-pn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .mi-pn small{color:var(--text-3);}
.mi-on{font-size:var(--t-micro);color:var(--bueno);font-weight:600;}
.mi-mas{align-self:flex-start;font:inherit;font-size:var(--t-sm);color:var(--text-2);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;}
.mi-f{display:flex;align-items:center;gap:9px;font-size:var(--t-sm);color:var(--text);text-decoration:none;min-width:0;}
.mi-f svg.i{flex:none;width:15px;height:15px;color:var(--text-2);}
.mi-fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .mi-ft{font-size:var(--t-micro);color:var(--text-3);font-variant-numeric:tabular-nums;}
.mi-vacio{font-size:var(--t-sm);color:var(--text-3);line-height:1.5;}
.mi-nota{margin-top:auto;padding:12px 16px 16px;border-top:1px solid var(--line);font-size:var(--t-sm);color:var(--text-2);line-height:1.6;}
.mi-acu-btn{height:26px;flex:none;white-space:nowrap;display:flex;align-items:center;gap:4px;padding:0 9px;border:1px solid var(--line-2);
border-radius:var(--r-xs);background:var(--surface);color:var(--gold-ink);font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;}
.mi-acu-btn:hover{border-color:var(--gold);background:var(--gold-soft);}
.mi-acu-btn.on{background:var(--gold-soft);border-color:var(--gold);}
.mi-acu-form{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--gold);border-radius:4px;
background:var(--surface);box-shadow:0 0 0 3px var(--gold-soft);}
.mi-acu-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:650;color:var(--text-2);}
.mi-acu-form textarea,.mi-acu-form input[type=date]{width:100%;box-sizing:border-box;font:inherit;font-size:13.5px;}
.mi-plazos{display:flex;gap:4px;flex-wrap:wrap;}
.mi-plazo{height:26px;padding:0 9px;border:1px solid var(--line-2);border-radius:var(--r-xs);background:var(--surface);
color:var(--text-2);font:inherit;font-size:12px;font-weight:650;cursor:pointer;white-space:nowrap;}
.mi-plazo:hover{border-color:var(--gold);}
.mi-plazo.on{background:var(--gold-soft);border-color:var(--gold);color:var(--gold-ink);}
.mi-resp{display:flex;flex-direction:column;gap:3px;max-height:180px;overflow-y:auto;}
.mi-resp-op{display:flex;align-items:center;gap:9px;padding:5px 7px;border:1px solid var(--line);border-radius:var(--r-xs);
background:var(--surface);font:inherit;text-align:left;cursor:pointer;}
.mi-resp-op:hover{border-color:var(--gold);}
.mi-resp-op.on{background:var(--gold-soft);border-color:var(--gold);}
.mi-resp-box{width:16px;height:16px;flex:none;border-radius:2px;border:1.5px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#231E0C;}
.mi-resp-op.on .mi-resp-box{background:var(--gold);border-color:var(--gold-deep);}
.mi-resp-op b{display:block;font-size:13px;font-weight:600;} .mi-resp-op small{display:block;font-size:11.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mi-acu{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:3px;
background:var(--surface);font:inherit;text-align:left;cursor:pointer;width:100%;}
.mi-acu:hover{border-color:var(--line-2);}
.mi-acu.hecho{background:var(--surface-2);}
.mi-acu-box{width:18px;height:18px;flex:none;margin-top:1px;border-radius:2px;border:1.5px solid var(--line-2);
display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;}
.mi-acu.hecho .mi-acu-box{background:var(--bueno);border-color:var(--bueno);}
.mi-acu-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.mi-acu-txt{font-size:13.5px;font-weight:600;line-height:1.35;}
.mi-acu.hecho .mi-acu-txt{color:var(--text-3);text-decoration:line-through;}
.mi-acu-q{font-size:12px;color:var(--text-3);}
.mi-acu-plazo{align-self:flex-start;flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;
margin-top:2px;font-size:11.5px;font-weight:650;padding:1px 6px;border-radius:2px;}
.mi-acu-plazo.vencido{background:var(--critico-bg);color:var(--critico);}
.mi-acu-plazo.hoy{background:var(--checar-bg);color:var(--checar);}
.mi-acu-plazo.hecho{background:var(--bueno-bg);color:var(--bueno);}
.mi-acu-plazo.futuro{background:var(--surface-3);color:var(--text-2);}
.mi-acu-editado{font-size:11px;color:var(--text-3);}
.mi-arch-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.mi-arch{aspect-ratio:1;border-radius:3px;background:var(--surface-3);border:1px solid var(--line);color:var(--text-3);
display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;}
.mi-arch:hover{border-color:var(--gold);}
@media (max-width:1180px){ .msj,.msj.con-charla{grid-template-columns:260px minmax(0,1fr);} .msj-info{display:none;} }
@media (max-width:760px){ .msj-ayuda{display:none;} }
.msj-o{display:flex;align-items:center;gap:10px;margin:2px 0 14px;font-size:var(--t-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.1em;}
.msj-o::before,.msj-o::after{content:'';flex:1;height:1px;background:var(--line);}
.msj-picks{max-height:260px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-sm);}
.msj-pick{display:flex;align-items:center;gap:10px;padding:7px 10px;cursor:pointer;border-bottom:1px solid var(--line);}
.msj-pick:last-child{border-bottom:0;}
.msj-pick:hover{background:var(--surface-2);}
.msj-pick input{width:16px;height:16px;margin:0;accent-color:var(--gold-deep);}
.msj-pick-n{display:flex;flex-direction:column;min-width:0;}
.msj-pick-n b{font-size:var(--t-base);font-weight:500;}
.msj-pick-n small{font-size:var(--t-xs);color:var(--text-3);}
/* @menciones: la lista sale arriba del cuadro, con áreas primero. */
.menc-wrap{position:relative;flex:1;min-width:0;}
.menc-pop{position:absolute;left:0;right:0;bottom:calc(100% + 6px);background:var(--surface);border:1px solid var(--line-2);
border-radius:var(--r-sm);box-shadow:0 12px 32px rgba(35,35,32,.16);z-index:20;max-height:240px;overflow-y:auto;padding:4px;}
.menc-op{display:flex;align-items:center;gap:9px;width:100%;padding:6px 8px;border:0;border-radius:var(--r-xs);
background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;}
.menc-op.on,.menc-op:hover{background:var(--gold-soft);}
.menc-op .msj-av{width:26px;height:26px;font-size:var(--t-micro);}
.menc-op span:last-child{display:flex;flex-direction:column;min-width:0;}
.menc-op b{font-size:var(--t-sm);font-weight:600;}
.menc-op small{font-size:var(--t-micro);color:var(--text-3);}
/* La conversación al pie de un registro (OC, cotización, costeo, interferencia). */
.chatter{margin-top:18px;border-top:1px solid var(--line);padding-top:12px;}
.chatter-h{font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
margin-bottom:6px;display:flex;gap:6px;align-items:center;}
.chatter-h span{font-weight:600;color:var(--text-tertiary);letter-spacing:0;}
.chatter-l{max-height:260px;border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 12px;}
.chatter-nada{font-size:var(--t-sm);color:var(--text-3);padding:6px 0 8px;}
/* El pie de Mensajes v2 (Fase 5) apila filas para respuestas rápidas y grabación;
el del chatter sigue siendo solo texto + Enviar, en una fila. */
.chatter .msj-pie{flex-direction:row;align-items:flex-end;padding:8px 0 0;border-top:0;background:none;}
/* Hilos del proyecto: para quién es cada uno. */
.com-nuevo{display:flex;gap:8px;align-items:flex-start;}
.com-nuevo input{flex:1;min-width:0;}
.com-para{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:8px;}
.com-radio{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);color:var(--text-2);cursor:pointer;
text-transform:none;letter-spacing:0;font-weight:500;margin:0;}
.com-n{display:inline-flex;align-items:center;gap:3px;margin-left:6px;font-size:var(--t-xs);color:var(--text-3);
font-weight:500;vertical-align:middle;font-variant-numeric:tabular-nums;}
.com-n svg.i{width:12px;height:12px;}
.com-radio input{margin:0;accent-color:var(--gold-deep);}
.fld .com-para .com-radio{display:inline-flex;font-size:var(--t-sm);font-weight:500;letter-spacing:0;
text-transform:none;color:var(--text-2);margin:0;}
.fld .com-para input[type=radio]{width:16px;height:16px;padding:0;border:0;background:none;box-shadow:none;min-height:0;}
.com-dest{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.com-dest[hidden]{display:none;}
.com-dest .chip{cursor:pointer;}
.com-dest select{max-width:260px;}
.com-hilo{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-sm);max-height:440px;}
.com-hilo .msj-cuerpo{min-height:120px;}
/* Áreas, dentro de Usuarios. */
.us-areas{margin-top:18px;border-top:1px solid var(--line);padding-top:12px;}
/* El organigrama (líder, área padre y a quién agregar) usa sin la
clase .in: sin tope de ancho, el control se dibuja tan ancho como su
opción más larga (un nombre y puesto completos) y en un celular angosto
empujaba todo el modal de Usuarios de lado. */
.us-org-lider,.us-org-padre,.us-org-agregar{max-width:100%;}
.us-area-l{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px;}
.us-area{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:var(--r-xs);
padding:3px 4px 3px 9px;font-size:var(--t-sm);}
.us-area i{font-style:normal;color:var(--text-3);font-size:var(--t-xs);}
.us-area .xbtn{padding:2px;}
.us-area input{width:130px;font:inherit;font-size:var(--t-sm);padding:2px 5px;}
/* Perfiles de acceso: una fila por tema y su nivel en un selector de tres. */
.pm-g{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);
font-weight:600;margin:15px 0 2px;}
.pm-f{display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:7px 0;border-top:1px solid var(--line);font-size:var(--t-sm);color:var(--text-2);}
.pm-seg{display:inline-flex;flex:none;border:1px solid var(--line-2);border-radius:var(--r-xs);overflow:hidden;}
.pm-seg button{border:0;border-left:1px solid var(--line-2);background:transparent;color:var(--text-3);
font:inherit;font-size:var(--t-xs);padding:4px 9px;cursor:pointer;}
.pm-seg button:first-child{border-left:0;}
.pm-seg button.on{background:var(--gold-deep);color:#fff;}
.pm-seg button:disabled{opacity:.4;cursor:not-allowed;}
.fu-aj{margin-top:14px;border-top:1px solid var(--line);padding-top:11px;}
.fu-aj>summary{cursor:pointer;font-size:var(--t-base);color:var(--text-2);font-weight:600;}
.fu-aj>summary::marker{color:var(--text-3);}
/* La ficha del formato FT-OPE-01, arriba del lienzo de la minuta. */
.mn-ficha{margin:12px 0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);}
.mn-ficha>summary{cursor:pointer;padding:10px 12px;font-size:var(--t-base);font-weight:600;color:var(--text);}
.mn-ficha>summary .mini{font-weight:400;}
.mnf-cuerpo{padding:0 12px 14px;}
.mnf-cuerpo textarea{width:100%;font:inherit;font-size:var(--t-base);}
.mnf-fila{display:flex;align-items:center;gap:6px;margin-bottom:5px;}
.mnf-fila input{flex:1;min-width:0;font:inherit;font-size:var(--t-sm);padding:4px 7px;}
.mnf-fila input[type=date]{flex:0 0 132px;}
.mnf-fila .pm-seg{flex:0 0 auto;}
.mnf-fila .pl-b{flex:0 0 84px;}
.mnf-no{flex:0 0 22px;font-size:var(--t-xs);color:var(--text-3);font-variant-numeric:tabular-nums;}
.mnf-tarde{border-color:var(--critico)!important;color:var(--critico);font-weight:600;}
@media (max-width:720px){ .mnf-fila{flex-wrap:wrap;} .mnf-fila input{flex:1 1 100%;} }
/* La hoja de «Más» del teléfono. */
.hoja-bd{align-items:flex-end;padding:0;}
.hoja-cel{width:100%;background:var(--surface);border-radius:14px 14px 0 0;padding:8px 12px 20px;
display:flex;flex-direction:column;gap:6px;animation:hojaSube .22s ease both;max-height:80vh;overflow-y:auto;}
.hoja-asa{width:36px;height:4px;border-radius:2px;background:var(--line-2);margin:2px auto 8px;flex:none;}
.hoja-cel .hoja-op svg.i{width:18px;height:18px;color:var(--text-3);flex:none;}
@keyframes hojaSube{from{transform:translateY(24px);opacity:0;}to{transform:none;opacity:1;}}
@media (max-width:720px){
.msj{grid-template-columns:1fr;height:auto;min-height:0;border:0;border-radius:0;background:none;box-shadow:none;}
/* La lista ocupa todo el ancho: las reglas de escritorio de .msj:not(.con-charla) y .msj.sin-det (296 px) pesan más que la de arriba. */
.msj:not(.con-charla),.msj.sin-det{grid-template-columns:minmax(0,1fr) !important;}
.msj-l{border-right:0;}
.msj-lh-bar input{height:44px;}
.msj-filtros{flex-wrap:wrap;}
.msj-lh-top b{font-size:26px;}
.msj-lh .msj-ico{width:44px;height:44px;}
.msj-filtro{height:44px;padding:0 14px;font-size:14px;}
.msj-row{min-height:72px;border-bottom:1px solid var(--line);}
.msj-rn{font-size:16px;} .msj-rs{font-size:14px;}
.msj-r{display:none;}
.msj.con-charla .msj-l{display:none;}
.msj.con-charla .msj-r{display:flex;position:fixed;inset:0;bottom:0;z-index:72;background:var(--bg);}
.msj-atras{display:inline-flex;width:44px;height:44px;flex:none;}
.msj-h{padding:50px 8px 8px 4px;height:auto;}
.msj-hacts .msj-pila{display:none;}
/* Integrantes y Borrar grupo (dueño del grupo) se van al panel: en la
cabecera angosta del celular solo caben Acuerdos y Volver. */
.msj-hacts #msj-integrantes,.msj-hacts #msj-borrar{display:none;}
.msj-acu-btn{height:44px;min-width:44px;justify-content:center;}
.msj-cita{min-height:44px;justify-content:center;}
/* El panel derecho (obra o persona, Acuerdos, Personas, Archivos) es, en
celular, una hoja que sube desde abajo — el mismo panel, no uno aparte. */
.msj.con-charla .msj-info{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:82;
max-height:82vh;border-left:0;border-radius:14px 14px 0 0;
box-shadow:0 -18px 44px rgba(35,35,32,.22);animation:hojaSube .28s cubic-bezier(.22,.75,.28,1) both;}
/* Sin telón detrás: se cierra tocando otra vez «Acuerdos», que se queda a
la vista arriba (la hoja no tapa la cabecera, solo el 82% de abajo). */
.msj-info::before{content:'';display:block;width:36px;height:4px;border-radius:2px;background:var(--line-2);margin:8px auto 0;}
.msj-fijado{padding:9px 16px;}
.msj-cuerpo{padding:14px 10px 10px;}
.msj-m{max-width:88%;}
.msj-pie{padding:8px 10px 30px;}
.msj-rapida{height:44px;padding:0 13px;font-size:14px;}
.msj-caja textarea{font-size:16px;}
.msj-tools .msj-ico{width:44px;height:44px;}
.msj-toolbar{display:none;}
.msj-m.abierto .msj-toolbar{display:flex;top:auto;bottom:-32px;left:0;right:auto;opacity:1;transform:none;pointer-events:auto;}
.msj-m.mio.abierto .msj-toolbar{left:auto;right:0;}
.msj-toolbar button{height:44px;padding:0 10px;font-size:13px;}
/* El panel (obra/persona, Acuerdos, Personas, Archivos) es la hoja de
abajo en celular: sus controles también llegan a 44 px. */
.mi-mas{min-height:44px;display:inline-flex;align-items:center;}
.mi-plazo{height:44px;padding:0 10px;}
.mi-resp-op{min-height:52px;padding:6px 12px;}
.mi-resp-box{width:22px;height:22px;font-size:13px;}
.mi-acu{min-height:60px;padding:11px 12px;}
.mi-acu-box{width:24px;height:24px;font-size:14px;}
.mi-acu-btn{height:44px;}
.mi-acu-form textarea,.mi-acu-form input{font-size:16px;}
/* Deslizar un mensaje a la derecha lo cita (>44px). */
.msj-m{touch-action:pan-y;}
.msj-mc{transition:transform .22s cubic-bezier(.22,.75,.28,1);}
/* El botón de nota de voz, manteniendo pulsado. Sin onda decorativa: el
color rojo y el crecimiento ya dicen «está grabando» (ver msj-mic.grabando). */
.msj-mic{width:44px;height:44px;flex:none;border:0;border-radius:50%;background:var(--gold);color:#231E0C;
display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:none;}
.msj-mic.grabando{background:var(--critico);color:#fff;transform:scale(1.15);}
.msj-send-fab{width:44px;height:44px;flex:none;border:0;border-radius:50%;background:var(--gold);color:#231E0C;
display:flex;align-items:center;justify-content:center;cursor:pointer;}
.msj-composer-fila{display:flex;align-items:flex-end;gap:6px;}
.msj-composer-fila .msj-caja{flex:1;min-width:0;border-radius:3px;}
.msj-composer-fila textarea{min-height:44px;padding:11px 12px;}
}
/* ---------- Pantallas del Inicio sin proyecto (Proveedores, Bitácora, Plantillas) ----------
Antes se abrían «como otra pestaña»: sin menú y sin salida clara. Ahora el
riel del Inicio se queda a la izquierda y arriba sale «Volver al inicio». */
.rail{display:none;}
body:has(#selector:not(.hide)) .rail,body.sin-proyecto .rail{display:flex;}
body.sin-proyecto{--sbw:60px;}
body.sin-proyecto .railp,body.sin-proyecto #cfg-proy,body.sin-proyecto #sb-toggle,body.sin-proyecto .tb-sep{display:none !important;}
body.sin-proyecto .topbar{top:0;}
@media (min-width:721px) and (max-width:900px){ body.sin-proyecto .main{margin-left:60px !important;} }
@media (max-width:720px){ body.sin-proyecto .main{padding-bottom:var(--ic3-nav);} }
/* ---------- Barra de arriba del proyecto: menú y salida ---------- */
.tb-sep{width:1px;align-self:stretch;margin:4px 0;background:var(--line-2);}
.tb-ic-cel{display:none;}
.tb-corto{display:none;}
@media (max-width:900px){ .tb-ic-cel{display:block;} .tb-ic-pc{display:none;} }
@media (max-width:720px){ .tb-largo{display:none;} .tb-corto{display:inline;} .tb-sep{display:none;} }
/* En el teléfono los botones van juntos en la primera fila (salir primero) y el estado abajo. */
@media (max-width:720px){ .topbar .acts #tb-inicio{order:-1;} .topbar .acts #sync{order:9;} }
/* ---------- «Nuevo»: proyecto o reporte suelto ----------
En compu sale junto al riel; en el teléfono, como hoja desde abajo. */
.nuevo-bd{background:transparent;backdrop-filter:none;padding:0;}
.nuevo-pop{position:fixed;width:300px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);
box-shadow:0 14px 36px rgba(35,35,32,.18);padding:6px;display:flex;flex-direction:column;gap:2px;
animation:modalIn .18s ease both;}
.nuevo-h{font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);padding:6px 10px 4px;}
.nuevo-op{display:flex;align-items:flex-start;gap:11px;width:100%;padding:10px;border:0;border-radius:var(--r-sm);
background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;}
.nuevo-op:hover,.nuevo-op:focus-visible{background:var(--gold-soft);outline:none;}
.nuevo-op svg.i{width:18px;height:18px;color:var(--gold-ink);margin-top:1px;flex:none;}
.nuevo-op b{display:block;font-size:var(--t-base);font-weight:650;}
.nuevo-op small{display:block;font-size:var(--t-xs);color:var(--text-3);line-height:1.45;margin-top:1px;}
.hoja-cel .nuevo-op{border:1px solid var(--line);min-height:56px;}
@media (min-width:1600px){ .nuevo-pop{width:calc(300px*var(--esc));} }
/* ---------- Toda ventana con su «×» arriba a la derecha ----------
Pegada arriba mientras la ventana rueda (sticky cuenta desde el borde del
contenido, ya con el relleno); el translate la lleva a la esquina. */
.modal-x{position:sticky;top:0;float:right;z-index:2;margin:0 0 4px 12px;padding:6px;
transform:translate(14px,-14px);border-radius:var(--r-sm);background:var(--surface);}
.modal-x:hover{background:var(--surface-3);color:var(--text);}
/* ---------- Menos margen alrededor del Inicio ----------
Sergio: «hay mucho espacio entre bordes, que no sea tanto, pero tampoco
que se vea todo pegado». La columna llega a 1440 px y el encabezado se
alinea con ella. */
.sel-top{padding:18px 28px 16px;}
.sel-top .brand{max-width:1384px;}
.sel-body{max-width:1440px;padding:24px 28px 40px;}
@media (max-width:720px){
.sel-top{padding:14px 16px 12px;}
.sel-body{padding:18px 16px 28px;}
}
/* ============================================================
ESCALA SEGÚN LA PANTALLA
Sergio (2026-09-17), desde otra compu: «se ve muy chiquita, no a escala
del dispositivo». El diseño está medido para una laptop. En un monitor
más ancho todo crece en la misma proporción —letra, iconos, controles,
menús, márgenes y anchos—, en escalones. Debajo de 1600 px no cambia nada
(laptop, tableta y teléfono se quedan como ya estaban).
No se usa zoom: movería las coordenadas con las que el catálogo y el
cronograma calculan arrastres, celdas y menús.
============================================================ */
:root{--esc:1;}
@media (min-width:1760px){ :root{--esc:1.03;} }
@media (min-width:1920px) and (min-height:860px){ :root{--esc:1.05;} }
@media (min-width:2240px) and (min-height:1000px){ :root{--esc:1.12;} }
@media (min-width:2560px) and (min-height:1200px){ :root{--esc:1.2;} }
@media (min-width:1600px){
:root{
/* Los --t-* ya son fluidos (clamp en la raíz); aquí solo escalan las medidas. */
--sbw:calc(242px*var(--esc));
}
body.sb-riel,body.sin-proyecto{--sbw:calc(60px*var(--esc));}
svg.i{width:calc(16px*var(--esc));height:calc(16px*var(--esc));}
svg.i.sm{width:calc(14px*var(--esc));height:calc(14px*var(--esc));}
svg.i.lg{width:calc(18px*var(--esc));height:calc(18px*var(--esc));}
svg.i.xl{width:calc(22px*var(--esc));height:calc(22px*var(--esc));}
.btn{padding:calc(7.5px*var(--esc)) calc(14px*var(--esc));}
.btn.sm{padding:calc(5.5px*var(--esc)) calc(11px*var(--esc));}
.fld{margin-bottom:calc(15px*var(--esc));}
.fld input,.fld select,.fld textarea{padding:calc(9px*var(--esc)) calc(11px*var(--esc));}
.bell{width:calc(36px*var(--esc));height:calc(36px*var(--esc));}
.bell .i{width:calc(18px*var(--esc));height:calc(18px*var(--esc));}
/* Chasis del proyecto */
.railp{height:calc(38px*var(--esc));padding:0 calc(28px*var(--esc));}
.topbar{top:calc(38px*var(--esc));padding:calc(15px*var(--esc)) calc(28px*var(--esc));}
.topbar h1{font-size:calc(22px*var(--esc));}
.content{padding:calc(24px*var(--esc)) calc(28px*var(--esc)) calc(56px*var(--esc));max-width:calc(1680px*var(--esc));}
.sb-brand{padding:calc(20px*var(--esc)) calc(18px*var(--esc)) calc(17px*var(--esc));}
.sb-brand img.marca{width:calc(142px*var(--esc));}
.sb-group{padding:calc(19px*var(--esc)) calc(18px*var(--esc)) calc(7px*var(--esc));}
.sb-nav{padding:0 calc(9px*var(--esc));}
.sb-item{padding:calc(9px*var(--esc)) calc(11px*var(--esc));gap:calc(10px*var(--esc));}
.sb-sub{padding-left:calc(30px*var(--esc));}
.sb-sub button{padding:calc(6.5px*var(--esc)) calc(11px*var(--esc));}
.sb-foot{padding:calc(15px*var(--esc)) calc(14px*var(--esc));}
.sb-btn{padding:calc(7.5px*var(--esc)) calc(10px*var(--esc));}
.etp{padding:calc(11px*var(--esc)) calc(13px*var(--esc));}
body.sb-riel .sb-brand img.marca-iso{width:calc(36px*var(--esc));}
body.sb-riel .sb-nav{padding:0 calc(10px*var(--esc));}
body.sb-riel .sb-item{padding:calc(10px*var(--esc)) 0;}
body.sb-riel .sb-btn{width:calc(40px*var(--esc));height:calc(38px*var(--esc));}
body.sb-riel #sb-etapa .etp{padding:calc(13px*var(--esc)) calc(10px*var(--esc));}
/* Superficies */
.panel{padding:calc(20px*var(--esc)) calc(22px*var(--esc));}
.panel-t{font-size:calc(16px*var(--esc));}
.modal{padding:calc(26px*var(--esc));}
.modal h3{font-size:calc(18px*var(--esc));}
.kpi{padding:calc(17px*var(--esc)) calc(19px*var(--esc)) calc(15px*var(--esc));}
.kpi-v{font-size:calc(23px*var(--esc));}
.grid-kpi{grid-template-columns:repeat(auto-fit,minmax(calc(184px*var(--esc)),1fr));}
.crono-drawer{width:calc(400px*var(--esc));}
.bandeja{width:calc(430px*var(--esc));}
/* Inicio */
#selector{padding-left:calc(60px*var(--esc));}
.rail{width:calc(60px*var(--esc));}
.rail .rail-b{width:calc(40px*var(--esc));height:calc(40px*var(--esc));}
.rail .rail-b svg.i{width:calc(19px*var(--esc));height:calc(19px*var(--esc));}
.sel-top{padding:calc(18px*var(--esc)) calc(28px*var(--esc)) calc(16px*var(--esc));}
.sel-top .brand{max-width:calc(1384px*var(--esc));}
.sel-top .brand img.marca{width:calc(150px*var(--esc));}
.sel-body{max-width:calc(1440px*var(--esc));padding:calc(24px*var(--esc)) calc(28px*var(--esc)) calc(40px*var(--esc));}
.sel-h h2{font-size:calc(22px*var(--esc));}
.ini-panes{grid-template-columns:calc(340px*var(--esc)) 1fr;min-height:calc(430px*var(--esc));}
.ini-tabs{padding:calc(11px*var(--esc)) calc(12px*var(--esc)) 0;}
.ini-tab{padding:calc(7px*var(--esc)) calc(12px*var(--esc));}
.ini-rows{max-height:calc(520px*var(--esc));}
.ini-row{padding:calc(9px*var(--esc)) calc(14px*var(--esc));}
.ini-prev{padding:calc(24px*var(--esc)) calc(26px*var(--esc));}
.ini-prev-n,.ini-k b{font-size:calc(24px*var(--esc));}
.ini-rc{padding:calc(13px*var(--esc)) calc(15px*var(--esc));}
.ini-rc-ini{width:calc(36px*var(--esc));height:calc(36px*var(--esc));}
.ini-rec-g{grid-template-columns:repeat(auto-fit,minmax(calc(232px*var(--esc)),1fr));}
/* Tres columnas, como abajo de 1600 px: lista, conversación y el panel de la
derecha. Con dos, el panel caía en un segundo renglón bajo la lista y la
conversación se encogía a una franja (monitores de 1920). */
.msj{grid-template-columns:calc(300px*var(--esc)) minmax(0,1fr) calc(284px*var(--esc));height:calc(100vh - 210px*var(--esc));}
.msj-av{width:calc(32px*var(--esc));height:calc(32px*var(--esc));}
}
/* ---------- INICIO · bandeja de trabajo (Fase 1b) ----------
Lo que pide atención, arriba de la lista; a la derecha, arriba de la vista
previa, el día de hoy, quién está y qué cambió desde la última vez. Una
sola piel: borde de 1 px, barra de estado a la izquierda, nada de sombra. */
.ini-prev-col{min-width:0;display:flex;flex-direction:column;}
.ini-lado{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:18px 26px 0;}
/* ---------- BANDEJA DE ENTRADA (tablero «Inicio») ---------- */
.sel-top{display:none;}
.sel-body{max-width:none;padding:20px 32px 26px;}
.sel-h{align-items:center;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line);}
.sel-h h2{font-family:var(--slab);font-size:26px;font-weight:600;letter-spacing:-.015em;color:var(--text);}
.sel-h p{font-size:var(--t-sm);color:var(--text-2);}
.bj-hacts{display:flex;align-items:center;gap:10px;margin-left:auto;}
.bj-hacts input[type=search]{width:290px;max-width:40vw;font:inherit;font-size:var(--t-base);padding:8px 12px;
border:1px solid var(--line-2);border-bottom-width:2px;border-radius:var(--r-sm);background:var(--surface);color:var(--text);}
.bj-hacts input[type=search]:focus{outline:none;border-color:var(--gold-deep);}
.bj-grid{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:22px;align-items:start;}
.bj-main{min-width:0;display:flex;flex-direction:column;gap:10px;}
.bj-sec-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.bj-sec-h h2{margin:0;font-size:var(--t-xs);font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--text-3);}
.bj-orden{margin-left:auto;font-size:var(--t-sm);color:var(--text-3);}
.bj-main .ini-tabs{display:inline-flex;gap:0;padding:0;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;border-bottom:1px solid var(--line-2);}
.bj-main .ini-tab{font-size:var(--t-sm);padding:4px 11px;border:0;border-radius:0;background:var(--surface);color:var(--text-2);margin:0;box-shadow:none;}
.bj-main .ini-tab+.ini-tab{border-left:1px solid var(--line-2);}
.bj-main .ini-tab.on{background:#35332D;color:#FFFFFF;}
.bj-main .ini-tab i{font-style:normal;opacity:.7;margin-left:4px;}
.bj-tabla{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;}
.bj-tabla .ini-rows{max-height:none;overflow:visible;padding-bottom:0;}
.bj-th,.bj-row{display:grid;grid-template-columns:minmax(0,1fr) 116px 140px 160px 104px 36px;gap:16px;align-items:center;padding:13px 16px;}
/* La sexta columna es el «⋯» de acciones (carpeta, borrar, editar): con el
renglón entrando directo al proyecto, no tenían otro lugar donde vivir. */
.bj-c6{display:flex;justify-content:flex-end;}
.bj-mas{width:36px;height:34px;padding:0;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);color:var(--text-2);font-size:18px;line-height:1;cursor:pointer;box-shadow:none;}
.bj-mas:hover,.bj-mas:focus-visible{background:var(--surface-3);color:var(--text);}
.bj-th{padding:9px 16px;background:var(--surface-2);border-bottom:1px solid var(--line-2);font-size:var(--t-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);}
.bj-th span:nth-child(n+4),.bj-c4,.bj-c5{text-align:right;}
.bj-row{width:100%;border:0;border-bottom:1px solid var(--line);border-left:3px solid var(--line);background:var(--surface);text-align:left;font:inherit;cursor:pointer;color:var(--text);box-shadow:none;border-radius:0;}
.bj-row:hover{background:var(--surface-2);}
.bj-row:last-child{border-bottom:0;}
.bj-row.at-critico{border-left-color:var(--critico);} .bj-row.at-checar{border-left-color:var(--checar);} .bj-row.at-info{border-left-color:var(--info);}
.bj-c1{min-width:0;display:flex;flex-direction:column;gap:3px;}
.bj-n{font-size:14px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bj-s{font-size:var(--t-sm);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bj-etapa{display:inline-flex;padding:3px 9px;border-radius:2px;background:var(--surface-3);color:var(--text-2);font-size:var(--t-sm);font-weight:600;}
.bj-etapa.ejecucion{background:#FCF4EA;color:#8F5820;} .bj-etapa.validacion{background:#EEF2F7;color:#2E5177;}
.at-critico .bj-etapa.ejecucion{background:#FBF0EF;color:var(--critico-deep);}
.bj-c3{display:flex;flex-direction:column;gap:5px;}
.bj-bar{display:block;height:5px;border-radius:2px;background:var(--surface-3);overflow:hidden;} .bj-bar i{display:block;height:100%;background:var(--bueno);}
.bj-pct{font-size:var(--t-xs);color:var(--text-2);font-variant-numeric:tabular-nums;}
.bj-c4{font-size:var(--t-sm);color:var(--text-2);line-height:1.35;}
.bj-c4 b{font-family:var(--slab);font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;}
.at-critico .bj-c4 b{color:var(--critico-deep);} .at-checar .bj-c4 b{color:var(--checar);} .at-info .bj-c4 b{color:var(--info);}
.bj-aldia{color:var(--text-3);}
.bj-c5{font-size:var(--t-sm);color:var(--text-3);font-variant-numeric:tabular-nums;}
.bj-lado{min-width:0;display:flex;flex-direction:column;gap:16px;}
.bj-lado:empty{display:none;}
.bj-card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;}
.bj-card-h{display:flex;align-items:center;gap:8px;padding:11px 16px 9px;border-bottom:1px solid var(--line);background:var(--surface-2);
font-size:var(--t-xs);font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--text-2);}
.bj-card-h .ini-pt{width:7px;height:7px;border-radius:50%;background:var(--bueno);display:inline-block;}
.bj-it{display:flex;gap:12px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line);} .bj-it:last-child{border-bottom:0;}
.bj-hora{flex:none;min-width:30px;font-family:var(--slab);font-size:15px;font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums;text-align:center;}
.bj-av{flex:none;width:30px;height:30px;border-radius:50%;background:var(--surface-3);color:var(--text-2);font-family:var(--slab);font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;}
.bj-tx{min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--text);} .bj-tx small{font-size:var(--t-sm);color:var(--text-3);}
.bj-vacio{padding:12px 16px;font-size:var(--t-sm);color:var(--text-3);}
.bj-desde{background:#35332D;border-radius:var(--r-sm);padding:16px;display:flex;flex-direction:column;gap:9px;color:#EDEAE0;}
.bj-desde h2{margin:0;font-size:var(--t-xs);font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#B9B5A6;}
.bj-desde p{margin:0;font-size:13px;line-height:1.6;} .bj-desde b{color:#E1CF9E;}
.rail-logo{width:26px;height:auto;margin:2px 0 8px;opacity:.95;}
.rail .rail-avatar{width:34px;height:34px;border-radius:50%;border:0;background:#46443D;color:var(--gold-light);font-family:var(--slab);font-size:12px;font-weight:600;cursor:pointer;margin:4px 0 6px;padding:0;}
.rail .rail-avatar:hover{background:#5A574F;}
@media (max-width:1100px){ .bj-grid{grid-template-columns:1fr;} .bj-th{display:none;} .bj-row{grid-template-columns:minmax(0,1fr) auto auto;} .bj-c3,.bj-c4,.bj-c5{display:none;} }
@media (max-width:900px){ .sel-body{padding:16px;} .bj-hacts{width:100%;} .bj-hacts input[type=search]{flex:1;width:auto;max-width:none;} .rail-logo,.rail .rail-avatar{display:none;} .bj-mas{width:44px;height:44px;} }
.ini-lado:empty{display:none;}
.ini-lado section{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;min-width:0;}
.ini-lado h4{margin:0;padding:9px 14px 8px;border-bottom:1px solid var(--line);background:var(--surface-2);
font-size:var(--t-xs);font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--text-2);}
.ini-lado ul{list-style:none;margin:0;padding:6px 0;}
.ini-lado li{display:flex;gap:10px;align-items:baseline;padding:6px 14px;font-size:var(--t-base);min-width:0;}
.ini-lado li span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ini-lado li b{font-family:var(--slab);font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-2);flex:none;}
.ini-pt{width:7px;height:7px;border-radius:50%;background:var(--bueno);flex:none;align-self:center;}
.ini-lado .vacio{padding:10px 14px 12px;font-size:var(--t-sm);color:var(--text-3);}
.ini-desde{grid-column:1/-1;background:#35332D;border-radius:var(--r-sm);padding:12px 14px;color:#EDEAE0;font-size:var(--t-base);line-height:1.55;}
.ini-desde b{color:#E1CF9E;font-weight:600;}
@media (max-width:1100px){ .ini-lado{grid-template-columns:1fr;} }
@media (max-width:900px){ .ini-lado{padding:14px 12px 0;} }
/* ---------- Mensajería viva (Fase 2a) ---------- */
.msj-est{font-size:var(--t-micro);color:var(--text-tertiary);margin-top:3px;display:flex;gap:6px;align-items:center;}
.msj-est.fallo{color:var(--critico);}
.msj-est .lnk{border:0;background:none;padding:0;font:inherit;font-size:inherit;color:var(--gold-ink);text-decoration:underline;cursor:pointer;}
.msj-m.pend .msj-mt{opacity:.55;}
.msj-row.bor .msj-rs{color:var(--checar);font-style:italic;}
.msj-hit{width:100%;display:flex;flex-direction:column;gap:2px;padding:8px 14px;border:0;border-left:3px solid transparent;
background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;min-width:0;}
.msj-hit:hover{background:var(--surface-2);}
.msj-hn{display:flex;justify-content:space-between;gap:8px;font-size:var(--t-sm);font-weight:600;}
.msj-hn span{font-weight:400;color:var(--text-tertiary);font-variant-numeric:tabular-nums;}
.msj-hs{font-size:var(--t-xs);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.msj-hs mark{background:var(--gold-soft);color:inherit;border-radius:2px;padding:0 2px;}
/* ---------- Celular (Fase 3a): un criterio por pantalla y «hoy» en la captura ---------- */
.crit-oculto{display:none !important;}
.crit-paso{position:sticky;top:0;z-index:5;background:var(--bg);padding:8px 0 10px;margin-bottom:6px;}
.crit-paso-b{height:3px;border-radius:2px;background:var(--line);overflow:hidden;}
.crit-paso-f{height:100%;background:var(--gold);transition:width .18s ease;}
.crit-paso-r{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;font-size:var(--t-sm);color:var(--text-2);}
.crit-paso-btns{display:flex;gap:8px;}
.crit-en-pasos .crit{border:0;padding:4px 0 0;}
.crit-en-pasos .crit-h label{font-size:var(--t-lg);line-height:1.35;}
.rp-hoy-prog{display:flex;flex-direction:column;gap:6px;margin:-6px 0 14px;font-size:var(--t-sm);color:var(--text-2);}
.rp-hoy-prog b{font-family:var(--slab);font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;}
.rp-hoy-b{display:block;height:3px;border-radius:2px;background:var(--line);overflow:hidden;}
.rp-hoy-b span{display:block;height:100%;background:var(--bueno);}
@media (max-width:720px){
.crit .chips{display:flex;gap:8px;}
.crit .chip{min-height:44px;flex:1 1 auto;justify-content:center;font-size:var(--t-md);}
.crit-nota{font-size:16px;min-height:44px;}
}
/* ---------- Escritorio (Fase 4a): modos del cronograma y «Hoy» ---------- */
.cr-rb-ws + .cr-rb-ws{margin-left:10px;}
#cr-hoy{margin-left:8px;}
/* ---------- Alma (Fase 5a): esqueletos y lo que llega se enciende ---------- */
.esq{display:flex;flex-direction:column;gap:9px;padding:14px 4px;}
.esq span{display:block;height:10px;border-radius:2px;
background:linear-gradient(90deg,var(--surface-3) 0%,var(--surface-2) 40%,var(--surface-3) 80%);
background-size:360px 100%;animation:esq 1.3s linear infinite;}
@keyframes esq{0%{background-position:-180px 0;}100%{background-position:180px 0;}}
.msj-m.llega,.bnd-item.llega{animation:llega 1.2s ease-out both;}
@keyframes llega{0%{background-color:var(--gold-soft);}100%{background-color:transparent;}}
/* ---------- Mensajería (Fase 2b): visto por N ---------- */
.msj-est.ok{color:var(--bueno);}
.msj-est svg.i.sm{width:13px;height:13px;stroke-width:2.4;}
/* ---------- Mensajería (Fase 2b): citar, adjuntar, voz, corregir ---------- */
.msj-cita{display:flex;flex-direction:column;gap:1px;width:100%;max-width:420px;margin:0 0 6px;padding:4px 9px;border:0;
border-left:2px solid var(--gold);border-radius:0 var(--r-xs) var(--r-xs) 0;background:var(--surface-2);font:inherit;text-align:left;cursor:pointer;color:inherit;}
.msj-cita:hover{background:var(--surface-3);}
.msj-m.mio .msj-cita{background:var(--surface);}
.msj-m.mio .msj-cita:hover{background:var(--surface-2);}
.msj-cita b{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;color:var(--gold-ink);}
.msj-cita span{font-size:12.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.msj-adj{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.msj-img{display:block;width:118px;height:88px;border:1px solid var(--line);border-radius:var(--r-xs);overflow:hidden;background:var(--surface-3);}
.msj-img img{width:100%;height:100%;object-fit:cover;display:block;}
.msj-doc{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid var(--line-2);border-radius:var(--r-xs);
background:var(--surface);color:var(--text);text-decoration:none;font-size:var(--t-sm);max-width:330px;min-width:0;}
.msj-doc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .msj-doc small{color:var(--text-3);flex:none;}
.msj-audio{display:flex;align-items:center;gap:10px;margin-top:6px;} .msj-audio audio{max-width:320px;height:36px;}
.msj-audio span{font-size:var(--t-xs);color:var(--text-3);font-variant-numeric:tabular-nums;}
.msj-trans{margin-top:4px;font-size:var(--t-sm);color:var(--text-2);}
.msj-trans i{color:var(--text-3);font-style:normal;font-size:var(--t-xs);}
.msj-edit{font-size:var(--t-micro);color:var(--text-tertiary);margin-top:2px;}
.msj-acts{display:flex;gap:10px;margin-top:3px;opacity:0;transition:opacity .12s;}
/* Sin cursor no hay «pasar por encima»: en táctil las acciones salen con un toque en el mensaje. */
@media (hover:none){ .msj-acts{display:none;} .msj-m.abierto .msj-acts{display:flex;opacity:1;} }
.msj-m:hover .msj-acts,.msj-m:focus-within .msj-acts{opacity:1;}
.msj-acts button{border:0;background:none;padding:0;font:inherit;font-size:var(--t-micro);color:var(--text-3);cursor:pointer;text-decoration:underline;}
.msj-acts button:hover{color:var(--gold-ink);}
.msj-red{display:flex;flex-direction:column;gap:6px;padding:8px 16px 0;background:var(--surface-2);border-top:1px solid var(--line);}
.msj-red-i{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-left:2px solid var(--gold);
border-radius:0 var(--r-xs) var(--r-xs) 0;background:var(--surface);font-size:var(--t-sm);min-width:0;}
.msj-red-i b{flex:none;font-weight:600;} .msj-red-i span{flex:1;min-width:0;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.msj-red-i button{border:0;background:none;padding:2px;color:var(--text-3);cursor:pointer;display:inline-flex;}
.msj-pie .msj-ico{height:38px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;}
.msj-pie .msj-ico svg.i{margin:0;}
.msj-pie .msj-ico.grabando{background:var(--critico-bg);border-color:var(--critico);color:var(--critico);font-variant-numeric:tabular-nums;font-weight:600;}
.msj-rec{width:8px;height:8px;border-radius:50%;background:var(--critico);display:inline-block;animation:msjpulso 1s ease-in-out infinite;}
@keyframes msjpulso{0%,100%{opacity:.35;}50%{opacity:1;}}
@media (max-width:720px){ .msj-acts{opacity:1;} .msj-pie .msj-ico{height:44px;min-width:44px;} .msj-red{padding:8px 10px 0;} }
/* ---------- EDITOR DE FLUJO A PANTALLA COMPLETA (tablero «Flujo de trabajo · el mapa») ---------- */
.fxp{position:fixed;inset:0;z-index:185;display:flex;flex-direction:column;background:var(--surface);color:var(--text);}
.fxp-top{flex:none;height:40px;display:flex;align-items:center;gap:12px;padding:0 12px;background:#232320;color:#EDEAE0;}
.fxp-logo{height:14px;width:auto;opacity:.95;}
.fxp-tit{font-family:var(--slab);font-size:13px;font-weight:600;white-space:nowrap;}
.fxp-sep{flex:none;width:1px;height:15px;background:#46443D;}
.fxp-de{font-size:12px;color:#B9B5A6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.fxp-de b{color:#EDEAE0;font-weight:600;}
.fxp-miga{display:flex;align-items:center;gap:6px;font-size:12px;color:#B9B5A6;min-width:0;overflow:hidden;white-space:nowrap;}
.fxp-miga b{color:#E1CF9E;font-weight:600;}
.fxp-miga-b{font:inherit;font-size:12px;color:#E1CF9E;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;}
.fxp-miga-s{color:#6B6C64;}
.fxp-miga-n{color:#8E8B80;font-size:11px;overflow:hidden;text-overflow:ellipsis;}
.fxp-cambios{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:2px;background:#35332D;font-size:11px;color:#E1CF9E;white-space:nowrap;}
.fxp-cambios:empty{display:none;}
.fxp-cambios i{width:7px;height:7px;border-radius:50%;background:var(--gold);}
.fxp-b{font:inherit;font-size:11.5px;padding:4px 10px;border:1px solid #46443D;border-radius:2px;background:transparent;color:#EDEAE0;cursor:pointer;white-space:nowrap;}
.fxp-b:hover{background:#35332D;}
.fxp-b:disabled{color:#6B6C64;cursor:default;background:transparent;}
.fxp-b.on{background:#35332D;border-color:var(--gold-deep);color:#E1CF9E;}
.fxp-b.oro{background:var(--gold);border-color:var(--gold-deep);color:#231E0C;font-weight:600;}
.fxp-b.oro:hover{background:var(--gold-light);}
.fxp-x{flex:none;width:30px;height:28px;border:0;border-radius:2px;background:transparent;color:#B9B5A6;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.fxp-x:hover{background:#35332D;color:#FFFFFF;}
.fxp-bar{flex:none;display:flex;align-items:center;gap:6px;padding:7px 12px;background:var(--surface-2);border-bottom:1px solid var(--line-2);flex-wrap:wrap;}
.fxp-grp{display:flex;align-items:center;gap:4px;padding-right:10px;border-right:1px solid var(--line);}
.fxp-lb{font-size:11px;color:var(--text-3);margin-right:4px;}
.fxp-seg{display:inline-flex;border:1px solid var(--line-2);border-radius:2px;overflow:hidden;}
.fxp-seg button{font:inherit;font-size:11.5px;padding:4px 10px;border:0;background:var(--surface);color:var(--text-2);cursor:pointer;}
.fxp-seg button+button{border-left:1px solid var(--line-2);}
.fxp-seg button.on{background:#35332D;color:#FFFFFF;}
.fxp-zoom{font-size:11.5px;color:var(--text-2);min-width:42px;text-align:center;font-variant-numeric:tabular-nums;}
.fxp .fxp-cuad{width:28px;justify-content:center;padding:4px 0;}
.fxp-busca{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2);}
.fxp-busca input{font:inherit;font-size:12px;width:170px;padding:4px 8px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);color:var(--text);min-height:0;}
.fxp-msg{padding:6px 12px 0;}
.fxp-msg:empty{display:none;}
.fxp-msg .alert{margin:0;}
.fxp-cuerpo{flex:1;min-height:0;display:grid;grid-template-columns:232px minmax(0,1fr) 300px;}
.fxp-cuerpo[data-vista="lista"],.fxp-cuerpo[data-vista="tuberia"]{grid-template-columns:minmax(0,1fr) 320px;}
.fxp-cuerpo[data-vista="lista"] .fxp-paleta,.fxp-cuerpo[data-vista="tuberia"] .fxp-paleta{display:none;}
.fxp-paleta{min-width:0;border-right:1px solid var(--line-2);background:var(--surface-2);overflow:auto;padding:2px 10px 12px;display:flex;flex-direction:column;gap:5px;}
.fxp-pt{padding:10px 2px 3px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);}
.fxp-pt small{font-weight:400;letter-spacing:0;text-transform:none;}
.fxp-pieza{display:flex;align-items:center;gap:8px;padding:8px 9px;border:1px solid var(--line-2);border-radius:3px;background:var(--surface);font-size:12px;color:var(--text);cursor:grab;}
.fxp-pieza[data-pieza="etapa"]{border:1px dashed var(--gold-deep);}
.fxp-ico-e,.fxp-ico-m{flex:none;width:14px;height:10px;border:1.5px solid var(--gold-deep);border-radius:2px;}
.fxp-ico-m{border-style:dashed;border-radius:3px;}
.fxp-plan{padding:7px 9px;border:1px solid var(--line);border-radius:3px;background:var(--surface);cursor:grab;}
.fxp-plan b{display:block;font-size:12px;font-weight:600;color:var(--text);}
.fxp-plan small{display:block;font-size:11px;color:var(--text-3);line-height:1.35;}
.fxp-gm{font-size:10.5px;color:var(--text-3);margin-top:3px;}
.fxp-chips{display:flex;flex-wrap:wrap;gap:4px;}
.fxp-chip{padding:3px 8px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);font-size:12px;color:var(--text);cursor:grab;}
.fxp-chip.no{opacity:.45;cursor:not-allowed;}
.fxp-chip.mas{border-style:dashed;color:var(--gold-ink);cursor:pointer;background:transparent;font:inherit;font-size:11.5px;}
.fxp-chip.mas:hover{background:var(--gold-soft);}
.fxp-ley{margin-top:auto;border-top:1px solid var(--line);padding-top:4px;display:flex;flex-direction:column;gap:4px;}
.fxp-ley-i{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text);}
.fxp-ley-i i{flex:none;width:9px;height:9px;border-radius:50%;}
.fxp-centro{position:relative;min-width:0;min-height:0;background:var(--bg);}
.fxp .fx-lienzo{position:absolute;inset:0;height:auto;border:0;border-radius:0;overflow:auto;background-color:var(--bg);
background-image:radial-gradient(var(--line-2) 1px, transparent 1px);background-size:22px 22px;}
.fxp .fx-lienzo.soltar{outline:2px dashed var(--gold);outline-offset:-4px;}
.fx-escala{position:relative;}
.fx-mundo{position:absolute;left:0;top:0;transform-origin:0 0;}
.fxp .fx-svg{position:absolute;left:0;top:0;inset:auto;width:auto;height:auto;overflow:visible;pointer-events:none;}
.fxp .fx-linea{fill:none;stroke-width:2;opacity:.9;pointer-events:stroke;cursor:pointer;}
.fxp .fx-linea.vuelve{stroke-dasharray:7 4;}
.fxp .fx-linea:hover{stroke-width:3;opacity:1;}
.fxp .fx-linea.tendida{stroke:var(--gold-deep);stroke-dasharray:5 4;opacity:.7;}
.fx-req{position:absolute;transform:translate(-50%,-50%);padding:3px 9px;border-radius:10px;z-index:3;
border:1px solid color-mix(in srgb,var(--rq) 45%,transparent);background:color-mix(in srgb,var(--rq) 14%,var(--surface));
color:color-mix(in srgb,var(--rq) 78%,var(--text));font:inherit;font-size:11px;font-weight:600;white-space:nowrap;cursor:pointer;
max-width:200px;overflow:hidden;text-overflow:ellipsis;}
.fx-req:hover{background:color-mix(in srgb,var(--rq) 24%,var(--surface));}
.fxp .fx-nodo{width:200px;min-height:84px;padding:10px 12px 9px;border:1px solid var(--line-2);border-radius:4px;
background:var(--surface);box-shadow:0 1px 2px rgba(35,35,32,.06);z-index:2;}
.fxp .fx-nodo.sel{border:2px solid var(--gold-deep);box-shadow:0 6px 16px rgba(35,35,32,.12);padding:9px 11px 8px;}
.fxp .fx-nodo.cerrada{background:var(--surface-2);border-style:solid;}
.fxp .fx-nodo.fin{border-width:1px;}
.fxp .fx-nodo.sel.fin{border-width:2px;}
.fxp .fx-nodo.tenue{opacity:.35;}
.fxp .fx-nodo.hallada{box-shadow:0 0 0 3px var(--gold-soft);}
.fx-nodo-h{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.fxp .fx-nodo-t{font-family:var(--slab);font-size:14px;font-weight:600;color:var(--text);line-height:1.25;}
.fx-final{flex:none;padding:1px 6px;border-radius:2px;background:#232320;color:#EDEAE0;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.fx-chips{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px;}
.fx-chips span{padding:1px 6px;border-radius:2px;background:var(--surface-3);font-size:10.5px;color:var(--text-2);}
.fx-nodo-p{display:flex;align-items:center;gap:5px;margin-top:6px;font-size:10.5px;color:var(--text-3);line-height:1.35;}
.fx-nodo-p.oro{color:var(--gold-ink);font-weight:600;}
.fx-nodo-p.ojo{color:var(--checar);font-weight:600;}
.fx-nodo-p svg.i{flex:none;width:11px;height:11px;}
/* A la altura del nombre de la etapa: el paso entre etapas va por arriba; los datos, por los renglones. */
.fxp .fx-puerto{top:20px;border:2px solid var(--gold-deep);box-sizing:border-box;}
.fxp .fx-sal{background:var(--gold);}
.fx-nodo-tb{position:absolute;right:8px;top:-15px;display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line-2);border-radius:3px;
background:var(--surface);box-shadow:0 2px 6px rgba(35,35,32,.10);z-index:4;}
.fx-nodo-tb button{font:inherit;font-size:10.5px;padding:2px 7px;border:0;border-radius:2px;background:transparent;color:var(--text);cursor:pointer;white-space:nowrap;}
.fx-nodo-tb button:hover{background:var(--surface-2);}
.fx-nodo-tb button.mal{color:var(--critico);}
.fxp .fx-marco{border:1.5px dashed var(--gold);border-radius:10px;background:color-mix(in srgb,var(--gold-soft) 45%,transparent);}
.fxp .fx-marco-t{top:6px;left:10px;font-size:10.5px;letter-spacing:.12em;}
.fxp-mini{position:absolute;right:14px;bottom:14px;width:150px;height:96px;border:1px solid var(--line-2);border-radius:3px;
background:var(--surface);box-shadow:0 2px 6px rgba(35,35,32,.08);overflow:hidden;cursor:pointer;z-index:5;}
.fxp-mini-e{position:absolute;border-radius:2px;background:var(--line-2);}
.fxp-mini-e.sel{background:var(--gold);}
.fxp-mini-v{position:absolute;border:1.5px solid var(--gold-deep);border-radius:2px;box-sizing:border-box;}
.fxp-ayuda{position:absolute;left:12px;bottom:10px;z-index:5;pointer-events:none;padding:3px 8px;border-radius:2px;
font-size:11px;color:var(--text-3);background:color-mix(in srgb,var(--bg) 85%,transparent);}
.fxp .fx-lado{border:0;border-left:1px solid var(--line-2);border-radius:0;padding:0;height:auto;max-height:none;
background:var(--surface);overflow:auto;display:flex;flex-direction:column;}
.fxp-sec{padding:12px 14px 10px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:7px;}
.fxp-sec h4{margin:0;display:flex;justify-content:space-between;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);}
.fxp-sec h4 span{font-weight:400;letter-spacing:0;text-transform:none;}
.fxp-sec label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--text-2);}
.fxp-sec input:not([type=checkbox]):not([type=radio]),.fxp-sec select{font:inherit;font-size:12.5px;padding:6px 8px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);color:var(--text);min-height:0;}
.fxp-sec label.fx-chk{flex-direction:row;align-items:center;gap:8px;margin:0;font-size:12px;color:var(--text);}
.fxp-sec .fx-mod{flex-direction:initial;}
.fxp-nota{margin:0;font-size:11.5px;line-height:1.45;color:var(--text-2);}
.fxp-res{font-size:12.5px;color:var(--text);}
.fxp .fx-mods{gap:4px;}
.fxp .fx-mod{display:grid;padding:5px 7px;border:1px solid var(--line);border-radius:3px;background:var(--surface);font-size:12px;color:var(--text);}
.fxp .fx-mod.on{border-color:var(--gold-light);background:color-mix(in srgb,var(--gold-soft) 45%,var(--surface));}
/* Calidad, por área: hermano del renglón «Calidad», sangrado bajo su nombre; sin caja por lista (fxCalidadHTML). */
.fx-cal{margin:2px 0 0 26px;padding:6px 0 1px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:1px;}
.fx-cal-t{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--text-3);margin-bottom:3px;}
.fx-cal-t span{font-variant-numeric:tabular-nums;}
.fx-cal-row{padding:3px 0;border-bottom:1px solid var(--line);}
.fx-cal-row:last-of-type{border-bottom:0;}
.fxp-sec label.fx-cal-l{display:flex;flex-direction:row;align-items:center;gap:7px;font-size:12px;color:var(--text);cursor:pointer;}
.fxp-sec label.fx-cal-l input{width:auto;min-height:0;margin:0;flex:none;}
.fxp-sec label.fx-cal-l:has(input:checked){color:var(--gold-ink);font-weight:600;}
.fx-cal-a{display:flex;flex-wrap:wrap;gap:5px;margin:5px 0 4px 21px;}
.fxp-sec label.fx-cal-chip{display:inline-flex;flex-direction:row;align-items:center;gap:5px;padding:3px 9px;border:1px solid var(--line-2);
border-radius:12px;background:var(--surface);font-size:11px;color:var(--text-2);cursor:pointer;}
.fxp-sec label.fx-cal-chip input{width:auto;min-height:0;margin:0;}
.fxp-sec label.fx-cal-chip:has(input:checked){background:var(--gold-soft);border-color:var(--gold);color:var(--gold-ink);font-weight:600;}
.fx-cal-nota{margin:4px 0 0;font-size:11px;color:var(--text-3);line-height:1.4;}
.fx-cal-link{border:0;background:none;padding:0;margin-left:2px;font:inherit;font-size:inherit;color:var(--gold-ink);text-decoration:underline;cursor:pointer;}
.fxp-sal{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center;padding:6px 8px;
border:1px solid var(--line);border-left:3px solid var(--rq);border-radius:3px;font-size:12px;}
.fxp-sal-a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fxp-sal-a small{color:var(--text-3);}
.fxp-sec .fxp-sal select{font-size:11.5px;padding:3px 5px;max-width:132px;}
.fxp-sal-x{border:0;background:none;color:var(--text-3);cursor:pointer;padding:2px;display:inline-flex;}
.fxp-sal-x:hover{color:var(--critico);}
.fxp-sec .fxp-conectar{border-style:dashed;color:var(--text-2);}
.fxp-sec-fin{border-bottom:0;margin-top:auto;}
.fxp .fxp-quitar{align-self:flex-start;color:var(--critico);}
.fxp-pie{flex:none;height:30px;display:flex;align-items:center;gap:14px;padding:0 12px;background:var(--surface-2);
border-top:1px solid var(--line-2);font-size:11.5px;color:var(--text-2);white-space:nowrap;}
.fxp-pie-e{display:inline-flex;align-items:center;gap:6px;}
.fxp-pie-e i{width:8px;height:8px;border-radius:50%;background:var(--bueno);}
.fxp-pie-e.ojo i{background:var(--checar);}
.fxp-pie-e.mal i{background:var(--critico);}
.fxp-pie-m{overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:52%;}
.fxp-pie-m.ojo{color:var(--checar);}
.fxp-pie-m.mal{color:var(--critico);}
.fxp-req{display:inline-flex;padding:1px 8px;border-radius:10px;border:1px solid color-mix(in srgb,var(--rq) 45%,transparent);
background:color-mix(in srgb,var(--rq) 14%,var(--surface));color:color-mix(in srgb,var(--rq) 78%,var(--text));font-size:10.5px;font-weight:600;white-space:nowrap;}
.fxp-pop{position:fixed;z-index:10;width:300px;background:var(--surface);border:1px solid var(--line-2);border-radius:4px;
box-shadow:0 12px 32px rgba(35,35,32,.18);padding:10px;display:flex;flex-direction:column;gap:6px;}
.fxp-pop-h{font-size:12px;color:var(--text-2);}
.fxp-pop-l{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-top:4px;}
.fxp-pop-o{display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:start;padding:6px 7px;border:1px solid var(--line);border-radius:3px;cursor:pointer;font-size:12px;color:var(--text);}
.fxp-pop-o.on{border-color:var(--gold-deep);background:color-mix(in srgb,var(--gold-soft) 60%,var(--surface));}
.fxp-pop-o input{margin:2px 0 0;width:auto;min-height:0;}
.fxp-pop-o i{width:9px;height:9px;border-radius:50%;margin-top:4px;}
.fxp-pop-o b{display:block;font-weight:600;}
.fxp-pop-o small{display:block;font-size:11px;color:var(--text-3);line-height:1.35;}
.fxp-pop #fxp-etq{font:inherit;font-size:12px;padding:5px 8px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);color:var(--text);min-height:0;}
.fxp-pop-a{display:flex;align-items:center;gap:6px;margin-top:4px;}
/* Lista: la misma configuración de arriba abajo (tablero «lista y prueba en vivo»). */
.fxp-lista{position:absolute;inset:0;overflow:auto;padding:14px 18px;background:var(--bg);}
.fxl-in{max-width:980px;display:flex;flex-direction:column;}
.fxl-card{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 14px;
border:1px solid var(--line-2);border-radius:4px;background:var(--surface);cursor:pointer;}
.fxl-card.sel,.fxl-card.aqui{border:2px solid var(--gold-deep);padding:11px 13px;}
.fxl-card.aqui{box-shadow:0 4px 12px rgba(35,35,32,.08);}
.fxl-n{width:26px;height:26px;border-radius:50%;background:var(--surface-3);color:var(--text-2);display:inline-flex;align-items:center;justify-content:center;
font-family:var(--slab);font-size:12px;font-weight:600;}
.fxl-card.antes .fxl-n{background:color-mix(in srgb,var(--bueno) 16%,var(--surface));color:var(--bueno);}
.fxl-card.aqui .fxl-n{background:var(--gold);color:#231E0C;}
.fxl-n.fin{background:#232320;color:#EDEAE0;}
.fxl-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.fxl-h b{font-family:var(--slab);font-size:15px;font-weight:600;color:var(--text);}
.fxl-t{font-size:11px;color:var(--text-3);}
.fxl-aqui{padding:1px 7px;border-radius:2px;background:var(--gold-soft);font-size:10.5px;font-weight:600;color:var(--gold-ink);}
.fxl-dentro{margin-top:9px;padding:8px 10px;border-left:3px solid var(--gold-light);background:var(--surface-2);border-radius:0 3px 3px 0;}
.fxl-dt{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);}
.fxl-cadena{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:12px;}
.fxl-cadena span{padding:3px 9px;border:1px solid var(--line-2);border-radius:3px;background:var(--surface);}
.fxl-cadena i{font-style:normal;color:var(--gold-deep);}
.fxl-fr{display:flex;gap:14px;flex-wrap:wrap;margin-top:7px;font-size:11.5px;color:var(--text-2);}
.fxl-sal{display:flex;flex-direction:column;gap:4px;margin-top:8px;font-size:12px;color:var(--text);}
.fxl-ok{font-size:11px;font-weight:600;color:var(--bueno);}
.fxl-no{font-size:11px;font-weight:600;color:var(--critico);}
.fxl-nota{font-size:12px;color:var(--text-3);}
.fxl-ins{display:flex;align-items:center;gap:8px;padding:3px 0 3px 58px;}
.fxl-ins::before,.fxl-ins::after{content:'';flex:1;height:1px;background:var(--line);}
.fxl-ins button{font:inherit;font-size:11px;padding:2px 8px;border:1px dashed var(--line-2);border-radius:2px;background:transparent;color:var(--text-3);cursor:pointer;}
.fxl-ins button:hover{color:var(--gold-ink);border-color:var(--gold-deep);}
.fxl-aviso{margin-bottom:10px;padding:8px 10px;border:1px solid var(--line-2);border-radius:3px;background:var(--surface);font-size:12px;color:var(--text-2);}
/* Tubería de datos: solo lectura. */
.fxp-tuberia{position:absolute;inset:0;overflow:auto;padding:14px 18px;background:var(--bg);}
.fxt-nota{margin:0 0 12px;font-size:12px;color:var(--text-2);max-width:760px;line-height:1.5;}
.fxt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;}
.fxt-mod{padding:10px 12px;border:1px solid var(--line-2);border-radius:4px;background:var(--surface);display:flex;flex-direction:column;gap:6px;}
.fxt-mod.fuera{opacity:.6;}
.fxt-mod b{font-family:var(--slab);font-size:13.5px;font-weight:600;color:var(--text);}
.fxt-l{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:11.5px;}
.fxt-l span{color:var(--text-3);margin-right:2px;}
.fxt-l i{font-style:normal;padding:1px 6px;border-radius:2px;background:var(--surface-3);color:var(--text-2);}
.fxt-l i.da{background:var(--gold-soft);color:var(--gold-ink);}
.fxt-f{font-size:11px;color:var(--checar);}
/* Prueba en vivo. */
.fxp-tl{gap:0;}
.fxp-tl-i{display:grid;grid-template-columns:18px 1fr;gap:10px;padding-bottom:12px;position:relative;font-size:13px;color:var(--text);}
.fxp-tl-i::before{content:'';position:absolute;left:8px;top:16px;bottom:0;width:2px;background:var(--line);}
.fxp-tl-i:last-child::before{display:none;}
.fxp-tl-p{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-2);background:var(--surface);box-sizing:border-box;margin-top:2px;position:relative;z-index:1;}
.fxp-tl-i.antes .fxp-tl-p{background:var(--bueno);border-color:var(--bueno);}
.fxp-tl-i.aqui .fxp-tl-p{background:var(--gold);border-color:var(--gold-soft);box-shadow:0 0 0 2px var(--gold);}
.fxp-tl-i.despues b{color:var(--text-3);}
.fxp-tl-aqui{font-size:11px;color:var(--gold-ink);}
.fxp-tl-lb{display:block;margin-top:8px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);}
.fxp-tl-m{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:4px;}
.fxp-tl-m .fxp-tl-lb{width:100%;margin-top:6px;}
.fxp-tl-m i{font-style:normal;padding:2px 7px;border-radius:2px;background:var(--gold-soft);font-size:11px;color:var(--gold-ink);font-weight:600;}
.fxp-tl-f{display:flex;justify-content:space-between;gap:8px;margin-top:5px;padding:5px 8px;border:1px solid var(--line);border-radius:3px;font-size:11.5px;}
.fxp-tl-s{margin-top:5px;padding:6px 8px;border-radius:3px;font-size:11.5px;}
.fxp-tl-s.ok{border:1px solid color-mix(in srgb,var(--bueno) 35%,transparent);background:color-mix(in srgb,var(--bueno) 9%,var(--surface));}
.fxp-tl-s.no{border:1px solid color-mix(in srgb,var(--critico) 35%,transparent);background:color-mix(in srgb,var(--critico) 8%,var(--surface));}
.fxp-tl-s small{display:block;color:var(--text-2);margin-top:2px;}
/* Estado de cada módulo en la etapa: Abierto, Solo agregar, Solo consulta, Oculto. */
.fxp .fx-mod-n{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.fxp-sec .fx-mod-e{flex:none;max-width:120px;font-size:11px;padding:2px 4px;}
.fx-chips span.fx-e-agregar,.fxp-tl-m i.fx-e-agregar{background:var(--info-bg);color:var(--info);}
.fx-chips span.fx-e-consulta,.fxp-tl-m i.fx-e-consulta{background:var(--ajustado-bg);color:var(--ajustado);}
.fxp-ley-i i.fx-sw.abierto{background:var(--bueno);}
.fxp-ley-i i.fx-sw.agregar{background:var(--info);}
.fxp-ley-i i.fx-sw.consulta{background:var(--ajustado);}
/* Flechas de datos: un renglón por módulo en cada caja; de ahí salen y ahí llegan. */
.fxp-ley-i i.fxp-ley-l{width:16px;height:3px;border-radius:2px;}
.fxp-capa{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-2);white-space:nowrap;cursor:pointer;}
.fxp-capa input{width:auto;min-height:0;margin:0;}
.fxp #fxp-flecha.on{background:var(--gold-soft);border-color:var(--gold-deep);color:var(--gold-ink);}
.fx-filas{display:flex;flex-direction:column;margin-top:7px;border-top:1px solid var(--line);}
.fx-fila{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;min-height:24px;padding:3px 2px;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--text);}
.fx-fila:last-child{border-bottom:0;}
.fx-fila-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fx-fila-e{flex:none;padding:1px 6px;border-radius:8px;font-size:9.5px;font-weight:600;}
.fx-fila-e.fx-e-agregar{background:var(--info-bg);color:var(--info);}
.fx-fila-e.fx-e-consulta{background:var(--ajustado-bg);color:var(--ajustado);}
.fx-fila-r{flex:0 0 100%;display:block;min-height:0;margin:0;padding:0;border:0;background:none;font:inherit;font-size:10px;text-align:left;
color:var(--text-3);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fx-fila-r:hover{color:var(--gold-ink);text-decoration:underline;}
.fx-fila.marcada{background:color-mix(in srgb,var(--gold-soft) 70%,transparent);}
.fx-nodo.fx-eligiendo .fx-fila{cursor:crosshair;}
.fx-fila.origen{background:var(--gold-soft);box-shadow:inset 3px 0 0 var(--gold-deep);}
.fx-fila.puede{background:var(--dato-bg);box-shadow:inset 3px 0 0 var(--dato);}
.fx-fila.no{opacity:.4;}
.fxp .fx-dato{fill:none;stroke-width:1.8;opacity:.92;pointer-events:stroke;cursor:pointer;}
.fxp .fx-dato.punteada{stroke-dasharray:6 4;}
.fxp-ley-i i.fxp-ley-l.punteada{background-image:repeating-linear-gradient(90deg,transparent 0 3px,var(--surface) 3px 5px);}
.fxp .fx-dato:hover,.fxp .fx-dato.sel{stroke-width:3;opacity:1;}
.fx-svg [data-fl]{pointer-events:stroke;cursor:pointer;}
.fx-dmarca{position:absolute;transform:translate(-50%,-50%);z-index:3;display:grid;place-items:center;width:18px;height:18px;min-height:0;
padding:0;border:2px solid var(--dc);border-radius:50%;background:var(--surface);color:#fff;cursor:pointer;}
.fx-dmarca.parte{background:var(--dc);}
.fx-dmarca svg.i{width:10px;height:10px;}
.fx-dmarca.sel,.fx-dmarca:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--dc) 30%,transparent);}
.fx-mod-r{grid-column:2;justify-self:start;display:inline-flex;align-items:center;gap:5px;min-height:0;margin:2px 0 0;padding:1px 0;border:0;
background:none;font:inherit;font-size:var(--t-xs);color:var(--dato);cursor:pointer;text-align:left;}
.fx-mod-r:hover{text-decoration:underline;}
.fx-mod-r svg.i{width:11px;height:11px;flex:none;}
.fxd-ruta{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--text-2);}
.fxd-ruta b{color:var(--text);}
.fxd-ind{display:inline-block;margin-top:8px;padding:2px 8px;border-radius:10px;background:var(--gold-soft);color:var(--gold-ink);font-size:11px;font-weight:600;}
.fxp-sec label.fxd-p.fxd-forma{align-items:flex-start;padding:6px 8px;border:1px solid var(--line);border-radius:3px;margin-bottom:4px;font-size:12px;}
.fxp-sec label.fxd-p.fxd-forma.on{border-color:var(--gold-deep);background:color-mix(in srgb,var(--gold-soft) 60%,var(--surface));}
.fxp-sec label.fxd-p i{flex:none;width:16px;height:3px;border-radius:2px;margin-top:8px;}
.fxp-sec label.fxd-p b{display:block;font-weight:600;}
.fxp-sec label.fxd-p small{display:block;font-size:11px;color:var(--text-3);line-height:1.35;}
.fxp-sec label.fxd-p{flex-direction:row;align-items:center;gap:7px;padding:4px 0;font-size:12.5px;color:var(--text);cursor:pointer;}
.fxd-p input{width:auto;min-height:0;margin:0;}
.fxd-p.no{color:var(--text-3);cursor:default;}
.fxd-vals{margin:2px 0 8px 22px;display:flex;flex-direction:column;gap:3px;}
.fxd-vals input[type="search"]{font-size:12px;padding:4px 8px;min-height:0;}
.fxd-cuenta{font-size:11px;color:var(--text-3);}
.fxd-lista{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow:auto;padding-right:4px;}
.fxp-sec label.fxd-v{flex-direction:row;align-items:flex-start;gap:6px;font-size:12px;color:var(--text);line-height:1.35;cursor:pointer;}
.fxd-v input{width:auto;min-height:0;margin:2px 0 0;flex:none;}
.fxl-recibe{display:flex;flex-direction:column;gap:3px;margin-top:8px;font-size:12px;color:var(--text-2);}
.fxl-recibe div{display:flex;align-items:center;gap:6px;}
.fxl-recibe svg.i{width:12px;height:12px;color:var(--dato);flex:none;}
.fxp-cuerpo[data-vista="matriz"]{grid-template-columns:minmax(0,1fr) 320px;}
.fxp-cuerpo[data-vista="matriz"] .fxp-paleta{display:none;}
.fxp-matriz{position:absolute;inset:0;overflow:auto;padding:14px 18px;background:var(--bg);}
.fxm-in{max-width:1100px;display:flex;flex-direction:column;gap:12px;}
.fxm-scroll{overflow:auto;border:1px solid var(--line-2);border-radius:4px;background:var(--surface);}
.fxm{width:100%;border-collapse:collapse;font-size:12px;}
.fxm th,.fxm td{padding:6px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;}
.fxm tbody tr:last-child th,.fxm tbody tr:last-child td{border-bottom:0;}
.fxm thead th{position:sticky;top:0;z-index:1;background:var(--surface-2);font-size:10.5px;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--text-3);}
.fxm thead th small{display:block;font-weight:400;letter-spacing:0;text-transform:none;}
.fxm tbody th{min-width:170px;font-weight:400;}
.fxm tbody th b{display:block;font-size:12.5px;font-weight:600;color:var(--text);}
.fxm tbody th small{display:block;font-size:11px;color:var(--text-3);}
.fxm-e{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--text-2);background:none;border:0;padding:0;cursor:pointer;}
.fxm-e:hover,.fxm-e.sel{color:var(--gold-ink);}
.fxm-e.sel{text-decoration:underline;text-underline-offset:3px;}
.fxm-c{display:inline-block;font:inherit;font-size:11px;font-weight:600;padding:3px 9px;border-radius:10px;border:1px solid transparent;white-space:nowrap;}
button.fxm-c{cursor:pointer;}
button.fxm-c:hover{filter:brightness(.95);}
.fxm-c.abierto{background:var(--bueno-bg);color:var(--bueno);border-color:color-mix(in srgb,var(--bueno) 35%,transparent);}
.fxm-c.agregar{background:var(--info-bg);color:var(--info);border-color:color-mix(in srgb,var(--info) 35%,transparent);}
.fxm-c.consulta{background:var(--ajustado-bg);color:var(--ajustado);border-color:color-mix(in srgb,var(--ajustado) 35%,transparent);}
.fxm-c.oculto{background:transparent;color:var(--text-3);border:1px dashed var(--line-2);}
.fxm-c.ojo{box-shadow:0 0 0 2px color-mix(in srgb,var(--checar) 50%,transparent);}
.fxm-ley{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;}
.fxm-ley div{display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
.fxm-ley small{font-size:11.5px;line-height:1.4;color:var(--text-2);}
.fxm-nota{margin:0;font-size:12px;color:var(--text-2);}
/* ---------- Pasada visual (tablero «Mapa: estados y flechas de datos», 22-sep-2026) ---------- */
/* Las píldoras de estado, con los colores del tablero, en el mapa, la paleta y la matriz. */
.fx-pill{display:inline-flex;align-items:center;padding:2px 7px;border-radius:10px;border:1px solid transparent;font-size:10px;font-weight:600;white-space:nowrap;line-height:1.3;}
.fx-pill.abierto,.fxm-c.abierto{background:#E9F0E6;border-color:#C5D8BF;color:#2F5A2B;}
.fx-pill.agregar,.fxm-c.agregar{background:#E6EEF6;border-color:#C3D3E6;color:#2B4F75;}
.fx-pill.consulta,.fxm-c.consulta{background:#F4EEDC;border-color:#E1CF9E;color:#7A6428;}
.fx-pill.oculto,.fxm-c.oculto{background:#F4F4F1;border:1px dashed #B9BAB3;color:#6B6C64;}
.fxp-pills{display:flex;flex-wrap:wrap;gap:5px;}
.fxp-pills .fx-pill{font-size:10.5px;padding:2px 8px;}
/* La paleta: piezas compactas arriba, y los módulos a la medida en crema. */
.fxp-piezas{display:grid;grid-template-columns:1fr;gap:4px;}
.fxp-piezas .fxp-pieza{padding:6px 8px;font-size:11.5px;gap:6px;}
.fxp-chip.medida{border-color:var(--gold-light);background:color-mix(in srgb,var(--gold-soft) 35%,var(--surface));}
.fxp-ley-f{display:flex;flex-direction:column;gap:6px;}
.fxp-ley-f .fxp-ley-i{gap:8px;}
.fxp-ley-f svg{flex:none;display:block;}
.fxp-paleta .fxp-plan{padding:6px 8px;}
.fxp-busca input{width:140px;}
/* La tarjeta: cabecera con el dato corto a la derecha y un renglón por módulo, con su estado y sus puntos. */
.fxp .fx-nodo{width:210px;padding:0 12px 8px;border-radius:6px;}
.fxp .fx-nodo.sel{padding:0 11px 7px;}
.fxp .fx-nodo-h{min-height:42px;}
.fx-nodo-m{flex:none;font-size:10.5px;color:var(--text-3);white-space:nowrap;}
.fxp .fx-puerto{top:21px;}
.fxp .fx-filas{margin-top:0;border-top:1px solid var(--line);}
.fxp .fx-fila{position:relative;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;min-height:36px;padding:4px 0;border-bottom:1px solid var(--line);}
.fxp .fx-fila:last-child{border-bottom:0;}
.fx-fila-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.fxp .fx-fila-n{flex:none;font-size:12.5px;font-weight:600;line-height:1.25;}
.fxp .fx-fila-r{flex:none;font-size:10px;line-height:1.3;}
.fx-fila-s{font-size:10px;color:var(--gold-ink);}
.fxp .fx-fila-e{flex:none;}
.fx-fila-p{position:absolute;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;box-sizing:border-box;
background:var(--surface);border:2px solid var(--pc,var(--gold-deep));z-index:1;pointer-events:none;}
.fx-fila-p.ent{left:-18px;}
.fx-fila-p.sal{right:-18px;background:var(--gold);border-color:var(--gold-deep);}
.fx-fila-p.ent.der{left:auto;right:-18px;}
.fxp .fx-nodo.sel .fx-fila-p.ent.der{left:auto;right:-17px;}
.fxp .fx-nodo.sel .fx-fila-p.ent{left:-17px;} .fxp .fx-nodo.sel .fx-fila-p.sal{right:-17px;}
.fxp .fx-fila.marcada{background:color-mix(in srgb,var(--gold-soft) 35%,var(--surface));}
.fxp .fx-nodo-p{margin-top:7px;}
/* Las marcas a media flecha: punto para «en vivo», candado con aro para lo congelado, Σ para el resumen. */
.fx-dmarca:not(.parte)::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--dc);}
.fx-dmarca.congelado{box-shadow:0 0 0 3px var(--gold);}
.fx-dmarca.congelado.sel,.fx-dmarca.congelado:hover{box-shadow:0 0 0 3px var(--gold),0 0 0 5px color-mix(in srgb,var(--dc) 30%,transparent);}
.fx-dmarca.resumen{font-size:11px;font-weight:700;line-height:1;}
/* La matriz, con las mismas píldoras y cuántas flechas llegan a cada celda. */
.fxm-c{min-width:110px;padding:5px 10px;border-radius:12px;}
.fxm-fl{display:inline-block;margin-left:6px;font-size:10px;font-weight:600;color:var(--gold-ink);white-space:nowrap;}
.fxm td{white-space:nowrap;}
.fxm-ley div{padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:var(--surface);gap:6px;}
/* En pantallas justas, la nota de la barra oscura cede el lugar al nombre del proyecto. */
@media (max-width:1500px){ .fxp-miga-n{display:none;} }
@media (max-width:1100px){
.fxp-cuerpo{grid-template-columns:minmax(0,1fr) 280px;}
.fxp-paleta{display:none;}
.fxp-de,.fxp-miga-n{display:none;}
}
@media (max-width:760px){
.fxp-cuerpo,.fxp-cuerpo[data-vista="lista"],.fxp-cuerpo[data-vista="tuberia"],.fxp-cuerpo[data-vista="matriz"]{grid-template-columns:1fr;}
.fxp .fx-lado{display:none;}
.fxp-top .fxp-b:not(.oro){display:none;}
.fxp-mini,.fxp-ayuda{display:none;}
}
/* ---------- MODO DE TRABAJO: la barra oscura del tablero ---------- */
body.enfoque .enf-barra{height:38px;gap:12px;background:#232320;font-size:12px;}
body.enfoque .content{padding:38px 0 26px;}
body.enfoque #vistas-bar{display:none;}
.enf-logo{height:13px;width:auto;opacity:.92;}
.enf-sep{flex:none;width:1px;height:15px;background:#46443D;}
body.enfoque .enf-t{font-family:var(--slab);font-size:12.5px;font-weight:600;color:#EDEAE0;letter-spacing:0;}
body.enfoque .enf-p{font-size:12px;color:#B9B5A6;}
.enf-seg{display:inline-flex;border:1px solid #46443D;border-radius:2px;overflow:hidden;margin-left:6px;flex:none;}
.enf-seg button{font:inherit;font-size:11.5px;padding:4px 11px;border:0;background:transparent;color:#EDEAE0;cursor:pointer;}
.enf-seg button+button{border-left:1px solid #46443D;}
.enf-seg button.on{background:var(--gold);color:#231E0C;font-weight:600;}
.enf-cap{font-size:11px;color:#B9B5A6;white-space:nowrap;}
.enf-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:2px;background:#35332D;font-size:11px;color:#E1CF9E;white-space:nowrap;}
.enf-pill.tenue{color:#B9B5A6;}
.enf-guardado{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:#B9B5A6;white-space:nowrap;}
.enf-guardado i{width:6px;height:6px;border-radius:50%;background:var(--bueno);}
.enf-x{flex:none;width:28px;height:26px;border:0;border-radius:2px;background:transparent;color:#B9B5A6;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.enf-x:hover{background:#35332D;color:#FFFFFF;}
@media (max-width:1250px){ .enf-cap{display:none;} }
/* ---------- CRONOGRAMA como su tablero ---------- */
.crw .g2-fija{width:430px;}
.crw .g2-c1{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap;}
.crw .g2-c1 .g2-clave{flex:none;}
.crw .g2-c1 .gt-name:not(.g2-clave),.crw .g2-c1 > span{overflow:hidden;text-overflow:ellipsis;min-width:0;}
.crw .g2-t-bloque{padding-left:14px;} .crw .g2-t-partida{padding-left:28px;}
.g2-c8,.g2-c9{font-size:var(--t-xs);color:var(--text-2);} .g2-c9{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.crw .crw-kpi,.crw .crw-prog > .panel-h,.crw .cr-tip,.crw .cr-lb-tira{display:none;}
.crw-mas{display:none;} .crw-mas.abierto{display:block;}
.crw-bar{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:7px 12px;margin:0 0 10px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm);}
body.enfoque .crw-bar{margin:0;border-radius:0;border-left:0;border-right:0;border-top:0;}
body.enfoque .crw-ap{display:none;}
.crw-g{display:flex;align-items:center;gap:4px;padding-right:8px;border-right:1px solid var(--line);}
.crw-lb{font-size:11px;color:var(--text-3);margin-right:3px;}
.crw-seg{display:inline-flex;border:1px solid var(--line-2);border-radius:2px;overflow:hidden;}
.crw-seg button{font:inherit;font-size:11.5px;padding:4px 10px;border:0;background:var(--surface);color:var(--text-2);cursor:pointer;}
.crw-seg button+button{border-left:1px solid var(--line-2);}
.crw-seg button.on{background:#35332D;color:#FFFFFF;}
.crw-chk{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text);cursor:pointer;margin-left:4px;}
.crw-chk input{width:13px;height:13px;margin:0;min-height:0;accent-color:var(--gold-deep);}
.crw-flex{flex:1;}
.crw-ap{font-size:11px;padding:3px 9px;border-radius:2px;background:var(--surface-3);color:var(--text-2);white-space:nowrap;}
.crw-ap.si{background:var(--gold-soft);color:var(--gold-ink);}
.crw-fin{font-size:11.5px;color:var(--text-2);white-space:nowrap;font-variant-numeric:tabular-nums;}
.crw-fin b{font-family:var(--slab);font-weight:600;color:var(--text);} .crw-fin b.mal{color:var(--critico-deep);} .crw-fin i{font-style:normal;color:#6E7A7D;}
body.enfoque .crw .crw-prog{border-radius:0;border-left:0;border-right:0;margin:0;box-shadow:none;}
.crw-abajo{margin-top:10px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);}
body.enfoque .crw-abajo{margin-top:0;border-radius:0;border-left:0;border-right:0;}
.crw-tabs{display:flex;align-items:center;gap:2px;padding:0 10px;border-bottom:1px solid var(--line);background:var(--surface-2);}
.crw-tabs button{font:inherit;font-size:12px;padding:8px 12px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--text-2);cursor:pointer;}
.crw-tabs button.on{color:var(--text);border-bottom-color:var(--gold);font-weight:600;}
.crw-tabs button i{font-style:normal;display:inline-block;min-width:16px;padding:0 4px;margin-left:4px;border-radius:8px;background:var(--checar-bg);color:var(--checar);font-size:10.5px;}
.crw-teclas{font-size:11px;color:var(--text-3);white-space:nowrap;}
.crw-cuerpo{max-height:300px;overflow:auto;}
.crw-abajo .cr-cons{border:0;margin:0;background:transparent;}
.crw-abajo .cr-cons-h{display:none;}
.crw-abajo .cr-cons-body.cerrada{display:block;}
.crw-abajo .card{border:0;box-shadow:none;margin:0;}
.crw-dinero{padding:14px 16px;font-size:12.5px;color:var(--text-2);} .crw-dinero p{margin:0 0 10px;}
.cons-fila{display:flex;align-items:flex-start;gap:8px;border-bottom:1px solid var(--line);}
.cons-fila .cons-it{flex:1;}
.cons-acc{flex:none;display:inline-flex;gap:4px;padding:6px 10px 0 0;}
.gt-ret{position:absolute;left:calc(100% + 6px);top:-13px;font-style:normal;font-size:10px;font-weight:600;color:var(--critico-deep);white-space:nowrap;pointer-events:auto;}
.gt-sinprov{position:absolute;left:calc(100% + 6px);top:13px;font-style:normal;font-size:10px;color:var(--text-3);white-space:nowrap;}
.gt-estirar{position:absolute;right:3px;top:0;bottom:0;width:6px;cursor:ew-resize;border-radius:0 3px 3px 0;}
.gt-bar:hover .gt-estirar{background:rgba(35,35,32,.22);}
.gt-sim{border-color:#8E9B9E !important;background:rgba(142,155,158,.20) !important;}
.gt-sim.movido{border-color:#5E6A6D !important;}
.lg-sim{border-color:#8E9B9E !important;}
.cr-sim-banda{border-color:#8E9B9E;background:color-mix(in srgb,#8E9B9E 14%,var(--surface));}
.dp-just{display:flex;flex-direction:column;gap:4px;margin:8px 0 4px;padding:8px;border:1px solid var(--line-2);border-radius:3px;background:var(--surface-2);}
.dp-just-t{font-size:11.5px;color:var(--critico-deep);line-height:1.4;}
.dp-just label{font-size:11px;color:var(--text-2);}
.dp-just select,.dp-just textarea{font:inherit;font-size:12px;padding:5px 7px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);color:var(--text);min-height:0;}
/* ---------- CELULAR: captura una partida por pantalla (tablero Jornada) ---------- */
@media (max-width:720px){
.cap-uno .cap-uno-h{display:flex;flex-direction:column;gap:6px;padding:14px 14px 12px;margin:0 0 12px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);}
.cap-uno-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--text-2);}
.cap-uno-top b{font-family:var(--slab);font-size:16px;color:var(--text);}
.cap-uno-red{padding:2px 8px;border-radius:10px;background:var(--checar-bg);color:var(--checar);font-size:12px;font-weight:600;}
.cap-uno-cl{margin-top:6px;font-size:13px;font-weight:700;color:var(--gold-ink);letter-spacing:.02em;}
.cap-uno-co{font-family:var(--slab);font-size:20px;font-weight:600;line-height:1.3;color:var(--text);}
.cap-uno-bl{font-size:13px;color:var(--text-3);}
.cap-uno-mas{align-self:flex-start;margin-top:6px;font:inherit;font-size:13px;color:var(--text-2);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;}
.cap-uno:not(.cap-mas) .fld:has(#rp-fecha),.cap-uno:not(.cap-mas) .fld:has(#rp-hora),.cap-uno:not(.cap-mas) .fld:has(#rp-tipo),
.cap-uno:not(.cap-mas) .fld:has(#rp-buscar),.cap-uno:not(.cap-mas) .fld:has(#rp-unidad),.cap-uno:not(.cap-mas) .fld:has(#rp-frente),
.cap-uno:not(.cap-mas) .fld:has(#rp-cuadrilla),.cap-uno:not(.cap-mas) .rp-per-fld,.cap-uno:not(.cap-mas) .fld:has(#rp-es-retrabajo),
.cap-uno:not(.cap-mas) #rp-hoy-prog,.cap-uno:not(.cap-mas) .modo-int{display:none !important;}
.cap-uno .fld:has(#rp-cant){display:grid;grid-template-columns:56px minmax(0,1fr) 56px;gap:8px;align-items:center;grid-column:1 / -1;}
.cap-uno .fld:has(#rp-cant) > label{grid-column:1 / -1;font-size:13px;}
.cap-uno #rp-cant{height:56px;font-family:var(--slab);font-size:28px;font-weight:600;text-align:center;}
.cap-paso{height:56px;min-width:44px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);font-size:26px;color:var(--text);cursor:pointer;}
.cap-paso:active{background:var(--surface-3);}
.cap-uno #rp-add{width:100%;min-height:52px;justify-content:center;font-size:16px;}
.cap-uno-ver{width:100%;justify-content:center;margin-top:8px;}
}
/* Tarea: en bloques y etapas la clave es el mismo nombre; se ve una vez. */
.crw .g2-t-bloque .g2-clave,.crw .g2-t-etapa .g2-clave{display:none;}
.crw .g2-t-partida .g2-clave{flex:none;font-weight:600;}
.crw .g2-c1 .gt-crit{flex:none;}
.crw .g2-c5,.crw .g2-c6{font-size:11.5px;white-space:nowrap;}
.crw .g2-fija{width:450px;}
.crw .g2-fija .g2-r{grid-template-columns:196px 58px 58px 34px 48px 58px;}
.crw .g2-c1 .gt-name:not(.g2-clave){flex:1 1 auto;}
.crw .g2 .g2-fija .g2-r,.crw .g2.con-wbs .g2-fija .g2-r{grid-template-columns:196px 58px 58px 34px 48px 58px;}
.crw .g2 .g2-fija{width:452px;}
/* ---------- Módulos a la medida: el constructor (Fase 5) ---------- */
.mm-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.mm-top b{font-family:var(--slab);font-size:var(--t-lg);}
.mm-top .hint{display:block;}
.mm-top-b{display:flex;gap:8px;}
.mm-cuerpo{display:grid;grid-template-columns:280px minmax(0,1fr) 300px;gap:14px;align-items:start;}
@media (max-width:1250px){ .mm-cuerpo{grid-template-columns:260px minmax(0,1fr);} .mm-cel{display:none;} }
@media (max-width:900px){ .mm-cuerpo{grid-template-columns:1fr;} }
.mm-def,.mm-cel{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:12px;}
.mm-h{font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin:14px 0 6px;
display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.mm-h:first-child{margin-top:0;}
.mm-h span{font-size:var(--t-xs);font-weight:400;letter-spacing:0;text-transform:none;color:var(--text-3);}
.mm-iconos{display:flex;gap:6px;flex-wrap:wrap;}
.mm-ico{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line-2);border-radius:var(--r-sm);
background:var(--surface);color:var(--text-2);cursor:pointer;}
.mm-ico.on{border-color:var(--gold-deep);background:var(--gold-soft);color:var(--gold-ink);}
.mm-op{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:5px;border:1px solid var(--line-2);
border-radius:var(--r-sm);font-size:var(--t-sm);color:var(--text);cursor:pointer;}
.mm-op.on{border-color:var(--gold-deep);background:color-mix(in srgb,var(--gold-soft) 55%,var(--surface));}
.mm-op input{width:auto;min-height:0;margin:0;}
.mm-chk{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:var(--t-sm);color:var(--text);cursor:pointer;}
.mm-chk input{width:auto;min-height:0;margin:0;}
.mm-campos{display:flex;flex-direction:column;gap:8px;}
.mm-regla{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid var(--line-2);
border-radius:var(--r-sm);background:var(--surface);font-size:var(--t-sm);color:var(--text);}
.mm-plantillas{display:flex;gap:6px;flex-wrap:wrap;}
.mm-tel{border:8px solid #232320;border-radius:26px;background:var(--surface);padding:10px;}
.mm-tel-in{display:flex;flex-direction:column;gap:8px;min-height:320px;}
.mm-tel-t{font-family:var(--slab);font-size:var(--t-base);font-weight:600;color:var(--text);}
.mm-tel-s{font-size:var(--t-xs);color:var(--text-3);margin-top:-6px;}
.mm-tel-c{display:flex;flex-direction:column;gap:3px;}
.mm-tel-c span{font-size:var(--t-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);}
.mm-tel-in2{min-height:30px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);
padding:6px 8px;font-size:var(--t-sm);color:var(--text-2);}
.mm-tel-sn{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.mm-tel-sn span{display:grid;place-items:center;min-height:30px;border:1px solid var(--line-2);border-radius:var(--r-sm);font-size:var(--t-sm);}
.mm-tel-fotos{display:flex;gap:6px;}
.mm-tel-fotos i{width:44px;height:36px;border-radius:var(--r-sm);background:var(--surface-3);}
.mm-tel-fotos b{display:grid;place-items:center;width:44px;height:36px;border:1px dashed var(--line-2);border-radius:var(--r-sm);color:var(--text-3);}
.mm-tel-b{margin-top:auto;display:grid;place-items:center;min-height:38px;border-radius:var(--r-sm);background:var(--gold);
color:#231E0C;font-weight:600;font-size:var(--t-sm);}
/* ---------- Acceso (Fase 1, §3) ----------
Diseño: diseno/mejora-uxui/pantallas/Login.dc.html. En compu (4a) la marca ocupa el 58 % sobre tinta
y el formulario queda a la derecha; en el celular y la tableta (4b) el formulario sube en una hoja.
Los aros se dibujan y las frases rotan cuando termina la entrada animada (#login.vivo). */
@keyframes lgAro{to{stroke-dashoffset:0;}}
@keyframes lgRaya{to{transform:scaleX(1);}}
@keyframes lgAparece{to{opacity:1;}}
@keyframes opGira{to{transform:rotate(360deg);}}
@keyframes lgDestella{0%{box-shadow:0 0 0 0 rgba(178,59,59,.35);}100%{box-shadow:0 0 0 10px rgba(178,59,59,0);}}
/* html.arrancando (index.html): el acceso no existe visualmente hasta que el
splash empieza a mostrarlo. El fondo es el mismo --bg que usa el splash
(opesa-splash.js, CFG.fondo), para que taparlo no sea, encima, un cambio
de color. La quita opesa-splash.js; si no llega a correr, el seguro de
index.html la quita a los 2 s. */
html.arrancando,html.arrancando body{background:var(--bg);}
html.arrancando #login{visibility:hidden;}
#login{position:fixed;inset:0;z-index:100;display:flex;background:var(--bg);color:var(--text);font-family:var(--font-body);overflow:auto;}
.lg-marca{position:absolute;left:0;top:0;bottom:0;width:58%;background:var(--oscuro-fondo);overflow:hidden;}
.lg-aros{position:absolute;width:900px;height:900px;right:-260px;bottom:-300px;pointer-events:none;overflow:visible;}
.lg-aro{fill:none;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;}
.lg-aro.a1{stroke:var(--gold);opacity:.3;}
.lg-aro.a2{stroke:var(--gold);opacity:.2;}
.lg-aro.a3{stroke:#8E9B9E;opacity:.16;}
.lg-orbita,.lg-centro{transform-origin:450px 450px;opacity:0;}
.lg-orbita.o1{animation:opGira 70s linear infinite;}
.lg-orbita.o2{animation:opGira 110s linear infinite reverse;}
.lg-centro{fill:var(--gold);}
.n-oro{fill:var(--gold);}
.n-oro-claro{fill:var(--gold-light);}
.n-gris{fill:#8E9B9E;}
.n-gris-l{stroke:#8E9B9E;stroke-width:1;opacity:.5;}
#login.vivo .lg-aro.a1{animation:lgAro 1.43s cubic-bezier(.33,1,.68,1) forwards;}
#login.vivo .lg-aro.a2{animation:lgAro 1.69s .26s cubic-bezier(.33,1,.68,1) forwards;}
#login.vivo .lg-aro.a3{animation:lgAro 2.08s .52s cubic-bezier(.33,1,.68,1) forwards;}
#login.vivo .lg-orbita.o1{animation:opGira 70s linear infinite,lgAparece .78s 1.43s ease-out forwards;}
#login.vivo .lg-orbita.o2{animation:opGira 110s linear infinite reverse,lgAparece .78s 1.43s ease-out forwards;}
#login.vivo .lg-centro{animation:lgAparece .78s 1.43s ease-out forwards;}
.lg-cinta{position:absolute;left:72px;top:56px;font-size:12px;font-weight:700;letter-spacing:.18em;color:#8C887C;text-transform:uppercase;}
.lg-logo{position:absolute;left:72px;top:calc(50% - 150px);display:flex;flex-direction:column;gap:22px;}
/* aspect-ratio fija el alto antes de que la imagen cargue: sin esto el logo
se acomoda solo al llegar el archivo y ahí se nota un salto. */
#lg-logo{width:330px;height:auto;aspect-ratio:2084/834;display:block;}
#lg-lema{width:190px;height:auto;aspect-ratio:279/205;display:block;}
.lg-frases{position:absolute;left:72px;right:72px;bottom:64px;display:flex;flex-direction:column;gap:14px;}
.lg-raya{width:48px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;}
#login.vivo .lg-raya{animation:lgRaya .78s 1.3s cubic-bezier(.33,1,.68,1) forwards;}
.lg-frase{min-height:88px;font-family:var(--font-display);font-size:34px;font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--oscuro-texto);
max-width:520px;opacity:0;transition:opacity .35s,transform .35s var(--ease);}
#login.vivo .lg-frase{animation:lgAparece 1.04s .78s cubic-bezier(.33,1,.68,1) forwards;}
#login.vivo .lg-frase.cambia{opacity:0;animation:none;transform:translateY(6px);}
.lg-puntos{display:flex;gap:6px;}
.lg-puntos i{width:8px;height:3px;border-radius:2px;background:#4E4A41;transition:width .3s;}
.lg-puntos i.on{width:22px;background:var(--gold);}
/* El formulario. */
.lg-lado{position:relative;margin-left:58%;flex:1;min-height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;
padding:40px clamp(32px,6.1vw,88px);}
.lg-estado{position:absolute;top:40px;right:48px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-2);}
.lg-estado-p{width:7px;height:7px;border-radius:50%;background:var(--bueno);}
.lg-estado.mal .lg-estado-p{background:var(--critico);}
.lg-box{width:100%;max-width:400px;display:flex;flex-direction:column;}
.lg-t{margin:0;font-family:var(--font-display);font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--text);}
.lg-s{margin:6px 0 28px;font-size:16px;color:var(--text-2);}
.lg-err{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;margin-bottom:18px;background:var(--critico-bg);border-left:3px solid var(--critico);
border-radius:3px;font-size:14px;line-height:1.45;color:var(--text);animation:opAparece .25s var(--ease) both,lgDestella .9s .25s ease-out 2;}
.lg-err svg.i{color:var(--critico);margin-top:1px;}
#lg-msg .msg,#ch-msg .msg{margin:0 0 18px;}
.lg-fld{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;}
.lg-fld label{font-size:14px;font-weight:600;color:var(--text);}
.lg-fld input{width:100%;box-sizing:border-box;height:46px;padding:0 14px;border:1px solid var(--line-2);border-radius:3px;background:var(--surface);
color:var(--text);font-family:var(--font-body);font-size:16px;outline:none;}
.lg-fld input:focus{border-color:var(--gold-deep);box-shadow:0 0 0 3px var(--gold-soft);}
.lg-fld input.mal{border-color:var(--critico);}
.lg-fld-p{margin-bottom:10px;}
.lg-l2{display:flex;justify-content:space-between;align-items:baseline;}
.lg-olvido{border:0;background:none;padding:0;color:var(--gold-ink);font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;}
.lg-olvido:hover{color:var(--gold-deep);text-decoration:underline;}
.lg-pw{position:relative;display:flex;}
.lg-pw input{flex:1;padding-right:48px;}
.lg-ojo{position:absolute;right:4px;top:4px;width:38px;height:38px;border:0;border-radius:3px;background:none;color:var(--text-3);
display:flex;align-items:center;justify-content:center;cursor:pointer;}
.lg-ojo:hover{color:var(--text);background:var(--surface-3);}
.lg-olvido-t{margin:0 0 10px;font-size:13px;line-height:1.5;color:var(--text-2);}
.lg-mayus{min-height:22px;margin-bottom:12px;font-size:13px;font-weight:600;color:var(--checar);display:flex;align-items:center;gap:6px;opacity:0;transition:opacity .15s;}
.lg-mayus.on{opacity:1;}
.lg-recordar{position:relative;display:flex;align-items:center;gap:10px;margin-bottom:24px;font-size:15px;color:var(--text);cursor:pointer;}
.lg-recordar input{position:absolute;left:0;top:50%;width:20px;height:20px;margin:-10px 0 0;opacity:0;}
.lg-caja{width:20px;height:20px;flex:none;box-sizing:border-box;border-radius:2px;border:1.5px solid var(--line-2);background:var(--surface);color:#231E0C;
display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;}
.lg-caja svg.i{opacity:0;}
.lg-recordar input:checked+.lg-caja{border-color:var(--gold-deep);background:var(--gold);}
.lg-recordar input:checked+.lg-caja svg.i{opacity:1;}
.lg-recordar input:focus-visible+.lg-caja{outline:2px solid var(--gold-deep);outline-offset:1px;}
#login .btn.primary.full{height:46px;padding:0 14px;font-size:16px;}
.lg-ok{height:46px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:3px;background:var(--bueno);color:#fff;font-size:16px;font-weight:650;
animation:opAparece .35s var(--ease) both;}
.lg-lenta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:10px 12px;background:var(--checar-bg);
border-left:3px solid var(--checar);border-radius:3px;font-size:14px;animation:opAparece .25s both;}
.lg-lenta button{height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:3px;background:var(--surface);color:var(--text);
font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;}
.lg-ligas{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:14px;}
.lg-link{background:none;border:0;border-bottom:1px solid var(--line-2);border-radius:0;padding:0;color:var(--text-2);font-family:var(--font-body);
font-size:13px;font-weight:550;cursor:pointer;}
.lg-link:hover{color:var(--gold-ink);border-bottom-color:var(--gold-deep);}
.lg-olvido-cel{display:none;}
.lg-pie{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--text-3);}
#lg-cola{margin:12px 0 0;font-size:13px;color:var(--text-2);}
/* La cuenta bloqueada: hasta qué hora, y la salida para entrar con otro usuario. */
.lg-bloqueo{display:flex;flex-direction:column;gap:14px;animation:opEntra .4s var(--ease) both;}
.lg-bq-ic{width:52px;height:52px;border-radius:4px;background:var(--critico-bg);color:var(--critico);display:flex;align-items:center;justify-content:center;}
.lg-bq-t{margin:0;font-family:var(--font-display);font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.2;}
.lg-bq-p{margin:0;font-size:16px;line-height:1.5;color:var(--text-2);}
.lg-bq-p b{font-weight:650;color:var(--text);}
.lg-bq-otro{align-self:flex-start;height:40px;border:0;background:none;padding:0;color:var(--text-3);font-family:var(--font-body);font-size:13px;
cursor:pointer;text-decoration:underline;}
/* Avisar a la administración: la salida que no obliga a esperar los 15 minutos. */
.lg-bq-avisar{align-self:flex-start;min-height:44px;padding:0 16px;border:1px solid var(--gold-deep);border-radius:var(--r);background:var(--surface);
color:var(--gold-ink);font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;}
.lg-bq-avisar:disabled{border-color:var(--line-2);color:var(--text-2);cursor:default;font-weight:500;}
/* En el celular y la tableta: tinta arriba con los aros y el logo; el formulario en una hoja abajo. */
@media (max-width:900px){
#login{display:block;background:var(--oscuro-fondo);color:var(--oscuro-texto);overflow:hidden;}
.lg-marca{position:absolute;inset:0;width:auto;background:none;}
.lg-aros{width:600px;height:600px;right:-240px;top:-150px;bottom:auto;}
.lg-aro{stroke-width:1.5;}
.lg-aro.a3,.lg-orbita.o2,.lg-centro,.lg-cinta,.lg-frases,.lg-orbita.o1 .n-oro-claro{display:none;}
.lg-orbita.o1 .n-oro{r:8px;}
.lg-logo{left:28px;right:28px;top:calc(env(safe-area-inset-top) + 44px);gap:16px;}
#lg-logo{width:210px;}
#lg-lema{width:132px;}
.lg-lado{position:absolute;left:0;right:0;bottom:0;margin:0;min-height:0;max-height:calc(100% - 170px);overflow-y:auto;display:block;
padding:26px 22px calc(44px + env(safe-area-inset-bottom));background:var(--bg);color:var(--text);border-radius:4px 4px 0 0;
animation:opSube .55s var(--ease) both;}
.lg-estado,.lg-pie,.lg-olvido,.lg-mayus{display:none;}
.lg-box{max-width:420px;margin:0 auto;}
.lg-t{font-size:26px;}
.lg-s{margin:4px 0 20px;font-size:15px;}
.lg-err{padding:10px 12px;margin-bottom:14px;line-height:1.4;}
.lg-err svg.i{display:none;}
.lg-fld{gap:6px;margin-bottom:14px;}
.lg-fld-p{margin-bottom:12px;}
.lg-fld input{height:50px;font-size:17px;}
.lg-pw input{padding-right:52px;}
.lg-ojo{right:3px;top:3px;width:44px;height:44px;}
.lg-recordar{min-height:44px;margin-bottom:12px;}
.lg-caja,.lg-recordar input{width:22px;height:22px;}
.lg-recordar input{margin-top:-11px;}
#login .btn.primary.full,.lg-ok{height:50px;}
.lg-ligas{margin-top:12px;gap:4px 20px;}
.lg-link{min-height:44px;border:0;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.lg-olvido-cel{display:inline-block;}
.lg-bq-t{font-size:24px;}
.lg-bq-p{font-size:15px;}
.lg-bq-ic{width:46px;height:46px;}
.lg-bq-otro{min-height:44px;}
}
/* ---------- Estados y errores (Fase 1, §13) ----------
Diseño: diseno/mejora-uxui/pantallas/Estados y Errores.dc.html (22a y 22b). La sesión vencida,
«Sin permiso» y el error inesperado van encima de la pantalla; en el celular la ocupan, con el
botón principal abajo. El aviso oscuro es el de «No se guardó»; la franja de arriba, sin conexión
y conexión de vuelta. */
.solo-lector{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.msg.aviso{background:var(--checar-bg);color:var(--text);border-left-color:var(--checar);}
@keyframes opBaja{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
@keyframes opRespira{0%,100%{opacity:.45;}50%{opacity:1;}}
@keyframes opSube{from{transform:translateY(100%);}to{transform:none;}}
@keyframes opFunde{from{opacity:0;}to{opacity:1;}}
/* Encima de todo (ventanas, visor de documentos y «Abriendo…») sin tocar #modal-root:
la ventana que ya estaba abierta, con lo capturado, se queda debajo. */
.backdrop.encima{z-index:9300;animation:none;background:rgba(38,36,31,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.modal.est{max-width:400px;padding:22px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--elev-modal);
animation:opAparece .22s var(--ease) both;}
.modal.est .est-t{margin:0;font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:0;line-height:1.3;color:var(--text);}
.modal.est .est-p{margin:0;font-size:13.5px;line-height:1.5;color:var(--text-2);}
.est-ic{display:none;width:52px;height:52px;flex:none;border-radius:4px;background:var(--surface-3);color:var(--text-2);align-items:center;justify-content:center;}
.est-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.est-sep{flex:1;}
.est-liga{border:0;background:none;padding:0;color:var(--gold-ink);font-family:var(--font-body);font-size:12.5px;font-weight:600;cursor:pointer;}
.est-liga:hover{color:var(--gold-deep);}
.est-acts .btn{font-size:13px;}
/* Sesión vencida: quién es, la contraseña y «Seguir». */
.ra-quien{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:3px;background:var(--surface-2);text-align:left;}
.ra-av{width:28px;height:28px;flex:none;border-radius:3px;background:var(--surface-3);color:var(--gold-ink);display:flex;align-items:center;justify-content:center;
font-size:11px;font-weight:650;}
.ra-quien-t b{display:block;font-size:13px;font-weight:600;}
.ra-quien-t small{display:block;font-size:12px;color:var(--text-3);}
#ra-form{display:flex;flex-direction:column;gap:12px;}
#ra-p{height:36px;padding:0 10px;border:1px solid var(--line-2);border-radius:3px;background:var(--surface);color:var(--text);
font-family:var(--font-body);font-size:14px;outline:none;}
#ra-p:focus{border-color:var(--gold-deep);box-shadow:var(--focus-halo);}
#ra-p.mal{border-color:var(--critico);}
.ra-msg:empty{display:none;}
.ra-msg .msg{margin:0;padding:0;background:none;border:0;font-size:12.5px;line-height:1.4;color:var(--critico);}
.ra-msg .msg.aviso{color:var(--checar);}
.modal.est .ra-olvido-t{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-2);text-align:left;}
/* «Sin permiso»: el estado centrado de 22a, con quién lo da. */
.modal.est.sp{max-width:480px;align-items:center;text-align:center;padding:32px 28px;background:var(--bg);}
.est.sp .est-ic{display:flex;}
.sp-dan{display:flex;flex-direction:column;gap:6px;padding:12px 16px;border:1px solid var(--line);border-radius:4px;background:var(--surface);
text-align:left;width:100%;max-width:360px;box-sizing:border-box;}
.sp-dan-t{font-size:10.5px;font-weight:600;letter-spacing:.12em;color:var(--text-3);text-transform:uppercase;}
.sp-dan-n{font-size:13px;color:var(--text);}
.sp-dan-n b{font-weight:600;}
.sp-msg:empty{display:none;}
.sp-msg .msg{margin:0;text-align:left;}
.est.sp .est-acts{justify-content:center;padding-top:4px;}
/* Error inesperado: la barra roja a la izquierda y la referencia a la derecha. */
.modal.est.er{max-width:440px;box-shadow:inset 3px 0 0 var(--critico),var(--elev-modal);}
.er-refs{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-3);}
.er-refs .est-liga{margin-right:8px;}
.er-refs label{font-size:12px;font-weight:400;color:var(--text-3);}
#er-ref{width:9ch;border:0;background:none;padding:0;font-family:var(--font-body);font-size:12px;color:var(--text-3);outline:none;}
/* El aviso oscuro de 22a: abajo al centro, con la barra del color de lo que pasó. */
.aviso-osc{position:fixed;left:0;right:0;margin:0 auto;bottom:40px;z-index:9400;display:flex;align-items:center;gap:12px;
width:max-content;max-width:min(720px,calc(100vw - 24px));padding:10px 12px 10px 14px;background:var(--oscuro-fondo);color:var(--oscuro-texto);
border-radius:3px;box-shadow:inset 3px 0 0 var(--av-c),0 12px 32px rgba(20,19,16,.28);font-size:13px;line-height:1.45;
animation:opAparece .2s var(--ease) both;}
.aviso-osc.t-critico{--av-c:var(--critico);}
.aviso-osc.t-bueno{--av-c:var(--bueno);}
.aviso-osc.t-oro{--av-c:var(--gold-deep);}
.aviso-osc.t-neutro{--av-c:var(--text-3);}
.aviso-osc-ic{display:flex;color:var(--av-c);}
.aviso-osc-t{flex:1;min-width:0;text-wrap:pretty;}
.aviso-osc-b{height:26px;padding:0 10px;border:1px solid var(--gold);border-radius:3px;background:none;color:var(--gold-light);
font-family:var(--font-body);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;}
.aviso-osc-b.tenue{border-color:var(--oscuro-linea);color:var(--oscuro-texto-2);}
/* La franja de la red: sin conexión (tinta, con la cuenta atrás) y de vuelta (dorada, unos segundos). */
.franja-red{position:fixed;left:0;right:0;top:0;z-index:73;display:flex;align-items:center;gap:12px;height:38px;padding:0 20px;
font-size:13px;animation:opBaja .2s both;}
.franja-red.sin{background:var(--oscuro-fondo);color:var(--oscuro-texto);}
.franja-red.vuelta{background:var(--gold-soft);color:var(--text);box-shadow:inset 0 -1px 0 var(--gold);}
.franja-red b{font-weight:650;flex:none;}
.franja-red-d{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.franja-red.sin .franja-red-d{color:var(--oscuro-texto-2);}
.franja-red.vuelta .franja-red-d{color:var(--text-2);}
.franja-red-p{width:8px;height:8px;flex:none;border-radius:50%;background:var(--punto-caida);animation:opRespira 1.4s infinite;}
.franja-red-ic{display:flex;color:var(--gold-ink);}
.franja-red-b{height:26px;padding:0 11px;border:1px solid var(--gold);border-radius:3px;background:none;color:var(--gold-light);
font-family:var(--font-body);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;}
/* Con la franja a la vista, la pantalla se recorre hacia abajo lo que mide. */
body.red-franja{--franja-red:38px;}
@media (min-width:721px) and (max-width:900px){
.rail,#selector{top:var(--franja-red,0px);}
.main{padding-top:var(--franja-red,0px);}
.railp{top:var(--franja-red,0px);}
.topbar{top:calc(38px + var(--franja-red,0px));}
body.sin-proyecto .topbar{top:var(--franja-red,0px);}
.sidebar{top:var(--franja-red,0px);height:calc(100vh - var(--franja-red,0px));}
}
@media (min-width:901px){
body.con-sesion.red-franja{--franja-red:calc(38px*var(--esc));}
body.con-sesion .franja-red{top:calc(56px*var(--esc));height:calc(38px*var(--esc));gap:calc(12px*var(--esc));padding:0 calc(20px*var(--esc));
font-size:calc(13px*var(--esc));}
body.con-sesion .franja-red-b{height:calc(26px*var(--esc));padding:0 calc(11px*var(--esc));font-size:calc(12.5px*var(--esc));}
}
/* Fotos que no subieron: cada foto con su error encima (22b); las demás siguen. */
.fr-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:4px;}
.fr-item{position:relative;aspect-ratio:1;border-radius:3px;overflow:hidden;background:repeating-linear-gradient(135deg,var(--surface-3) 0 6px,var(--surface-2) 6px 12px);
box-shadow:inset 0 0 0 2px var(--critico);}
.fr-item .thumb{position:absolute;inset:0;width:auto;height:auto;padding:0;border-radius:0;box-shadow:none;}
.fr-item .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.fr-velo{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;
background:color-mix(in srgb, var(--critico-bg) 90%, transparent);color:var(--critico);text-align:center;box-shadow:inset 0 0 0 2px var(--critico);}
.fr-motivo{font-size:12px;font-weight:600;line-height:1.35;}
.fr-acts{display:flex;gap:4px 12px;flex-wrap:wrap;justify-content:center;width:100%;}
.fr-item .thumb .cargando{display:none;}
.fr-a{border:0;background:none;padding:0;color:var(--critico);font-family:var(--font-body);font-size:12px;font-weight:600;text-decoration:underline;
text-underline-offset:2px;cursor:pointer;}
.fr-a:disabled{opacity:.6;cursor:default;}
.fr-prog{position:absolute;left:4px;right:4px;bottom:4px;z-index:2;height:4px;background:rgba(0,0,0,.15);}
.fr-prog i{display:block;height:100%;width:62%;background:var(--gold);animation:opRespira 1.2s infinite;}
.fr-modal .macts{margin-top:16px;}
/* En el celular ocupan la pantalla: lo que pasó al centro y el botón principal abajo, de 44 px. */
@media (max-width:720px){
.backdrop.encima{padding:0;align-items:stretch;}
.backdrop.encima .modal.est{max-width:none;max-height:none;min-height:100%;border-radius:0;box-shadow:none;background:var(--surface);
padding:24px 20px calc(20px + env(safe-area-inset-bottom));align-items:center;text-align:center;gap:10px;}
.modal.est>:first-child{margin-top:auto;}
.est .est-ic{display:flex;}
.est.ra .est-ic{color:var(--gold-ink);}
.est.er .est-ic{color:var(--critico);}
.modal.est .est-t{font-size:20px;}
.modal.est .est-p{font-size:15px;}
.est.ra .ra-quien,.est.sp .sp-dan{width:100%;max-width:360px;}
.est.ra #ra-form{margin-top:auto;width:100%;max-width:420px;}
.est.sp .est-acts,.est.er .est-acts{margin-top:auto;}
.est-acts{width:100%;max-width:420px;flex-direction:column;align-items:stretch;gap:10px;}
.est-acts .est-sep{display:none;}
.est-acts .est-liga,.est-acts .er-refs{order:1;align-self:center;font-size:14px;min-height:44px;}
.est-acts .btn{order:2;min-height:44px;justify-content:center;font-size:15px;}
.est-acts .btn.primary{order:3;}
.est.er .er-refs{justify-content:center;}
#ra-p{height:48px;font-size:16px;}
#er-ref{font-size:14px;}
.aviso-osc{left:12px;right:12px;width:auto;max-width:none;bottom:calc(16px + env(safe-area-inset-bottom));flex-wrap:wrap;}
.aviso-osc-b{height:44px;}
.franja-red{display:none !important;}
.fr-lista{grid-template-columns:repeat(2,minmax(0,1fr));}
.fr-a{min-height:40px;padding:0 6px;}
.fr-modal .macts .btn{min-height:44px;flex:1;justify-content:center;}
}
/* ============================================================
NAVEGACIÓN 2a E INICIO (compu, 901 px o más)
Diseño: diseno/mejora-uxui/pantallas/Navegacion e Inicio.dc.html, propuesta 2a,
con las tarjetas, «En línea ahora» y el recorrido de 1a. Medidas, colores y
movimientos del bloque ; en el teléfono y la tableta no cambia nada.
============================================================ */
@keyframes opEntra{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes opPulso{0%{box-shadow:0 0 0 0 rgba(42,122,78,.45);}70%{box-shadow:0 0 0 7px rgba(42,122,78,0);}100%{box-shadow:0 0 0 0 rgba(42,122,78,0);}}
@keyframes opBrillo{0%{background-position:-400px 0;}100%{background-position:400px 0;}}
@keyframes opDesliza{from{opacity:0;transform:translateX(-10px);background:var(--gold-soft);}to{opacity:1;transform:none;}}
@keyframes opBarra{from{width:100%;}to{width:0;}}
@keyframes opAparece{from{opacity:0;transform:translateY(6px) scale(.97);}to{opacity:1;transform:none;}}
@keyframes opRiel{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:none;}}
/* Botones del sistema de diseño que la app no tenía: suave y liga. */
.btn.soft{background:var(--bg);border-color:transparent;box-shadow:var(--relieve-sm);}
.btn.soft:hover{box-shadow:var(--relieve-alto);background:var(--bg);}
.btn.soft:active{transform:scale(.98);box-shadow:var(--hundido-sm);}
.btn.link{background:none;border:0;border-bottom:1px solid var(--line-2);border-radius:0;padding:0;
color:var(--text-2);font-size:var(--t-sm);font-weight:550;box-shadow:none;}
.btn.link:hover{color:var(--gold-ink);border-bottom-color:var(--gold-deep);background:none;box-shadow:none;}
/* Lo nuevo no existe fuera de compu. */
.tb2,.rail-gl,.riel2-plegar,.cinta2,.busca2{display:none;}
@media (min-width:721px){ .rail .rail-g.rail-g-vacio{display:none;} }
@media (min-width:901px){
body.con-sesion{--sbw:calc(232px*var(--esc));}
body.con-sesion.sb-riel{--sbw:calc(60px*var(--esc));}
/* ---------- La barra de arriba ---------- */
body.con-sesion .tb2{display:flex;position:fixed;top:0;left:0;right:0;height:calc(56px*var(--esc));z-index:74;
background:var(--chrome);align-items:stretch;padding:0 calc(20px*var(--esc)) 0 0;gap:calc(18px*var(--esc));font-family:var(--font-body);}
.tb2-marca{flex:none;box-sizing:border-box;display:flex;align-items:center;gap:calc(12px*var(--esc));width:var(--sbw);padding:0 calc(15px*var(--esc));
background:var(--riel-fondo);overflow:hidden;white-space:nowrap;transition:width .26s var(--ease);}
.tb2-marca img{width:calc(30px*var(--esc));height:auto;flex:none;}
.tb2-marca-t{line-height:1.15;transition:opacity .2s;}
.tb2-marca-t b{display:block;font-family:var(--font-display);font-size:calc(15px*var(--esc));font-weight:600;letter-spacing:.02em;color:var(--riel-claro);}
.tb2-marca-t span{display:block;font-size:calc(9.5px*var(--esc));font-weight:650;letter-spacing:.18em;color:var(--riel-tenue);text-transform:uppercase;}
.tb2-tabs{display:flex;align-items:flex-end;gap:2px;flex:1;min-width:0;overflow:hidden;}
.tb2-tab{height:calc(42px*var(--esc));display:flex;align-items:center;gap:calc(8px*var(--esc));padding:0 calc(8px*var(--esc)) 0 calc(4px*var(--esc));border-radius:4px 4px 0 0;flex:0 1 auto;
background:transparent;color:var(--text-2);min-width:0;transition:background .16s,color .16s;}
.tb2-tab:first-child{flex:none;}
.tb2-tab.nueva{animation:opEntra .25s var(--ease) both;}
.tb2-tab:hover{color:var(--text);}
.tb2-tab.on{background:var(--bg);color:var(--text);}
.tb2-tab-b{height:100%;display:flex;align-items:center;gap:calc(9px*var(--esc));padding:0 calc(4px*var(--esc)) 0 calc(10px*var(--esc));border:0;background:none;color:inherit;
font-family:var(--font-body);font-size:calc(14px*var(--esc));font-weight:600;cursor:pointer;white-space:nowrap;min-width:0;}
.tb2-tab-b:active{transform:scale(.97);}
.tb2-tab-n{overflow:hidden;text-overflow:ellipsis;max-width:calc(220px*var(--esc));}
.tb2-cuenta{flex:none;min-width:calc(18px*var(--esc));height:calc(18px*var(--esc));border-radius:calc(9px*var(--esc));background:var(--cuenta-oro);color:var(--gold-on);font-size:calc(11px*var(--esc));font-weight:700;
line-height:calc(18px*var(--esc));text-align:center;padding:0 calc(5px*var(--esc));font-variant-numeric:tabular-nums;}
.tb2-cuenta.alerta{background:var(--cuenta-alerta);color:#fff;}
.tb2-tab-x{flex:none;width:calc(22px*var(--esc));height:calc(22px*var(--esc));display:flex;align-items:center;justify-content:center;border:0;border-radius:2px;
background:none;color:inherit;opacity:.7;cursor:pointer;padding:0;}
.tb2-tab-x:hover{opacity:1;background:var(--pestana-x-hover);}
.tb2-mas{flex:none;height:calc(42px*var(--esc));width:calc(36px*var(--esc));border:0;background:none;color:var(--text-3);cursor:pointer;display:flex;
align-items:center;justify-content:center;padding:0;}
.tb2-mas:hover{color:var(--text);}
.tb2-mas:active{transform:scale(.94);}
.tb2-der{display:flex;align-items:center;gap:calc(16px*var(--esc));color:var(--text-2);flex:none;}
.tb2-sync{display:flex;align-items:center;gap:calc(7px*var(--esc));font-size:calc(13px*var(--esc));font-weight:600;white-space:nowrap;}
.tb2-sync .dot{width:calc(7px*var(--esc));height:calc(7px*var(--esc));animation:opPulso 2s infinite;}
.tb2-sync .dot.busy{animation:pulse 1.1s ease-in-out infinite;}
.tb2-sync .dot.bad{animation:none;}
.tb2-bell{position:relative;display:flex;align-items:center;justify-content:center;border:0;background:none;padding:0;
color:inherit;cursor:pointer;}
.tb2-bell:hover{color:var(--gold-ink);}
.tb2-bell-n{position:absolute;top:calc(-6px*var(--esc));right:calc(-8px*var(--esc));min-width:calc(16px*var(--esc));height:calc(16px*var(--esc));border-radius:calc(8px*var(--esc));background:var(--cuenta-alerta);color:#fff;
font-size:calc(10px*var(--esc));font-weight:700;line-height:calc(16px*var(--esc));text-align:center;padding:0 calc(4px*var(--esc));font-variant-numeric:tabular-nums;}
.tb2-yo{display:flex;align-items:center;gap:calc(9px*var(--esc));border:0;background:none;padding:0;cursor:pointer;text-align:left;font-family:var(--font-body);}
.tb2-av{width:calc(32px*var(--esc));height:calc(32px*var(--esc));border-radius:3px;background:var(--surface);border:1px solid var(--line-2);color:var(--gold-ink);
display:flex;align-items:center;justify-content:center;font-size:calc(12px*var(--esc));font-weight:700;}
.tb2-yo-t{line-height:1.2;}
.tb2-yo-t b{display:block;font-size:calc(13px*var(--esc));font-weight:600;color:var(--text);}
.tb2-yo-t span{display:block;font-size:calc(10px*var(--esc));font-weight:700;letter-spacing:.14em;color:var(--text-3);text-transform:uppercase;}
.tb2-yo:hover .tb2-av{border-color:var(--gold);}
/* ---------- Todo se recorre abajo de la barra y a la derecha del riel ---------- */
body.con-sesion .main{padding-top:calc(56px*var(--esc) + var(--franja-red,0px));transition:margin-left .26s var(--ease);}
:root body.con-sesion .railp{top:calc(56px*var(--esc) + var(--franja-red,0px));}
:root body.con-sesion .topbar{top:calc(94px*var(--esc) + var(--franja-red,0px));}
body.con-sesion.sin-proyecto .topbar{top:calc(56px*var(--esc) + var(--franja-red,0px));}
body.con-sesion #selector{top:calc(56px*var(--esc) + var(--franja-red,0px));padding-left:var(--sbw);transition:padding-left .26s var(--ease);}
body.enfoque .tb2{display:none !important;}
body.con-sesion.enfoque .main{padding-top:0;}
/* La marca y quién soy ya están arriba; «Volver al inicio» es la pestaña Inicio; la
campana y el estado de guardado viven en la barra; el menú se contrae desde el riel. */
body.con-sesion #rail-logo,body.con-sesion #sel-perfil,body.con-sesion .sel-top,
body.con-sesion .topbar #sync,body.con-sesion #bell-app,body.con-sesion #sb-toggle,body.con-sesion #tb-inicio,
body.con-sesion .topbar .tb-sep,body.con-sesion #sidebar .sb-brand,body.con-sesion #sidebar .sb-cerrar,
body.con-sesion #sidebar .sb-who,body.con-sesion #sidebar .sb-role,body.con-sesion #sidebar .sb-foot>div[style],
body.con-sesion #sidebar .sb-obra-chip{display:none !important;}
/* ---------- El riel (el del Inicio y el de la obra, iguales) ---------- */
body.con-sesion .rail,body.con-sesion #sidebar{top:calc(56px*var(--esc) + var(--franja-red,0px));bottom:0;height:auto;width:var(--sbw);background:var(--riel-fondo);box-shadow:none;
flex-direction:column;align-items:stretch;padding:2px calc(10px*var(--esc)) calc(12px*var(--esc));overflow-x:hidden;overflow-y:auto;
transition:width .26s var(--ease);scrollbar-width:thin;scrollbar-color:var(--riel-scroll) transparent;}
body.con-sesion #sidebar::-webkit-scrollbar-thumb,body.con-sesion .rail::-webkit-scrollbar-thumb{background:var(--riel-scroll);}
body.con-sesion .rail .rail-g{align-items:stretch;gap:2px;padding:calc(8px*var(--esc)) 0;width:auto;border-top:1px solid var(--riel-linea);}
body.con-sesion .rail .rail-g:first-of-type{border-top:0;}
body.con-sesion .rail .rail-gl{display:block;height:calc(18px*var(--esc));padding:0 calc(10px*var(--esc));font-size:calc(9.5px*var(--esc));font-weight:650;letter-spacing:.18em;
line-height:calc(18px*var(--esc));color:var(--riel-tenue);white-space:nowrap;text-transform:uppercase;transition:opacity .2s;}
body.con-sesion #sel-rail .rail-b,body.con-sesion #sidebar .sb-item,body.con-sesion #sidebar .sb-btn{position:relative;width:auto;height:calc(34px*var(--esc));
min-height:0;display:flex;align-items:center;justify-content:flex-start;gap:calc(10px*var(--esc));padding:0 calc(10px*var(--esc));border:0;border-radius:3px;
background:transparent;color:var(--riel-texto);box-shadow:none;cursor:pointer;font-family:var(--font-body);font-size:calc(13.5px*var(--esc));font-weight:500;
white-space:nowrap;text-align:left;flex:none;transform:none;transition:background .14s,color .14s;}
body.con-sesion #sel-rail .rail-b.rail-solo-cel{display:none;}
body.con-sesion #sel-rail .rail-b:hover,body.con-sesion #sel-rail .rail-b:focus-visible,body.con-sesion #sidebar .sb-item:hover,
body.con-sesion #sidebar .sb-btn:hover{background:var(--riel-realce);color:var(--gold-light);}
body.con-sesion #sel-rail .rail-b:active,body.con-sesion #sidebar .sb-item:active,body.con-sesion #sidebar .sb-btn:active{transform:scale(.97);}
body.con-sesion #sel-rail .rail-b.on,body.con-sesion #sidebar .sb-item.on{background:var(--riel-realce);color:var(--gold);box-shadow:none;font-weight:500;}
body.con-sesion #sel-rail .rail-b.on::before,body.con-sesion #sidebar .sb-item.on::before{content:'';position:absolute;left:calc(-10px*var(--esc));top:calc(8px*var(--esc));bottom:calc(8px*var(--esc));
width:2px;border-radius:0;background:var(--gold);}
body.con-sesion #sel-rail .rail-b.primary{background:var(--gold);color:var(--gold-on);}
body.con-sesion #sel-rail .rail-b.primary:hover,body.con-sesion #sel-rail .rail-b.primary:focus-visible{background:var(--riel-realce);color:var(--gold-light);}
body.con-sesion #sel-rail .rail-b svg.i,body.con-sesion #sel-rail .rail-b.primary svg.i,body.con-sesion #sidebar .sb-item svg.i,
body.con-sesion #sidebar .sb-btn svg.i{width:calc(16px*var(--esc));height:calc(16px*var(--esc));stroke-width:1.6;padding:0;border-radius:0;background:none;}
body.con-sesion #sel-rail .rail-lb{position:static;flex:1;min-width:0;opacity:1;transform:none;background:none;box-shadow:none;padding:0;
color:inherit;font:inherit;letter-spacing:normal;pointer-events:none;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s;}
body.con-sesion #sel-rail .rail-b:hover .rail-lb,body.con-sesion #sel-rail .rail-b:focus-visible .rail-lb{transform:none;}
body.con-sesion #sel-rail .rail-lb::before{display:none;}
body.con-sesion #sel-rail .rail-largo{display:inline;}
body.con-sesion #sel-rail .rail-corto{display:none;}
/* La cuenta: al lado del nombre con el riel ancho, encima del icono con el angosto. */
body.con-sesion #sel-rail .rail-b .bell-n,body.con-sesion #sidebar .sb-item .bdg{position:static;top:auto;right:auto;left:auto;margin:0 0 0 auto;
min-width:calc(18px*var(--esc));height:calc(18px*var(--esc));border-radius:calc(9px*var(--esc));background:var(--riel-realce);color:#fff;font-size:calc(11px*var(--esc));font-weight:700;line-height:calc(18px*var(--esc));
text-align:center;padding:0 calc(5px*var(--esc));box-shadow:none;font-variant-numeric:tabular-nums;flex:none;}
body.con-sesion #sel-rail .rail-b .bell-n.alerta{background:var(--cuenta-alerta);}
body.con-sesion #sidebar .sb-item .bdg:empty{display:none;}
/* El riel de la obra: sus grupos, sus vistas y lo de abajo, con la misma piel. */
body.con-sesion #sidebar .sb-group{box-sizing:content-box;height:calc(18px*var(--esc));padding:calc(8px*var(--esc)) calc(10px*var(--esc)) 0;margin:0 0 2px;font-size:calc(9.5px*var(--esc));font-weight:650;
letter-spacing:.18em;line-height:calc(18px*var(--esc));color:var(--riel-tenue);white-space:nowrap;overflow:hidden;border-top:1px solid var(--riel-linea);
transition:color .2s;}
body.con-sesion #sb-etapa:empty + #sb-menu > .sb-group:first-child{border-top:0;}
body.con-sesion #sidebar .sb-nav{padding:0 0 calc(8px*var(--esc));gap:2px;}
body.con-sesion #sidebar .sb-sub{padding:0 0 calc(4px*var(--esc)) calc(26px*var(--esc));}
body.con-sesion #sidebar .sb-sub button{color:var(--riel-tenue);font-size:calc(13px*var(--esc));}
body.con-sesion #sidebar .sb-sub button:hover{background:var(--riel-realce);color:var(--gold-light);}
body.con-sesion #sidebar .sb-sub button.on{color:var(--gold);}
body.con-sesion #sidebar .sb-subs .sb-padre{border-bottom:1px solid var(--riel-linea);}
body.con-sesion #sidebar .sb-foot{margin-top:auto;padding:calc(8px*var(--esc)) 0;border-top:1px solid var(--riel-linea);}
body.con-sesion #sidebar .sb-actions{align-items:stretch;gap:2px;}
body.con-sesion #sidebar .etp{padding:calc(11px*var(--esc)) calc(10px*var(--esc));margin:0;border-bottom:1px solid var(--riel-linea);}
body.con-sesion #sidebar .etp-n,body.con-sesion #sidebar .etp-n2{color:var(--riel-claro);}
body.con-sesion #sidebar .etp-d{color:var(--riel-texto);}
body.con-sesion #sidebar .etp-dl{color:var(--riel-tenue);}
body.con-sesion #sidebar .etp-f{color:var(--riel-texto);border-left-color:var(--riel-aviso);}
body.con-sesion #sidebar .etp-f-t{color:var(--riel-claro);}
body.con-sesion #sidebar .etp-f-t svg{color:var(--riel-aviso);}
body.con-sesion #sidebar .etp-f-b{color:var(--gold-light);}
body.con-sesion #sidebar .etp-p{background:var(--riel-tira);}
body.con-sesion #sidebar .etp-p.ya{background:var(--gold-light);}
body.con-sesion #sidebar .etp-p.on{background:var(--gold);}
body.con-sesion #sidebar .etp-dentro{border-top-color:var(--riel-dentro);}
/* «Contraer menú», al pie. */
body.con-sesion .riel2-plegar{display:flex;flex:none;margin-top:0;height:calc(38px*var(--esc));align-items:center;gap:calc(12px*var(--esc));padding:0 calc(10px*var(--esc));border:0;
border-top:1px solid var(--riel-linea);border-radius:0;background:none;color:var(--riel-tenue);cursor:pointer;font-family:var(--font-body);
font-size:calc(14px*var(--esc));white-space:nowrap;}
body.con-sesion .riel2-plegar:hover{color:var(--gold-light);}
.riel2-plegar-t{transition:opacity .2s;}
/* Angosto (60 px): solo iconos; el nombre y la cuenta salen en el globo. */
body.con-sesion.sb-riel .tb2-marca-t,body.con-sesion.sb-riel #sel-rail .rail-lb,body.con-sesion.sb-riel .rail .rail-gl,
body.con-sesion.sb-riel .riel2-plegar-t{opacity:0;pointer-events:none;}
body.con-sesion.sb-riel #sidebar .sb-group{color:transparent;font-size:calc(9.5px*var(--esc));padding:calc(8px*var(--esc)) calc(10px*var(--esc)) 0;margin:0 0 2px;border-top:1px solid var(--riel-linea);}
body.con-sesion.sb-riel #sidebar .sb-item{justify-content:flex-start;gap:calc(10px*var(--esc));padding:0 calc(10px*var(--esc));font-size:0;}
body.con-sesion.sb-riel #sidebar .sb-nav{padding:0 0 calc(8px*var(--esc));}
body.con-sesion.sb-riel #sidebar .sb-btn{width:auto;height:calc(34px*var(--esc));justify-content:flex-start;padding:0 calc(10px*var(--esc));gap:calc(10px*var(--esc));}
body.con-sesion.sb-riel #sidebar .sb-actions{align-items:stretch;}
body.con-sesion.sb-riel #sel-rail .rail-b .bell-n,body.con-sesion.sb-riel #sidebar .sb-item .bdg{position:absolute;left:calc(24px*var(--esc));top:calc(3px*var(--esc));
margin:0;background:var(--riel-cuenta);font-size:calc(11px*var(--esc));}
body.con-sesion.sb-riel #sel-rail .rail-b .bell-n.alerta{background:var(--cuenta-alerta);}
body.con-sesion #sidebar .sb-item .bdg.alerta,body.con-sesion.sb-riel #sidebar .sb-item .bdg.alerta{background:var(--cuenta-alerta);}
/* El globo del riel angosto. */
body.con-sesion #riel-tip{transform:none;margin-top:calc(-16px*var(--esc));height:calc(32px*var(--esc));display:flex;align-items:center;gap:calc(8px*var(--esc));padding:0 calc(12px*var(--esc));
background:var(--surface);color:var(--text);border:1px solid var(--line-2);border-radius:3px;box-shadow:var(--sombra-globo);
font-family:var(--font-body);font-size:calc(14px*var(--esc));font-weight:600;letter-spacing:0;transition:none;}
body.con-sesion #riel-tip::before{display:none;}
body.con-sesion #riel-tip span{color:var(--text-3);font-weight:500;}
body.con-sesion #riel-tip.on{opacity:1;transform:none;animation:opAparece .15s var(--ease) both;}
/* Al cambiar entre el Inicio y una obra, las opciones del riel entran escalonadas. */
.riel2-entra .rail-b:not(.hide),.riel2-entra .sb-item,.riel2-entra .sb-btn{animation:opRiel .26s linear both;
animation-delay:calc(var(--k, 0) * 15.6ms);}
/* ---------- Las cintas: Inicio / Toda la empresa, y la de la obra ---------- */
body.con-sesion .cinta2{display:flex;position:sticky;top:0;z-index:25;height:calc(38px*var(--esc));flex:none;background:var(--bg);
border-bottom:1px solid var(--line);align-items:center;justify-content:space-between;padding:0 calc(28px*var(--esc));font-size:calc(12px*var(--esc));font-weight:700;
letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);}
.cinta2 b{color:var(--gold-ink);font-weight:700;}
.cinta2 em{font-style:normal;margin:0 calc(8px*var(--esc));color:var(--text-3);}
:root body.con-sesion .railp{height:calc(38px*var(--esc));background:var(--bg);border-bottom:1px solid var(--line);color:var(--text-3);
font-size:calc(12px*var(--esc));letter-spacing:.16em;padding:0 calc(28px*var(--esc));}
:root body.con-sesion .railp .rp-l{gap:0;}
:root body.con-sesion .railp .rp-proy{font-size:calc(12px*var(--esc));padding:calc(3px*var(--esc)) calc(6px*var(--esc));margin-left:calc(-6px*var(--esc));}
:root body.con-sesion .railp em{color:var(--text-3);margin:0 calc(8px*var(--esc));}
:root body.con-sesion .railp .rp-r{letter-spacing:.16em;font-weight:700;color:var(--text-3);}
/* ---------- El buscador a la vista en la barra de cada pantalla ---------- */
/* La barra de cada pantalla: el título cede (con puntos suspensivos) antes que el buscador y las acciones. */
body.con-sesion .topbar{flex-wrap:nowrap;}
body.con-sesion .topbar>div:first-child{flex:1;min-width:0;}
body.con-sesion .topbar h1,body.con-sesion .topbar .crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.con-sesion .topbar .acts{flex-wrap:nowrap !important;flex:none;}
body.con-sesion .busca2{display:flex;width:min(420px*var(--esc),30vw);height:calc(46px*var(--esc));align-items:center;gap:calc(12px*var(--esc));padding:0 calc(14px*var(--esc));background:var(--surface);
border:1px solid var(--line-2);border-radius:3px;color:var(--text-3);font-family:var(--font-body);font-size:calc(15px*var(--esc));cursor:text;text-align:left;}
body.con-sesion .busca2:hover{border-color:var(--text-3);}
.busca2-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.busca2 kbd,.i2 kbd{font-size:calc(12px*var(--esc));font-weight:700;border:1px solid var(--line-2);border-radius:2px;padding:1px calc(6px*var(--esc));color:var(--text-2);
background:none;box-shadow:none;letter-spacing:0;}
body.enfoque .busca2{display:none;}
/* ---------- Inicio 2a ---------- */
/* Mensajes del Inicio: la barra y la cinta de arriba le quitan 94 px al alto. */
body.con-sesion #selector .msj{height:calc(100vh - 262px*var(--esc));}
#selector.i2-on .sel-h{display:none;}
#selector.i2-on .sel-body{padding:0;max-width:none;}
.i2{height:calc(100vh - 94px*var(--esc));min-height:calc(660px*var(--esc));padding:calc(26px*var(--esc)) calc(32px*var(--esc));display:flex;flex-direction:column;gap:calc(18px*var(--esc));box-sizing:border-box;
font-family:var(--font-body);color:var(--text);}
.i2-eti{font-size:calc(12px*var(--esc));font-weight:700;letter-spacing:.15em;color:var(--text-3);text-transform:uppercase;}
.i2-eti.oro{font-size:calc(11px*var(--esc));color:var(--gold-ink);}
#selector .i2 .btn{border-radius:var(--r-sm);font-weight:550;}
#selector .i2 .btn.primary{font-weight:600;box-shadow:none;}
#selector .i2 .btn.primary:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff;}
#selector .i2 .btn.soft{background:var(--bg);border-color:transparent;box-shadow:var(--relieve-sm);}
#selector .i2 .btn.soft:hover{box-shadow:var(--relieve-alto);}
#selector .i2 .btn.link{background:none;border:0;border-bottom:1px solid var(--line-2);border-radius:0;padding:0;color:var(--text-2);
font-size:var(--t-sm);box-shadow:none;}
#selector .i2 .btn.link:hover{color:var(--gold-ink);border-bottom-color:var(--gold-deep);}
/* Encabezado: saludo, lo de hoy y el buscador. */
.i2-cab{position:relative;z-index:20;display:flex;align-items:center;gap:calc(28px*var(--esc));animation:opEntra .5s var(--ease) both;}
.i2-hola{flex:none;}
.i2-hola h2{margin:0;font-family:var(--font-display);font-size:calc(30px*var(--esc));font-weight:600;letter-spacing:-.02em;color:var(--text);}
.i2-hola p{margin:calc(4px*var(--esc)) 0 0;min-height:1.5em;font-size:calc(15px*var(--esc));color:var(--text-2);}
.i2-busca{position:relative;flex:1;min-width:0;}
.i2-caja{height:calc(52px*var(--esc));display:flex;align-items:center;gap:calc(14px*var(--esc));padding:0 calc(16px*var(--esc));background:var(--surface);border:1px solid var(--line-2);
border-radius:4px;cursor:text;transition:border-color .15s,box-shadow .15s;}
.i2-caja svg.i{color:var(--gold-ink);}
.i2-busca.abierto .i2-caja{border-color:var(--gold-deep);box-shadow:0 0 0 3px var(--gold-soft);}
.i2-caja input{flex:1;min-width:0;height:100%;border:0;outline:none;background:none;font-family:var(--font-body);font-size:calc(16px*var(--esc));color:var(--text);padding:0;}
.i2-caja input::placeholder{color:var(--text-3);}
.i2-res{position:absolute;left:0;right:0;top:calc(100% + 6px*var(--esc));background:var(--surface);border:1px solid var(--line-2);border-radius:4px;
box-shadow:var(--sombra-lista);padding:calc(6px*var(--esc));animation:opAparece .18s var(--ease) both;}
.i2-res-g{padding:calc(10px*var(--esc)) calc(10px*var(--esc)) calc(4px*var(--esc));font-size:calc(11px*var(--esc));font-weight:700;letter-spacing:.15em;color:var(--text-3);text-transform:uppercase;}
.i2-res-i{display:flex;align-items:center;gap:calc(12px*var(--esc));padding:calc(8px*var(--esc)) calc(10px*var(--esc));border-radius:3px;cursor:pointer;}
.i2-res-i.on{background:var(--gold-soft);box-shadow:inset 0 0 0 1px var(--gold-light);}
.i2-res-ic{width:calc(30px*var(--esc));height:calc(30px*var(--esc));flex:none;border-radius:3px;background:var(--surface-3);color:var(--gold-ink);display:flex;align-items:center;justify-content:center;}
.i2-res-ic svg.i{width:calc(16px*var(--esc));height:calc(16px*var(--esc));}
.i2-res-t{flex:1;min-width:0;}
.i2-res-t b,.i2-res-t small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.i2-res-t b{font-size:calc(15px*var(--esc));font-weight:600;}
.i2-res-t small{font-size:calc(13px*var(--esc));color:var(--text-3);}
.i2-res .i2-res-i kbd{font-size:calc(11px*var(--esc));padding:1px calc(6px*var(--esc));}
.i2-res-vacio{padding:calc(18px*var(--esc)) calc(12px*var(--esc));font-size:calc(14px*var(--esc));color:var(--text-2);}
.i2-res-pie{display:flex;gap:calc(16px*var(--esc));margin-top:calc(6px*var(--esc));padding:calc(9px*var(--esc)) calc(10px*var(--esc)) calc(4px*var(--esc));border-top:1px solid var(--line);font-size:calc(12px*var(--esc));color:var(--text-3);}
/* Siguiente paso sugerido. */
.i2-paso{display:flex;align-items:center;gap:calc(16px*var(--esc));padding:calc(14px*var(--esc)) calc(18px*var(--esc));background:var(--gold-soft);border-left:3px solid var(--gold);
border-radius:4px;animation:opEntra .5s .08s var(--ease) both;}
.i2-paso-ic{width:calc(36px*var(--esc));height:calc(36px*var(--esc));flex:none;border-radius:50%;border:1.5px solid var(--gold-deep);display:flex;align-items:center;
justify-content:center;color:var(--gold-ink);}
.i2-paso-t{flex:1;min-width:0;}
.i2-paso-x{font-size:calc(16px*var(--esc));font-weight:550;margin-top:2px;color:var(--text);}
/* Pendientes por atender: la franja de 2a, cinco contadores con su «?» y lo que cambió desde ayer. */
/* Encima de la lista: la pista «?» de un contador no se esconde detrás de los renglones. */
/* Debajo de 1440 px, un título que no cabe se parte en dos renglones en vez de encimarse sobre el
contador de al lado; desde 1440, va en uno con su «?», como en 2a (más abajo). */
/* Obras y lo que pasó. */
.i2-rejilla{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:calc(16px*var(--esc));}
.i2-obras{background:var(--surface);border:1px solid var(--line);border-radius:4px;display:flex;flex-direction:column;min-height:0;
overflow:hidden;animation:opEntra .5s .3s var(--ease) both;}
.i2-obras-h{display:flex;align-items:center;justify-content:space-between;padding:0 calc(16px*var(--esc));border-bottom:1px solid var(--line);flex:none;}
.i2-tabs{display:flex;gap:calc(4px*var(--esc));}
.i2-tabs .ini-tab{padding:calc(13px*var(--esc)) calc(12px*var(--esc)) calc(11px*var(--esc));border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--text-2);
font-family:var(--font-body);font-size:calc(15px*var(--esc));font-weight:500;margin:0 0 -1px;min-height:0;box-shadow:none;cursor:pointer;}
.i2-tabs .ini-tab i{font-style:normal;font-size:calc(13px*var(--esc));margin-left:2px;color:inherit;opacity:1;}
.i2-tabs .ini-tab.on{border-bottom-color:var(--gold);color:var(--text);font-weight:650;}
.i2-tabs .ini-tab.on i{color:var(--gold-ink);}
.i2-obras-a{display:flex;gap:calc(8px*var(--esc));align-items:center;}
.i2-obras .ini-carps{padding:calc(10px*var(--esc)) calc(16px*var(--esc));margin:0;border-bottom:1px solid var(--line);flex:none;}
.i2-filas{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;}
.i2-fila{display:grid;grid-template-columns:calc(40px*var(--esc)) minmax(0,1fr) calc(110px*var(--esc)) calc(170px*var(--esc)) calc(20px*var(--esc));align-items:center;gap:calc(16px*var(--esc));
padding:calc(14px*var(--esc)) calc(16px*var(--esc));border-bottom:1px solid var(--line);cursor:pointer;animation:opEntra .45s var(--ease) both;transition:background .14s;}
.i2-fila:hover{background:var(--surface-2);}
.i2-fila:active{transform:scale(.995);}
.i2-fila.arrastrando{opacity:.45;}
.i2-ini{width:calc(40px*var(--esc));height:calc(40px*var(--esc));border-radius:3px;background:var(--surface-3);border:1px solid var(--line-2);display:flex;align-items:center;
justify-content:center;font-family:var(--font-display);font-weight:600;font-size:calc(14px*var(--esc));color:var(--gold-ink);}
.i2-nom{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:calc(8px*var(--esc));}
.i2-nom b{font-weight:650;font-size:calc(16px*var(--esc));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;}
.i2-nom .tag{flex:none;}
.i2-nom small{flex-basis:100%;font-size:calc(13px*var(--esc));color:var(--text-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.i2-nom small span{color:var(--text-2);}
.i2-etapa{justify-self:start;font-size:calc(11px*var(--esc));font-weight:700;letter-spacing:.1em;padding:calc(3px*var(--esc)) calc(7px*var(--esc));border-radius:2px;text-transform:uppercase;
background:var(--gold-soft);color:var(--gold-ink);}
.i2-etapa.e-validacion{background:var(--checar-bg);color:var(--checar);}
.i2-etapa.e-cerrado{background:var(--bueno-bg);color:var(--bueno);}
.i2-etapa.e-visita{background:var(--surface-3);color:var(--text-2);}
.i2-av{display:flex;align-items:center;gap:calc(10px*var(--esc));}
.i2-barra{flex:1;height:calc(6px*var(--esc));background:var(--surface-3);border-radius:2px;overflow:hidden;}
.i2-barra i{display:block;height:100%;background:var(--gold);border-radius:2px;}
.f-validacion .i2-barra i{background:var(--checar);}
.f-cerrado .i2-barra i{background:var(--bueno);}
.i2-av b{font-size:calc(14px*var(--esc));font-weight:700;font-variant-numeric:tabular-nums;width:calc(38px*var(--esc));text-align:right;}
.i2-fin{position:relative;display:flex;align-items:center;justify-content:center;width:calc(20px*var(--esc));height:calc(20px*var(--esc));color:var(--text-3);}
/* Las acciones del renglón (carpeta, datos, subproyecto, borrar): el «⋯» toma el lugar de
la flecha al pasar el mouse o al llegar con el teclado. */
.i2-mas{position:absolute;left:50%;top:50%;width:calc(30px*var(--esc));height:calc(30px*var(--esc));margin:calc(-15px*var(--esc)) 0 0 calc(-15px*var(--esc));padding:0;border:1px solid var(--line-2);
border-radius:3px;background:var(--surface);color:var(--text-2);font-size:calc(17px*var(--esc));line-height:1;cursor:pointer;opacity:0;}
.i2-fila:hover .i2-mas,.i2-mas:focus-visible{opacity:1;}
.i2-fila:hover .i2-fin>svg,.i2-fila:focus-within .i2-fin>svg{opacity:0;}
.i2-mas:hover{background:var(--surface-3);color:var(--text);}
.i2-obras .ini-carp-h{padding-top:calc(9px*var(--esc));padding-bottom:calc(9px*var(--esc));}
.i2-vacio{padding:calc(18px*var(--esc)) calc(16px*var(--esc));font-size:calc(14px*var(--esc));color:var(--text-2);}
.i2-obras .ini-carp-vacia{padding:calc(10px*var(--esc)) calc(16px*var(--esc)) calc(12px*var(--esc)) calc(32px*var(--esc));}
/* Esqueletos mientras llega el resumen. */
.i2-esq-fila{display:flex;align-items:center;gap:calc(14px*var(--esc));padding:calc(16px*var(--esc));border-bottom:1px solid var(--line);}
.i2-esq-t{flex:1;display:flex;flex-direction:column;gap:calc(7px*var(--esc));}
.i2-esq{display:block;border-radius:2px;background:linear-gradient(90deg,var(--surface-3) 0,var(--line) 50%,var(--surface-3) 100%);
background-size:800px 100%;animation:opBrillo 1.2s linear infinite;}
.i2-esq-fila>.i2-esq:first-child{border-radius:3px;}
.i2-esq.quieto{background:var(--surface-3);animation:none;}
/* Desde la última visita y En línea ahora. */
.i2-lado{display:flex;flex-direction:column;gap:calc(16px*var(--esc));min-height:0;animation:opEntra .5s .38s var(--ease) both;}
.i2-desde{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:calc(16px*var(--esc)) calc(18px*var(--esc));flex:1;min-height:0;overflow:hidden;}
.i2-linea{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:calc(14px*var(--esc)) calc(18px*var(--esc));flex:none;}
.i2-card-h{display:flex;justify-content:space-between;align-items:baseline;gap:calc(12px*var(--esc));}
.i2-card-h b{font-family:var(--font-display);font-weight:600;font-size:calc(17px*var(--esc));}
.i2-card-h>span{font-size:calc(13px*var(--esc));color:var(--text-3);white-space:nowrap;}
.i2-linea .i2-card-h{align-items:center;}
.i2-tl{position:relative;display:flex;flex-direction:column;margin-top:calc(12px*var(--esc));}
.i2-tl::before{content:'';position:absolute;left:calc(5px*var(--esc));top:calc(6px*var(--esc));bottom:calc(6px*var(--esc));width:1px;background:var(--line-2);}
.i2-ev{position:relative;display:flex;gap:calc(14px*var(--esc));padding:calc(7px*var(--esc)) 0;animation:opEntra .4s var(--ease) both;}
.i2-ev-p{width:calc(11px*var(--esc));height:calc(11px*var(--esc));flex:none;margin-top:calc(4px*var(--esc));border-radius:50%;background:var(--surface);border:2px solid var(--text-3);box-sizing:border-box;}
.i2-ev-t{flex:1;min-width:0;}
.i2-ev-t b{display:block;font-size:calc(14px*var(--esc));font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.i2-ev-t span{display:block;font-size:calc(13px*var(--esc));color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.i2-ev.vivo{padding:calc(7px*var(--esc)) calc(8px*var(--esc)) calc(7px*var(--esc)) 0;border-radius:3px;animation:none;}
.i2-ev.vivo.llega{animation:opDesliza .7s var(--ease) both;}
.i2-ev.vivo .i2-ev-p{background:var(--gold);border:0;box-shadow:0 0 0 3px var(--surface);}
.i2-ev.vivo.llega .i2-ev-p{animation:opPulso 1.6s 2;}
.i2-vivo{display:flex;align-items:center;gap:calc(6px*var(--esc));font-size:calc(13px*var(--esc));color:var(--bueno);font-weight:600;white-space:nowrap;}
.i2-vivo i{width:calc(7px*var(--esc));height:calc(7px*var(--esc));border-radius:50%;background:var(--bueno);animation:opPulso 2s infinite;}
.i2-gente{display:flex;gap:calc(14px*var(--esc));margin-top:calc(10px*var(--esc));}
.i2-per{display:flex;align-items:center;gap:calc(9px*var(--esc));min-width:0;flex:1;}
.i2-per-av{position:relative;width:calc(34px*var(--esc));height:calc(34px*var(--esc));flex:none;border-radius:3px;background:var(--surface-3);border:1px solid var(--line-2);
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:calc(12px*var(--esc));color:var(--text-2);}
.i2-per-av i{position:absolute;right:calc(-3px*var(--esc));bottom:calc(-3px*var(--esc));width:calc(9px*var(--esc));height:calc(9px*var(--esc));border-radius:50%;background:var(--bueno);border:2px solid var(--surface);}
.i2-per-t{min-width:0;}
.i2-per-t b,.i2-per-t small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.i2-per-t b{font-size:calc(13px*var(--esc));font-weight:600;}
.i2-per-t small{font-size:calc(12px*var(--esc));color:var(--text-3);}
.i2-linea .i2-vacio{padding:calc(10px*var(--esc)) 0 0;}
.i2-desde .i2-vacio{padding:calc(12px*var(--esc)) 0 0;}
/* Recorrido de primera vez. */
.i2-velo{position:fixed;inset:0;z-index:90;background:var(--velo-recorrido);pointer-events:none;}
.i2-tour{position:fixed;z-index:91;width:calc(320px*var(--esc));background:var(--surface);color:var(--text);border-radius:4px;
box-shadow:var(--elev-modal);padding:calc(18px*var(--esc)) calc(20px*var(--esc)) calc(16px*var(--esc));font-family:var(--font-body);animation:opAparece .28s var(--ease) both;}
.i2-tour-t{font-family:var(--font-display);font-weight:600;font-size:calc(19px*var(--esc));margin-top:calc(6px*var(--esc));}
.i2-tour p{margin:calc(6px*var(--esc)) 0 calc(14px*var(--esc));font-size:calc(14px*var(--esc));line-height:1.5;color:var(--text-2);}
.i2-tour-pie{display:flex;align-items:center;justify-content:space-between;}
.i2-tour-pt{display:flex;gap:calc(5px*var(--esc));}
.i2-tour-pt i{width:calc(5px*var(--esc));height:calc(5px*var(--esc));border-radius:calc(3px*var(--esc));background:var(--line-2);transition:width .2s;}
.i2-tour-pt i.on{width:calc(18px*var(--esc));background:var(--gold);}
.i2-tour-b{display:flex;gap:calc(12px*var(--esc));align-items:center;}
.i2-tour-omitir{border:0;background:none;color:var(--text-3);font-family:var(--font-body);font-size:calc(14px*var(--esc));cursor:pointer;padding:0;}
.i2-tour-omitir:hover{color:var(--text);}
.i2-tour-sig{border:1px solid var(--gold);background:var(--gold);color:var(--gold-on);border-radius:3px;padding:calc(6px*var(--esc)) calc(14px*var(--esc));font-family:var(--font-body);
font-weight:600;font-size:calc(14px*var(--esc));cursor:pointer;}
.i2-tour-sig:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff;}
.i2-tour-sig:active{transform:scale(.965);}
/* Aviso con deshacer. */
.aviso2{position:fixed;right:calc(24px*var(--esc));bottom:calc(24px*var(--esc));z-index:170;width:calc(410px*var(--esc));background:var(--surface);color:var(--text);border:1px solid var(--line-2);
border-left:3px solid var(--av-c, var(--gold-deep));border-radius:4px;box-shadow:var(--sombra-aviso);overflow:hidden;
font-family:var(--font-body);animation:opAparece .3s var(--ease) both;}
.aviso2.t-oro{--av-c:var(--gold-deep);--av-bg:var(--gold-soft);}
.aviso2.t-neutro{--av-c:var(--text-3);--av-bg:var(--surface-3);}
.aviso2.t-bueno{--av-c:var(--bueno);--av-bg:var(--bueno-bg);}
.aviso2-c{display:flex;align-items:center;gap:calc(12px*var(--esc));padding:calc(12px*var(--esc)) calc(12px*var(--esc)) calc(12px*var(--esc)) calc(15px*var(--esc));}
.aviso2-ic{width:calc(30px*var(--esc));height:calc(30px*var(--esc));flex:none;border-radius:50%;background:var(--av-bg);color:var(--av-c);display:flex;align-items:center;justify-content:center;}
.aviso2-t{flex:1;min-width:0;}
.aviso2-t b{display:block;font-size:calc(15px*var(--esc));font-weight:600;}
.aviso2-t span{display:block;font-size:calc(13px*var(--esc));color:var(--text-3);}
.aviso2-des{border:0;background:none;color:var(--gold-ink);font-family:var(--font-body);font-size:calc(14px*var(--esc));font-weight:650;cursor:pointer;
padding:calc(6px*var(--esc)) calc(8px*var(--esc));border-radius:3px;}
.aviso2-des:hover{background:var(--gold-soft);}
.aviso2-des:active{transform:scale(.965);}
.aviso2-x{width:calc(26px*var(--esc));height:calc(26px*var(--esc));border:0;border-radius:3px;background:none;color:var(--text-3);cursor:pointer;display:flex;align-items:center;
justify-content:center;padding:0;}
.aviso2-x:hover{background:var(--surface-3);color:var(--text);}
.aviso2-barra{height:2px;background:var(--surface-3);}
.aviso2-barra i{display:block;height:100%;background:var(--av-c);animation:opBarra linear both;}
}
/* En compu más angosta que el diseño (1440), el Inicio se acomoda sin romperse. */
@media (min-width:901px) and (max-width:1279px){
.i2-cab{flex-wrap:wrap;gap:14px 28px;}
.i2-busca{flex-basis:100%;}
.i2-rejilla{grid-template-columns:1fr;}
.i2{height:auto;}
.i2-filas{max-height:520px;}
.i2-fila{grid-template-columns:40px minmax(0,1fr) 100px 150px 20px;gap:12px;}
}
@media print{ .tb2,.riel2-plegar,.cinta2,.aviso2,.i2-velo,.i2-tour{display:none !important;} body.con-sesion .main{padding-top:0 !important;} }
/* ============================================================
INICIO EN EL CELULAR (720 px o menos)
Diseño: diseno/mejora-uxui/pantallas/Inicio Celular.dc.html, 3a (Inicio de la empresa) y 3c (buscador).
Arriba «Está en», el buscador y quién está en sesión; la barra de abajo vive con las reglas del riel.
«Está en», «Menú», «Nuevo» y el buscador suben en hojas desde abajo.
============================================================ */
/* Sin ninguna obra (22b, «Inicio sin obras»): en compu, tableta y celular. */
.ini-vacio{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;max-width:360px;margin:48px auto;padding:0 16px;}
.ini-vacio-ic{width:48px;height:48px;border-radius:4px;background:var(--surface-3);color:var(--gold-ink);display:flex;align-items:center;justify-content:center;}
.ini-vacio h3{margin:4px 0 0;font-family:var(--font-display);font-size:19px;font-weight:600;}
.ini-vacio p{margin:0;font-size:15px;line-height:1.5;color:var(--text-2);}
.ini-vacio .btn{margin-top:6px;min-height:44px;}
@media (max-width:720px){
#selector.ic3-on .sel-top,#selector.ic3-on .sel-h{display:none;}
#selector.ic3-on .sel-body{padding:0;max-width:none;}
.ic3{color:var(--text);font-family:var(--font-body);}
#selector .ic3 .btn{border-radius:var(--r-sm);font-weight:550;}
#selector .ic3 .btn.primary{font-weight:600;box-shadow:none;}
#selector .ic3 .btn.soft{background:var(--bg);border-color:transparent;box-shadow:var(--relieve-sm);}
#selector .ic3 .btn.link{background:none;border:0;border-bottom:1px solid var(--line-2);border-radius:0;padding:0;color:var(--text-2);
font-size:var(--t-sm);box-shadow:none;}
.ic3-cab{position:sticky;top:0;z-index:30;}
.ic3-top{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px 16px;background:var(--chrome);border-bottom:1px solid var(--line);}
.ic3-iso{width:26px;height:auto;flex:none;}
.ic3-esta{flex:1;min-width:0;height:44px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid var(--line-2);border-radius:3px;
background:var(--surface);color:var(--text);font-family:var(--font-body);text-align:left;cursor:pointer;}
.ic3-esta:active{transform:scale(.98);}
.ic3-esta-t{flex:1;min-width:0;line-height:1.2;}
.ic3-esta-t small{display:block;font-size:10px;font-weight:700;letter-spacing:.15em;color:var(--text-3);text-transform:uppercase;}
.ic3-esta-t b{display:block;font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ic3-esta svg.i{flex:none;color:var(--text-3);}
.ic3-buscar{width:44px;height:44px;flex:none;padding:0;border:0;background:none;color:var(--text-2);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.ic3-buscar:active{transform:scale(.94);}
/* 44 px para el dedo; se ve el cuadro de 36 del diseño. */
.ic3-yo{width:44px;height:44px;flex:none;margin:0 -4px;padding:0;border:0;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.ic3-yo span{width:36px;height:36px;border-radius:3px;background:var(--surface);border:1px solid var(--line-2);color:var(--gold-ink);
display:flex;align-items:center;justify-content:center;font-family:var(--font-body);font-size:12px;font-weight:700;}
.ic3-red{display:flex;align-items:center;gap:10px;padding:9px 16px;background:var(--checar-bg);border-bottom:1px solid var(--line);color:var(--text);
animation:opEntra .3s var(--ease) both;}
.ic3-red.vuelta{background:var(--gold-soft);}
.ic3-red-ic{display:flex;color:var(--checar);}
.ic3-red.vuelta .ic3-red-ic{color:var(--gold-ink);}
.ic3-red-t{flex:1;min-width:0;font-size:13px;line-height:1.35;}
.ic3-red-t b{font-weight:650;}
.ic3-red-n{font-size:11px;font-weight:700;color:var(--checar);white-space:nowrap;text-transform:uppercase;}
.ic3-cuerpo{display:flex;flex-direction:column;gap:18px;padding:18px 16px 28px;}
.ic3-eti{font-size:11px;font-weight:700;letter-spacing:.15em;color:var(--gold-ink);text-transform:uppercase;}
.ic3-eti.g{color:var(--text-3);}
.ic3-hola{animation:opEntra .45s var(--ease) both;}
.ic3-hola h2{margin:2px 0 0;font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:-.02em;}
.ic3-paso{background:var(--gold-soft);border-left:3px solid var(--gold);border-radius:4px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;
animation:opEntra .45s .06s var(--ease) both;}
.ic3-paso-x{font-size:15px;font-weight:550;line-height:1.45;}
.ic3-paso-b{display:flex;align-items:center;gap:14px;}
.ic3-sec{display:flex;flex-direction:column;gap:8px;animation:opEntra .45s .09s var(--ease) both;}
.ic3-sec.s2{animation-delay:.12s;}
.ic3-sec.s3{animation-delay:.18s;}
.ic3-accesos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.ic3-acc{position:relative;height:72px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 2px;
border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:12px;font-weight:600;cursor:pointer;}
.ic3-acc:active{transform:scale(.96);border-color:var(--gold);}
.ic3-acc-ic{display:flex;color:var(--gold-ink);}
.ic3-n{position:absolute;top:6px;right:6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--riel-cuenta);color:#fff;
font-size:10px;font-weight:700;line-height:17px;text-align:center;font-variant-numeric:tabular-nums;}
.ic3-n.alerta{background:var(--cuenta-alerta);}
.ic3-esq{display:block;border-radius:2px;background:linear-gradient(90deg,var(--surface-3) 0,var(--line) 50%,var(--surface-3) 100%);
background-size:800px 100%;animation:opBrillo 1.2s linear infinite;}
.ic3-esq.n{width:22px;height:22px;}
.ic3-esq.l{width:60%;height:10px;margin-top:4px;}
.ic3-esq.ini{width:38px;height:38px;flex:none;border-radius:3px;}
.ic3-esq.t{width:62%;height:12px;}
.ic3-esq.s{width:40%;height:10px;margin-top:6px;}
.ic3-esq.b{width:100%;height:5px;background:var(--surface-3);animation:none;}
#ic3-obras{scroll-margin-top:84px;}
.ic3-obras-h{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;min-height:30px;}
.ic3-tabs{display:flex;align-items:center;gap:14px;min-width:0;}
.ic3-tab{display:flex;align-items:center;gap:4px;min-height:44px;margin:-7px 0;padding:0;border:0;border-bottom:2px solid transparent;background:none;
color:var(--text-3);font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;cursor:pointer;}
.ic3-tab.on{color:var(--text);border-bottom-color:var(--gold);}
.ic3-tab i{font-style:normal;letter-spacing:0;color:var(--gold-ink);}
.ic3-obras-h .btn.soft{flex:none;}
.ic3-filtro{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--text-2);}
.ic3-filtro .btn.link{min-height:32px;font-size:13px;}
.ic3-filas{display:flex;flex-direction:column;gap:8px;}
.ic3-obra{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;
cursor:pointer;animation:opEntra .4s var(--ease) both;}
.ic3-obra:active{transform:scale(.99);border-color:var(--gold);}
.ic3-obra.carga{cursor:default;animation:none;}
.ic3-obra-a{display:flex;align-items:center;gap:12px;}
.ic3-obra-ini{width:38px;height:38px;flex:none;border-radius:3px;background:var(--surface-3);border:1px solid var(--line-2);display:flex;align-items:center;
justify-content:center;font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--gold-ink);}
.ic3-obra-t{flex:1;min-width:0;}
.ic3-obra-t b{display:block;font-size:15px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ic3-obra-t small{display:block;font-size:13px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ic3-obra-n{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--cuenta-oro);color:var(--gold-on);
font-size:11px;font-weight:700;line-height:20px;text-align:center;font-variant-numeric:tabular-nums;}
.ic3-obra-n.alerta{background:var(--cuenta-alerta);color:#fff;}
.ic3-mas{width:44px;height:44px;flex:none;margin:-3px -10px -3px -8px;padding:0;border:0;background:none;color:var(--text-3);font-size:18px;
line-height:1;cursor:pointer;border-radius:3px;}
.ic3-mas:active{background:var(--surface-3);}
.ic3-av{display:flex;align-items:center;gap:10px;}
.ic3-av .i2-barra{flex:1;height:5px;background:var(--surface-3);border-radius:2px;overflow:hidden;}
.ic3-av .i2-barra i{display:block;height:100%;background:var(--gold);}
.ic3-obra.f-validacion .i2-barra i{background:var(--checar);}
.ic3-obra.f-cerrado .i2-barra i{background:var(--bueno);}
.ic3-av b{width:34px;flex:none;font-size:13px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;}
.ic3-filas .ini-carp-h{margin-top:4px;}
/* La pista del «+»: lo que se sugiere a esta hora, sobre el botón. */
.ic3-pfab{position:fixed;left:50%;bottom:calc(var(--ic3-nav) + 12px);z-index:71;transform:translateX(-50%);display:flex;align-items:center;gap:8px;
height:44px;padding:0 14px;border:0;border-radius:3px;background:var(--oscuro-fondo);color:var(--oscuro-texto);font-family:var(--font-body);
font-size:13px;font-weight:600;white-space:nowrap;box-shadow:var(--ic3-sombra-pista);cursor:pointer;animation:ic3Pista .35s .8s var(--ease) both;}
.ic3-pfab::after{content:'';position:absolute;left:50%;bottom:-5px;margin-left:-5px;width:10px;height:10px;background:inherit;transform:rotate(45deg);}
.ic3-pfab-ic{display:flex;color:var(--gold-light);}
/* Las hojas desde abajo. */
.ic3-bd{position:fixed;inset:0;z-index:160;background:var(--ic3-velo);animation:opFunde .2s both;}
.ic3-hoja{position:absolute;left:0;right:0;bottom:0;max-height:82%;display:flex;flex-direction:column;background:var(--surface);color:var(--text);
border-radius:4px 4px 0 0;box-shadow:var(--ic3-sombra-hoja);font-family:var(--font-body);animation:opSube .3s var(--ease) both;}
.ic3-hoja.alta{max-height:100%;}
.ic3-hoja-asa{flex:none;display:flex;justify-content:center;padding:8px 0 2px;}
.ic3-hoja-asa span{width:36px;height:4px;border-radius:2px;background:var(--line-2);}
.ic3-hoja-cab{flex:none;display:flex;align-items:center;justify-content:space-between;padding:6px 8px 8px 18px;}
.ic3-hoja-cab small{display:block;font-size:10px;font-weight:700;letter-spacing:.15em;color:var(--text-3);text-transform:uppercase;}
.ic3-hoja-cab b{font-family:var(--font-display);font-size:19px;font-weight:600;}
.ic3-hoja-x{width:44px;height:44px;flex:none;padding:0;border:0;background:none;color:var(--text-2);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.ic3-hoja-c{flex:1;min-height:0;overflow-y:auto;padding:0 14px calc(34px + env(safe-area-inset-bottom));}
.ic3-hg{padding:12px 4px 8px;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--text-3);text-transform:uppercase;}
.ic3-ctx{width:100%;min-height:56px;display:flex;align-items:center;gap:12px;padding:8px 10px;border:0;border-radius:3px;background:transparent;
color:var(--text);font-family:var(--font-body);text-align:left;cursor:pointer;}
.ic3-ctx.on{background:var(--gold-soft);}
.ic3-ctx:active{background:var(--surface-2);}
.ic3-ctx-ini{width:36px;height:36px;flex:none;border-radius:3px;background:var(--surface-3);border:1px solid var(--line-2);color:var(--gold-ink);
display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:12px;font-weight:600;}
.ic3-ctx-t{flex:1;min-width:0;}
.ic3-ctx-t b{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ic3-ctx-t small{display:block;font-size:13px;color:var(--text-3);}
.ic3-ctx-ok{display:flex;color:var(--gold-ink);}
.ic3-mg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.ic3-mt{position:relative;height:76px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:0 4px;
border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:13px;font-weight:600;
line-height:1.2;text-align:center;cursor:pointer;animation:opEntra .3s var(--ease) both;}
.ic3-mt:active{transform:scale(.96);border-color:var(--gold);}
.ic3-mt-ic{display:flex;color:var(--gold-ink);}
.ic3-mt-ic svg.i{width:22px;height:22px;stroke-width:2;}
.ic3-sug{width:100%;display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:6px;border:1px solid var(--gold);border-radius:4px;
background:var(--gold-soft);color:var(--text);font-family:var(--font-body);text-align:left;cursor:pointer;animation:opEntra .3s var(--ease) both;}
.ic3-sug:active{transform:scale(.98);}
.ic3-sug>svg.i{flex:none;color:var(--gold-ink);}
.ic3-sug-ic{width:44px;height:44px;flex:none;border-radius:3px;background:var(--gold);color:var(--gold-on);display:flex;align-items:center;justify-content:center;}
.ic3-sug-t{flex:1;min-width:0;}
.ic3-sug-t small{display:block;font-size:10px;font-weight:700;letter-spacing:.15em;color:var(--gold-ink);text-transform:uppercase;}
.ic3-sug-t b{display:block;margin-top:1px;font-size:16px;font-weight:650;}
.ic3-sug-t span{display:block;font-size:13px;color:var(--text-2);}
.ic3-op{width:100%;min-height:60px;display:flex;align-items:center;gap:12px;padding:8px 10px;border:0;border-bottom:1px solid var(--line);background:none;
color:var(--text);font-family:var(--font-body);text-align:left;cursor:pointer;animation:opEntra .3s var(--ease) both;}
.ic3-op:active{background:var(--surface-2);}
.ic3-op>svg.i{flex:none;color:var(--text-3);}
.ic3-op-ic{width:40px;height:40px;flex:none;border-radius:3px;background:var(--gold-soft);color:var(--gold-ink);display:flex;align-items:center;justify-content:center;}
.ic3-op-t{flex:1;min-width:0;}
.ic3-op-t b{display:block;font-size:15px;font-weight:600;}
.ic3-op-t small{display:block;font-size:13px;color:var(--text-3);}
.ic3-q{height:48px;display:flex;align-items:center;gap:10px;padding:0 12px;margin-bottom:6px;border:1px solid var(--gold-deep);border-radius:4px;
box-shadow:0 0 0 3px var(--gold-soft);color:var(--gold-ink);}
.ic3-q svg.i{flex:none;}
.ic3-q input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:none;background:none;box-shadow:none;font-family:var(--font-body);font-size:16px;color:var(--text);}
.ic3-q input::-webkit-search-cancel-button{display:none;}
.ic3-r{width:100%;min-height:52px;display:flex;align-items:center;gap:12px;padding:6px;border:0;border-radius:3px;background:none;color:var(--text);
font-family:var(--font-body);text-align:left;cursor:pointer;}
.ic3-r:active{background:var(--gold-soft);}
.ic3-r-ic{width:32px;height:32px;flex:none;border-radius:3px;background:var(--surface-3);color:var(--gold-ink);display:flex;align-items:center;justify-content:center;}
.ic3-r-ic svg.i{width:16px;height:16px;}
.ic3-r-t{flex:1;min-width:0;}
.ic3-r-t b{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ic3-r-t small{display:block;font-size:13px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ic3-r-vacio{padding:16px 4px;font-size:14px;color:var(--text-2);}
/* El recorrido de primera vez: el foco dorado sobre lo que explica y la tarjeta al lado. */
.ic3-tour-velo{position:fixed;inset:0;z-index:175;}
.ic3-tour-foco{position:fixed;z-index:176;border:2px solid var(--gold);border-radius:4px;box-shadow:0 0 0 9999px var(--ic3-foco);pointer-events:none;
transition:all .3s var(--ease);}
.ic3-tour-foco.redondo{border-radius:50%;}
.ic3-tour{position:fixed;z-index:177;left:16px;right:16px;padding:16px 18px 14px;border-radius:4px;background:var(--surface);color:var(--text);
box-shadow:var(--elev-modal);font-family:var(--font-body);animation:opAparece .28s var(--ease) both;}
.ic3-tour-t{margin-top:5px;font-family:var(--font-display);font-size:18px;font-weight:600;}
.ic3-tour p{margin:5px 0 12px;font-size:14px;line-height:1.5;color:var(--text-2);}
.ic3-tour-pie{display:flex;align-items:center;justify-content:space-between;}
.ic3-tour-pt{display:flex;gap:5px;}
.ic3-tour-pt i{width:5px;height:5px;border-radius:3px;background:var(--line-2);transition:width .2s;}
.ic3-tour-pt i.on{width:18px;background:var(--gold);}
.ic3-tour-b{display:flex;align-items:center;gap:6px;}
.ic3-tour-omitir{height:44px;padding:0 10px;border:0;background:none;color:var(--text-3);font-family:var(--font-body);font-size:14px;cursor:pointer;}
.ic3-tour-sig{height:44px;padding:0 16px;border:1px solid var(--gold);border-radius:3px;background:var(--gold);color:var(--gold-on);font-family:var(--font-body);
font-size:14px;font-weight:600;cursor:pointer;}
.ic3-tour-sig:active{transform:scale(.965);}
/* El aviso con «Deshacer» (el de «Después»), sobre la barra de abajo. */
.aviso2{position:fixed;left:12px;right:12px;bottom:calc(var(--ic3-nav) + 12px);z-index:170;background:var(--surface);color:var(--text);
border:1px solid var(--line-2);border-left:3px solid var(--av-c, var(--gold-deep));border-radius:4px;box-shadow:var(--sombra-aviso);overflow:hidden;
font-family:var(--font-body);animation:opAparece .3s var(--ease) both;}
.aviso2.t-oro{--av-c:var(--gold-deep);--av-bg:var(--gold-soft);}
.aviso2.t-neutro{--av-c:var(--text-3);--av-bg:var(--surface-3);}
.aviso2.t-bueno{--av-c:var(--bueno);--av-bg:var(--bueno-bg);}
.aviso2-c{display:flex;align-items:center;gap:10px;padding:10px 8px 10px 13px;}
.aviso2-ic{width:28px;height:28px;flex:none;border-radius:50%;background:var(--av-bg);color:var(--av-c);display:flex;align-items:center;justify-content:center;}
.aviso2-t{flex:1;min-width:0;}
.aviso2-t b{display:block;font-size:14px;font-weight:600;}
.aviso2-t span{display:block;font-size:12px;color:var(--text-3);}
.aviso2-des{height:44px;padding:0 10px;border:0;background:none;color:var(--gold-ink);font-family:var(--font-body);font-size:14px;font-weight:650;cursor:pointer;}
.aviso2-des:active{transform:scale(.965);}
.aviso2-x{display:none;}
.aviso2-barra{height:2px;background:var(--surface-3);}
.aviso2-barra i{display:block;height:100%;background:var(--av-c);animation:opBarra linear both;}
/* La franja de lo que espera en la cola y el aviso de lo atorado, arriba de la barra de abajo (pendiente 3 de F1). */
body:has(#selector:not(.hide)) .off,body.sin-proyecto .off{bottom:var(--ic3-nav);z-index:73;}
body:has(#selector:not(.hide)) #aviso-cola,body.sin-proyecto #aviso-cola{bottom:calc(var(--ic3-nav) + 34px);z-index:73;}
/* ---------- Dentro de una obra (3b): «Está en» arriba, la barra del Inicio abajo y el Resumen de la obra ---------- */
body:not(.sin-proyecto) .ic3-cab-obra{display:block;}
body:not(.sin-proyecto) #main .railp,body:not(.sin-proyecto) #tb-inicio,body:not(.sin-proyecto) #bell-app,body:not(.sin-proyecto) #sb-toggle,
body:not(.sin-proyecto) .topbar .tb-sep{display:none !important;}
body:not(.sin-proyecto) .topbar{position:static;}
body.obra-resumen .topbar,body.obra-resumen #vistas-bar{display:none;}
body:has(#sidebar:not(.hide)) .rail{display:flex;}
body:has(#sidebar:not(.hide)) .main{padding-bottom:var(--ic3-nav);}
/* --barra-accion: lo que mide una barra de acción fija al pie (Guardar avance, Finalizar día). El aviso sube sobre ella
para no tapar el botón; quien agregue otra barra fija declara su alto aquí. */
body:has(.ej-cta.on){--barra-accion:76px;}
body:has(#sidebar:not(.hide)) .toast{bottom:calc(var(--ic3-nav) + var(--barra-accion,0px) + 12px);}
body:has(#sidebar:not(.hide)) .off{bottom:var(--ic3-nav);z-index:73;}
body:has(#sidebar:not(.hide)) #aviso-cola{bottom:calc(var(--ic3-nav) + 34px);z-index:73;}
body:has(#sidebar:not(.hide)) .fab{bottom:calc(var(--ic3-nav) + 16px);}
body:has(#sidebar:not(.hide)) .fab-menu{bottom:calc(var(--ic3-nav) + 78px);}
body:has(#selector:not(.hide)) .aviso-osc,body:has(#sidebar:not(.hide)) .aviso-osc{bottom:calc(var(--ic3-nav) + 12px);}
.ic3-ob{display:flex;flex-direction:column;gap:18px;}
.ic3-ob .btn{border-radius:var(--r-sm);font-weight:550;}
.ic3-ob .btn.primary{font-weight:600;box-shadow:none;justify-content:center;}
.ic3-ob .btn.link{background:none;border:0;border-bottom:1px solid var(--line-2);border-radius:0;padding:0;color:var(--text-2);font-size:var(--t-sm);box-shadow:none;}
.ic3-volver{align-self:flex-start;height:44px;margin:-10px 0 -12px -8px;display:flex;align-items:center;gap:4px;padding:0 8px;border:0;background:none;
color:var(--gold-ink);font-family:var(--font-body);font-size:15px;font-weight:600;cursor:pointer;}
.ic3-volver:active{transform:scale(.97);}
.ic3-volver small{margin-left:6px;font-size:12px;font-weight:500;color:var(--text-3);}
.ic3-ob-cab{display:flex;align-items:center;gap:14px;}
.ic3-anillo{position:relative;width:56px;height:56px;flex:none;}
.ic3-anillo svg{display:block;width:56px;height:56px;}
.ic3-anillo circle{fill:none;stroke:var(--surface-3);stroke-width:6;}
.ic3-anillo .v{stroke:var(--gold);stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.5s cubic-bezier(.33,1,.68,1);}
.ic3-anillo.f-validacion .v{stroke:var(--checar);}
.ic3-anillo.f-cerrado .v{stroke:var(--bueno);}
.ic3-anillo b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:14px;
font-weight:600;font-variant-numeric:tabular-nums;}
.ic3-ob-t{flex:1;min-width:0;}
.ic3-ob-t .ic3-eti{letter-spacing:.14em;}
.ic3-ob-t h2{margin:3px 0 6px;font-family:var(--font-display);font-size:21px;font-weight:600;letter-spacing:-.015em;line-height:1.2;}
.ic3-etapa{font-size:10px;font-weight:700;letter-spacing:.1em;padding:2px 6px;border-radius:2px;background:var(--gold-soft);color:var(--gold-ink);text-transform:uppercase;}
.ic3-etapa.e-validacion{background:var(--checar-bg);color:var(--checar);}
.ic3-etapa.e-cerrado{background:var(--bueno-bg);color:var(--bueno);}
.ic3-po-l{display:flex;flex-direction:column;gap:8px;}
.ic3-po{width:100%;display:flex;flex-direction:column;gap:3px;padding:11px 14px;border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:4px;
background:var(--surface);color:var(--text);font-family:var(--font-body);text-align:left;cursor:pointer;}
.ic3-po:active{transform:scale(.99);}
.ic3-po.t-critico{border-top-color:var(--critico);}
.ic3-po.t-checar{border-top-color:var(--checar);}
.ic3-po-a{display:flex;justify-content:space-between;gap:10px;}
.ic3-po-a b{font-size:15px;font-weight:600;}
.ic3-po-a small{font-size:12px;color:var(--text-3);white-space:nowrap;}
.ic3-po-d{font-size:13px;color:var(--text-3);}
.ic3-po.carga{cursor:default;gap:8px;}
.ic3-po-vacio{padding:14px 12px;background:var(--surface);border:1px solid var(--line);border-radius:4px;font-size:14px;color:var(--text-2);}
/* El mosaico de la pantalla abierta, en la hoja «Menú» de la obra. */
.ic3-mt.on{background:var(--gold-soft);}
/* Deslizar desde el borde (la app instalada): la flecha que acompaña al dedo. */
.borde-atras{position:fixed;left:10px;top:50%;margin-top:-22px;z-index:175;width:44px;height:44px;border-radius:50%;background:var(--surface);
border:1px solid var(--line-2);box-shadow:var(--ic3-sombra-borde);color:var(--gold-ink);display:flex;align-items:center;justify-content:center;
opacity:0;pointer-events:none;}
}
.ic3-cab-obra{display:none;}
@keyframes ic3Pista{from{opacity:0;transform:translate(-50%,6px) scale(.97);}to{opacity:1;transform:translateX(-50%);}}
@media print{ .ic3-cab,.ic3-pfab,#ic3-tour{display:none !important;} }
/* ============================================================
CATÁLOGO 13c
Diseño aprobado: diseno/mejora-uxui/pantallas/Catalogo C.dc.html y §9 del
documento rector. Las medidas son las del prototipo (a 1440 px) multiplicadas
por --esc: crecen en monitores grandes, como la navegación 2a.
============================================================ */
@keyframes c13Pop{from{opacity:0;transform:translateY(4px) scale(.98);}to{opacity:1;transform:none;}}
@keyframes c13Funde{from{opacity:0;}to{opacity:1;}}
@keyframes c13Destello{0%{background:var(--gold-light);}}
@keyframes c13Respira{0%,100%{opacity:.5;}50%{opacity:1;}}
/* El marco: todo el alto que deja la barra de arriba, sin la cinta de la obra ni la barra de la pantalla. */
body.cat13 .content{padding:0;max-width:none;}
body.cat13 #vistas-bar{display:none;}
@media (min-width:901px){
body.con-sesion.cat13 .railp,body.con-sesion.cat13 .topbar{display:none !important;}
}
body.enfoque.cat13 .content{padding:0;}
body.enfoque.cat13 .enf-barra,body.enfoque.cat13 .enf-estado{display:none !important;}
.c13{position:relative;display:flex;height:calc(100vh - 56px*var(--esc) - var(--franja-red,0px));min-height:calc(520px*var(--esc));
background:var(--bg);color:var(--text);font-family:var(--font-body);overflow:hidden;}
body.enfoque .c13{height:calc(100vh - var(--franja-red,0px));}
@media (max-width:900px){ .c13{height:calc(100vh - 150px);} }
/* El aviso de cómo abre la etapa el módulo va arriba del marco: el marco toma lo que queda y su barra de estado no se corta. */
@media (min-width:901px){
body.cat13 .content{display:flex;flex-direction:column;height:calc(100vh - 56px*var(--esc) - var(--franja-red,0px));}
body.enfoque.cat13 .content{height:calc(100vh - var(--franja-red,0px));}
body.cat13 #sec-catalogo.on,body.cat13 #sec-base.on{flex:1;min-height:0;}
body.cat13 .c13{height:100%;}
}
.c13-col{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);}
.c13-flex{flex:1;}
.c13 button{font-family:var(--font-body);}
/* ---------- encabezado ---------- */
.c13-cab{flex:none;height:calc(56px*var(--esc));display:flex;align-items:center;gap:calc(16px*var(--esc));padding:0 calc(18px*var(--esc)) 0 calc(20px*var(--esc));}
.c13-cab-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:calc(2px*var(--esc));}
.c13-ceja{font-size:calc(10.5px*var(--esc));font-weight:600;letter-spacing:.14em;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5;}
.c13-tit{display:flex;align-items:baseline;gap:calc(14px*var(--esc));min-width:0;}
.c13-tit-n{font-family:var(--font-display);font-weight:600;font-size:calc(21px*var(--esc));letter-spacing:-.015em;line-height:1.5;}
.c13-tit-r{min-width:0;font-size:calc(13px*var(--esc));color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.c13-seg{flex:none;position:relative;display:flex;padding:calc(2px*var(--esc));background:var(--surface-3);border-radius:3px;}
.c13-seg-i{position:absolute;top:calc(2px*var(--esc));bottom:calc(2px*var(--esc));left:calc(2px*var(--esc));width:calc(88px*var(--esc));border-radius:2px;background:var(--surface);box-shadow:0 0 0 1px var(--line-2);
transition:left .3s cubic-bezier(.22,.75,.28,1);}
.c13-seg.rev .c13-seg-i{left:calc(90px*var(--esc));}
.c13-seg button{position:relative;width:calc(88px*var(--esc));height:calc(28px*var(--esc));padding:0;border:0;background:none;color:var(--text-2);font-size:calc(13px*var(--esc));font-weight:500;cursor:pointer;transition:color .2s;}
.c13-seg button.on,.c13-seg.rev button+button{color:var(--text);font-weight:600;}
.c13-seg.rev button.on{color:var(--text-2);font-weight:500;}
.c13-sync{flex:none;display:flex;align-items:center;gap:calc(7px*var(--esc));font-size:calc(12.5px*var(--esc));color:var(--text-3);white-space:nowrap;}
.c13-sync i{width:calc(7px*var(--esc));height:calc(7px*var(--esc));border-radius:50%;background:var(--bueno);}
.c13-sync.va i{background:var(--gold);animation:c13Respira 1s ease-in-out infinite;}
.c13-ver-w{position:relative;flex:none;}
.c13-ver-b{height:calc(30px*var(--esc));display:flex;align-items:center;gap:calc(6px*var(--esc));padding:0 calc(10px*var(--esc));border:1px solid var(--line-2);border-radius:3px;background:var(--surface);
color:var(--text);font-size:calc(13px*var(--esc));font-weight:500;cursor:pointer;white-space:nowrap;}
.c13-ver-b:hover{border-color:var(--text-3);}
.c13-ibs{flex:none;display:flex;gap:calc(2px*var(--esc));}
.c13-ib{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:calc(36px*var(--esc));height:calc(36px*var(--esc));padding:0;border:1px solid var(--line);
border-radius:var(--r-sm);background:var(--surface);color:var(--text-2);cursor:pointer;transition:border-color .14s,color .14s;}
.c13-ib:hover{border-color:var(--gold);color:var(--gold-ink);}
.c13-ib:active{transform:scale(.96);}
/* ---------- los que flotan: versiones, semáforo y clic derecho ---------- */
.c13-pop{background:var(--surface);border:1px solid var(--line-2);border-radius:4px;box-shadow:0 12px 32px rgba(20,19,16,.18);}
.c13-pop-t{font-size:calc(10.5px*var(--esc));font-weight:600;letter-spacing:.14em;color:var(--text-3);}
.c13-pop-n{margin:0;font-size:calc(12.5px*var(--esc));line-height:1.45;color:var(--text-3);}
.c13-pop-n.mal{color:var(--critico);}
.c13-ver-pop{position:absolute;right:0;top:calc(36px*var(--esc));z-index:30;width:calc(320px*var(--esc));padding:calc(14px*var(--esc));display:flex;flex-direction:column;gap:calc(10px*var(--esc));animation:c13Pop .16s both;}
.c13-ver-t{display:flex;gap:calc(10px*var(--esc));align-items:flex-start;padding:calc(10px*var(--esc));border:1px solid var(--line);border-radius:3px;background:none;color:var(--text);text-align:left;cursor:pointer;}
.c13-ver-t:hover{border-color:var(--line-2);background:var(--surface-2);}
.c13-ver-n{font-family:var(--font-display);font-weight:600;font-size:calc(18px*var(--esc));line-height:1.3;color:var(--gold-ink);}
.c13-ver-d{flex:1;display:flex;flex-direction:column;font-size:calc(13px*var(--esc));line-height:1.5;}
.c13-ver-d b{font-weight:600;}
.c13-ver-d span{color:var(--text-3);}
.c13-ver-cg{align-self:flex-start;}
.c13-velo{position:absolute;inset:0;z-index:40;}
.c13-sem{position:absolute;left:calc(328px*var(--esc));top:calc(146px*var(--esc));z-index:41;width:calc(380px*var(--esc));padding:calc(14px*var(--esc));display:flex;flex-direction:column;gap:calc(8px*var(--esc));animation:c13Pop .14s both;}
.c13-sem-h{display:flex;justify-content:space-between;align-items:baseline;}
.c13-sem-h b{font-family:var(--font-display);font-weight:600;font-size:calc(16px*var(--esc));}
.c13-sem-h span{font-size:calc(12px*var(--esc));color:var(--text-3);}
.c13-sem-r{display:flex;align-items:center;gap:calc(10px*var(--esc));padding:calc(8px*var(--esc)) calc(10px*var(--esc));border:1px solid var(--line);border-radius:3px;background:none;color:var(--text);
font-size:calc(13px*var(--esc));text-align:left;cursor:pointer;}
.c13-sem-r:hover{border-color:var(--line-2);background:var(--surface-2);}
.c13-sem-r:disabled{cursor:default;border-color:var(--line);background:none;}
.c13-sem-r>i{flex:none;width:calc(8px*var(--esc));height:calc(8px*var(--esc));border-radius:50%;}
.c13-sem-r>span:first-of-type{flex:1;}
.c13-sem-r b{font-weight:600;}
.c13-sem-n{font-size:calc(11.5px*var(--esc));color:var(--text-3);white-space:nowrap;}
.c13-sem-b{align-self:flex-start;}
.c13-menu{position:absolute;z-index:41;width:calc(250px*var(--esc));padding:calc(4px*var(--esc));background:var(--surface);border:1px solid var(--line-2);border-radius:4px;
box-shadow:0 12px 32px rgba(20,19,16,.2);animation:c13Pop .12s both;}
.c13-menu button[data-ctx]{width:100%;height:calc(30px*var(--esc));display:flex;white-space:nowrap;align-items:center;gap:calc(9px*var(--esc));padding:0 calc(9px*var(--esc));border:0;border-radius:3px;background:none;
color:var(--text);font-size:calc(13px*var(--esc));text-align:left;cursor:pointer;}
.c13-menu button[data-ctx]:hover{background:var(--surface-2);}
.c13-menu button[data-ctx]:disabled{color:var(--text-3);cursor:default;background:none;}
.c13-menu button.mal{color:var(--critico);}
.c13-menu button span{flex:1;}
.c13-menu kbd{padding:0;border:0;background:none;box-shadow:none;font-family:var(--font-body);font-size:calc(11px*var(--esc));font-weight:400;letter-spacing:0;color:var(--text-3);}
.c13-menu .sep{display:block;height:1px;margin:calc(4px*var(--esc)) calc(2px*var(--esc));background:var(--line);}
.c13-menu-mk{display:flex;align-items:center;gap:calc(7px*var(--esc));margin-top:calc(4px*var(--esc));padding:calc(7px*var(--esc)) calc(9px*var(--esc)) calc(4px*var(--esc));border-top:1px solid var(--line);}
.c13-menu-mk span{flex:1;font-size:calc(11.5px*var(--esc));color:var(--text-3);white-space:nowrap;}
.c13-menu-mk button{flex:none;width:calc(16px*var(--esc));height:calc(16px*var(--esc));padding:0;border-radius:50%;border:2px solid var(--surface);background:var(--mk);cursor:pointer;}
.c13-menu-mk button.quita{background:transparent;border:1.5px dashed var(--text-3);}
/* ---------- hojas (§9.7) ---------- */
.c13-hojas{flex:none;position:relative;height:calc(24px*var(--esc));overflow:hidden;background:var(--bg);transition:height .34s cubic-bezier(.22,.75,.28,1);}
.c13-hojas.abiertas{height:calc(46px*var(--esc));}
.c13-labio{position:absolute;left:0;right:0;top:0;height:calc(24px*var(--esc));display:flex;align-items:center;gap:calc(10px*var(--esc));padding:0 calc(20px*var(--esc));white-space:nowrap;pointer-events:none;
transition:opacity .2s ease,transform .34s cubic-bezier(.22,.75,.28,1);}
.c13-hojas.abiertas .c13-labio{opacity:0;transform:translateY(calc(-8px*var(--esc)));}
.c13-labio>i{width:calc(14px*var(--esc));height:2px;background:var(--gold);}
.c13-labio.cli>i{background:var(--info);}
.c13-labio-l{font-size:calc(9.5px*var(--esc));font-weight:600;letter-spacing:.12em;color:var(--gold-ink);}
.c13-labio.cli .c13-labio-l{color:var(--info);}
.c13-labio b{font-size:calc(12.5px*var(--esc));font-weight:600;}
.c13-labio-n{font-size:calc(11.5px*var(--esc));color:var(--text-3);}
.c13-labio-h{display:flex;align-items:center;gap:calc(5px*var(--esc));font-size:calc(11px*var(--esc));color:var(--text-3);}
.c13-labio-h svg.i{width:calc(12px*var(--esc));height:calc(12px*var(--esc));}
.c13-hojas-f{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;gap:calc(12px*var(--esc));padding:0 calc(18px*var(--esc)) 0 calc(20px*var(--esc));opacity:0;
transform:translateY(calc(14px*var(--esc)));pointer-events:none;transition:opacity .22s ease,transform .34s cubic-bezier(.22,.75,.28,1);}
.c13-hojas.abiertas .c13-hojas-f{opacity:1;transform:none;pointer-events:auto;}
.c13-hojas-l{flex:1;min-width:0;display:flex;align-items:flex-end;gap:1px;}
.c13-hoja{position:relative;flex:none;height:calc(38px*var(--esc));display:flex;align-items:center;gap:calc(10px*var(--esc));margin-bottom:-1px;padding:0 calc(14px*var(--esc));border:1px solid transparent;
border-bottom:0;border-radius:3px 3px 0 0;background:transparent;color:var(--text);cursor:pointer;white-space:nowrap;}
.c13-hoja:hover{background:var(--surface);}
.c13-hoja.on{background:var(--surface);border-color:var(--line-2);}
.c13-hoja>i{position:absolute;left:0;right:0;top:-1px;height:2px;}
.c13-hoja.on>i{background:var(--gold);}
.c13-hoja.on.cli>i{background:var(--info);}
.c13-hoja-t{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;}
.c13-hoja-l{font-size:calc(9.5px*var(--esc));font-weight:600;letter-spacing:.12em;color:var(--text-3);}
.c13-hoja.on .c13-hoja-l{color:var(--gold-ink);}
.c13-hoja.on.cli .c13-hoja-l{color:var(--info);}
.c13-hoja-n{font-size:calc(13px*var(--esc));font-weight:500;}
.c13-hoja.on .c13-hoja-n{font-weight:600;}
.c13-hoja-c{font-size:calc(11.5px*var(--esc));color:var(--text-3);font-variant-numeric:tabular-nums;}
.c13-hoja-ic{flex:none;width:calc(32px*var(--esc));height:calc(32px*var(--esc));display:flex;align-items:center;justify-content:center;padding:0;border:0;background:none;color:var(--text-3);cursor:pointer;}
.c13-hoja-ic:hover,.c13-hoja-ic.on{color:var(--gold-ink);}
.c13-busca{flex:none;width:calc(230px*var(--esc));height:calc(28px*var(--esc));margin-bottom:calc(6px*var(--esc));display:flex;align-items:center;gap:calc(7px*var(--esc));padding:0 calc(9px*var(--esc));border:1px solid var(--line-2);
border-radius:3px;background:var(--surface);color:var(--text-3);cursor:text;}
.c13-busca:focus-within{border-color:var(--gold-deep);box-shadow:0 0 0 3px var(--gold-soft);}
.c13-busca input{flex:1;min-width:0;padding:0;border:0;outline:none;background:none;font-family:var(--font-body);font-size:calc(13px*var(--esc));color:var(--text);}
.c13-busca input::placeholder,.c13-que input::placeholder{color:var(--text-3);}
/* ---------- cinta (§9.2) ---------- */
.c13-cinta{flex:none;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line-2);}
.c13-pts{height:calc(30px*var(--esc));display:flex;align-items:flex-end;gap:calc(2px*var(--esc));padding:0 calc(10px*var(--esc)) 0 calc(12px*var(--esc));background:var(--surface-2);border-bottom:1px solid var(--line);}
.c13-pts.plegada{border-bottom-color:transparent;}
.c13-pt{flex:none;height:calc(29px*var(--esc));margin-bottom:-1px;padding:0 calc(14px*var(--esc));border:1px solid transparent;border-bottom:0;border-radius:3px 3px 0 0;background:transparent;
color:var(--text-2);font-size:calc(12.5px*var(--esc));font-weight:500;cursor:pointer;white-space:nowrap;box-shadow:inset 0 2px 0 transparent;}
.c13-pt:hover{color:var(--text);}
.c13-pt.ctx{color:var(--gold-ink);}
.c13-pt.on{background:var(--surface);border-color:var(--line);color:var(--text);font-weight:600;box-shadow:inset 0 2px 0 var(--gold);}
.c13-que{flex:none;align-self:center;width:calc(210px*var(--esc));height:calc(22px*var(--esc));display:flex;align-items:center;gap:calc(6px*var(--esc));padding:0 calc(8px*var(--esc));border:1px solid var(--line-2);
border-radius:3px;background:var(--surface);color:var(--text-3);font-size:calc(12px*var(--esc));}
.c13-que svg.i{width:calc(12px*var(--esc));height:calc(12px*var(--esc));}
.c13-que input{flex:1;min-width:0;padding:0;border:0;outline:none;background:none;font-family:var(--font-body);font-size:calc(12px*var(--esc));color:var(--text);}
.c13-plegar{flex:none;align-self:center;width:calc(24px*var(--esc));height:calc(22px*var(--esc));margin-left:calc(4px*var(--esc));padding:0;border:0;background:none;color:var(--text-3);cursor:pointer;
display:flex;align-items:center;justify-content:center;transition:transform .18s;}
.c13-plegar.gira{transform:rotate(180deg);}
.c13-grupos{height:calc(86px*var(--esc));display:flex;align-items:stretch;padding:0 calc(4px*var(--esc));overflow:hidden;animation:c13Funde .14s both;}
.c13-gr{flex:none;display:flex;flex-direction:column;padding:calc(5px*var(--esc)) calc(8px*var(--esc)) calc(3px*var(--esc));border-right:1px solid var(--line);}
.c13-gr-b{flex:1;display:flex;align-items:flex-start;gap:calc(4px*var(--esc));}
.c13-gr-t{padding-top:calc(2px*var(--esc));text-align:center;font-size:calc(9.5px*var(--esc));font-weight:600;letter-spacing:.14em;color:var(--text-3);white-space:nowrap;}
.c13-gc{display:flex;flex-direction:column;gap:1px;}
.c13-hg{position:relative;flex:none;min-width:calc(56px*var(--esc));max-width:calc(78px*var(--esc));height:calc(62px*var(--esc));display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
gap:calc(5px*var(--esc));padding:calc(7px*var(--esc)) calc(6px*var(--esc)) 0;border:1px solid transparent;border-radius:3px;background:transparent;color:var(--text);font-size:calc(11.5px*var(--esc));line-height:1.2;
text-align:center;cursor:pointer;}
.c13-hs{flex:none;height:calc(21px*var(--esc));display:flex;align-items:center;gap:calc(6px*var(--esc));padding:0 calc(7px*var(--esc)) 0 calc(5px*var(--esc));border:1px solid transparent;border-radius:2px;
background:transparent;color:var(--text);font-size:calc(12px*var(--esc));cursor:pointer;white-space:nowrap;}
.c13-hg:hover,.c13-hs:hover{background:var(--surface-2);border-color:var(--line-2);}
.c13-hg:active{transform:scale(.965);}
.c13-hs:active{transform:scale(.97);}
.c13-hg.on,.c13-hs.on{background:var(--gold-soft);border-color:var(--gold);}
.c13-hg:disabled,.c13-hs:disabled{opacity:.45;cursor:default;background:transparent;border-color:transparent;transform:none;}
.c13-hic{display:flex;color:var(--text-2);}
.c13-hg.pri .c13-hic,.c13-hg.on .c13-hic,.c13-hs.on .c13-hic{color:var(--gold-ink);}
.c13-hk{margin-left:calc(2px*var(--esc));font-size:calc(10px*var(--esc));color:var(--text-3);}
.c13-hn{position:absolute;top:calc(3px*var(--esc));right:calc(4px*var(--esc));font-size:calc(9.5px*var(--esc));font-weight:650;color:var(--text-3);}
.c13-marcas{display:grid;grid-template-columns:repeat(3,calc(20px*var(--esc)));gap:calc(6px*var(--esc));padding:calc(6px*var(--esc)) calc(4px*var(--esc));}
.c13-mk{flex:none;width:calc(18px*var(--esc));height:calc(18px*var(--esc));padding:0;border-radius:50%;border:2px solid var(--surface);background:var(--mk);cursor:pointer;}
.c13-mk:hover{transform:scale(1.12);}
.c13-mk.quita{background:transparent;border:1.5px dashed var(--text-3);}
.c13-mk:disabled{opacity:.45;cursor:default;transform:none;}
/* ---------- barra ƒx, «Mostrar» y el lote ---------- */
.c13-fx{flex:none;height:calc(30px*var(--esc));display:flex;align-items:stretch;background:var(--surface);border-bottom:1px solid var(--line);}
.c13-fx-ref{flex:none;width:calc(180px*var(--esc));padding:0 calc(12px*var(--esc));border-right:1px solid var(--line);font-size:calc(12.5px*var(--esc));font-weight:600;line-height:calc(29px*var(--esc));color:var(--text-2);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;}
.c13-fx-ic{flex:none;width:calc(32px*var(--esc));display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line);font-style:italic;font-size:calc(13.5px*var(--esc));
color:var(--text-3);}
.c13-fx-ic.oro{color:var(--gold-ink);}
.c13-fx-f{flex:1;min-width:0;display:flex;align-items:center;gap:calc(10px*var(--esc));padding:0 calc(12px*var(--esc));font-size:calc(13px*var(--esc));white-space:nowrap;overflow:hidden;}
.c13-fx-t{overflow:hidden;text-overflow:ellipsis;color:var(--text);}
.c13-fx-f .tenue{color:var(--text-3);}
.c13-fx-f b{font-weight:600;font-variant-numeric:tabular-nums;}
#c13-fx-ed{display:flex;}
.c13-fx-b{flex:none;margin:calc(3px*var(--esc)) calc(8px*var(--esc));padding:0 calc(10px*var(--esc));border:1px solid var(--line-2);border-radius:3px;background:var(--surface);color:var(--text-2);
font-size:calc(12px*var(--esc));cursor:pointer;}
.c13-chips{flex:none;display:flex;align-items:center;gap:calc(6px*var(--esc));padding:calc(7px*var(--esc)) calc(18px*var(--esc)) calc(7px*var(--esc)) calc(20px*var(--esc));background:var(--surface);border-top:1px solid var(--line-2);
border-bottom:1px solid var(--line);}
.c13-chips-l{margin-right:calc(4px*var(--esc));font-size:calc(11.5px*var(--esc));color:var(--text-3);}
.c13-chip{flex:none;height:calc(24px*var(--esc));display:flex;align-items:center;gap:calc(6px*var(--esc));padding:0 calc(9px*var(--esc));border:1px solid var(--line-2);border-radius:calc(12px*var(--esc));background:var(--surface);
color:var(--text-2);font-size:calc(12px*var(--esc));font-weight:500;cursor:pointer;white-space:nowrap;}
.c13-chip:active{transform:scale(.96);}
.c13-chip i{width:calc(6px*var(--esc));height:calc(6px*var(--esc));border-radius:50%;}
.c13-chip span{color:var(--text-3);}
.c13-chip.on{background:var(--gold-soft);border-color:var(--gold);color:var(--gold-ink);}
.c13-orden{min-width:0;font-size:calc(12px*var(--esc));color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.c13-quitar{flex:none;padding:0;border:0;background:none;color:var(--gold-ink);font-size:calc(12px*var(--esc));font-weight:600;cursor:pointer;white-space:nowrap;}
.c13-lote{flex:none;display:flex;align-items:center;gap:calc(8px*var(--esc));padding:calc(6px*var(--esc)) calc(20px*var(--esc));background:var(--ink);color:#F0EEE7;font-size:calc(13px*var(--esc));}
.c13-lote b{margin-right:calc(6px*var(--esc));font-weight:600;}
.c13-lote button{height:calc(26px*var(--esc));padding:0 calc(9px*var(--esc));border:1px solid #5C5A54;border-radius:3px;background:none;color:#F0EEE7;font-size:calc(12.5px*var(--esc));cursor:pointer;}
.c13-lote button.borra{padding:0 calc(11px*var(--esc));border-color:var(--critico);background:var(--critico);color:#fff;font-weight:600;}
/* ---------- cuadrícula ---------- */
.c13-grid{flex:1;min-height:0;overflow:auto;outline:none;background:var(--surface);position:relative;scrollbar-width:thin;}
.c13-grid:focus-visible{outline:none;}
.c13-lienzo{position:relative;}
.c13-arriba{position:sticky;top:0;z-index:6;background:var(--surface);}
.c13-bandas,.c13-cabezas,.c13-f{display:grid;grid-template-columns:var(--gtc);}
.c13-bandas{height:calc(24px*var(--esc));border-bottom:1px solid var(--line);}
.c13-band{position:relative;z-index:1;display:flex;align-items:center;gap:calc(8px*var(--esc));padding:0 calc(12px*var(--esc));overflow:hidden;background:var(--surface);border-right:1px solid var(--line-2);
font-size:calc(10px*var(--esc));font-weight:600;letter-spacing:.14em;color:var(--text-3);white-space:nowrap;}
.c13-band>i{flex:none;width:calc(8px*var(--esc));height:2px;background:var(--line-2);}
.c13-band.fx{position:sticky;left:0;z-index:3;}
.c13-band.prov{color:var(--gold-ink);}
.c13-band.prov>i{background:var(--gold);}
.c13-band.cli,.c13-band.obra{color:var(--info);}
.c13-band.cli>i,.c13-band.obra>i{background:var(--info);}
.c13-cabezas{background:var(--surface-2);border-bottom:2px solid var(--line-2);}
.c13-h{position:relative;z-index:1;height:calc(32px*var(--esc));display:flex;align-items:center;justify-content:flex-start;gap:calc(5px*var(--esc));padding:0 calc(12px*var(--esc));background:var(--surface-2);
border-right:1px solid var(--line);cursor:pointer;user-select:none;min-width:0;overflow:hidden;}
.c13-h:hover{background:var(--surface-3);}
.c13-h.n{justify-content:flex-end;}
.c13-h.fx{position:sticky;z-index:3;}
.c13-h.fx:first-child{left:0;cursor:default;}
.c13-h.ord{background:var(--gold-soft);}
.c13-h-n{font-size:calc(11px*var(--esc));font-weight:600;letter-spacing:.06em;color:var(--text-2);white-space:nowrap;}
.c13-h-a{font-size:calc(11px*var(--esc));color:var(--gold-ink);}
.c13-h-i{font-size:calc(9px*var(--esc));color:var(--gold-ink);}
.c13-rs{position:absolute;right:-3px;top:0;bottom:0;z-index:2;width:6px;cursor:col-resize;}
.c13-rs.activo{background:var(--gold-deep);}
/* Secciones: el subtítulo que agrupa y suma, plegable. */
.c13-s{display:flex;align-items:center;height:calc(38px*var(--esc));background:var(--surface-2);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line);}
.c13-s-l{position:sticky;left:0;z-index:2;display:flex;align-items:center;gap:calc(10px*var(--esc));height:100%;padding:0 calc(12px*var(--esc)) 0 calc(8px*var(--esc));background:var(--surface-2);}
.c13-s-t{width:calc(22px*var(--esc));height:calc(22px*var(--esc));display:flex;align-items:center;justify-content:center;padding:0;border:0;background:none;color:var(--text-3);cursor:pointer;
transition:transform .18s;}
.c13-s.plegada .c13-s-t{transform:rotate(-90deg);}
.c13-s-n{font-family:var(--font-display);font-size:calc(14.5px*var(--esc));font-weight:600;white-space:nowrap;}
.c13-s-n[contenteditable]{padding:0 calc(4px*var(--esc));outline:1px solid var(--gold-deep);outline-offset:2px;background:var(--surface);cursor:text;}
.c13-s-c{font-size:calc(12px*var(--esc));color:var(--text-3);white-space:nowrap;}
.c13-s-sp{font-size:calc(11.5px*var(--esc));color:var(--gold-ink);white-space:nowrap;}
.c13-s-r{position:sticky;right:0;display:flex;align-items:center;gap:calc(12px*var(--esc));height:100%;padding:0 calc(14px*var(--esc));background:var(--surface-2);}
.c13-s-b{width:calc(80px*var(--esc));height:calc(4px*var(--esc));overflow:hidden;border-radius:2px;background:var(--line);}
.c13-s-b i{display:block;height:100%;background:var(--gold);}
.c13-s-p{width:calc(32px*var(--esc));font-size:calc(12px*var(--esc));color:var(--text-3);text-align:right;font-variant-numeric:tabular-nums;}
.c13-s-st{min-width:calc(120px*var(--esc));font-size:calc(14px*var(--esc));font-weight:600;text-align:right;font-variant-numeric:tabular-nums;}
.c13-s-x{width:calc(22px*var(--esc));height:calc(22px*var(--esc));display:flex;align-items:center;justify-content:center;padding:0;border:0;background:none;color:var(--text-3);opacity:.6;cursor:pointer;}
.c13-s-x:hover{opacity:1;color:var(--critico);}
.c13-s.mov,.c13-f.mov{opacity:.45;}
/* Renglones y celdas. */
.c13-f{height:calc(34px*var(--esc));border-bottom:1px solid var(--line);}
.c13-grid.compacta .c13-f{height:calc(28px*var(--esc));}
.c13-c{position:relative;min-width:0;display:flex;align-items:center;justify-content:flex-start;gap:calc(6px*var(--esc));padding:0 calc(12px*var(--esc));overflow:hidden;background:var(--surface);
color:var(--text);font-size:calc(13px*var(--esc));font-variant-numeric:tabular-nums;white-space:nowrap;border-right:1px solid color-mix(in oklab, var(--line) 60%, transparent);
cursor:cell;user-select:none;}
.c13-f.alt .c13-c{background:var(--surface-2);}
.c13-f.mk-amarillo{--mk:var(--mk-amarillo);--mk-bg:var(--mk-amarillo-bg);}
.c13-f.mk-azul{--mk:var(--mk-azul);--mk-bg:var(--mk-azul-bg);}
.c13-f.mk-verde{--mk:var(--mk-verde);--mk-bg:var(--mk-verde-bg);}
.c13-f.mk-rojo{--mk:var(--mk-rojo);--mk-bg:var(--mk-rojo-bg);}
.c13-f.mk-morado{--mk:var(--mk-morado);--mk-bg:var(--mk-morado-bg);}
.c13-f.mk .c13-c{background:var(--mk-bg);}
.c13-f.mk .c13-c.num{box-shadow:inset 3px 0 0 var(--mk);}
.c13-c.n{justify-content:flex-end;}
.c13-c.fx{position:sticky;z-index:2;}
.c13-c.num{left:0;justify-content:center;color:var(--text-3);font-size:calc(11px*var(--esc));font-weight:500;cursor:default;}
.c13-c.clave{font-weight:600;color:var(--text-2);}
.c13-c.fuerte{font-weight:600;}
.c13-c.medio,.c13-c.c13-fijo{font-weight:500;}
.c13-c.c13-sug{font-style:italic;color:var(--text-2);}
.c13-v{overflow:hidden;text-overflow:ellipsis;}
.c13-sub{font-size:calc(9.5px*var(--esc));font-weight:600;font-style:normal;letter-spacing:.06em;color:var(--text-3);}
.c13-c .nd{color:var(--text-3);}
.c13-f.fija .c13-c{color:var(--text-2);}
.c13-f.huerfana .c13-c{color:var(--text-3);}
/* El semáforo pinta la celda y le pone su franja; la marca manual pinta el renglón (§9.6). */
.c13-f .c13-c.sf{font-weight:600;}
.c13-f .c13-c.sf-rojo{background:var(--critico-bg);color:var(--critico);}
.c13-f .c13-c.sf-ambar{background:var(--checar-bg);color:var(--checar);}
.c13-f .c13-c.sf-verde{background:var(--bueno-bg);color:var(--bueno);}
.c13-c.sf::before{content:'';position:absolute;left:0;top:calc(6px*var(--esc));bottom:calc(6px*var(--esc));width:3px;border-radius:0 2px 2px 0;background:currentColor;}
.c13-c.sf.act::before{display:none;}
/* La selección: el bloque en dorado tenue y la celda activa con su borde. */
.c13-f .c13-c.en{background:color-mix(in oklab, var(--gold-soft) 70%, var(--surface));}
.c13-f.alt .c13-c.en{background:color-mix(in oklab, var(--gold-soft) 70%, var(--surface-2));}
.c13-f.mk .c13-c.en{background:color-mix(in oklab, var(--gold-soft) 70%, var(--mk-bg));}
.c13-c.act{box-shadow:inset 0 0 0 2px var(--gold-deep);}
.c13-s.act .c13-s-l{box-shadow:inset 0 0 0 2px var(--gold-deep);}
.c13-f.mk .c13-c.num.act{box-shadow:inset 3px 0 0 var(--mk),inset 0 0 0 2px var(--gold-deep);}
.c13-f .c13-c.rellena{background:color-mix(in oklab, var(--gold-soft) 45%, var(--surface));}
.c13-c.destello{animation:c13Destello .9s ease-out;}
.c13-c.editando{overflow:visible;}
.c13-in{position:absolute;inset:0;z-index:3;width:100%;padding:0 calc(11px*var(--esc));border:0;outline:2px solid var(--gold-deep);outline-offset:-2px;background:var(--surface);
color:var(--text);font-family:var(--font-body);font-size:calc(13px*var(--esc));font-style:normal;font-weight:400;text-align:left;font-variant-numeric:tabular-nums;}
.c13-in.n{text-align:right;}
.c13-tirador{position:absolute;right:0;bottom:0;z-index:3;width:6px;height:6px;background:var(--gold-deep);box-shadow:0 0 0 1px var(--surface);cursor:crosshair;}
.c13-bar{flex:1;height:calc(4px*var(--esc));overflow:hidden;border-radius:2px;background:var(--surface-3);}
.c13-bar i{display:block;height:100%;background:var(--line-2);}
.c13-bar i.va{background:var(--gold);}
.c13-bar i.lleno{background:var(--bueno);}
.c13-pct{flex:none;width:calc(34px*var(--esc));font-size:calc(12px*var(--esc));text-align:right;color:var(--text);}
.c13-pct.cero{color:var(--text-3);}
.c13-tag{display:flex;align-items:center;gap:calc(6px*var(--esc));overflow:hidden;font-size:calc(11px*var(--esc));color:var(--text-3);}
.c13-tag i{flex:none;width:calc(6px*var(--esc));height:calc(6px*var(--esc));border-radius:50%;background:currentColor;}
.c13-tag.nueva{color:var(--gold-ink);}
.c13-chk{width:calc(15px*var(--esc));height:calc(15px*var(--esc));display:flex;align-items:center;justify-content:center;border:1.5px solid var(--line-2);border-radius:2px;background:var(--surface);
color:var(--gold-on);font-size:calc(10px*var(--esc));font-weight:800;cursor:pointer;}
.c13-chk.on{border-color:var(--gold-deep);background:var(--gold);}
.c13-vacio{display:flex;flex-direction:column;align-items:center;gap:calc(10px*var(--esc));padding:calc(40px*var(--esc));text-align:center;font-size:calc(14px*var(--esc));color:var(--text-3);}
.c13-vacio b{font-weight:600;color:var(--text);}
.c13-vacio-b{display:flex;gap:calc(8px*var(--esc));}
.c13-vacio-todo{align-items:center;justify-content:center;}
.c13-pie{display:flex;justify-content:flex-end;gap:calc(32px*var(--esc));padding:calc(14px*var(--esc)) calc(18px*var(--esc)) calc(20px*var(--esc));background:var(--surface);border-top:2px solid var(--line-2);font-variant-numeric:tabular-nums;}
.c13-pie>span{display:flex;flex-direction:column;align-items:flex-end;gap:calc(3px*var(--esc));}
.c13-pie b{font-size:calc(10.5px*var(--esc));font-weight:600;letter-spacing:.12em;color:var(--text-3);}
.c13-pie>span>span{font-size:calc(15px*var(--esc));font-weight:500;}
.c13-pie .tot b{color:var(--gold-ink);}
.c13-pie .tot>span{font-family:var(--font-display);font-size:calc(19px*var(--esc));font-weight:600;}
body.cat-rellenando,body.cat-rellenando *{cursor:crosshair !important;}
/* ---------- barra de estado ---------- */
.c13-estado{flex:none;height:calc(26px*var(--esc));display:flex;align-items:center;padding:0 calc(8px*var(--esc));overflow:hidden;background:var(--chrome);border-top:1px solid var(--line-2);
font-size:calc(11.5px*var(--esc));color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap;}
.c13-st{padding:0 calc(12px*var(--esc));border-right:1px solid var(--line-2);}
.c13-st .k{color:var(--text-3);}
.c13-st b{font-weight:400;color:var(--text);}
.c13-st .mal{font-weight:600;color:var(--critico);}
.c13-modo{padding:0 calc(12px*var(--esc));color:var(--text-3);}
.c13-atj-b{padding:0;border:0;background:none;color:var(--gold-ink);font-size:calc(11.5px*var(--esc));cursor:pointer;}
/* ---------- panel Propiedades (§9.4) ---------- */
.c13-props{flex:none;width:calc(300px*var(--esc));display:flex;flex-direction:column;min-height:0;overflow-y:auto;background:var(--surface);border-left:1px solid var(--line-2);
scrollbar-width:thin;}
@media (max-width:1100px){
.c13-props{position:absolute;right:0;top:0;bottom:0;z-index:20;box-shadow:var(--elev-3);}
}
.c13-props-h{flex:none;height:calc(30px*var(--esc));display:flex;align-items:center;padding:0 calc(14px*var(--esc));background:var(--surface-2);border-bottom:1px solid var(--line-2);
font-size:calc(10.5px*var(--esc));font-weight:600;letter-spacing:.14em;color:var(--text-3);}
.c13-pr-cab{display:flex;flex-direction:column;gap:calc(4px*var(--esc));padding:calc(14px*var(--esc)) calc(14px*var(--esc)) calc(12px*var(--esc));border-bottom:1px solid var(--line);}
.c13-pr-l{display:flex;align-items:center;gap:calc(8px*var(--esc));font-size:calc(12px*var(--esc));color:var(--text-3);}
.c13-pr-l b{font-weight:600;color:var(--text-2);}
.c13-pr-mk{width:calc(9px*var(--esc));height:calc(9px*var(--esc));border-radius:50%;}
.c13-pr-d{font-family:var(--font-display);font-weight:600;font-size:calc(16px*var(--esc));line-height:1.3;}
.c13-pr-q{font-size:calc(12px*var(--esc));line-height:1.4;color:var(--text-3);}
.c13-pr-g{flex:none;height:calc(26px*var(--esc));display:flex;align-items:center;gap:calc(6px*var(--esc));padding:0 calc(14px*var(--esc));background:var(--surface-2);border-bottom:1px solid var(--line);
font-size:calc(10.5px*var(--esc));font-weight:600;letter-spacing:.12em;color:var(--text-2);}
.c13-pr-g svg.i{width:calc(12px*var(--esc));height:calc(12px*var(--esc));}
.c13-pr-p{display:grid;grid-template-columns:calc(130px*var(--esc)) minmax(0,1fr);border-bottom:1px solid var(--line);}
.c13-pr-p>span:first-child{padding:calc(6px*var(--esc)) calc(10px*var(--esc)) calc(6px*var(--esc)) calc(14px*var(--esc));border-right:1px solid var(--line);font-size:calc(12px*var(--esc));color:var(--text-2);}
.c13-pr-p>span:last-child{padding:calc(6px*var(--esc)) calc(14px*var(--esc)) calc(6px*var(--esc)) calc(10px*var(--esc));overflow:hidden;font-size:calc(12.5px*var(--esc));text-align:right;color:var(--text);white-space:nowrap;text-overflow:ellipsis;
font-variant-numeric:tabular-nums;}
.c13-pr-p.tenue>span:last-child{color:var(--text-2);}
.c13-pr-p.topa>span:last-child{color:var(--checar);}
.c13-pr-p.gana{background:var(--gold-soft);}
.c13-pr-p.gana>span:first-child{color:var(--gold-ink);}
.c13-pr-p.pierde>span:last-child{color:var(--text-3);text-decoration:line-through;}
.c13-pr-m>span:first-child{padding-top:calc(7px*var(--esc));padding-bottom:calc(7px*var(--esc));}
.c13-pr-m>span:last-child{display:flex;align-items:center;gap:calc(8px*var(--esc));padding:0 calc(14px*var(--esc)) 0 calc(10px*var(--esc));}
.c13-pr-mb{flex:1;display:block;height:calc(4px*var(--esc));overflow:hidden;border-radius:2px;background:var(--surface-3);}
.c13-pr-mb i{display:block;height:100%;background:var(--gold-ink);}
.c13-pr-m b{font-weight:400;color:var(--gold-ink);}
.c13-pr-m.bajo .c13-pr-mb i{background:var(--critico);}
.c13-pr-m.bajo b{color:var(--critico);}
.c13-pr-m.alto .c13-pr-mb i{background:var(--bueno);}
.c13-pr-m.alto b{color:var(--bueno);}
.c13-pr-r{display:flex;align-items:flex-start;gap:calc(10px*var(--esc));padding:calc(9px*var(--esc)) calc(14px*var(--esc));border-bottom:1px solid var(--line);}
.c13-pr-ri{flex:none;display:flex;margin-top:1px;color:var(--text-2);}
.c13-pr-ri.oro{color:var(--gold-ink);}
.c13-pr-ri.bueno{color:var(--bueno);}
.c13-pr-ri.info{color:var(--info);}
.c13-pr-ri.tenue{color:var(--text-3);}
.c13-pr-r>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(2px*var(--esc));}
.c13-pr-r b{font-size:calc(12.5px*var(--esc));font-weight:500;}
.c13-pr-r span{font-size:calc(11.5px*var(--esc));line-height:1.4;color:var(--text-3);}
.c13-pr-a{align-self:flex-start;padding:0;border:0;background:none;color:var(--gold-ink);font-size:calc(12px*var(--esc));text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
.c13-pr-a:hover{color:var(--charcoal);}
.c13-pr-a.mas{margin:calc(8px*var(--esc)) calc(14px*var(--esc));}
.c13-pr-k{display:grid;grid-template-columns:minmax(0,1fr) calc(56px*var(--esc)) calc(76px*var(--esc));align-items:center;gap:calc(8px*var(--esc));padding:calc(7px*var(--esc)) calc(14px*var(--esc));border-bottom:1px solid var(--line);font-size:calc(12px*var(--esc));}
.c13-pr-k>span{overflow:hidden;color:var(--text-2);white-space:nowrap;text-overflow:ellipsis;}
.c13-pr-k>i{display:block;height:calc(4px*var(--esc));overflow:hidden;border-radius:2px;background:var(--surface-3);}
.c13-pr-k>i>i{display:block;height:100%;background:var(--line-2);}
.c13-pr-k>b{font-weight:400;text-align:right;color:var(--text-2);font-variant-numeric:tabular-nums;}
.c13-pr-k.baja>i>i{background:var(--bueno);}
.c13-pr-k.baja>b{color:var(--bueno);}
.c13-pr-h{padding:calc(7px*var(--esc)) calc(14px*var(--esc));border-bottom:1px solid var(--line);font-size:calc(12px*var(--esc));line-height:1.45;}
.c13-pr-h b{font-weight:500;}
.c13-pr-h span{color:var(--text-2);}
.c13-pr-h i{font-style:normal;color:var(--text-3);}
.c13-pr-n{margin:0;padding:calc(8px*var(--esc)) calc(14px*var(--esc));border-bottom:1px solid var(--line);font-size:calc(12px*var(--esc));color:var(--text-3);}
.c13-pr-n.mal{color:var(--critico);}
.c13-pr-b{display:flex;align-items:flex-start;gap:calc(8px*var(--esc));padding:calc(10px*var(--esc)) calc(14px*var(--esc)) calc(16px*var(--esc));font-size:calc(12px*var(--esc));line-height:1.45;color:var(--text-2);}
.c13-pr-b svg.i{flex:none;margin-top:1px;color:var(--text-3);}
.c13-pr-b.si svg.i{color:var(--bueno);}
.c13-pr-b.no svg.i{color:var(--critico);}
/* ---------- aviso (toast) y atajos ---------- */
.c13-aviso{position:absolute;left:50%;bottom:calc(40px*var(--esc));z-index:60;display:none;align-items:center;gap:calc(10px*var(--esc));max-width:calc(640px*var(--esc));padding:calc(10px*var(--esc)) calc(16px*var(--esc)) calc(10px*var(--esc)) calc(13px*var(--esc));
transform:translateX(-50%);background:var(--surface);border:1px solid var(--line-2);border-left:3px solid var(--tono,var(--bueno));border-radius:4px;
box-shadow:0 8px 24px rgba(35,35,32,.18);font-size:calc(13.5px*var(--esc));font-weight:500;color:var(--text);}
.c13-aviso.on{display:flex;animation:c13Pop .2s cubic-bezier(.22,.75,.28,1) both;}
.c13-aviso.on.quieto{animation:none;}
.c13-aviso-ic{display:flex;color:var(--tono,var(--bueno));}
.modal.c13-atj{max-width:calc(760px*var(--esc));padding:calc(24px*var(--esc)) calc(26px*var(--esc));}
.c13-atj-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:calc(14px*var(--esc));}
.c13-atj-h h3{margin:0;font-family:var(--font-display);font-size:calc(20px*var(--esc));font-weight:600;letter-spacing:0;}
.c13-atj-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc(28px*var(--esc));}
.c13-atj-g>div{display:flex;align-items:center;gap:calc(12px*var(--esc));padding:calc(6px*var(--esc)) 0;border-bottom:1px solid var(--line);}
.c13-atj-k{min-width:calc(128px*var(--esc));display:flex;flex-wrap:wrap;gap:calc(4px*var(--esc));}
.c13-atj-k kbd{padding:calc(2px*var(--esc)) calc(6px*var(--esc));border:1px solid var(--line-2);border-bottom-width:2px;border-radius:3px;background:var(--surface-2);box-shadow:none;
font-family:var(--font-body);font-size:calc(11.5px*var(--esc));font-weight:600;letter-spacing:0;color:var(--text);white-space:nowrap;}
.c13-atj-g>div>span:last-child{font-size:calc(13px*var(--esc));color:var(--text-2);}
/* ---------- carga, versión y exportar ---------- */
.c13-esq{flex:1;display:flex;flex-direction:column;gap:calc(4px*var(--esc));padding:calc(12px*var(--esc)) calc(20px*var(--esc));background:var(--surface);border-top:1px solid var(--line);}
.c13-esq-f{display:flex;align-items:center;gap:calc(16px*var(--esc));height:calc(30px*var(--esc));}
.c13-esq-f .i2-esq{height:calc(10px*var(--esc));}
.c13-vm-h{margin:calc(10px*var(--esc)) 0 calc(4px*var(--esc));font-size:var(--t-sm);font-weight:600;color:var(--text-2);}
.c13-vm-l{margin:0 0 calc(12px*var(--esc));padding-left:calc(18px*var(--esc));max-height:calc(160px*var(--esc));overflow:auto;font-size:var(--t-sm);color:var(--text-2);}
.c13-ex-xls{display:flex;align-items:center;justify-content:space-between;gap:calc(12px*var(--esc));margin-top:calc(12px*var(--esc));padding:calc(10px*var(--esc)) calc(12px*var(--esc));border:1px solid var(--line);border-radius:3px;
background:var(--surface-2);font-size:var(--t-sm);color:var(--text-2);}
/* ---------- en el celular ----------
El paquete no dibuja el catálogo en el celular: ahí va la tabla primero. La barra de arriba ya dice
«Catálogo» y el estado de guardado, y la cinta y la barra ƒx son de teclado y ratón. Sin el encabezado,
Captura | Revisión va en la barra de vistas de la app. Las hojas quedan a la vista (no hay ratón que
las suba), los campos van a 16 px y 44 px de alto, la tabla se recorre de lado y solo el número de
renglón queda fijo. */
@media (max-width:720px){
.c13-cab,.c13-cinta,.c13-fx,.c13-labio{display:none;}
body.cat13 #vistas-bar{display:block;}
.c13-hojas,.c13-hojas.abiertas{height:auto;overflow:visible;}
.c13-hojas-f{position:static;flex-direction:column;align-items:stretch;gap:8px;padding:8px 12px 0;opacity:1;transform:none;pointer-events:auto;}
.c13-hojas-l{overflow-x:auto;}
.c13-hoja{height:44px;}
.c13-hoja-ic{width:44px;height:44px;}
.c13-busca{width:auto;height:44px;margin:0 0 8px;}
.c13-busca input{font-size:16px;}
.c13-chips{overflow-x:auto;padding-left:12px;padding-right:12px;}
.c13-band.fx:not(:first-child),.c13-h.fx:not(:first-child),.c13-c.fx:not(.num){position:static;z-index:auto;}
.c13-s-b,.c13-s-p,.c13-atj-b{display:none;}
.c13-chip{height:44px;}
.c13-f,.c13-grid.compacta .c13-f,.c13-s{height:44px;}
.c13-s-t,.c13-s-x{width:44px;height:44px;}
.c13-s-r{position:static;}
}
/* ============================================================
CATÁLOGO · REVISIÓN (§9.8)
El modo Revisión de Catalogo C.dc.html, dentro del mismo marco de 13c: franja de caras,
cinta de cinco grupos, tarjetas con «Por resolver», estrategia que se despliega, tabla de
las dos caras con rubros plegables, pie y barra de estado. Medidas del prototipo por --esc.
============================================================ */
@keyframes rvEntra{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
/* El marco se repinta en cada filtro o acción: sin la entrada en cascada de las secciones, que lo haría parpadear. */
body.cat13 .sec.on>.c13{animation:none;}
.rv-cuerpo{flex:1;min-height:0;display:flex;flex-direction:column;}
.rv-cuerpo.entra{animation:rvEntra .34s cubic-bezier(.22,.75,.28,1) both;}
/* ---------- franja de caras ---------- */
.rv-caras{flex:none;height:calc(24px*var(--esc));display:flex;align-items:center;gap:calc(10px*var(--esc));padding:0 calc(20px*var(--esc));overflow:hidden;background:var(--bg);white-space:nowrap;}
.rv-caras>i{flex:none;width:calc(14px*var(--esc));height:2px;background:var(--gold);}
.rv-caras>i.cli{background:var(--info);}
.rv-caras-l{font-size:calc(9.5px*var(--esc));font-weight:600;letter-spacing:.12em;color:var(--gold-ink);}
.rv-caras-l.cli{color:var(--info);}
.rv-caras b{font-size:calc(12.5px*var(--esc));font-weight:600;}
.rv-caras-f{display:flex;color:var(--text-3);}
.rv-caras-f svg.i{width:calc(12px*var(--esc));height:calc(12px*var(--esc));}
.rv-caras-n{font-size:calc(11.5px*var(--esc));color:var(--text-3);}
/* ---------- cinta de Revisión ---------- */
.rv-cinta{flex:none;height:calc(86px*var(--esc));display:flex;align-items:stretch;padding:0 calc(4px*var(--esc));overflow:hidden;background:var(--surface);
border-top:1px solid var(--line);border-bottom:1px solid var(--line-2);}
.rv-cinta .c13-hg{max-width:calc(86px*var(--esc));}
.rv-cinta .c13-hn{color:var(--gold-ink);}
.rv-mf{display:flex;flex-direction:column;gap:calc(5px*var(--esc));padding:calc(3px*var(--esc)) calc(2px*var(--esc));transition:opacity .2s;}
.rv-mf.apagado{opacity:.45;}
.rv-mf>label{font-size:calc(11.5px*var(--esc));color:var(--text-2);white-space:nowrap;}
.rv-mf-f{display:flex;gap:calc(4px*var(--esc));align-items:center;}
.rv-caja{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);}
.rv-caja input{flex:1;min-width:0;height:100%;padding:0 calc(6px*var(--esc));border:0;outline:none;background:none;font-family:var(--font-body);font-size:calc(12.5px*var(--esc));
text-align:right;color:var(--text);font-variant-numeric:tabular-nums;}
.rv-caja>span{padding-right:calc(6px*var(--esc));font-size:calc(12px*var(--esc));color:var(--text-3);}
.rv-caja:focus-within{border-color:var(--gold-deep);box-shadow:0 0 0 2px var(--gold-soft);}
.rv-caja.cambio{border-color:var(--gold);background:var(--gold-soft);}
.rv-caja.mal{border-color:var(--critico);}
.rv-mf .rv-caja{width:calc(70px*var(--esc));height:calc(24px*var(--esc));}
.rv-bt{height:calc(24px*var(--esc));padding:0 calc(9px*var(--esc));border:1px solid var(--line-2);border-radius:2px;background:var(--surface);color:var(--text);font-size:calc(12px*var(--esc));cursor:pointer;}
.rv-bt:hover{border-color:var(--text-3);}
.rv-bt:disabled{cursor:default;border-color:var(--line-2);}
.rv-pend{flex:none;align-self:center;display:none;align-items:center;gap:calc(8px*var(--esc));margin-right:calc(10px*var(--esc));padding:calc(6px*var(--esc)) calc(12px*var(--esc));border-radius:3px;
background:var(--gold-soft);color:var(--gold-ink);font-size:calc(12.5px*var(--esc));font-weight:600;white-space:nowrap;}
.rv-pend.on{display:flex;animation:c13Pop .2s both;}
.rv-pend>i{width:calc(7px*var(--esc));height:calc(7px*var(--esc));border-radius:50%;background:var(--gold);animation:c13Respira 1.4s ease-in-out infinite;}
/* ---------- tarjetas y «Por resolver» ---------- */
.rv-kpis{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,.85fr)) minmax(0,2.5fr);background:var(--surface);border-bottom:1px solid var(--line-2);}
.rv-k{display:flex;flex-direction:column;gap:calc(3px*var(--esc));min-width:0;padding:calc(10px*var(--esc)) calc(18px*var(--esc)) calc(11px*var(--esc));border-right:1px solid var(--line);}
.rv-k-l,.rv-res-t{font-size:calc(10px*var(--esc));font-weight:600;letter-spacing:.14em;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rv-k-v{font-family:var(--font-display);font-size:calc(19px*var(--esc));font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;}
.rv-k-b{position:relative;height:calc(4px*var(--esc));margin-top:2px;border-radius:2px;background:var(--surface-3);}
.rv-k-b>i{display:block;height:100%;border-radius:2px;transition:width .5s cubic-bezier(.22,.75,.28,1);}
.rv-k-b>b{position:absolute;top:calc(-3px*var(--esc));bottom:calc(-3px*var(--esc));width:1.5px;background:var(--text-2);}
.rv-k-s{font-size:calc(11.5px*var(--esc));color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rv-res{display:flex;flex-direction:column;gap:calc(6px*var(--esc));min-width:0;padding:calc(10px*var(--esc)) calc(18px*var(--esc)) calc(11px*var(--esc));}
.rv-chips{display:flex;flex-wrap:wrap;gap:calc(6px*var(--esc));}
.rv-chip{flex:none;height:calc(26px*var(--esc));display:flex;align-items:center;gap:calc(7px*var(--esc));padding:0 calc(10px*var(--esc));border:1px solid var(--line-2);border-radius:calc(13px*var(--esc));
background:var(--surface);color:var(--text);font-size:calc(12px*var(--esc));cursor:pointer;white-space:nowrap;}
.rv-chip:active{transform:scale(.96);}
.rv-chip.on{background:var(--gold-soft);border-color:var(--gold);color:var(--gold-ink);}
.rv-chip.cero{opacity:.5;}
.rv-chip-ic{display:flex;}
.rv-chip-ic svg.i{width:calc(12px*var(--esc));height:calc(12px*var(--esc));}
.rv-chip b{font-weight:600;font-variant-numeric:tabular-nums;}
/* ---------- estrategia de sobreprecio (se despliega sin saltos) ---------- */
.rv-est{flex:none;display:grid;grid-template-rows:0fr;background:var(--surface-2);border-bottom:1px solid transparent;transition:grid-template-rows .36s cubic-bezier(.22,.75,.28,1);}
.rv-est.abierta{grid-template-rows:1fr;border-bottom-color:var(--line-2);}
.rv-est-in{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s .36s;}
.rv-est.abierta .rv-est-in{visibility:visible;transition:visibility 0s;}
.rv-est-c{display:flex;gap:calc(28px*var(--esc));padding:calc(14px*var(--esc)) calc(20px*var(--esc)) calc(16px*var(--esc));}
.rv-est-t{flex:1;min-width:0;display:flex;flex-direction:column;}
.rv-est-h{display:flex;align-items:baseline;gap:calc(12px*var(--esc));margin-bottom:calc(8px*var(--esc));}
.rv-est-h b{font-family:var(--font-display);font-size:calc(15px*var(--esc));font-weight:600;white-space:nowrap;}
.rv-est-h span{font-size:calc(12px*var(--esc));color:var(--text-3);}
.rv-est-g{display:grid;grid-template-columns:calc(170px*var(--esc)) calc(130px*var(--esc)) calc(140px*var(--esc)) minmax(calc(220px*var(--esc)),1fr) calc(64px*var(--esc));align-items:center;}
.rv-est-cab{height:calc(26px*var(--esc));border-bottom:1px solid var(--line-2);font-size:calc(10.5px*var(--esc));font-weight:600;letter-spacing:.1em;color:var(--text-3);}
.rv-est-cab>span:nth-child(2),.rv-est-cab>span:nth-child(3){text-align:right;padding-right:calc(12px*var(--esc));}
.rv-est-cab>span:nth-child(4){padding-left:calc(12px*var(--esc));}
.rv-est-cab>span:nth-child(5){text-align:center;}
.rv-est-f{height:calc(34px*var(--esc));border-bottom:1px solid var(--line);}
.rv-est-n{overflow:hidden;font-size:calc(13px*var(--esc));font-weight:500;white-space:nowrap;text-overflow:ellipsis;}
.rv-est-v{display:flex;justify-content:flex-end;padding-right:calc(12px*var(--esc));}
.rv-est-v .rv-caja{width:calc(74px*var(--esc));height:calc(24px*var(--esc));}
.rv-est-v .rv-caja input{padding:0 calc(5px*var(--esc));}
.rv-est-da{display:flex;align-items:center;gap:calc(10px*var(--esc));padding-left:calc(12px*var(--esc));}
.rv-est-da .rv-bar{flex:1;height:calc(5px*var(--esc));}
.rv-est-da .rv-bar>b{top:calc(-4px*var(--esc));bottom:calc(-4px*var(--esc));background:var(--text-2);}
.rv-est-m{width:calc(52px*var(--esc));text-align:right;font-size:calc(12.5px*var(--esc));font-weight:600;font-variant-numeric:tabular-nums;}
.rv-est-st{width:calc(84px*var(--esc));font-size:calc(11px*var(--esc));}
.rv-est-o{display:flex;justify-content:center;gap:2px;}
.rv-est-o button{width:calc(24px*var(--esc));height:calc(22px*var(--esc));display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--line-2);border-radius:2px;
background:var(--surface);color:var(--text-2);cursor:pointer;}
.rv-est-o button:disabled{opacity:.35;cursor:default;}
.rv-est-o svg.i{width:calc(12px*var(--esc));height:calc(12px*var(--esc));}
.rv-est-x{flex:none;width:calc(250px*var(--esc));display:flex;flex-direction:column;gap:calc(10px*var(--esc));padding-top:calc(30px*var(--esc));}
.rv-est-xl{display:flex;flex-direction:column;gap:calc(5px*var(--esc));}
.rv-est-xl>b{font-size:calc(12px*var(--esc));font-weight:600;color:var(--text-2);}
.rv-est-xl .rv-caja{width:calc(110px*var(--esc));height:calc(28px*var(--esc));border-radius:3px;}
.rv-est-xl .rv-caja input{padding:0 calc(7px*var(--esc));font-size:calc(13px*var(--esc));}
.rv-est-xl .rv-caja>span{padding-right:calc(8px*var(--esc));}
.rv-est-xl>span{font-size:calc(11.5px*var(--esc));line-height:1.45;color:var(--text-3);}
.rv-est-b{display:flex;gap:calc(8px*var(--esc));margin-top:calc(4px*var(--esc));}
.rv-est-vacio{margin:calc(10px*var(--esc)) 0 0;font-size:calc(12.5px*var(--esc));color:var(--text-3);}
/* ---------- «Descartar cambios» ---------- */
.rv-conf{flex:none;display:flex;align-items:center;gap:calc(10px*var(--esc));padding:calc(8px*var(--esc)) calc(20px*var(--esc));background:var(--checar-bg);border-bottom:1px solid var(--line);
font-size:calc(13px*var(--esc));animation:c13Funde .15s both;}
.rv-conf-ic{display:flex;color:var(--checar);}
.rv-conf>span:nth-child(2){flex:1;}
.rv-conf b{font-weight:600;}
.rv-conf button{height:calc(28px*var(--esc));padding:0 calc(12px*var(--esc));border:1px solid var(--line-2);border-radius:3px;background:var(--surface);color:var(--text);font-size:calc(12.5px*var(--esc));cursor:pointer;}
.rv-conf button.si{border-color:var(--critico);background:var(--critico);color:#fff;font-weight:600;}
/* El rojo del tema oscuro es claro: lleva letra oscura, como .btn.danger. */
:root[data-tema="oscuro"] .rv-conf button.si{color:var(--os-sobre-rojo);}
/* ---------- la tabla de las dos caras ---------- */
.rv-grid{flex:1;min-height:0;overflow:auto;background:var(--surface);scrollbar-width:thin;}
.rv-lienzo{position:relative;}
.rv-arriba{position:sticky;top:0;z-index:6;background:var(--surface);}
.rv-bandas,.rv-cabezas,.rv-f{display:grid;grid-template-columns:var(--rvgtc);}
.rv-bandas{height:calc(24px*var(--esc));border-bottom:1px solid var(--line);}
.rv-band{position:relative;z-index:1;display:flex;align-items:center;gap:calc(8px*var(--esc));padding:0 calc(12px*var(--esc));overflow:hidden;background:var(--surface);border-right:1px solid var(--line-2);
font-size:calc(10px*var(--esc));font-weight:600;letter-spacing:.14em;color:var(--text-3);white-space:nowrap;}
.rv-band>i{flex:none;width:calc(8px*var(--esc));height:2px;background:currentColor;}
.rv-band>span{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.rv-band.fx{position:sticky;left:0;z-index:3;}
.rv-band.prov{color:var(--gold-ink);}
.rv-band.cli{color:var(--info);}
.rv-cabezas{background:var(--surface-2);border-bottom:2px solid var(--line-2);}
.rv-h{position:relative;z-index:1;height:calc(32px*var(--esc));display:flex;align-items:center;padding:0 calc(10px*var(--esc));overflow:hidden;background:var(--surface-2);border-right:1px solid var(--line);
font-size:calc(11px*var(--esc));font-weight:600;letter-spacing:.06em;color:var(--text-2);white-space:nowrap;}
.rv-h.r{justify-content:flex-end;}
.rv-h.c{justify-content:center;}
.rv-h.fx,.rv-f>.fx{position:sticky;z-index:3;}
.rv-f>.fx{z-index:2;}
.rv-s-r{position:sticky;right:0;display:flex;align-items:center;gap:calc(16px*var(--esc));height:100%;padding:0 calc(16px*var(--esc));background:var(--surface-2);white-space:nowrap;font-variant-numeric:tabular-nums;}
.rv-s-r>span{font-size:calc(12px*var(--esc));color:var(--text-3);}
.rv-s-r>span>b{font-weight:400;font-size:calc(13px*var(--esc));color:var(--text);}
.rv-s-r>span.v>b{font-weight:600;font-size:calc(13.5px*var(--esc));}
.rv-s-r .rv-bar{width:calc(90px*var(--esc));height:calc(5px*var(--esc));background:var(--line);}
.rv-s-r .rv-bar>b{top:calc(-4px*var(--esc));bottom:calc(-4px*var(--esc));background:var(--text-2);}
.rv-s-m{width:calc(46px*var(--esc));text-align:right;font-size:calc(13px*var(--esc));font-weight:600;}
.rv-s-st{width:calc(84px*var(--esc));font-size:calc(11px*var(--esc));font-weight:600;letter-spacing:.04em;}
.rv-f{height:calc(34px*var(--esc));border-bottom:1px solid var(--line);font-size:calc(13px*var(--esc));font-variant-numeric:tabular-nums;}
.rv-f>div{min-width:0;display:flex;align-items:center;padding:0 calc(12px*var(--esc));background:var(--surface);white-space:nowrap;}
.rv-f.alt>div{background:var(--surface-2);}
.rv-f.sel>div{background:color-mix(in oklab, var(--gold-soft) 75%, var(--surface));}
.rv-f>.n{justify-content:flex-end;}
.rv-f>.rv-num{justify-content:center;padding:0;}
.rv-f.cambio>.rv-num{box-shadow:inset 3px 0 0 var(--gold);}
.rv-i{font-size:calc(11px*var(--esc));color:var(--text-3);}
.rv-f .c13-chk{cursor:pointer;}
.rv-cod{overflow:hidden;border-right:1px solid var(--line);font-weight:600;color:var(--text-2);}
.rv-cod>span,.rv-cpt>span{overflow:hidden;text-overflow:ellipsis;}
.rv-flags{gap:calc(4px*var(--esc));padding:0 calc(10px*var(--esc)) !important;overflow:hidden;border-right:1px solid var(--line);}
.rv-flags>span{display:flex;}
.rv-cpt{overflow:hidden;border-right:1px solid var(--line);}
.rv-und{color:var(--text-2);}
.rv-f>.cli{border-right:1px solid var(--line-2);}
.rv-f>.cli.difiere{color:var(--checar);}
.rv-f>.costo{border-right:1px solid var(--line-2);color:var(--text-2);}
.rv-f>.tenue,.rv-f .tenue{color:var(--text-3);}
.rv-sug{gap:calc(6px*var(--esc));font-style:italic;color:var(--text-2);}
.rv-tag{font-size:calc(9.5px*var(--esc));font-weight:600;font-style:normal;letter-spacing:.06em;color:var(--text-3);}
.rv-tag.tope{color:var(--ajustado);}
.rv-pu,.rv-m{position:relative;transition:background .2s;}
.rv-pu{justify-content:flex-end;gap:calc(6px*var(--esc));}
.rv-m{gap:calc(8px*var(--esc));}
.rv-f.cambio>.rv-pu,.rv-f.cambio>.rv-m{background:var(--gold-soft);}
.rv-f.destello>.rv-pu{animation:c13Destello 1.1s ease-out;}
.rv-in{position:absolute;top:calc(4px*var(--esc));bottom:calc(4px*var(--esc));left:calc(6px*var(--esc));right:calc(6px*var(--esc));width:calc(100% - 12px*var(--esc));padding:0 calc(6px*var(--esc));
border:1px solid var(--line-2);border-radius:2px;outline:none;background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:calc(13px*var(--esc));text-align:right;
font-variant-numeric:tabular-nums;}
.rv-in:focus{border-color:var(--gold-deep);box-shadow:0 0 0 2px var(--gold-soft);}
.rv-in.cambio{border-color:var(--gold);}
.rv-in.mal{border-color:var(--critico);}
.rv-in.m{padding-right:calc(20px*var(--esc));}
.rv-pct{position:absolute;right:calc(13px*var(--esc));font-size:calc(11.5px*var(--esc));color:var(--text-3);pointer-events:none;}
.rv-bar{position:relative;flex:1;height:calc(4px*var(--esc));border-radius:2px;background:var(--surface-3);}
.rv-bar>i{display:block;height:100%;border-radius:2px;}
.rv-bar>b{position:absolute;top:calc(-3px*var(--esc));bottom:calc(-3px*var(--esc));width:1.5px;background:var(--text-3);}
.rv-mv{width:calc(44px*var(--esc));text-align:right;}
.rv-venta{justify-content:flex-end;font-weight:600;}
.rv-f.fija>div{color:var(--text-2);}
.rv-s .c13-s-t{cursor:pointer;}
.c13-st.oro{color:var(--gold-ink);}
.c13-st.tenue{color:var(--text-3);}
.rv-pie .rv-pie-m b{color:var(--gold-ink);}
@media (max-width:1100px){
.rv-cinta{overflow-x:auto;scrollbar-width:thin;}
.rv-kpis{grid-template-columns:repeat(4,minmax(0,1fr));}
.rv-res{grid-column:1 / -1;border-top:1px solid var(--line);}
}
/* En el celular (el paquete no dibuja la Revisión ahí): la tabla primero y de consulta, sin la cinta ni la estrategia. */
@media (max-width:720px){
.rv-cinta,.rv-est,.rv-conf{display:none;}
.rv-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
.rv-k:nth-child(2n){border-right:0;}
.rv-k{border-bottom:1px solid var(--line);}
.rv-chip{height:44px;}
.rv-caras{height:auto;min-height:32px;flex-wrap:wrap;row-gap:4px;padding:6px 12px;}
.rv-band.fx,.rv-h.fx,.rv-f>.fx:not(.rv-num){position:static;z-index:auto;}
.rv-f,.rv-s{height:44px;}
.rv-s .c13-s-t{width:44px;height:44px;}
.rv-s-r{position:static;}
.rv-s-r .rv-bar,.rv-s-st{display:none;}
.rv-in{font-size:16px;}
}
/* ============================================================
DASHBOARD DE LA OBRA (21a: tablero modular)
Diseño: diseno/mejora-uxui/pantallas/Dashboard Modular.dc.html y §12 del
documento rector. Encabezado propio, barra de Personalizar, cuadrícula de 12
columnas con las piezas de la biblioteca, y los paneles de la biblioteca y
del detalle por semana. Paleta sobria: dorado y grises (--dm-*); atraso y
alertas se leen con flecha y negritas. En el celular, una sola columna.
============================================================ */
.dm,.dm-junta{
--dm-mal:var(--text); --dm-mal-bg:var(--surface-3); --dm-ojo:var(--gold-ink); --dm-ojo-bg:var(--gold-soft);
--dm-info:var(--text-2); --dm-info-bg:var(--surface-3); --dm-bien:var(--text-2); --dm-bien-bg:var(--surface-3);
}
@keyframes dmPop{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}}
@keyframes dmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes dmSlide{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes dmGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dmFlash{0%{box-shadow:0 0 0 3px var(--gold-light)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){ .dm *,.dm{animation:none !important;transition:none !important;} }
.dm{display:flex;flex-direction:column;background:var(--bg);color:var(--text);font-family:var(--font-body);}
@media (min-width:901px){
body:has(#dm-raiz) .content{padding:0;max-width:none;}
body.con-sesion:has(#dm-raiz) .railp,body.con-sesion:has(#dm-raiz) .topbar{display:none !important;}
.dm{height:calc(100vh - 56px*var(--esc) - var(--franja-red,0px));min-height:calc(480px*var(--esc));}
}
body:has(#dm-raiz) #vistas-bar{display:none;}
.dm button{font-family:var(--font-body);}
.dm .t3{color:var(--text-3);}
.dm .t2{color:var(--text-2);}
.dm .b{font-weight:650;}
.dm .d{text-align:right;}
.dm .dm-el{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
/* ---------- encabezado ---------- */
.dm-cab{flex:none;height:calc(56px*var(--esc));display:flex;align-items:center;gap:calc(12px*var(--esc));padding:0 calc(20px*var(--esc));border-bottom:1px solid var(--line);}
.dm-cab-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.dm-cab-oj{font-size:calc(10.5px*var(--esc));font-weight:600;letter-spacing:.14em;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;}
.dm-cab-t{display:flex;align-items:baseline;gap:calc(14px*var(--esc));min-width:0;}
.dm-cab-t h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:calc(21px*var(--esc));letter-spacing:-.015em;white-space:nowrap;}
.dm-cab-t span{min-width:0;font-size:calc(13px*var(--esc));color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-btn{flex:none;height:calc(32px*var(--esc));display:flex;align-items:center;gap:calc(8px*var(--esc));padding:0 calc(10px*var(--esc));border:1px solid var(--line-2);border-radius:3px;background:var(--surface);color:var(--text);font-size:calc(12.5px*var(--esc));cursor:pointer;white-space:nowrap;}
.dm-btn:hover{border-color:var(--text-3);}
.dm-btn.on{border-color:var(--gold-deep);background:var(--gold-soft);}
.dm-btn b{font-weight:600;}
.dm-btn-ed{padding:0 calc(12px*var(--esc));font-weight:600;}
.dm-btn-ed:active{transform:scale(.965);}
.dm-btn-ed.on{border-color:var(--gold);background:var(--gold);color:var(--gold-on);}
.dm-btn:focus-visible,.dm-seg button:focus-visible,.dm-kpi:focus-visible,.dm button:focus-visible{outline:2px solid var(--gold-deep);outline-offset:1px;}
.dm-acom{position:relative;flex:none;}
.dm-pop{position:absolute;right:0;top:calc(38px*var(--esc));z-index:40;width:calc(300px*var(--esc));background:var(--surface);border:1px solid var(--line-2);border-radius:4px;box-shadow:0 12px 32px rgba(20,19,16,.18);padding:6px;animation:dmPop .14s both;}
.dm-pop-g{padding:6px 8px 4px;font-size:calc(10px*var(--esc));font-weight:600;letter-spacing:.12em;color:var(--text-3);}
.dm-pop-g2{padding-top:8px;border-top:1px solid var(--line);margin-top:4px;}
.dm-pop-it{width:100%;display:flex;align-items:center;gap:10px;padding:7px 8px;border:0;border-radius:3px;background:transparent;color:var(--text);text-align:left;cursor:pointer;}
.dm-pop-it:hover{background:var(--surface-2);}
.dm-pop-it.on,.dm-pop-mio.on{background:var(--gold-soft);}
.dm-pop-it>span{flex:1;display:flex;flex-direction:column;gap:1px;}
.dm-pop-it b{font-size:calc(13px*var(--esc));font-weight:600;}
.dm-pop-it>span>span{font-size:calc(11.5px*var(--esc));color:var(--text-3);}
.dm-pop i{font-style:normal;color:var(--gold-ink);}
.dm-pop-mio{display:flex;align-items:center;gap:6px;padding:0 0 0 8px;border-radius:3px;}
.dm-pop-mio>button:first-child{flex:1;height:calc(34px*var(--esc));border:0;background:none;color:var(--text);font-size:calc(13px*var(--esc));font-weight:600;text-align:left;cursor:pointer;}
.dm-pop-x{width:28px;height:28px;border:0;background:none;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.dm-pop-x:hover{color:var(--critico);}
.dm-seg{flex:none;display:flex;border:1px solid var(--line-2);border-radius:3px;overflow:hidden;}
.dm-seg button{height:calc(30px*var(--esc));padding:0 calc(11px*var(--esc));border:0;border-right:1px solid var(--line);background:var(--surface);color:var(--text-2);font-size:calc(12.5px*var(--esc));cursor:pointer;}
.dm-seg button.on{background:var(--gold-soft);color:var(--gold-ink);font-weight:600;}
/* ---------- barra de Personalizar ---------- */
.dm-barra{flex:none;display:flex;align-items:center;gap:10px;height:calc(40px*var(--esc));padding:0 calc(20px*var(--esc));background:var(--ink);color:#F0EEE7;font-size:calc(13px*var(--esc));animation:dmIn .18s both;}
.dm-barra-ic{display:flex;color:var(--gold-light);}
.dm-barra-tx{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-barra-lib{height:calc(28px*var(--esc));display:flex;align-items:center;gap:6px;padding:0 11px;border:1px solid var(--gold);border-radius:3px;background:transparent;color:var(--gold-light);font-size:calc(12.5px*var(--esc));font-weight:600;cursor:pointer;}
.dm-barra-lib.on{background:rgba(205,175,94,.18);}
.dm-barra-b{height:calc(28px*var(--esc));padding:0 11px;border:1px solid #5C5A54;border-radius:3px;background:none;color:#F0EEE7;font-size:calc(12.5px*var(--esc));cursor:pointer;white-space:nowrap;}
.dm-barra-in{width:calc(170px*var(--esc));height:calc(28px*var(--esc));padding:0 8px;border:1px solid var(--gold);border-radius:3px;background:#2E2D29;color:#F0EEE7;font-family:var(--font-body);font-size:calc(12.5px*var(--esc));outline:none;}
.dm-barra-ok{height:calc(28px*var(--esc));padding:0 14px;border:0;border-radius:3px;background:var(--gold);color:var(--gold-on);font-size:calc(12.5px*var(--esc));font-weight:650;cursor:pointer;white-space:nowrap;}
/* ---------- cuerpo y cuadrícula ---------- */
.dm-cuerpo{flex:1;min-height:0;display:flex;position:relative;}
.dm-scroll{flex:1;min-width:0;overflow:auto;scrollbar-width:thin;}
.dm-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:row dense;gap:calc(12px*var(--esc));padding:calc(16px*var(--esc)) calc(20px*var(--esc)) calc(28px*var(--esc));align-items:stretch;}
.dm-t{position:relative;container-type:inline-size;grid-column:span 12;min-width:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:4px;transition:box-shadow .15s,border-color .15s;}
.dm-t.dm-kt{align-self:start;}
.dm-s2{grid-column:span 2;} .dm-s3{grid-column:span 3;} .dm-s4{grid-column:span 4;} .dm-s5{grid-column:span 5;}
.dm-s6{grid-column:span 6;} .dm-s7{grid-column:span 7;} .dm-s8{grid-column:span 8;} .dm-s12{grid-column:span 12;}
.dm-t.ed{border-color:var(--gold);box-shadow:0 2px 8px rgba(20,19,16,.06);cursor:grab;}
.dm-t.arr{opacity:.45;}
.dm-t.flash{animation:dmFlash 1.1s ease-out;}
.dm-drop{display:none;position:absolute;left:-8px;top:6px;bottom:6px;width:3px;border-radius:2px;background:var(--gold-deep);}
.dm-t.sobre .dm-drop{display:block;}
/* Las piezas del dashboard anterior traen su propia tarjeta: sin marco ni márgenes de más. */
.dm-t.dm-bare{background:none;border-color:transparent;}
.dm-t.dm-bare.ed{border-color:var(--gold);}
.dm-t.dm-bare>:not(.dm-eb):not(.dm-drop){margin:0 !important;flex:1;}
.dm-t.dm-bare .pulso-a{height:100%;}
/* ---------- barra de edición de cada visual ---------- */
.dm-eb{display:flex;align-items:center;gap:4px;padding:5px 6px;border-bottom:1px dashed var(--gold);background:color-mix(in oklab,var(--gold-soft) 55%,var(--surface));border-radius:4px 4px 0 0;cursor:grab;}
.dm-t.dm-bare .dm-eb{margin-bottom:6px !important;flex:none;border:1px dashed var(--gold);border-radius:4px;}
.dm-eb-g{display:flex;color:var(--gold-ink);padding:0 2px;}
.dm-eb-n{flex:1;min-width:0;font-size:calc(11px*var(--esc));font-weight:600;color:var(--gold-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-eb-seg{display:flex;border:1px solid var(--line-2);border-radius:2px;overflow:hidden;background:var(--surface);flex:none;}
.dm-eb-seg button{height:20px;min-width:24px;padding:0 5px;border:0;border-right:1px solid var(--line);background:var(--surface);color:var(--text-2);font-size:calc(10.5px*var(--esc));font-weight:650;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.dm-eb-seg button.on{background:var(--gold-soft);color:var(--gold-ink);}
.dm-eb-seg svg.i{width:12px;height:12px;}
.dm-eb-cy{height:22px;min-width:30px;padding:0 6px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);color:var(--gold-ink);font-size:calc(10.5px*var(--esc));font-weight:650;cursor:pointer;flex:none;}
.dm-eb-b{width:22px;height:22px;flex:none;border:0;background:none;color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.dm-eb-b svg.i{width:12px;height:12px;}
.dm-eb-x{color:var(--text-3);}
.dm-eb-x:hover{color:var(--critico);}
/* ---------- cifra ---------- */
.dm-kpi{flex:1;display:flex;flex-direction:column;gap:4px;padding:12px 14px 10px;border:0;border-radius:4px;background:none;color:var(--text);text-align:left;cursor:pointer;min-width:0;}
.dm-kpi:hover{background:var(--surface-2);}
.dm-kpi-t{font-size:calc(10px*var(--esc));font-weight:600;letter-spacing:.12em;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-kpi-vr{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.dm-kpi-v{font-family:var(--font-display);font-size:calc(26px*var(--esc));font-weight:600;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;}
.dm-kpi-d{font-size:calc(12px*var(--esc));font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums;}
.dm-kpi-sub{font-size:calc(11px*var(--esc));color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.2em;}
.dm-kpi-spark{display:block;height:28px;margin-top:2px;}
/* ---------- encabezado de gráfica o tabla ---------- */
.dm-h{position:relative;display:flex;align-items:flex-start;gap:10px;padding:12px 14px 6px;}
.dm-h-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.dm-h-tx b{font-family:var(--font-display);font-size:calc(14.5px*var(--esc));font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-h-tx span{font-size:calc(11.5px*var(--esc));color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-ley{display:flex;align-items:center;gap:10px;font-size:calc(11px*var(--esc));color:var(--text-2);white-space:nowrap;}
.dm-ley span{display:flex;align-items:center;gap:5px;}
.dm-ley i{width:12px;display:inline-block;}
.dm-mas{width:24px;height:24px;border:0;background:none;color:var(--text-3);cursor:pointer;font-size:15px;flex:none;}
.dm-mas:hover{color:var(--text);}
.dm-menu{position:absolute;right:10px;top:40px;z-index:30;min-width:190px;display:flex;flex-direction:column;padding:5px;background:var(--surface);border:1px solid var(--line-2);border-radius:4px;box-shadow:0 12px 32px rgba(20,19,16,.18);animation:dmPop .14s both;}
.dm-menu button{height:32px;padding:0 10px;border:0;border-radius:3px;background:none;color:var(--text);font-size:calc(12.5px*var(--esc));text-align:left;cursor:pointer;white-space:nowrap;}
.dm-menu button:hover{background:var(--surface-2);}
.dm-svg{padding:0 14px 4px;}
.dm-pie{padding:0 14px 10px;font-size:calc(11px*var(--esc));color:var(--text-3);}
.dm-vacio-t{padding:14px;font-size:calc(12.5px*var(--esc));color:var(--text-3);}
/* ---------- dona, medidor y mapa ---------- */
.dm-dona{flex:1;display:flex;align-items:center;gap:18px;padding:6px 14px 14px;}
@container (max-width:340px){ .dm-dona{gap:10px;padding:6px 10px 12px;} .dm-dona-c{width:100px;height:100px;} .dm-dona-c>div{inset:16px;} .dm-dona-c b{font-size:14px;} }
@container (max-width:240px){ .dm-dona{flex-direction:column;align-items:stretch;} .dm-dona-c{align-self:center;} }
.dm-dona-c{position:relative;width:140px;height:140px;flex:none;border-radius:50%;}
.dm-dona-c>div{position:absolute;inset:23px;border-radius:50%;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;}
.dm-dona-c b{font-family:var(--font-display);font-size:calc(18px*var(--esc));font-weight:600;font-variant-numeric:tabular-nums;}
.dm-dona-c span{font-size:calc(10.5px*var(--esc));color:var(--text-3);}
.dm-dona-l{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;}
.dm-dona-r{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:8px;align-items:center;font-variant-numeric:tabular-nums;}
.dm-dona-r>span:first-child{width:10px;height:10px;}
.dm-dona-r>span:nth-child(2){display:flex;flex-direction:column;min-width:0;}
.dm-dona-r i{font-style:normal;font-size:calc(11.5px*var(--esc));color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-dona-r b{font-size:calc(13px*var(--esc));font-weight:650;white-space:nowrap;}
.dm-dona-r em{font-style:normal;font-size:calc(12px*var(--esc));color:var(--text-2);}
.dm-med{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 14px 14px;}
.dm-med-a{position:relative;width:180px;height:98px;overflow:hidden;}
.dm-med-g{position:absolute;left:0;top:0;width:180px;height:180px;border-radius:50%;}
.dm-med-h{position:absolute;left:24px;top:24px;width:132px;height:132px;border-radius:50%;background:var(--surface);}
.dm-med-o{position:absolute;left:89px;top:3px;width:2px;height:27px;background:var(--text);transform-origin:1px 87px;}
.dm-med-v{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-family:var(--font-display);font-size:calc(24px*var(--esc));font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;}
.dm-med-e{display:flex;justify-content:space-between;width:180px;font-size:calc(10.5px*var(--esc));color:var(--text-3);}
.dm-med-d{font-size:calc(12px*var(--esc));font-weight:600;text-align:center;color:var(--text);}
.dm-mapa{flex:1;display:flex;gap:3px;min-height:160px;padding:4px 14px 14px;}
.dm-tm{min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding:10px;border:0;border-radius:2px;text-align:left;cursor:pointer;}
.dm-tm-n{font-size:calc(12.5px*var(--esc));font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-tm-v{display:flex;flex-direction:column;}
.dm-tm-v b{font-family:var(--font-display);font-size:calc(22px*var(--esc));font-weight:600;}
.dm-tm-v i{font-style:normal;font-size:calc(11px*var(--esc));}
.dm-tm.t1{padding:8px 10px;}
.dm-tm.t1 b{font-family:var(--font-display);font-size:calc(17px*var(--esc));font-weight:600;}
.dm-tm.t2{padding:7px;}
.dm-tm.t2 .dm-tm-n{font-size:calc(11.5px*var(--esc));}
.dm-tm.t2 b{font-family:var(--font-display);font-size:calc(15px*var(--esc));font-weight:600;}
.dm-tm.t3{min-width:44px;flex-direction:row;align-items:flex-end;padding:6px;font-size:calc(12px*var(--esc));font-weight:650;}
.dm-tm-col{min-width:0;display:flex;flex-direction:column;gap:3px;}
.dm-tm-fila{display:flex;gap:3px;}
/* ---------- barras por rubro y área ---------- */
.dm-bars{display:flex;flex-direction:column;padding:2px 0 10px;}
.dm-bar{display:grid;grid-template-columns:120px minmax(0,1fr) 104px;gap:10px;align-items:center;height:32px;padding:0 14px;border:0;background:none;color:var(--text);text-align:left;cursor:pointer;font-variant-numeric:tabular-nums;}
.dm-bar:hover{background:var(--surface-2);}
.dm-bar-n{display:flex;align-items:center;gap:7px;font-size:calc(12.5px*var(--esc));font-weight:600;white-space:nowrap;overflow:hidden;}
.dm-bar-n span{width:9px;height:9px;flex:none;}
.dm-bar-t{height:22px;display:flex;flex-direction:column;justify-content:center;gap:3px;background-image:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 25%);}
.dm-bar-e{height:6px;background:var(--line-2);}
.dm-bar-r{height:9px;transform-origin:left;animation:dmGrow .6s cubic-bezier(.22,.75,.28,1) both;}
.dm-bar-v{text-align:right;font-size:calc(12.5px*var(--esc));white-space:nowrap;}
.dm-bar-v b{font-weight:650;}
.dm-bar-v span{font-size:calc(11.5px*var(--esc));font-weight:600;}
.dm-bars-sep{margin:4px 14px 2px;padding-top:6px;border-top:1px solid var(--line);font-size:calc(10px*var(--esc));font-weight:600;letter-spacing:.12em;color:var(--text-3);}
/* ---------- tablas ---------- */
.dm-tb-h{display:grid;height:24px;align-items:center;padding:0 14px;background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line-2);font-size:calc(10px*var(--esc));font-weight:600;letter-spacing:.08em;color:var(--text-2);text-transform:uppercase;}
.dm-tb-r{display:grid;align-items:center;min-height:32px;padding:0 14px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--text);font-size:calc(12.5px*var(--esc));text-align:left;cursor:pointer;width:100%;font-variant-numeric:tabular-nums;}
.dm-tb-r:hover{background:var(--surface-2);}
.dm-atr{grid-template-columns:62px minmax(0,1fr) 50px 50px 70px;gap:0 6px;}
.dm-atr-id{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-atr-d{justify-self:end;padding:2px 6px;border-radius:2px;font-weight:650;white-space:nowrap;}
.dm-jor{grid-template-columns:54px 92px minmax(0,1fr);gap:8px;height:30px;min-height:30px;border-bottom:0;border-top:1px solid var(--line);font-size:calc(12px*var(--esc));}
.dm-jor-est{justify-self:start;font-size:calc(9.5px*var(--esc));font-weight:650;letter-spacing:.1em;padding:2px 6px;border-radius:2px;white-space:nowrap;}
.dm-pend{display:grid;grid-template-columns:3px 70px minmax(0,1fr) 48px;gap:9px;align-items:center;min-height:38px;padding:3px 14px 3px 0;border:0;border-top:1px solid var(--line);background:none;color:var(--text);font-size:calc(12.5px*var(--esc));text-align:left;cursor:pointer;width:100%;}
.dm-pend:hover{background:var(--surface-2);}
.dm-pend-l{align-self:stretch;}
.dm-pend-tag{justify-self:start;font-size:calc(9.5px*var(--esc));font-weight:650;letter-spacing:.1em;padding:2px 6px;border-radius:2px;white-space:nowrap;}
.dm-pend-tx{display:flex;flex-direction:column;gap:1px;min-width:0;}
.dm-pend-tx b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-pend-tx span{font-size:calc(11px*var(--esc));color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-pend-f{text-align:right;font-size:calc(11.5px*var(--esc));white-space:nowrap;}
.dm-din{display:flex;flex-direction:column;padding-bottom:6px;}
.dm-din-b{display:flex;height:22px;overflow:hidden;border-radius:2px;margin:2px 14px 8px;}
.dm-din-r{display:grid;grid-template-columns:minmax(0,1fr) 106px 84px;align-items:center;height:28px;padding:0 14px;border:0;border-top:1px solid var(--line);background:none;color:var(--text);font-size:calc(12.5px*var(--esc));text-align:left;cursor:pointer;font-variant-numeric:tabular-nums;}
.dm-din-r:hover{background:var(--surface-2);}
.dm-din-r>span:first-child{display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-din-r>span:first-child i{width:8px;height:8px;flex:none;}
.dm-din-r>span:nth-child(2){text-align:right;}
.dm-din-p{display:flex;align-items:center;gap:6px;padding-left:10px;}
.dm-din-p>span{flex:1;height:7px;background:var(--surface-3);}
.dm-din-p>span i{display:block;height:100%;}
.dm-din-p em{width:28px;text-align:right;font-style:normal;font-size:calc(11px*var(--esc));color:var(--text-3);}
.dm-fotos{display:grid;gap:8px;padding:2px 14px 14px;}
.dm-foto{position:relative;aspect-ratio:16/10;border-radius:3px;overflow:hidden;background:repeating-linear-gradient(135deg,var(--surface-3) 0 7px,var(--surface-2) 7px 14px);}
.dm-foto img{width:100%;height:100%;object-fit:cover;display:block;}
.dm-foto span{position:absolute;left:0;right:0;bottom:0;padding:4px 7px;background:rgba(35,35,32,.72);color:#F0EEE7;font-size:calc(10.5px*var(--esc));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-subs{grid-template-columns:minmax(0,1fr) 92px 150px 96px 70px 96px 70px;height:34px;}
.dm-tb-h.dm-subs{height:24px;}
.dm-subs.sd{grid-template-columns:minmax(0,1fr) 92px 150px 96px 70px;}
.dm-tb-r.dm-subs.mio{background:color-mix(in oklab,var(--gold-soft) 50%,transparent);}
.dm-subs-av{display:flex;align-items:center;gap:8px;padding-right:10px;}
.dm-subs-av>span{flex:1;height:6px;background:var(--line);}
.dm-subs-av i{display:block;height:100%;background:var(--gold);}
.dm-subs-av b{width:36px;text-align:right;font-weight:650;}
.dm-ciclo{grid-template-columns:minmax(0,1fr) 120px 90px 60px 70px;gap:0 6px;}
.dm-proy{grid-template-columns:minmax(0,1fr) 96px 110px;gap:0 6px;cursor:default;}
.dm-cal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:4px 14px 14px;}
.dm-cal-c{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:3px;}
.dm-cal-c span{font-size:calc(10px*var(--esc));font-weight:600;letter-spacing:.08em;color:var(--text-3);text-transform:uppercase;}
.dm-cal-c b{font-family:var(--font-display);font-size:calc(22px*var(--esc));font-weight:600;font-variant-numeric:tabular-nums;}
.dm-cal-c.sano{border-top-color:var(--bueno);} .dm-cal-c.riesgo{border-top-color:var(--checar);} .dm-cal-c.critico{border-top-color:var(--critico);}
/* ---------- filtros ---------- */
.dm-filtros{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:10px 14px;}
.dm-f-ic{display:flex;color:var(--text-3);}
.dm-f-lb{font-size:calc(10px*var(--esc));font-weight:600;letter-spacing:.12em;color:var(--text-3);}
.dm-f-lb2{margin-left:6px;}
.dm-fseg{display:flex;flex-wrap:wrap;border:1px solid var(--line-2);border-radius:2px;overflow:hidden;}
.dm-fseg button{height:24px;display:flex;align-items:center;gap:6px;padding:0 10px;border:0;border-right:1px solid var(--line);background:var(--surface);color:var(--text-2);font-size:calc(12px*var(--esc));cursor:pointer;white-space:nowrap;}
.dm-fseg button.on{background:var(--gold-soft);color:var(--gold-ink);font-weight:600;}
.dm-fseg button i{width:8px;height:8px;}
.dm-f-esp{flex:1;}
.dm-f-tx{font-size:calc(11.5px*var(--esc));color:var(--text-3);}
.dm-f-q{border:0;background:none;color:var(--gold-ink);font-size:calc(12px*var(--esc));font-weight:600;cursor:pointer;}
/* ---------- tablero vacío ---------- */
.dm-vacio{grid-column:span 12;display:flex;flex-direction:column;align-items:center;gap:10px;padding:60px 20px;border:1.5px dashed var(--line-2);border-radius:4px;text-align:center;}
.dm-vacio b{font-family:var(--font-display);font-size:calc(16px*var(--esc));font-weight:600;}
.dm-vacio span{font-size:calc(13px*var(--esc));color:var(--text-3);}
.dm-vacio .dm-barra-ok{height:32px;font-size:calc(13px*var(--esc));font-weight:600;}
/* ---------- paneles: biblioteca y detalle por semana ---------- */
.dm-panel{flex:none;display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--line-2);box-shadow:-8px 0 24px rgba(20,19,16,.08);animation:dmSlide .22s cubic-bezier(.22,.75,.28,1) both;}
.dm-lib{width:calc(320px*var(--esc));}
.dm-det{width:calc(340px*var(--esc));}
.dm-x{width:28px;height:28px;border:0;background:none;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.dm-lib-h{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;}
.dm-lib-h>div{flex:1;display:flex;flex-direction:column;gap:2px;}
.dm-lib-h b{font-family:var(--font-display);font-size:calc(15px*var(--esc));font-weight:600;}
.dm-lib-h span{font-size:calc(11.5px*var(--esc));color:var(--text-3);}
.dm-lib-q{display:flex;align-items:center;gap:8px;height:30px;margin:0 16px 10px;padding:0 9px;border:1px solid var(--line-2);border-radius:3px;background:var(--bg);color:var(--text-3);}
.dm-lib-q input{flex:1;min-width:0;border:0;outline:none;background:none;font-family:var(--font-body);font-size:16px;color:var(--text);}
@media (min-width:901px){ .dm-lib-q input{font-size:calc(13px*var(--esc));} }
.dm-lib-l{flex:1;overflow:auto;padding:0 10px 16px;scrollbar-width:thin;}
.dm-lib-g{padding:10px 6px 4px;font-size:calc(10px*var(--esc));font-weight:600;letter-spacing:.12em;color:var(--text-3);}
.dm-lib-it{width:100%;display:flex;align-items:center;gap:10px;padding:8px;border:1px solid transparent;border-radius:3px;background:none;color:var(--text);text-align:left;cursor:pointer;}
.dm-lib-it:hover{background:var(--surface-2);border-color:var(--line);}
.dm-lib-it.on{opacity:.6;cursor:default;}
.dm-lib-ic{width:34px;height:34px;flex:none;border-radius:3px;background:var(--surface-3);color:var(--gold-ink);display:flex;align-items:center;justify-content:center;}
.dm-lib-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.dm-lib-tx b{font-size:calc(13px*var(--esc));font-weight:600;}
.dm-lib-tx span{font-size:calc(11.5px*var(--esc));color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-lib-s{font-size:calc(11px*var(--esc));font-weight:600;color:var(--gold-ink);white-space:nowrap;}
.dm-lib-it.on .dm-lib-s{color:var(--text-3);}
.dm-det-h{display:flex;align-items:flex-start;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--line);}
.dm-det-h>div:first-child{flex:1;display:flex;flex-direction:column;gap:2px;}
.dm-det-h>div:first-child span{font-size:calc(10.5px*var(--esc));font-weight:600;letter-spacing:.14em;color:var(--text-3);}
.dm-det-h>div:first-child b{font-family:var(--font-display);font-size:calc(16px*var(--esc));font-weight:600;}
.dm-det-n{display:flex;gap:2px;}
.dm-det-n>button:not(.dm-x){width:28px;height:28px;border:1px solid var(--line-2);border-radius:3px;background:var(--surface);color:var(--text-2);cursor:pointer;}
.dm-det-k{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);}
.dm-det-k>div{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-right:1px solid var(--line);}
.dm-det-k span{font-size:calc(10px*var(--esc));font-weight:600;letter-spacing:.12em;color:var(--text-3);}
.dm-det-k b{font-family:var(--font-display);font-size:calc(16px*var(--esc));font-weight:600;font-variant-numeric:tabular-nums;}
.dm-det-t{grid-template-columns:62px minmax(0,1fr) 62px 62px;padding:0 16px;}
.dm-tb-r.dm-det-t{height:36px;}
.dm-det-l{flex:1;overflow:auto;scrollbar-width:thin;}
.dm-det-a{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;}
.dm-det-a .dm-btn{flex:1;min-width:0;justify-content:center;font-weight:600;white-space:normal;height:auto;min-height:calc(32px*var(--esc));padding:6px 10px;text-align:center;}
/* ---------- para junta (PDF carta horizontal, fuera de pantalla) ---------- */
.dm-junta{position:fixed;left:-20000px;top:0;width:1000px;padding:16px 18px;background:#fff;color:#26241F;font-family:var(--font-body);
--bg:#F7F4EC; --surface:#FFFFFF; --surface-2:#FBFBF9; --surface-3:#EFEFEA; --line:#E5E6E2; --line-2:#D4D5D0;
--text:#26241F; --text-2:#575852; --text-3:#6B6C64; --gold:#CDAF5E; --gold-deep:#A88F45; --gold-light:#E1CF9E; --gold-soft:#F4EEDC; --gold-ink:#7A6428;
--dm-r0:#CDAF5E; --dm-r1:#8E9B9E; --dm-r2:#6E7A7D; --dm-r3:#515151; --dm-f0:#231E0C; --dm-f1:#FFFFFF; --dm-f2:#FFFFFF; --dm-f3:#FFFFFF;}
.dm-junta-c{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:10px;margin-bottom:12px;border-bottom:2px solid #CDAF5E;}
.dm-junta-c span{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;color:#6B6C64;text-transform:uppercase;}
.dm-junta-c b{font-family:var(--font-display);font-size:20px;font-weight:600;}
.dm-junta-d{text-align:right;font-size:11.5px;color:#575852;line-height:1.5;}
.dm-junta .dm-grid{padding:0;}
.dm-junta .dm-t{break-inside:avoid;}
/* ---------- tableta y celular: una columna, sin desplazamiento horizontal ---------- */
@media (max-width:1100px){
.dm-cab{height:auto;flex-wrap:wrap;row-gap:8px;padding:10px calc(20px*var(--esc));}
.dm-cab-tx{flex-basis:100%;}
.dm-barra{flex-wrap:wrap;height:auto;padding:8px calc(20px*var(--esc));}
.dm-barra-tx{flex-basis:100%;}
.dm-s2,.dm-s3{grid-column:span 4;}
.dm-s4,.dm-s5,.dm-s6{grid-column:span 6;}
.dm-s7,.dm-s8{grid-column:span 12;}
}
@media (max-width:900px){
.dm-cab{height:auto;flex-wrap:wrap;padding:12px 16px;}
.dm-cab-tx{flex-basis:100%;}
.dm-btn-ed,.dm-barra{display:none;}
.dm-panel{position:fixed;inset:0;z-index:80;width:auto;}
.dm-grid{padding:12px 16px 24px;}
}
@media (max-width:720px){
.dm-grid{grid-template-columns:minmax(0,1fr);}
.dm-t,.dm-s2,.dm-s3,.dm-s4,.dm-s5,.dm-s6,.dm-s7,.dm-s8,.dm-s12{grid-column:1 / -1;}
.dm-cab .dm-seg,.dm-cab .dm-btn{height:40px;}
.dm-subs,.dm-subs.sd{grid-template-columns:minmax(0,1fr) 70px 64px;}
.dm-subs>:nth-child(2),.dm-subs>:nth-child(4),.dm-subs>:nth-child(5),.dm-subs>:nth-child(6){display:none;}
.dm-subs.sd>:nth-child(4){display:flex;}
.dm-cal{grid-template-columns:repeat(2,minmax(0,1fr));}
.dm-bar{grid-template-columns:96px minmax(0,1fr) 92px;}
.dm-din-r{grid-template-columns:minmax(0,1fr) 96px 60px;}
.dm-ciclo{grid-template-columns:minmax(0,1fr) 110px 50px;}
.dm-ciclo>:nth-child(3),.dm-ciclo>:nth-child(5){display:none;}
.dm-dona{flex-wrap:wrap;justify-content:center;}
.dm-mapa{min-height:200px;}
}
/* ============================================================
FASE 7: VISOR 3D (sec-modelo3d)
Diseño fiel a Modelo 3D.dc.html
============================================================ */
#sec-modelo3d {
display: none;
width: 100%;
height: calc(100vh - 60px);
min-height: 540px;
box-sizing: border-box;
}
#sec-modelo3d.on {
display: flex;
flex-direction: column;
}
.m3d-container {
display: flex;
gap: 16px;
flex: 1;
min-height: 0;
padding: 16px 24px 20px;
box-sizing: border-box;
background: var(--bg);
position: relative;
}
.m3d-viewport-wrap {
position: relative;
flex: 1;
min-width: 0;
border-radius: 4px;
overflow: hidden;
background: #1f1d19;
}
.m3d-canvas-wrap {
position: absolute;
inset: 0;
}
.m3d-pins {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
}
.m3d-pin {
position: absolute;
left: 0;
top: 0;
transform: translate(-50%, -100%);
pointer-events: auto;
width: 28px;
height: 28px;
border: 2px solid #fff;
border-radius: 50% 50% 50% 0;
rotate: -45deg;
background: #CDAF5E;
color: #231E0C;
font-family: var(--font);
font-size: 12px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.35);
display: flex;
align-items: center;
justify-content: center;
}
.m3d-pin > span {
display: inline-block;
rotate: 45deg;
}
.m3d-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 6;
}
.m3d-overlay button,
.m3d-overlay input,
.m3d-overlay textarea,
.m3d-overlay .m3d-draft-card {
pointer-events: auto;
}
/* Badge vista arriba a la izquierda */
.m3d-badge-vista {
position: absolute;
left: 16px;
top: 16px;
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 14px;
border-radius: 3px;
background: rgba(31,29,25,0.72);
backdrop-filter: blur(6px);
color: #F0EEE7;
}
.m3d-bv-proy {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
color: #E1CF9E;
}
.m3d-bv-tit {
font-family: var(--slab);
font-size: 18px;
font-weight: 600;
}
.m3d-bv-sub {
font-size: 11.5px;
color: #CFC8B4;
}
/* Barra de herramientas arriba a la derecha */
.m3d-toolbar {
position: absolute;
right: 16px;
top: 16px;
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.m3d-tb-btn {
height: 34px;
display: flex;
align-items: center;
gap: 6px;
padding: 0 12px;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 3px;
background: rgba(31,29,25,0.72);
color: #F0EEE7;
font-family: var(--font);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
backdrop-filter: blur(6px);
transition: all 0.15s ease;
}
.m3d-tb-btn:hover {
background: rgba(50,46,40,0.85);
border-color: rgba(255,255,255,0.35);
}
.m3d-tb-btn.on {
border-color: #CDAF5E;
background: rgba(205,175,94,0.28);
}
.m3d-tb-seg {
display: flex;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 3px;
overflow: hidden;
background: rgba(31,29,25,0.72);
backdrop-filter: blur(6px);
}
.m3d-tb-seg-btn {
height: 32px;
padding: 0 10px;
border: 0;
border-right: 1px solid rgba(255,255,255,0.12);
background: transparent;
color: #F0EEE7;
font-family: var(--font);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
}
.m3d-tb-seg-btn:last-child {
border-right: 0;
}
.m3d-tb-seg-btn.on {
background: rgba(205,175,94,0.35);
}
/* Vistas abajo a la izquierda */
.m3d-views-bar {
position: absolute;
left: 16px;
bottom: 16px;
display: flex;
gap: 6px;
/* Con muchas vistas se desliza de lado y deja libre la ayuda de abajo a la derecha. */
max-width: calc(100% - 300px);
overflow-x: auto;
scrollbar-width: thin;
padding: 6px;
border-radius: 4px;
background: rgba(31,29,25,0.72);
backdrop-filter: blur(6px);
}
.m3d-view-btn {
flex: none;
width: 104px;
display: flex;
flex-direction: column;
gap: 5px;
padding: 5px;
border: 1px solid rgba(255,255,255,0.14);
border-radius: 3px;
background: transparent;
color: #F0EEE7;
font-family: var(--font);
font-size: 11.5px;
font-weight: 600;
text-align: left;
cursor: pointer;
transition: all 0.15s ease;
}
.m3d-view-btn:hover {
background: rgba(255,255,255,0.08);
}
.m3d-view-btn.on {
border-color: #CDAF5E;
background: rgba(205,175,94,0.18);
}
.m3d-view-thumb {
height: 44px;
border-radius: 2px;
display: block;
}
.m3d-view-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 2px; }
.m3d-view-mas .m3d-view-thumb { display: flex; align-items: center; justify-content: center; border: 1px dashed rgba(255,255,255,0.28); }
.m3d-tb-btn:disabled { opacity: 0.45; cursor: default; }
/* Sin modelo: el aviso va sobre el fondo oscuro del visor */
.m3d-sin-modelo { position: absolute; inset: 0; margin: auto; height: max-content; }
.m3d-sin-modelo h3 { color: #F0EEE7; }
.m3d-sin-modelo p { color: rgba(240,238,231,0.72); }
/* «Editar» de las vistas: miniatura, nombre, segundos de pausa y orden */
.m3v-lista { display: flex; flex-direction: column; max-height: 50vh; overflow: auto; }
.m3v-fila { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.m3v-mini { width: 72px; height: 45px; flex: none; object-fit: cover; border-radius: 3px; background: var(--surface-3); }
.m3v-nom { flex: 1; min-width: 0; }
.m3v-pausa { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-2); }
.m3v-pausa input { width: 58px; }
.m3v-acts { margin-top: 14px; justify-content: space-between; }
/* Abajo a la derecha */
.m3d-bottom-der {
position: absolute;
right: 16px;
bottom: 16px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.m3d-hint {
padding: 6px 10px;
border-radius: 3px;
background: rgba(31,29,25,0.6);
font-size: 11px;
color: #CFC8B4;
}
/* Banner de nota */
.m3d-nota-banner {
position: absolute;
left: 50%;
top: 96px;
transform: translateX(-50%);
padding: 6px 12px;
border-radius: 3px;
background: #CDAF5E;
color: #231E0C;
font-size: 12.5px;
font-weight: 650;
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
/* Tarjeta flotante de borrador de nota */
.m3d-draft-card {
position: absolute;
left: 50%;
bottom: 120px;
transform: translateX(-50%);
width: 380px;
max-width: calc(100% - 32px);
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
border-radius: 4px;
background: var(--surface);
box-shadow: 0 12px 32px rgba(0,0,0,0.35);
animation: opPop 0.18s both;
}
.m3d-draft-header {
font-size: 12.5px;
font-weight: 650;
color: var(--text);
}
.m3d-draft-card textarea {
padding: 8px;
border: 1px solid var(--line-2);
border-radius: 3px;
background: var(--surface);
color: var(--text);
font-family: var(--font);
font-size: 13px;
resize: none;
outline: none;
}
.m3d-draft-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
/* Capa de carga */
.m3d-loading-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
color: #CFC8B4;
font-size: 13px;
background: #1f1d19;
}
.m3d-loading-track {
width: 180px;
height: 3px;
background: rgba(255,255,255,0.12);
overflow: hidden;
border-radius: 2px;
}
.m3d-loading-bar {
display: block;
height: 100%;
background: #CDAF5E;
transition: width 0.3s ease;
}
/* Error de carga */
.m3d-error-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
padding: 30px;
background: #1f1d19;
color: #F0EEE7;
}
/* Barra lateral */
.m3d-sidebar {
width: 330px;
flex: none;
display: flex;
flex-direction: column;
gap: 12px;
overflow-y: auto;
scrollbar-width: thin;
}
.m3d-card {
display: flex;
flex-direction: column;
padding: 14px 16px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 4px;
}
.m3d-card-admin {
border-color: var(--gold);
}
.m3d-card-header {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 10px;
}
.m3d-eyebrow {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.14em;
color: var(--text-3);
margin-bottom: 4px;
}
.m3d-card-sub {
font-size: 12.5px;
color: var(--text-2);
}
.m3d-acabados-grupo {
display: flex;
flex-direction: column;
gap: 6px;
}
.m3d-grupo-tit {
font-size: 12.5px;
font-weight: 650;
color: var(--text);
margin-top: 4px;
}
.m3d-opt-btn {
display: grid;
grid-template-columns: 38px minmax(0,1fr);
gap: 10px;
align-items: center;
padding: 6px;
border: 1px solid var(--line-2);
border-radius: 3px;
background: var(--surface);
color: var(--text);
font-family: var(--font);
text-align: left;
cursor: pointer;
transition: all 0.15s ease;
}
.m3d-opt-btn:hover {
border-color: var(--gold);
}
.m3d-opt-btn.on {
border-color: var(--gold-deep);
background: var(--gold-soft);
}
.m3d-swatch {
width: 38px;
height: 30px;
border-radius: 2px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}
.m3d-opt-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.m3d-opt-info > b {
font-size: 12.5px;
font-weight: 600;
}
.m3d-opt-info > small {
font-size: 11px;
color: var(--text-3);
}
/* Notas en sidebar */
.m3d-notas-lista {
display: flex;
flex-direction: column;
}
.m3d-nota-item {
display: grid;
grid-template-columns: 22px minmax(0,1fr);
gap: 10px;
align-items: start;
padding: 8px 0;
border: 0;
border-top: 1px solid var(--line);
background: none;
color: var(--text);
font-family: var(--font);
font-size: 12.5px;
text-align: left;
cursor: pointer;
}
.m3d-nota-num {
width: 20px;
height: 20px;
border-radius: 50%;
background: #CDAF5E;
color: #231E0C;
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.m3d-nota-desc {
display: flex;
flex-direction: column;
gap: 1px;
}
.m3d-nota-desc > b {
font-weight: 600;
}
.m3d-nota-desc > small {
font-size: 11.5px;
color: var(--text-3);
}
/* En este espacio */
.m3d-items-lista {
display: flex;
flex-direction: column;
}
.m3d-item-row {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
gap: 10px;
align-items: center;
padding: 8px 0;
border-top: 1px solid var(--line);
font-size: 12.5px;
}
.m3d-item-txt {
display: flex;
flex-direction: column;
}
.m3d-item-txt > b {
font-weight: 600;
}
.m3d-item-txt > small {
font-size: 11.5px;
color: var(--text-3);
}
.m3d-item-badge {
font-size: 10px;
font-weight: 650;
letter-spacing: 0.1em;
padding: 2px 6px;
border-radius: 2px;
}
/* Dropzone de subida */
.m3d-dropzone {
height: 80px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
border: 1.5px dashed var(--line-2);
border-radius: 3px;
background: var(--surface-2);
color: var(--text-2);
font-family: var(--font);
font-size: 13px;
cursor: pointer;
text-align: center;
padding: 8px;
transition: all 0.15s ease;
}
.m3d-dropzone:hover,
.m3d-dropzone.over {
border-color: var(--gold-deep);
background: var(--gold-soft);
}
.m3d-dropzone > b {
font-weight: 600;
}
.m3d-dropzone > small {
font-size: 11.5px;
color: var(--text-3);
}
.m3d-dropzone-nota {
font-size: 10.5px;
color: var(--text-3);
font-style: italic;
}
.m3d-subiendo-box {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 10px;
}
.m3d-sub-header {
display: flex;
justify-content: space-between;
font-size: 12px;
font-weight: 600;
}
.m3d-prog-track {
height: 5px;
background: var(--line);
border-radius: 3px;
overflow: hidden;
}
.m3d-prog-fill {
height: 100%;
background: var(--gold);
border-radius: 3px;
transition: width 0.2s ease;
}
.m3d-chk-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
cursor: pointer;
margin-top: 10px;
}
.m3d-chk-label input {
accent-color: var(--gold-deep);
}
/* Modal Realidad Aumentada */
.m3d-ar-backdrop {
position: fixed;
inset: 0;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(38,36,31,0.55);
backdrop-filter: blur(4px);
}
.m3d-ar-dialog {
width: 420px;
max-width: calc(100% - 32px);
background: var(--surface);
border-radius: 4px;
box-shadow: 0 24px 60px rgba(20,19,16,0.32);
padding: 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
animation: opPop 0.22s both;
box-sizing: border-box;
}
.m3d-ar-tit {
font-family: var(--slab);
font-size: 18px;
font-weight: 600;
color: var(--text);
}
.m3d-ar-desc {
font-size: 13.5px;
line-height: 1.5;
color: var(--text-2);
margin: 0;
}
.m3d-ar-qr {
width: 168px;
height: 168px;
border: 1px solid var(--line-2);
border-radius: 4px;
background: repeating-conic-gradient(var(--text) 0 25%, var(--surface) 0 50%) 0 0/24px 24px;
opacity: 0.85;
}
.m3d-ar-hint {
font-size: 12px;
color: var(--text-3);
}
/* ============================================================
RESPONSIVO CELULAR (<= 720px y <= 900px)
Requisitos de TAREA-ANTIGRAVITY:
- Escritorio (1440px) y celular (375px)
- Sin desplazamiento horizontal
- Botones de al menos 44 px de área táctil
============================================================ */
@media (max-width: 900px) {
#sec-modelo3d {
height: auto;
min-height: auto;
}
.m3d-container {
flex-direction: column;
padding: 12px 14px 20px;
gap: 14px;
overflow-x: hidden;
}
.m3d-viewport-wrap {
height: 380px;
min-height: 320px;
flex: none;
width: 100%;
}
.m3d-sidebar {
width: 100%;
overflow-y: visible;
}
.m3d-tb-btn {
min-height: 44px;
min-width: 44px;
padding: 0 10px;
}
.m3d-tb-seg-btn {
min-height: 44px;
min-width: 44px;
padding: 0 8px;
}
.m3d-view-btn {
min-height: 44px;
width: 90px;
}
.m3d-opt-btn {
min-height: 44px;
}
.m3d-views-bar {
max-width: calc(100% - 32px);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.m3d-views-bar::-webkit-scrollbar {
display: none;
}
.m3d-toolbar {
max-width: calc(100% - 32px);
}
}
/* ============================================================
TEMA OSCURO (html[data-tema="oscuro"])
============================================================ */
:root[data-tema="oscuro"] .m3d-container {
background: var(--bg);
}
:root[data-tema="oscuro"] .m3d-card {
background: var(--surface);
border-color: var(--line);
}
:root[data-tema="oscuro"] .m3d-opt-btn {
background: var(--surface-2);
border-color: var(--line-2);
}
:root[data-tema="oscuro"] .m3d-opt-btn.on {
background: var(--gold-soft);
border-color: var(--gold);
}
:root[data-tema="oscuro"] .m3d-draft-card {
background: var(--surface);
}
:root[data-tema="oscuro"] .m3d-ar-dialog {
background: var(--surface);
}
/* Texturas que el archivo 3D nombraba sin traerlas (glbTexturas.js). */
.m3d-aviso-tex{display:block;margin-top:6px;font-size:11px;line-height:1.4;color:var(--riesgo, var(--text-2));}
/* ============================================================
ESTILO STITCH (Sergio, 8 oct 2026) · diseno/stitch-reporte/
El acabado del reporte de visita de Stitch sobre el alma de OPESA: las
letras (Argentum Sans y Avenir Next Cyr), el dorado y el marfil son los de
siempre; de Stitch vienen las esquinas de 2 px, las líneas finas cálidas,
las etiquetas en mono mayúsculas, los chips con punto y los botones blancos
con borde dorado. Por ahora solo en el reporte y la ejecución: la pantalla
que lo usa lleva la clase .st en su contenedor. Sin sombras difusas.
============================================================ */
:root{
--mono:"Cascadia Mono","SFMono-Regular",ui-monospace,Menlo,Consolas,"Roboto Mono","Liberation Mono",monospace;
--st-hair:#E5E0D8; --st-hair-2:#F0ECE1; --st-hair-3:#DCD6C7;
--st-canvas:#FAF8F2; --st-sel:#F3EEDD;
--st-ok-bg:#FAF5E8; --st-ok:#7D6116; --st-ok-bd:#D6C185;
--st-crit-bg:#FDF0EB; --st-crit:#9E3D19; --st-crit-bd:#EBB4A2;
--st-info-bg:#EEF3F7; --st-info:#203649; --st-info-bd:#B0C4D5;
--st-draft-bg:#F0EDE4; --st-draft:#4A4D54; --st-draft-bd:#DFD9CB;
}
:root[data-tema="oscuro"]{
--st-hair:#2E2B25; --st-hair-2:#27251F; --st-hair-3:#3F3C33;
--st-canvas:#1A1813; --st-sel:#2C2615;
--st-ok-bg:#231E0F; --st-ok:#DDC271; --st-ok-bd:#463C1F;
--st-crit-bg:#261A16; --st-crit:#EE9C93; --st-crit-bd:#5A2C24;
--st-info-bg:#181D23; --st-info:#9BBCE4; --st-info-bd:#2C3C52;
--st-draft-bg:#22201B; --st-draft:#BAB4A1; --st-draft-bd:#3F3C33;
}
/* Dentro de .st las piezas de siempre toman el acabado: esquinas de 2 px, borde fino y sin sombra. */
.st{--r:2px;--r-sm:2px;--r-xs:2px;}
.st .card{box-shadow:none;border-color:var(--st-hair);}
.st .btn{border-color:var(--st-hair-3);background:var(--surface);box-shadow:none;}
.st .btn:hover{border-color:var(--text-3);background:var(--st-canvas);}
.st .btn.primary{background:var(--surface);color:var(--gold-ink);border-color:var(--gold-deep);}
.st .btn.primary:hover{background:var(--gold-soft);border-color:var(--gold-ink);}
.st .btn.danger,.st .btn.peligro{background:var(--surface);color:var(--st-crit);border-color:var(--st-crit-bd);}
/* La acción que se usa a pleno sol en el celular: rellena y alta. */
.st-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;
border:1px solid var(--gold-deep);border-radius:2px;background:var(--gold);color:var(--ink);font:inherit;font-weight:700;
font-size:var(--t-base);cursor:pointer;}
.st-cta:disabled{opacity:.5;cursor:default;}
/* Etiqueta técnica: mono, mayúsculas y con aire entre letras. */
.st-eyebrow{font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:.05em;
text-transform:uppercase;color:var(--text-3);}
.st-mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.02em;}
/* Chips de estado: rectos, de 22 px, con punto opcional. */
.st-chip{display:inline-flex;align-items:center;gap:6px;min-height:22px;padding:2px 8px;border:1px solid var(--st-hair);
border-radius:2px;background:var(--surface);color:var(--text-2);font-size:var(--t-xs);font-weight:500;line-height:1.3;
white-space:nowrap;}
.st-chip.suave{background:var(--st-canvas);}
.st-chip.ok{background:var(--st-ok-bg);color:var(--st-ok);border-color:var(--st-ok-bd);}
.st-chip.crit{background:var(--st-crit-bg);color:var(--st-crit);border-color:var(--st-crit-bd);}
.st-chip.info{background:var(--st-info-bg);color:var(--st-info);border-color:var(--st-info-bd);}
.st-chip.draft{background:var(--st-draft-bg);color:var(--st-draft);border-color:var(--st-draft-bd);}
.st-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
/* Número de la entrada (#001). */
.st-num{display:inline-flex;align-items:center;min-height:22px;padding:1px 7px;border:1px solid var(--st-hair);border-radius:2px;
background:var(--surface);color:var(--text-3);font-family:var(--mono);font-size:var(--t-xs);font-weight:600;
font-variant-numeric:tabular-nums;}
/* Conmutador (Obra/Oficina, Bloque/Fila, Texto/Solo foto). */
.st-seg{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--st-hair);border-radius:2px;
background:var(--surface);}
.st-seg>button{display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:2px 10px;border:1px solid transparent;
border-radius:2px;background:transparent;color:var(--text-3);font:inherit;font-size:var(--t-xs);font-weight:500;cursor:pointer;}
.st-seg>button:hover{color:var(--gold-ink);border-color:var(--gold-light);}
.st-seg>button.on,.st-seg>button[aria-pressed="true"]{border-color:var(--gold-deep);color:var(--gold-ink);font-weight:600;}
/* Tarjeta con encabezado separado por línea fina y la marca cuadrada dorada. */
.st-card{background:var(--surface);border:1px solid var(--st-hair);border-radius:2px;}
.st-card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;
border-bottom:1px solid var(--st-hair);}
.st-card-h h2,.st-card-h h3{display:flex;align-items:center;gap:10px;margin:0;font-size:var(--t-md);font-weight:600;
letter-spacing:-.01em;}
.st-card-b{padding:18px 20px;}
.st-mark::before{content:"";display:inline-block;width:8px;height:8px;background:var(--gold-deep);flex:none;}
/* Cinta de datos con separadores verticales finos (firmante · supervisión · estado). */
.st-ribbon{display:flex;flex-wrap:wrap;align-items:center;row-gap:8px;font-size:var(--t-xs);color:var(--text-3);}
.st-ribbon>*{display:inline-flex;align-items:center;gap:6px;padding:0 14px;border-left:1px solid var(--st-hair);}
.st-ribbon>*:first-child{padding-left:0;border-left:0;}
.st-ribbon b{color:var(--text);font-weight:600;}
/* Barra de herramientas de una lista. */
.st-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;
background:var(--surface);border:1px solid var(--st-hair);border-radius:2px;}
.st-filtro{min-height:30px;padding:3px 12px;border:1px solid var(--st-hair);border-radius:2px;background:var(--surface);
color:var(--text-3);font:inherit;font-size:var(--t-xs);font-weight:500;cursor:pointer;}
.st-filtro:hover{border-color:var(--gold-deep);}
.st-filtro.on{border:2px solid var(--text);color:var(--text);font-weight:600;padding:2px 11px;}
/* Renglón de lista (vista «Fila»): al pasar o al elegirlo, fondo dorado tenue y franja de 3 px. */
.st-row{position:relative;display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--surface);
border:1px solid var(--st-hair);border-radius:2px;transition:border-color .2s ease, background-color .2s ease;}
.st-row:hover{background:var(--st-sel);box-shadow:inset 3px 0 0 var(--gold-deep);}
.st-row.sel{border-color:var(--gold-deep);box-shadow:inset 3px 0 0 var(--gold-deep);}
.st-thumb{width:44px;height:44px;flex:none;border:1px solid var(--st-hair);border-radius:2px;object-fit:cover;
background:var(--surface-3);}
.st-hd{display:inline-flex;align-items:center;gap:3px;min-height:26px;padding:0 7px;border:1px solid var(--st-hair);
border-radius:2px;background:var(--surface);color:var(--text-3);font:inherit;font-size:var(--t-micro);font-weight:600;cursor:pointer;}
.st-hd:hover{border-color:var(--gold-deep);color:var(--gold-ink);}
.st-ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;
border:1px solid var(--st-hair);border-radius:2px;background:var(--surface);color:var(--text-3);cursor:pointer;}
.st-ico:hover{color:var(--text);border-color:var(--text-3);}
.st-ico.peligro:hover{color:var(--st-crit);border-color:var(--st-crit-bd);}
.st-ico svg{width:15px;height:15px;}
/* Zona para soltar fotos y unidad en caja (m², m³, pza). */
.st-drop{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;padding:14px;text-align:center;
border:1px dashed var(--st-hair-3);border-radius:2px;background:var(--st-canvas);color:var(--text-3);font-size:var(--t-xs);}
.st-drop.over{border-color:var(--gold-deep);background:var(--gold-soft);}
.st-unit{display:flex;align-items:stretch;}
.st-unit>input{flex:1;min-width:0;border-top-right-radius:0;border-bottom-right-radius:0;}
.st-unit>span{display:flex;align-items:center;padding:0 10px;border:1px solid var(--line-2);border-left:0;border-radius:0 2px 2px 0;
background:var(--st-draft-bg);color:var(--text-2);font-family:var(--mono);font-size:var(--t-xs);}
/* Casilla cuadrada dorada. */
.st-check{appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;width:16px;height:16px;flex:none;
margin:0;border:1px solid var(--st-hair-3);border-radius:2px;background:var(--surface);cursor:pointer;}
.st-check:checked{background:var(--gold-deep);border-color:var(--gold-deep);}
.st-check:checked::before{content:"";width:8px;height:4px;margin-top:-2px;border-left:2px solid #fff;border-bottom:2px solid #fff;
transform:rotate(-45deg);}
/* Zona de toque de 44 px alrededor de una casilla: la etiqueta mide 44 px en pantallas táctiles y la casilla conserva su tamaño. */
.st-tap{display:inline-flex;align-items:center;justify-content:center;flex:none;margin:0;cursor:pointer;}
@media (pointer:coarse),(max-width:720px){ .st-tap{min-width:44px;min-height:44px;} }
/* Maestro-detalle de escritorio: captura fija a la izquierda (5/12) y lista a la derecha (7/12). */
.st-md{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start;}
@media (min-width:1100px){
.st-md{grid-template-columns:minmax(360px,5fr) minmax(0,7fr);gap:28px;}
.st-md>.st-fija{position:sticky;top:var(--st-top, 72px);}
}
/* En pantallas táctiles todo lo que se toca mide al menos 44 px. */
@media (pointer:coarse){
.st .st-seg>button,.st .st-hd,.st .st-ico,.st .st-filtro{min-height:44px;min-width:44px;}
.st .st-check{width:22px;height:22px;}
}
@media (prefers-reduced-motion:reduce){ .st-row{transition:none;} }
/* INICIO · ACOMODO SUAVE (8 oct) */
/* ============================================================
El Inicio de siempre (2a en compu, 3a en el celular, la bandeja en la tableta) con los
reportes sueltos agrupados por mes, los proyectos por carpeta y todo lo que se pliega
abriendo y cerrando con una altura corta. Solo reacomoda: las piezas, los colores y las
letras son los de siempre, con los conteos en mono y las líneas finas de la capa Stitch.
============================================================ */
/* La tira de carpetas: una sola línea que se desliza de lado (con la rueda del mouse también), sin
doblarse en dos renglones. Si hay más hacia un lado, ese borde se difumina. */
.ini-carps{flex-wrap:nowrap;gap:8px;min-width:0;}
.ini-carps-r{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:2px 1px;overflow-x:auto;
overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;}
.ini-carps-r::-webkit-scrollbar{display:none;}
.ini-carps-r.mas-izq{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px);mask-image:linear-gradient(90deg,transparent 0,#000 28px);}
.ini-carps-r.mas-der{-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 28px);mask-image:linear-gradient(270deg,transparent 0,#000 28px);}
.ini-carps-r.mas-izq.mas-der{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);}
.ini-carp{flex:none;min-height:32px;white-space:nowrap;scroll-snap-align:start;}
.ini-carp i{font-family:var(--mono);font-size:var(--t-xs);font-weight:600;letter-spacing:.02em;opacity:1;color:var(--text-3);}
.ini-carp.on i{color:inherit;opacity:.78;}
.ini-carps-b{flex:none;margin-left:0;}
/* En el teléfono, con muchas carpetas, la tira pasa a un selector de 44 px («Carpeta: Todas»); el texto de 16 px no hace zoom. */
.ini-carp-sel{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 38px 0 12px;
border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);}
.ini-carp-sel:focus-within{border-color:var(--gold-deep);box-shadow:var(--focus-halo);}
.ini-carp-sel>span{flex:none;font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);}
.ini-carp-sel select{flex:1;min-width:0;height:42px;padding:0;border:0;background:none;color:var(--text);font:inherit;font-size:16px;font-weight:550;
text-overflow:ellipsis;-webkit-appearance:none;appearance:none;cursor:pointer;}
.ini-carp-sel select:focus{outline:none;}
.ini-carp-sel::after{content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);
transform:translateY(-70%) rotate(45deg);pointer-events:none;}
/* Encabezado de un grupo (una carpeta o un mes): conteo en mono, línea fina entre grupos y la flecha que gira. */
.ini-carp-h{min-height:36px;}
.ini-carp-h i{font-family:var(--mono);font-size:var(--t-xs);font-weight:600;letter-spacing:.02em;opacity:1;color:var(--text-3);}
.ini-carp-h:focus-visible{outline:2px solid var(--gold-deep);outline-offset:-2px;}
.ini-carp-fl{transition:transform .22s var(--ease-in);}
.ig-c+.ini-carp-h,.ini-carp-c+.ini-carp-h{border-top:1px solid var(--st-hair-2);}
/* El cuerpo abre y cierra con una altura corta: la cuadrícula pasa de 1fr a 0fr, sin medir nada con JS. Plegado, queda
fuera del orden del teclado y de lo que lee el lector de pantalla (visibility), pero solo al terminar de cerrar. */
.ig-c{display:grid;grid-template-rows:1fr;transition:grid-template-rows .22s var(--ease-in);}
.ig-c.cerrada{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .22s var(--ease-in),visibility 0s linear .22s;}
.ig-ci{min-height:0;overflow:hidden;}
/* La lista de compu reserva el hueco de su barra de desplazamiento: al abrir un grupo la barra aparece sin empujar de lado a los renglones. */
.i2-filas{scrollbar-width:thin;scrollbar-gutter:stable;}
.ig-ci .i2-fila:focus-visible,.ig-ci .ic3-obra:focus-visible,.ig-ci .bj-row:focus-visible{outline-offset:-2px;}
/* «Ver más (N)» y «Ver todos (N)». */
.ig-mas{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:40px;margin:0;padding:0 14px;border:0;
border-top:1px dashed var(--st-hair-3);background:none;color:var(--gold-ink);font:inherit;font-size:var(--t-sm);font-weight:600;cursor:pointer;}
.ig-mas:hover{background:var(--st-sel);}
.ig-mas:focus-visible{outline:2px solid var(--gold-deep);outline-offset:-2px;}
.ig-mas b{font-family:var(--mono);font-weight:600;}
/* Un repintado de la lista (buscar, «Ver más», llegó el resumen) no repite la entrada de los renglones. */
.i2-filas.sin-entrada .i2-fila,.ic3-filas.sin-entrada .ic3-obra{animation:none;}
/* Esqueleto del encabezado de un grupo, para que la lista no brinque cuando llega. */
.ig-esq-h{padding:calc(14px*var(--esc)) calc(16px*var(--esc)) calc(8px*var(--esc));}
.ig-esq-h .i2-esq{width:calc(120px*var(--esc));height:calc(10px*var(--esc));}
.ig-esq-h .ic3-esq{width:110px;height:10px;}
/* Un reporte suelto: el día en un recuadro (el número y, en mono, el día de la semana), el título con cliente y ubicación,
y la carpeta donde está. Sin etapa ni avance. */
.ini-dia{flex:none;width:40px;height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
border:1px solid var(--line-2);border-radius:3px;background:var(--surface-3);color:var(--gold-ink);line-height:1;}
.ini-dia b{font-family:var(--font-display);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;}
.ini-dia small{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);}
.i2-fila.v-visita{grid-template-columns:calc(40px*var(--esc)) minmax(0,1fr) auto calc(20px*var(--esc));padding-top:calc(10px*var(--esc));padding-bottom:calc(10px*var(--esc));}
.i2-fila .ini-dia{width:calc(40px*var(--esc));height:calc(40px*var(--esc));}
.ini-en{display:flex;align-items:center;gap:6px;min-width:0;max-width:calc(200px*var(--esc));font-size:calc(13px*var(--esc));color:var(--text-3);}
.ini-en span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ini-en svg.i{color:var(--text-3);}
@media (min-width:901px) and (max-width:1279px){
.i2-fila.v-visita{grid-template-columns:40px minmax(0,1fr) auto 20px;gap:12px;}
.ini-en{max-width:150px;}
}
@media (max-width:720px){
/* Los chips y los encabezados de grupo se tocan con el pulgar: 44 px de alto. */
.ini-carp{min-height:44px;padding:0 14px;font-size:15px;}
.ini-carps{padding:6px 0;border-bottom:0;}
.ini-carp-h{min-height:44px;padding-top:0;padding-bottom:0;}
.ig-mas{min-height:44px;}
/* Los renglones del celular son tarjetas con su separación; adentro de un grupo se conserva. */
.ic3-filas{gap:0;}
.ic3-filas>.ic3-obra{margin-bottom:8px;}
.ic3-filas .ig-ci,.ic3-filas .ini-carp-c{display:flex;flex-direction:column;gap:8px;}
.ic3-filas .ig-ci{padding:2px 0 8px;}
.ic3-filas .ini-carp-h{margin-top:0;}
.ic3-filas .ig-mas{border:1px solid var(--line);border-radius:4px;background:var(--surface);}
.ic3-visita{padding:8px 12px;justify-content:center;gap:0;}
.ic3-visita .ini-dia{width:44px;height:44px;}
.ic3-visita .ic3-obra-t b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3;}
}
@media (prefers-reduced-motion:reduce){
.ig-c,.ig-c.cerrada,.ini-carp-fl{transition:none;}
.ini-carps-r{scroll-behavior:auto;}
}
/* ============================================================
CALIDAD · ACTAS POR APROBAR (8 oct). Lo que espera a la líder del área,
arriba de la búsqueda de partida; con el acabado de la capa .st.
============================================================ */
.cal-pend{margin:4px 0 14px;border:1px solid var(--st-hair);border-left:3px solid var(--gold-deep);border-radius:2px;background:var(--surface);}
.cal-pend-t{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--st-hair);font-size:var(--t-sm);color:var(--text);}
.cal-pend-t svg{color:var(--gold-ink);}
.cal-pend-r{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;width:100%;min-height:44px;padding:9px 14px;border:0;
border-bottom:1px solid var(--st-hair-2);background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer;}
.cal-pend-r:last-child{border-bottom:0;}
.cal-pend-r:hover{background:var(--st-sel);}
.cal-pend-c{grid-row:span 2;align-self:center;font-family:var(--mono);font-size:var(--t-xs);font-weight:600;color:var(--gold-ink);}
.cal-pend-n{font-size:var(--t-sm);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cal-pend-m{font-size:var(--t-xs);color:var(--text-3);}
.cal-pend .mini{padding:8px 14px;}
/* EJECUCIÓN · STITCH (8 oct) */
/* La pantalla de avance (jornada y captura diaria) sobre la capa «ESTILO STITCH»: encabezado en tarjeta, jornada en
un paso a paso de una línea y, en escritorio, la captura fija a la izquierda con las entradas de hoy a la derecha.
En el celular y la tableta es una sola columna con tres pestañas (Capturar, Programado, Hoy) que cambian sin repintar.
La captura de campo: tipo en chips, programadas en tarjetas, cantidad grande, cámara primero y «Guardar avance» fijo
abajo. Todo lo táctil mide 44 px o más. Los campos conservan su borde marcado: se leen a pleno sol. */
/* Un ancestro con transform (la animación de entrada de la sección) volvería «absoluto» al botón fijo de abajo. */
.sec.on>.ej{animation:none;}
.ej{--ej-pad:20px;--st-top:calc(176px*var(--esc,1) + var(--franja-red,0px));}
.ej .solo-esc{display:none;}
.ej-vacio{padding:34px 16px;}
.ej-vacio>div{margin-top:12px;}
.ej-op{font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-3);}
/* ---- Encabezado en tarjeta ---- */
.st .ej-cab.card.panel{padding:0;margin-bottom:18px;overflow:hidden;border-left:1px solid var(--st-hair);background:var(--surface);}
.st .ej-cab.preparacion,.st .ej-cab.documentos{box-shadow:inset 3px 0 0 var(--gold-deep);}
.st .ej-cab.confirmado{box-shadow:inset 3px 0 0 var(--bueno);}
.ej-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:16px var(--ej-pad) 0;font-size:var(--t-xs);color:var(--text-3);}
.ej-chips-f{color:var(--text-2);font-weight:500;}
.ej-tit{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;padding:10px var(--ej-pad) 16px;}
.ej-tit-t{min-width:0;flex:1 1 320px;}
.ej-tit h2{margin:0;font-family:var(--slab);font-size:var(--t-xl);font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--text);}
.ej-tit-s{margin:6px 0 0;font-size:var(--t-sm);color:var(--text-3);line-height:1.5;}
.ej-ver{flex:none;}
.ej-cinta{padding:12px var(--ej-pad);border-top:1px solid var(--st-hair-2);}
.ej-cinta em{font-style:normal;color:var(--text-3);font-weight:400;}
.ej-pasos-c{padding:14px var(--ej-pad);border-top:1px solid var(--st-hair-2);}
.ej-acc{padding:0 var(--ej-pad) 18px;}
.ej-acc .macts{margin-top:4px !important;}
/* «Finalizar día» va en su sitio de siempre; solo en el celular, en «Programado» y «Hoy», pasa a la barra fija de abajo. */
.ej-fin{display:contents;}
.ej-cab>.rechazo-nota,.ej-cab>.jp-reab{margin:12px var(--ej-pad) 0;}
.ej-cab .jp-listo{margin-top:4px;}
/* ---- Paso a paso: seis pasos en una línea (escritorio) o «Paso 3 de 6 · Capturar» (celular y tableta) ---- */
.ej-pasos{display:none;list-style:none;margin:0;padding:0;grid-template-columns:repeat(6,minmax(0,1fr));}
.ej-paso{display:grid;grid-template-columns:24px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;align-items:center;
min-width:0;padding:0 8px 0 12px;border-left:1px solid var(--st-hair);}
.ej-paso:first-child{padding-left:0;border-left:0;}
.ej-paso>i{grid-row:1 / 3;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid var(--st-hair-3);
border-radius:2px;background:var(--surface);color:var(--text-3);font:600 var(--t-xs)/1 var(--mono);font-style:normal;}
.ej-paso>i svg{width:13px;height:13px;stroke-width:2.4;}
.ej-paso-n{min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:var(--t-sm);font-weight:600;line-height:1.2;color:var(--text-2);}
.ej-paso>em{font-style:normal;font:500 var(--t-micro)/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);}
.ej-paso.hecho>i{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff;}
.ej-paso.activo>i{border:2px solid var(--gold-deep);color:var(--gold-ink);}
.ej-paso.activo .ej-paso-n{color:var(--text);}
.ej-paso.activo>em{color:var(--gold-ink);}
.ej-paso-cel{display:block;}
.ej-paso-t{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:var(--t-md);color:var(--text);}
.ej-paso-f{flex:none;font-size:var(--t-xs);color:var(--text-3);}
.ej-paso-t b{font-family:var(--mono);font-weight:600;letter-spacing:.02em;}
.ej-barra{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;margin-top:8px;}
.ej-barra>i{display:block;height:5px;background:var(--st-hair);}
.ej-barra>i.hecho{background:var(--gold-deep);}
.ej-barra>i.activo{background:var(--gold);}
/* ---- Pestañas ---- */
.ej-tabs{display:flex;gap:6px;margin:0 0 14px;}
.ej-tab{flex:1 1 0;min-height:44px;justify-content:center;white-space:nowrap;}
/* ---- Distribución ---- */
.ej-md{margin-top:0;}
/* Celular y tableta: una pestaña a la vez. Sin formulario (jornada cerrada), todo apilado. */
.ej:not(.ej-sin-form) .ej-der{display:none;}
.ej[data-tab="hoy"]:not(.ej-sin-form) .ej-der,.ej[data-tab="agenda"]:not(.ej-sin-form) .ej-der{display:block;}
.ej[data-tab="hoy"]:not(.ej-sin-form) .ej-izq,.ej[data-tab="agenda"]:not(.ej-sin-form) .ej-izq{display:none;}
.ej .ej-p-hoy{display:grid;gap:16px;align-content:start;}
.ej .ej-p-agenda{display:none;}
.ej[data-tab="agenda"] .ej-p-agenda{display:block;}
.ej[data-tab="agenda"] .ej-p-hoy{display:none;}
#ej-cola:empty{display:none;}
/* ---- La captura ---- */
.ej-cap.card.panel{padding:0;margin-bottom:0;overflow:visible;}
.ej-cap .st-card-h{padding:12px 16px;}
.ej-cap-b{padding:14px 16px 18px;}
.ej-cap-ac{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;}
.ej-cap-ac .st-ico{width:44px;height:44px;}
.ej-cap-ac .st-ico svg{width:18px;height:18px;}
.ej-cap .st-card-h{flex-wrap:wrap;}
.ej-modo-nota{margin:0 0 12px;}
.ej .modo-cap{margin:0;gap:0;}
.ej .modo-b{min-height:44px;padding:0 10px;border:1px solid var(--st-hair-3);border-radius:2px;background:var(--surface);color:var(--text-2);font-weight:600;}
.ej .modo-b+.modo-b{margin-left:-1px;}
.ej .modo-b.on{position:relative;border:2px solid var(--gold-deep);padding:0 9px;background:var(--gold-soft);color:var(--gold-ink);}
.ej .modo-h{display:none;}
.ej-borrador{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;padding:6px 6px 6px 12px;
background:var(--st-info-bg);border:1px solid var(--st-info-bd);border-radius:2px;color:var(--st-info);font-size:var(--t-sm);font-weight:600;}
.ej-borrador-x{min-height:44px;padding:0 12px;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;}
.ej-cuando-b{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 12px;border:1px solid var(--st-hair-3);border-radius:2px;
background:var(--st-canvas);color:var(--text-2);font:inherit;font-size:var(--t-sm);cursor:pointer;text-align:left;}
.ej-cuando-b small{margin-left:auto;font-size:var(--t-sm);color:var(--gold-ink);font-weight:600;text-decoration:underline;}
.ej-cuando{margin-top:14px;}
.ej-cuando-f{margin-top:10px;}
/* Tipo de entrada, en chips: elegido = borde dorado de 2 px sobre fondo dorado tenue. */
.ej-tipos{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ej-tipo{min-height:44px;padding:0 10px;text-align:center;border:1px solid var(--st-hair-3);border-radius:2px;background:var(--surface);color:var(--text-2);
font:inherit;font-size:var(--t-base);font-weight:600;cursor:pointer;}
.ej-tipo:hover{border-color:var(--gold-deep);}
.ej-tipo.on{padding:0 9px;border:2px solid var(--gold-deep);background:var(--gold-soft);color:var(--gold-ink);}
/* Elegir la partida: la última, las programadas de hoy en tarjetas, las usadas y el buscador. */
.ej-pick>*+*{margin-top:14px;}
.ej-ultima{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--gold-deep);border-radius:2px;
background:var(--gold-soft);color:var(--gold-ink);font:inherit;font-size:var(--t-sm);font-weight:600;cursor:pointer;}
.ej-ultima b{font-weight:700;}
.ej-prog-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px;}
.ej-prog-n{font-size:var(--t-xs);color:var(--text-3);}
.ej-prog-lista{display:grid;gap:8px;}
.ej-prog{display:grid;gap:2px;width:100%;min-height:64px;padding:11px 14px;border:1px solid var(--st-hair-3);border-radius:2px;background:var(--surface);
color:var(--text);font:inherit;text-align:left;cursor:pointer;}
.ej-prog:hover{border-color:var(--gold-deep);}
.ej-prog:active{background:var(--st-sel);}
.ej-prog.sig{box-shadow:inset 3px 0 0 var(--gold-deep);}
.ej-prog.listo{border-color:var(--bueno);background:var(--bueno-bg);}
.ej-prog.extra{display:none;}
.ej-prog-lista.todas .ej-prog.extra{display:grid;}
.ej-prog-cod{display:flex;align-items:center;gap:6px;font-size:var(--t-sm);font-weight:700;color:var(--gold-ink);}
.ej-prog.listo .ej-prog-cod{color:var(--bueno);}
.ej-prog-cpt{font-size:var(--t-md);font-weight:600;line-height:1.3;overflow-wrap:anywhere;}
.ej-prog-meta{font-size:var(--t-sm);color:var(--text-3);}
.ej-prog-mas{margin-top:8px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--gold-ink);font:inherit;font-size:var(--t-sm);font-weight:600;
text-decoration:underline;cursor:pointer;}
.ej-prog-est{padding:10px 12px;border:1px dashed var(--st-hair-3);border-radius:2px;font-size:var(--t-sm);color:var(--text-3);}
.ej-prog-est.err{border-style:solid;border-color:var(--st-crit-bd);background:var(--st-crit-bg);color:var(--st-crit);}
.ej-usadas{display:grid;gap:6px;}
.ej-usadas-l{display:flex;flex-wrap:wrap;gap:8px;}
.st-chip.ej-usada{min-height:44px;padding:0 14px;border-color:var(--st-hair-3);font-size:var(--t-base);font-weight:700;color:var(--gold-ink);cursor:pointer;}
.st-chip.ej-usada:hover{border-color:var(--gold-deep);}
.ej-buscar{margin-bottom:0;}
.ej-sel{display:flex;align-items:flex-start;gap:10px;padding:11px 8px 11px 14px;border:1px solid var(--gold-deep);border-left-width:3px;border-radius:2px;background:var(--gold-soft);}
.ej-sel-t{flex:1;min-width:0;font-size:var(--t-md);line-height:1.35;overflow-wrap:anywhere;}
.ej-sel-t b{color:var(--gold-ink);}
.ej-sel-t small{display:block;margin-top:2px;font-size:var(--t-sm);color:var(--text-3);}
.ej-sel-x{display:inline-flex;align-items:center;gap:4px;flex:none;min-height:44px;padding:0 10px;border:0;background:none;color:var(--text-2);
font:inherit;font-size:var(--t-sm);font-weight:600;cursor:pointer;}
.ej-sel-x:hover{color:var(--critico);}
/* Cantidad: grande, con la unidad en su caja. */
.ej-cant{margin-top:14px;}
.ej-cant .st-unit>input{min-height:64px;font-family:var(--slab);font-size:30px;--campo-fs:30px;font-weight:600;line-height:1.1;padding:8px 14px;}
.ej-cant .st-unit>span{min-width:64px;justify-content:center;font-size:var(--t-md);font-weight:600;}
.ej-mas{margin:12px 0 0;border-top:1px solid var(--st-hair-2);}
.ej-mas>summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none;font-size:var(--t-sm);font-weight:600;color:var(--text-2);}
.ej-mas>summary::-webkit-details-marker{display:none;}
.ej-mas>summary small{flex:1;min-width:0;font-size:var(--t-sm);font-weight:400;color:var(--text-3);}
.ej-mas>summary svg{flex:none;transition:transform .15s ease;}
.ej-mas[open]>summary svg{transform:rotate(180deg);}
.ej-mas[open]>summary{margin-bottom:8px;}
.ej-check{display:flex;align-items:flex-start;gap:10px;min-height:44px;font-size:var(--t-base);font-weight:600;text-transform:none;letter-spacing:0;cursor:pointer;}
.ej-check .st-check{margin-top:2px;}
.ej-chk{margin:0 0 14px;}
/* Evidencia: la cámara va primero. */
.ej-foto{margin-top:14px;}
.ej-foto .evd{padding:12px;border:1px dashed var(--st-hair-3);background:var(--st-canvas);}
.ej-foto-b{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;}
.ej-foto-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:76px;padding:8px;border:1px solid var(--st-hair-3);
border-radius:2px;background:var(--surface);color:var(--text);font:inherit;font-size:var(--t-base);font-weight:700;cursor:pointer;}
.ej-foto-btn svg{color:var(--gold-ink);}
.ej-foto-btn.camara{border:2px solid var(--gold-deep);background:var(--gold-soft);}
.ej-foto-btn:active{transform:scale(.98);}
.ej-foto .thumbs{width:100%;margin-top:10px;}
.ej-foto .evd-cont{width:100%;margin-top:8px;text-align:left;}
.ej-th .x{top:0;right:0;width:44px;height:44px;border-radius:0;background:transparent;}
.ej-th .x:hover{background:transparent;}
.ej-th .x svg{width:28px;height:28px;padding:6px;border-radius:50%;background:rgba(18,18,18,.78);color:#fff;stroke-width:2.2;}
.ej-th .x:disabled{display:none;}
.ej-th.subiendo img{opacity:.55;}
.ej-th-e{position:absolute;left:0;right:0;bottom:0;padding:3px 6px;background:rgba(18,18,18,.78);color:#fff;font-size:var(--t-micro);font-weight:600;text-align:center;}
.ej-th-e.ok{display:flex;justify-content:center;background:rgba(32,110,66,.9);}
/* Nota: el botón «Dictar» solo aparece donde el navegador dicta. */
.ej-nota{margin-top:14px;}
.ej-nota .mic{width:auto;height:44px;min-height:44px;gap:8px;padding:0 16px;border-radius:2px;font:inherit;font-size:var(--t-sm);font-weight:700;}
.ej-nota textarea{min-height:88px;}
.ej-campos{margin-top:14px;}
.ej-campos-t{margin-bottom:8px;}
.ej-msg{margin-top:12px;}
.ej-msg:empty{display:none;}
.ej-msg .alert{margin:0;}
/* ---- Guardar avance: al alcance del pulgar ---- */
.ej-cta{position:sticky;bottom:0;z-index:3;padding:12px 16px;border-top:1px solid var(--st-hair);background:var(--surface);}
.ej-cta .st-cta{width:100%;}
.ej-cap>.ej-cta{border-radius:0 0 2px 2px;}
/* ---- Entradas de hoy ---- */
.ej-toolbar{margin-bottom:12px;}
.ej-filtros{display:flex;flex-wrap:wrap;gap:6px;}
@media (pointer:fine){ .ej-filtros .st-filtro{min-height:34px;} }
@media (pointer:coarse){ .ej .solo-fino{display:none;} }
.ej-filas{display:grid;gap:8px;}
.ej-v-bloque{gap:12px;}
.ej-fila{flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 14px;}
.ej-fila-1{flex:1 1 300px;display:flex;align-items:center;gap:10px;min-width:0;}
.ej-fila-2{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px;margin-left:auto;}
.ej-fila-main{flex:1;min-width:0;}
.ej-fila-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--t-base);font-weight:600;line-height:1.3;overflow-wrap:anywhere;}
.ej-fila-t b{margin-right:4px;font-family:var(--mono);color:var(--gold-ink);}
.ej-fila-s{margin-top:2px;font-size:var(--t-xs);color:var(--text-3);}
.ej-fila-q{flex:none;font-size:var(--t-base);font-weight:700;color:var(--text);white-space:nowrap;}
.ej-fila-th{position:relative;flex:none;padding:0;border:0;background:none;cursor:pointer;}
.ej-fila-th .st-thumb{display:block;}
.ej-fila-n{position:absolute;right:-5px;bottom:-5px;padding:1px 5px;border-radius:2px;background:var(--ink);color:#fff;font:700 var(--t-micro)/1.3 var(--mono);}
.ej-fila-sin{display:flex;align-items:center;justify-content:center;color:var(--text-3);}
.ej-fila-ch{display:flex;flex-wrap:wrap;gap:6px;}
.ej-fila-ac{display:flex;align-items:center;gap:6px;}
.ej-fila-desc{flex:1 1 100%;margin:0;font-size:var(--t-sm);line-height:1.5;color:var(--text-2);}
.ej-fila .rechazo-nota,.ej-fila .ent-correccion{flex:1 1 100%;margin:0;}
.ej-fila-x{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.ej-ent .cp-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%;}
.ej-ent .cp-chips:empty{display:none;}
.ej-ent.nuevo{animation:ejNuevo 2.6s ease-out 1;}
@keyframes ejNuevo{0%{background:var(--gold-soft);box-shadow:inset 3px 0 0 var(--gold-deep),0 0 0 2px var(--gold);}
100%{background:var(--surface);box-shadow:inset 3px 0 0 transparent,0 0 0 0 transparent;}}
.ej-bloque{background:var(--surface);border:1px solid var(--st-hair);border-radius:2px;}
.ej-bloque-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 16px;border-bottom:1px solid var(--st-hair-2);}
.ej-bloque-t{flex:1 1 220px;min-width:0;margin:0;font-size:var(--t-base);font-weight:600;line-height:1.35;overflow-wrap:anywhere;}
.ej-bloque-t b{font-family:var(--mono);color:var(--gold-ink);}
.ej-bloque-ch{display:flex;flex-wrap:wrap;gap:6px;}
.ej-bloque-b{display:flex;flex-wrap:wrap;gap:14px;padding:14px 16px;}
.ej-bloque-f{display:flex;flex-wrap:wrap;gap:8px;}
.ej-bloque-d{flex:1 1 220px;min-width:0;}
.ej-ent-q{font-size:var(--t-base);line-height:1.6;}
.ej-ent-q b{font-family:var(--mono);}
.ej-ent-desc{margin:8px 0 0;font-size:var(--t-sm);line-height:1.55;color:var(--text-2);}
.ej-ent-m{margin-top:8px;font-size:var(--t-xs);color:var(--text-3);}
.ej-bloque .rechazo-nota,.ej-bloque .ent-correccion{margin:0 16px 12px;}
.ej-bloque .ent-acts{margin:0;padding:0 16px 14px;}
/* Un día anterior. */
.ej-dia .st-card-h{flex-wrap:wrap;}
.ej-dia-s{margin-top:3px;font-size:var(--t-xs);color:var(--text-3);}
.ej-ok{color:var(--bueno);font-weight:600;} .ej-pend{color:var(--checar);font-weight:600;} .ej-mal{color:var(--critico);font-weight:600;}
.ej-dia-ac{display:flex;flex-wrap:wrap;gap:8px;}
.ej-dia-b{padding:14px 16px;}
.ej-mas-dias{padding:14px 16px;text-align:center;}
.ej-mas-dias .hint{margin:0 0 10px;}
.ej-mas-dias .macts{justify-content:center;}
.ej-avance.card.panel{margin-bottom:0;}
/* Lo que sigue en el teléfono. */
.ej-cola .st-card-b{padding:6px 16px 12px;}
.ej-cola-f{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 0;border-bottom:1px solid var(--st-hair-2);}
.ej-cola-t{flex:1 1 200px;min-width:0;font-size:var(--t-sm);overflow-wrap:anywhere;}
.ej-cola-t b{font-family:var(--mono);color:var(--gold-ink);}
.ej-cola-m{font-size:var(--t-xs);color:var(--text-3);}
.ej-cola .hint{margin:8px 0 0;}
/* ---- Programado: las partidas de hoy y de la semana ---- */
.ej .ag-hoy{border:1px solid var(--st-hair);background:var(--st-canvas);color:var(--text-2);}
.ej .ag-item{padding:12px 14px;border-color:var(--st-hair);background:var(--surface);transition:border-color .2s ease, background-color .2s ease;}
.ej .ag-item:hover{background:var(--st-sel);box-shadow:inset 3px 0 0 var(--gold-deep);}
.ej .ag-item.listo{border-color:var(--st-ok-bd);background:var(--st-ok-bg);}
.ej .ag-item.atrasada{border-color:var(--st-crit-bd);background:var(--st-crit-bg);}
.ej .ag-cod{font-family:var(--mono);font-size:var(--t-sm);letter-spacing:.02em;}
.ej .ag-item.listo .ag-cod{color:var(--st-ok);}
.ej .ag-item.atrasada .ag-cod{color:var(--st-crit);}
.ej .ag-meta{font-size:var(--t-sm);color:var(--text-2);}
.ej .ag-meta .tag{border:1px solid var(--st-hair);border-radius:2px;background:var(--st-canvas);color:var(--text-2);}
.ej .ag-btns .btn{min-height:44px;}
@media (prefers-reduced-motion:reduce){ .ej .ag-item{transition:none;} }
/* ---- Personal por especialidad ---- */
.ej-esp.card.panel{padding:0;margin-bottom:18px;}
.ej-esp .st-card-b{padding:14px 16px 18px;}
.ej-esp .panel-s{margin:0 0 10px;}
.ej-esp .esp-lista{max-height:none;overflow:visible;gap:0;}
.ej-esp .esp-fila{min-height:48px;padding:2px 0;border:0;border-bottom:1px solid var(--st-hair-2);border-radius:0;background:transparent;}
.ej-esp .esp-n{font-size:var(--t-md);}
.ej-esp .esp-contador{gap:6px;}
.ej-esp .cap-paso{width:44px;height:44px;min-width:44px;border-radius:2px;font-size:22px;line-height:1;}
.ej-esp .esp-num{min-width:36px;font-size:var(--t-lg);font-family:var(--mono);}
.ej-esp .esp-total{font-size:var(--t-sm);}
.ej-sinepp{margin:16px 0 0;}
.ej-sinepp input{max-width:140px;}
.ej-resumen-esp{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;padding:6px 6px 6px 14px;}
.ej-resumen-t{flex:1;min-width:0;font-size:var(--t-base);font-weight:600;line-height:1.35;}
.ej-resumen-esp .btn{flex:none;min-height:44px;}
.ej-esp>.ej-cta{border-radius:0 0 2px 2px;}
.st .grupo-dia{border:1px solid var(--st-hair);border-radius:2px;background:var(--surface);}
.ej-kpis{margin-bottom:18px;}
/* ---- Escritorio: captura fija a la izquierda, entradas a la derecha ---- */
@media (min-width:1100px){
.ej .solo-cel{display:none !important;}
.ej .ej-tabs.solo-esc{display:flex;margin-bottom:12px;}
.ej-tab{flex:0 0 auto;padding:0 16px;}
.ej:not(.ej-sin-form) .ej-izq,.ej:not(.ej-sin-form) .ej-der{display:block !important;}
.ej .st-fija{max-height:calc(100vh - var(--st-top) - 14px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;}
.ej-tit h2{display:block;}
.ej-paso-cel{display:none;}
.ej-pasos{display:grid;}
/* Con el título en la tarjeta, el de la barra de arriba sobra: queda solo el buscador. */
body:has(#ej-raiz) .topbar>div:first-child{display:none;}
body:has(#ej-raiz) .topbar .acts{margin-left:auto;}
}
@media (max-width:1099px){
.ej-tit h2{display:none;}
.ej-tit{padding-top:8px;}
.ej-tit-s{margin-top:0;}
}
@media (min-width:721px){ .ej-hoy-ac{display:none;} }
/* ---- Celular ---- */
@media (max-width:720px){
.ej{--ej-pad:14px;}
.ej-chips{padding-top:12px;}
/* El encabezado se queda en lo que sirve a la mano: obra y día, personal, entradas, fotos y el paso en que va. */
.ej-chips,.ej-tit{display:none;}
.ej-filtros{display:contents;}
.ej-toolbar .st-seg{margin-left:auto;}
.ej:has(.ej-resumen-esp) .ej-cinta-pers{display:none;}
.ej-cinta{padding-top:10px;padding-bottom:10px;}
.ej-cinta-firma,.ej-cinta-estado{display:none;}
.ej-cinta>*{padding:0 14px 0 0;border-left:0;}
.ej-hoy-ac{margin-bottom:10px;}
.ej-hoy-ac .btn{width:100%;min-height:44px;justify-content:center;}
.ej-pasos-c{padding-top:12px;padding-bottom:12px;}
/* Capturando, lo de cerrar el día no estorba: se ve en «Programado» y «Hoy». */
.ej[data-tab="reportar"] .ej-acc{display:none;}
/* Ya habilitado, «Finalizar día» queda fijo encima de la barra de abajo, al alcance del pulgar (en «Capturar» manda «Guardar avance»). */
.ej[data-tab="agenda"] .ej-fin.lista,.ej[data-tab="hoy"] .ej-fin.lista{display:block;position:fixed;left:0;right:0;bottom:var(--ic3-nav);z-index:67;
padding:10px 14px;border-top:1px solid var(--st-hair-3);background:var(--surface);}
.ej[data-tab="agenda"] .ej-fin.lista .btn,.ej[data-tab="hoy"] .ej-fin.lista .btn{width:100%;min-height:48px;justify-content:center;font-size:var(--t-md);font-weight:700;}
.ej[data-tab="agenda"]:has(.ej-fin.lista),.ej[data-tab="hoy"]:has(.ej-fin.lista){padding-bottom:84px;}
body:has(#barra-off:not(.hide)) .ej[data-tab="agenda"] .ej-fin.lista,body:has(#barra-off:not(.hide)) .ej[data-tab="hoy"] .ej-fin.lista{bottom:calc(var(--ic3-nav) + 56px);}
body:has(.ej-fin.lista):has(#sidebar:not(.hide)) .toast{bottom:calc(var(--ic3-nav) + 76px);}
.ej-cap-b{padding:12px 12px 16px;}
.ej-cap.card.panel{padding-bottom:96px;}
.ej-cap .st-card-h{padding:10px 12px;}
/* «Guardar avance» fijo, encima de la barra de abajo; sube cuando hay algo capturado. */
.ej-cta{position:fixed;left:0;right:0;bottom:var(--ic3-nav);z-index:68;padding:10px 14px;border-top:1px solid var(--st-hair-3);
transform:translateY(calc(100% + var(--ic3-nav)));visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s;}
.ej-cta.on{transform:none;visibility:visible;transition:transform .2s ease;}
.ej-cap>.ej-cta,.ej-esp>.ej-cta{border-radius:0;}
.ej-esp.card.panel{padding-bottom:84px;}
.ej-cant .st-unit>input{min-height:68px;font-size:32px;--campo-fs:32px;}
.ej-fila{padding:10px 12px;}
.ej-fila-2{margin-left:0;width:100%;}
.ej-bloque-b{padding:12px;}
/* Las pestañas de la obra no se cortan: se reparten el ancho y el rótulo del grupo se va. */
body:has(#sec-avance.on) .cv-lb,body:has(#sec-pendientes.on) .cv-lb,body:has(#sec-revision.on) .cv-lb{display:none;}
body:has(#sec-avance.on) .cv-barra,body:has(#sec-pendientes.on) .cv-barra,body:has(#sec-revision.on) .cv-barra{overflow-x:visible;}
body:has(#sec-avance.on) .cv-t,body:has(#sec-pendientes.on) .cv-t,body:has(#sec-revision.on) .cv-t{flex:1 1 0;min-width:0;display:flex;align-items:center;
justify-content:center;padding:8px 4px;font-size:var(--t-xs);letter-spacing:.02em;}
body:has(#sec-avance.on) .cv-n,body:has(#sec-pendientes.on) .cv-n,body:has(#sec-revision.on) .cv-n{margin-left:4px;padding:1px 4px;}
}
/* Con ratón no hay cámara que abrir: queda un solo botón para elegir las fotos. */
.ej-gal-d{display:none;}
@media (pointer:fine){
.ej-foto-btn.camara{display:none;}
.ej-foto-b{grid-template-columns:1fr;}
.ej-gal-t{display:none;}
.ej-gal-d{display:inline;}
}
/* ---- Tema oscuro: los colores salen de las variables; solo lo que fijaba el claro ---- */
:root[data-tema="oscuro"] .ej-paso.hecho>i{color:var(--os-sobre-oro);}
:root[data-tema="oscuro"] .ej-cant .st-unit>input,:root[data-tema="oscuro"] .ej-foto-btn,:root[data-tema="oscuro"] .ej-tipo,:root[data-tema="oscuro"] .ej-prog{background:var(--os-captura);}
:root[data-tema="oscuro"] .ej-foto-btn.camara,:root[data-tema="oscuro"] .ej-tipo.on{background:var(--gold-soft);}
:root[data-tema="oscuro"] .ej-prog.listo{background:var(--bueno-bg);}
:root[data-tema="oscuro"] .ej-fila-n{background:var(--os-tinta);}
:root[data-tema="oscuro"] .ej-cta{background:var(--surface);}
/* ============================================================
REPORTE DE VISITA · STITCH (8 oct)
La pantalla del reporte de visita con el acabado de la capa «ESTILO STITCH»: encabezado en tarjeta con su cinta,
la captura fija a la izquierda y la lista a la derecha (escritorio) o una sola columna con la cámara primero y la
acción de guardar fija abajo (celular). Las piezas que viajan con el fantasma del arrastre (filas y bloques) no
dependen de ningún ancestro: la copia vive en el body.
============================================================ */
.st-vi{--st-top:calc(106px*var(--esc,1));display:block;}
@media (min-width:901px){ body:has(.st-vi) .topbar{display:none;} }
@media (max-width:900px){ body:has(.st-vi) .topbar>div:first-child{display:none;} body:has(.st-vi) .topbar .acts{margin-left:auto;} }
.st-dot{background:var(--c,currentColor);}
.vi-solo-cel{display:none;}
/* ---- Encabezado en tarjeta ---- */
.vi-cab{padding:18px 22px 14px;margin-bottom:20px;}
.vi-cab-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:14px;}
.vi-cab-chips .st-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.vi-cab-chips .st-chip svg{flex:none;}
.vi-cab-fila{display:flex;align-items:center;justify-content:space-between;gap:14px 18px;flex-wrap:wrap;padding-bottom:14px;
border-bottom:1px solid var(--st-hair-2);}
.vi-cab-t{flex:1 1 320px;min-width:0;}
.vi-h{margin:0;font-family:var(--slab);font-size:var(--t-xl);font-weight:600;letter-spacing:-.02em;line-height:1.2;
overflow-wrap:anywhere;}
.vi-sub{margin:5px 0 0;font-size:var(--t-sm);color:var(--text-3);}
.vi-cab-acc{display:flex;align-items:center;flex-wrap:wrap;gap:10px;}
.vi-global{display:flex;align-items:center;gap:8px;width:260px;max-width:100%;min-height:36px;padding:0 8px 0 10px;border:1px solid var(--st-hair-3);border-radius:2px;
background:var(--surface-2);color:var(--text-3);font:inherit;font-size:var(--t-sm);text-align:left;cursor:text;}
.vi-global:hover{border-color:var(--text-3);}
.vi-global>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vi-global svg{flex:none;}
.vi-global kbd{flex:none;font-family:var(--mono);}
.vi-buscar{position:relative;display:flex;align-items:center;flex:1 1 220px;min-width:0;}
.vi-buscar>svg{position:absolute;left:10px;color:var(--text-3);pointer-events:none;}
.vi-buscar input{width:100%;min-height:36px;padding:6px 10px 6px 34px;border:1px solid var(--st-hair-3);border-radius:2px;
background:var(--surface-2);color:var(--text);font:inherit;font-size:var(--t-sm);}
.vi-buscar input::placeholder{color:var(--text-3);}
.vi-buscar input:focus{outline:none;border-color:var(--gold-deep);box-shadow:inset 0 0 0 1px var(--gold-deep);}
.vi-ver,.vi-ajustes>.btn{min-height:36px;}
.vi-ajustes{position:relative;display:inline-flex;}
/* Menú que se abre bajo un botón: esquinas rectas, línea fina y la sombra dura de Stitch. */
.st-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:60;min-width:250px;padding:4px;background:var(--surface);
border:1px solid var(--st-hair-3);border-radius:2px;box-shadow:2px 2px 0 0 rgba(30,32,36,.12);display:flex;flex-direction:column;}
.st-menu>button{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:7px 12px;border:0;border-radius:2px;
background:none;color:var(--text);font:inherit;font-size:var(--t-sm);text-align:left;cursor:pointer;}
.st-menu>button svg{flex:none;color:var(--text-3);}
.st-menu>button:hover,.st-menu>button:focus-visible{background:var(--st-sel);}
/* La cinta: quien firma, el nombre de «Registro», el semáforo y los conteos a la derecha. */
.vi-cinta{margin-top:12px;font-size:var(--t-sm);}
.vi-firma-c{gap:8px;}
.vi-av{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;border-radius:50%;
border:1px solid var(--gold-light);background:var(--gold-soft);color:var(--gold-ink);font-family:var(--mono);font-size:10px;font-weight:700;}
.vi-link{padding:0 2px;border:0;background:none;color:var(--gold-ink);font:inherit;font-weight:600;text-decoration:underline;
text-underline-offset:2px;cursor:pointer;}
.vi-link:hover{color:var(--text);}
.st-ribbon>.vi-cuentas{margin-left:auto;padding-right:0;border-left:0;gap:8px;}
/* ---- Captura ---- */
.st-cap{display:flex;flex-direction:column;}
.vi-cap-b{display:flex;flex-direction:column;gap:14px;}
.vi-cap-b .fld{margin:0;}
.vi-cap-b .hint{margin-top:6px;font-size:var(--t-xs);}
.vi-cap-b .fld>label,.vi-et,.vi-desc-h>label{display:block;margin:0 0 6px;font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--text-3);}
.vi-nota-modo{margin:0;font-size:var(--t-xs);color:var(--text-3);}
.vi-borr{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:9px 12px;border:1px solid var(--st-ok-bd);border-radius:2px;
background:var(--st-ok-bg);color:var(--st-ok);font-size:var(--t-sm);}
.vi-fh{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.vi-fh.con-estado{grid-template-columns:repeat(3,minmax(0,1fr));}
.vi-cap-b .fld input:not([type=checkbox]):not([type=file]),.vi-cap-b .fld select,.vi-cap-b .fld textarea{font-size:var(--t-base);}
.vi-f-titulo input{font-weight:600;}
.vi-cap-b .fld textarea{min-height:84px;line-height:1.5;resize:vertical;}
.vi-hoy,.vi-f-semch,.vi-recientes,.vi-mic,.vi-volver{display:none;}
.vi-desc-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.vi-desc-h>label{margin:0;}
.vi-desc-acc{display:inline-flex;align-items:center;gap:8px;}
.vi-dic-est{margin-top:6px;font-size:var(--t-sm);color:var(--text-2);}
.vi-dic-est.viva{color:var(--critico);font-weight:650;}
.vi-motivo{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.vi-motivo>label{margin:0;}
.vi-motivo-chips{display:flex;flex-wrap:wrap;gap:8px;}
.vi-motivo .hint{margin:0;}
.st-vi details.mas-datos summary{padding:4px 0;font-size:var(--t-sm);color:var(--text-2);cursor:pointer;}
.st-vi details.mas-datos[open] summary{margin-bottom:8px;}
.vi-evid-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.vi-evid-h .vi-et{margin:0;}
.vi-evid-n{font-size:var(--t-xs);color:var(--text-3);text-align:right;}
.vi-drop{justify-content:center;}
.vi-drop .btn{min-height:36px;}
.vi-drop-t{font-size:var(--t-xs);color:var(--text-3);}
.vi-evid.soltar .st-drop{border-color:var(--gold-deep);background:var(--gold-soft);}
.vi-evid .thumbs{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;margin-top:10px;}
.vi-evid-pie{margin:8px 0 0;}
.vi-evid .thumb{border-radius:2px;}
.vi-evid .thumb img{object-fit:contain;background:var(--surface-3);}
.vi-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-top:1px solid var(--st-hair);}
.vi-atajo{font-size:var(--t-xs);color:var(--text-3);}
.vi-cta{display:none;}
/* Escritorio ancho: la captura queda fija y, si no cabe en el alto, se desplaza por dentro con su pie a la vista. */
@media (min-width:1100px){
.st-cap{max-height:calc(100vh - var(--st-top) - 16px);}
.st-cap .st-card-b{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;}
/* La captura ya está a la vista: el botón flotante sobra y taparía la lista. */
body:has(.st-vi) .fab,body:has(.st-vi) .fab-menu{display:none !important;}
}
/* ---- Lista ---- */
.vi-der{min-width:0;display:flex;flex-direction:column;gap:12px;}
.vi-tool{flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:10px;}
.vi-tool>*{min-width:0;max-width:100%;}
.vi-tool-1{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;}
.vi-filtros{display:flex;flex-wrap:wrap;gap:6px;min-width:0;}
.vi-lote-barra{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:7px 10px;border:1px solid var(--st-ok-bd);border-radius:2px;
background:var(--st-ok-bg);color:var(--st-ok);font-size:var(--t-sm);}
.vi-lote-barra:empty{display:none;}
.vi-lote-barra .vi-link{color:var(--st-ok);}
.vi-tool-der{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;}
.vi-todas{display:inline-flex;align-items:center;gap:8px;min-height:30px;font-size:var(--t-xs);color:var(--text-2);cursor:pointer;}
.vi-der .ord-barra{margin:0;}
.vi-lista{display:flex;flex-direction:column;gap:10px;}
.vi-lista>*{scroll-margin-top:calc(120px*var(--esc,1));}
.vi-vacio .empty{padding:34px 20px;}
/* Estado de la entrada: chip con el punto de su color. */
.vi-estado{gap:7px;}
.vi-estado .st-dot{width:9px;height:9px;}
.vi-estado svg{flex:none;color:var(--text-3);}
button.vi-estado{font:inherit;font-size:var(--t-xs);font-weight:500;cursor:pointer;}
button.vi-estado:hover{border-color:var(--gold-deep);}
button.vi-estado.vacio{border-style:dashed;color:var(--text-3);}
/* Miniatura: la foto completa, sin recorte, sobre fondo neutro. */
.vi-thumb{position:relative;display:inline-block;flex:none;width:44px;height:44px;padding:0;border:0;background:none;color:var(--text-3);cursor:pointer;}
.vi-thumb .st-thumb{display:block;width:100%;height:100%;object-fit:contain;background:var(--surface-3);}
.vi-thumb-g{width:96px;height:96px;}
.vi-thumb-n{position:absolute;right:2px;bottom:2px;min-width:16px;padding:0 4px;background:rgba(20,18,16,.8);color:#fff;
font-family:var(--mono);font-size:10px;line-height:16px;text-align:center;}
.vi-sinfoto{display:inline-flex;align-items:center;justify-content:center;border:1px dashed var(--st-hair-3);border-radius:2px;cursor:default;}
.vi-sinfoto svg{opacity:.7;}
/* Fila */
.vi-fila .ent-manija,.vi-bloque .ent-manija{position:static;flex:none;width:24px;height:32px;margin:0 -4px 0 -6px;border:0;background:none;
color:var(--text-3);opacity:.8;}
.vi-fila .ent-manija:hover,.vi-bloque .ent-manija:hover{color:var(--gold-ink);opacity:1;}
.vi-fila-t{flex:1 1 0;min-width:0;}
.vi-tit{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:var(--t-base);font-weight:650;line-height:1.3;letter-spacing:-.005em;overflow-wrap:anywhere;}
.vi-tit .st-chip{margin-left:6px;vertical-align:1px;}
.vi-meta{margin-top:3px;font-size:var(--t-xs);line-height:1.5;color:var(--text-3);}
.vi-gps{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;vertical-align:bottom;}
.vi-gps svg{flex:none;}
.vi-fila-acc{display:flex;align-items:center;gap:8px;flex:none;}
/* Bloque */
.vi-bloque{padding:0;}
.vi-bloque-h{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--st-hair-2);}
.vi-bloque-t{flex:1 1 0;min-width:0;margin:0;font-size:var(--t-base);font-weight:650;letter-spacing:-.005em;line-height:1.3;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vi-bloque-acc{display:flex;align-items:center;gap:8px;flex:none;}
.vi-bloque-b{display:flex;align-items:flex-start;gap:16px;padding:14px 16px;}
.vi-bloque-d{flex:1 1 0;min-width:0;}
.vi-desc{margin:0;font-size:var(--t-base);line-height:1.55;color:var(--text);overflow-wrap:anywhere;}
.vi-desc.vi-sin{color:var(--text-3);}
.vi-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;}
.vi-extra{display:flex;align-items:center;gap:6px;margin-top:10px;}
.vi-mas{font-family:var(--mono);font-size:var(--t-xs);color:var(--text-3);}
.vi-bloque-d .mini{margin-top:8px;}
/* ---- Visor de fotos: oscuro en los dos temas; los datos, con los colores del tema ---- */
.st-visor{position:fixed;inset:0;z-index:180;display:flex;flex-direction:column;background:#141210;color:#F2EEE2;}
.st-visor-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:6px 12px 6px 16px;
background:#1C1917;border-bottom:1px solid #2E2B25;}
.st-visor-t{display:flex;flex-direction:column;min-width:0;line-height:1.25;}
.st-visor-t .st-eyebrow{color:#D9C184;}
.st-visor-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-base);font-weight:650;}
.st-visor-x{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid #3F3C33;border-radius:2px;
background:transparent;color:#F2EEE2;font:inherit;font-size:var(--t-sm);cursor:pointer;}
.st-visor-x:hover{border-color:#D9C184;color:#D9C184;}
.st-visor-cuerpo{flex:1 1 auto;min-height:0;display:flex;}
.st-visor-img{position:relative;flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;padding:16px 64px;}
.st-visor-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.st-visor-nav{position:absolute;top:50%;width:48px;height:72px;margin-top:-36px;padding:0;border:1px solid #3F3C33;border-radius:2px;
background:rgba(20,18,16,.72);color:#F2EEE2;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.st-visor-nav:first-child{left:8px;}
.st-visor-nav:last-child{right:8px;}
.st-visor-nav:hover{border-color:#D9C184;color:#D9C184;}
.st-visor-nav:disabled{display:none;}
.st-visor-info{flex:0 0 300px;display:flex;flex-direction:column;gap:12px;padding:16px;overflow-y:auto;background:var(--surface);color:var(--text);
border-left:1px solid var(--st-hair);}
.st-visor-info dl{margin:0;display:flex;flex-direction:column;gap:10px;}
.st-visor-f{display:flex;flex-direction:column;gap:2px;}
.st-visor-f dt{font-size:var(--t-xs);color:var(--text-3);}
.st-visor-f dd{margin:0;font-family:var(--mono);font-size:var(--t-sm);font-weight:600;overflow-wrap:anywhere;}
.st-visor-desc{align-self:flex-start;margin-top:auto;text-decoration:none;}
/* ---- Celular: una columna, cámara primero ---- */
@media (max-width:720px){
.vi-solo-esc{display:none;}
.vi-solo-cel{display:inline;}
.vi-cab{padding:14px 14px 10px;margin-bottom:14px;}
.vi-cab-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -14px 10px;padding:0 14px 6px;scrollbar-width:none;}
.vi-cab-chips::-webkit-scrollbar{display:none;}
.vi-cab-chips>*{flex:none;}
.vi-cab-fila{flex-direction:column;align-items:stretch;gap:10px;padding-bottom:12px;}
.vi-cab-t{flex:0 0 auto;}
.vi-h{font-size:18px;}
.vi-sub{display:none;}
.vi-cab-acc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;}
.vi-global{display:none;}
.vi-ver,.vi-ajustes>.btn{min-height:48px;justify-content:center;}
.vi-ajustes>.btn span{display:none;}
.vi-cinta{font-size:13px;row-gap:8px;}
.st-ribbon>.vi-cuentas{display:none;}
.vi-link{min-height:44px;padding:0 6px;vertical-align:middle;}
.st-cap .st-card-h{padding:12px 14px;}
.vi-cap-b{padding:14px;gap:16px;}
.vi-cap-b>.vi-borr{order:-2;}
.vi-cap-b>.bor-aviso{order:-2;}
.vi-cap-b>.vi-evid{order:-1;}
.vi-nota-modo{display:none;}
.vi-cap-b .fld>label,.vi-et,.vi-desc-h>label{font-size:12px;}
.vi-cap-b .fld input:not([type=checkbox]):not([type=file]),.vi-cap-b .fld select,.vi-cap-b .fld textarea{font-size:16px;min-height:48px;padding:11px 13px;}
.vi-cap-b .fld textarea{min-height:112px;}
.vi-f-sem{display:none;}
.vi-obra .vi-fh{display:none;}
/* En «En oficina» solo quedan la fecha y la hora (el estado va en chips): dos columnas, no tres con una vacía. */
.vi-fh,.vi-fh.con-estado{grid-template-columns:repeat(2,minmax(0,1fr));}
.vi-hoy{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:0 14px;border:1px solid var(--st-hair-3);border-radius:2px;
background:var(--st-canvas);color:var(--text);font:inherit;font-size:15px;font-weight:600;text-align:left;cursor:pointer;}
.vi-hoy b{font-family:var(--mono);font-weight:600;}
.vi-hoy em{margin-left:auto;font-style:normal;font-size:13px;font-weight:600;color:var(--gold-ink);}
.vi-f-semch{display:block;}
.vi-semchips{display:flex;flex-wrap:wrap;gap:8px;}
.vi-semchip{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border:1px solid var(--st-hair-3);border-radius:2px;
background:var(--surface);color:var(--text);font:inherit;font-size:15px;cursor:pointer;}
.vi-semchip .st-dot{width:10px;height:10px;}
.vi-semchip.on{padding:0 15px;border:2px solid var(--text);font-weight:650;}
.vi-recientes{display:flex;flex-wrap:nowrap;gap:8px;margin:10px -14px 0;padding:0 14px 4px;overflow-x:auto;scrollbar-width:none;}
.vi-recientes::-webkit-scrollbar{display:none;}
.vi-reciente{flex:none;min-height:44px;max-width:72%;padding:0 14px;font-size:14px;overflow:hidden;text-overflow:ellipsis;cursor:pointer;}
.vi-mic{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--gold-deep);border-radius:2px;
background:var(--gold-soft);color:var(--gold-ink);font:inherit;font-size:14px;font-weight:650;cursor:pointer;}
.vi-mic.on{border-color:var(--critico);background:var(--critico);color:var(--os-sobre-rojo,#fff);}
.vi-dic-est{font-size:13px;}
.vi-motivo-chips .st-chip{min-height:44px;padding:0 14px;font-size:14px;cursor:pointer;}
.vi-evid-n{font-size:12px;}
.vi-drop{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0;border:0;background:none;}
.vi-drop .btn{min-height:60px;justify-content:center;font-size:16px;}
.st-vi .vi-drop .vi-b-foto{border-color:var(--gold-deep);background:var(--gold);color:var(--ink);font-weight:700;}
.st-vi .vi-drop .vi-b-foto:hover{background:var(--gold-light);}
.vi-drop-t{display:none;}
.vi-evid .thumbs{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;}
.vi-evid .thumb .x{top:0;right:0;width:44px;height:44px;background:none;}
.vi-evid .thumb .x::before{content:"";position:absolute;inset:8px;border-radius:50%;background:rgba(18,18,18,.78);}
.vi-evid .thumb .x svg{position:relative;color:#fff;}
.vi-pie{display:none;}
/* La acción de guardar queda fija abajo, encima de la barra de navegación, y solo se ve cuando hay algo capturado. */
.st-cap.hay .vi-cta{display:block;position:sticky;bottom:var(--ic3-nav);z-index:40;padding:10px 12px;background:var(--surface);
border-top:1px solid var(--st-hair-3);}
.vi-cta .st-cta{width:100%;}
body:has(#barra-off:not(.hide)) .st-cap.hay .vi-cta{bottom:calc(var(--ic3-nav) + 56px);}
body:has(.st-cap.hay):has(#sidebar:not(.hide)) .toast{bottom:calc(var(--ic3-nav) + 76px);}
.vi-tool{padding:8px;}
.vi-tool-1{flex-direction:column;align-items:stretch;}
.vi-buscar{flex:none;}
.vi-buscar input{min-height:48px;font-size:16px;padding-left:38px;}
/* Los filtros van en una sola fila que se desliza: tres filas de botones alejaban la lista de la pantalla. */
.vi-filtros{flex-wrap:nowrap;gap:6px;margin:0 -8px;padding:0 8px 4px;overflow-x:auto;scrollbar-width:none;}
.vi-filtros::-webkit-scrollbar{display:none;}
.vi-filtros>.st-filtro{flex:none;}
.st-vi details.mas-datos summary{min-height:44px;padding:12px 0;box-sizing:border-box;}
/* En «En oficina» la fecha y la hora se editan; para volver a las de ahora no hace falta subir hasta el conmutador. */
.vi-volver{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--gold-ink);
font:inherit;font-size:15px;font-weight:650;text-decoration:underline;text-underline-offset:3px;cursor:pointer;align-self:flex-start;}
.st-filtro{font-size:13px;}
.vi-todas{min-height:44px;font-size:13px;}
.vi-tool-der{width:100%;justify-content:space-between;margin-left:0;}
.vi-lista{gap:10px;}
/* Fila: la miniatura y el título arriba; el número, las casillas y las acciones abajo. */
.vi-fila{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto auto;
grid-template-areas:"th tit tit tit tit" "th est est est est" "num chk asa ed bo";
column-gap:10px;row-gap:8px;align-items:center;padding:12px;}
.vi-fila>.vi-thumb,.vi-fila>.vi-sinfoto{grid-area:th;width:56px;height:56px;align-self:start;}
.vi-fila>.vi-fila-t{grid-area:tit;align-self:start;}
.vi-fila>.st-num{grid-area:num;justify-self:start;}
.vi-fila>.st-tap{grid-area:chk;justify-self:start;}
.vi-fila>.ent-manija{grid-area:asa;width:44px;height:44px;margin:0;}
.vi-fila-acc{display:contents;}
.vi-fila-acc>.vi-estado{grid-area:est;justify-self:start;min-height:44px;font-size:13px;}
.vi-fila-acc>.st-hd{display:none;}
.vi-fila-acc>[data-vi-editar]{grid-area:ed;}
.vi-fila-acc>[data-vi-borrar]{grid-area:bo;}
.vi-tit{font-size:15px;}
.vi-meta{font-size:13px;}
/* Bloque */
.vi-bloque-h{flex-wrap:wrap;gap:8px 10px;padding:10px 12px;}
.vi-bloque-t{order:6;flex:1 1 100%;white-space:normal;font-size:15px;}
.vi-bloque-acc{display:contents;}
.vi-bloque-h>.ent-manija{order:1;width:44px;height:44px;margin:0;}
.vi-bloque-h>.st-tap{order:2;}
.vi-bloque-h>.st-num{order:3;margin-right:auto;}
.vi-bloque-acc>[data-vi-editar]{order:4;}
.vi-bloque-acc>[data-vi-borrar]{order:5;}
.vi-bloque-acc>.vi-estado{order:7;min-height:44px;font-size:13px;}
.vi-bloque-b{gap:12px;padding:12px;}
.vi-thumb-g{width:80px;height:80px;}
.vi-desc{font-size:15px;}
.vi-chips .st-chip{font-size:13px;}
/* Visor: la foto arriba y los datos abajo. */
.st-visor-cuerpo{flex-direction:column;}
.st-visor-img{padding:8px 44px;}
.st-visor-nav{width:40px;height:64px;margin-top:-32px;}
.st-visor-nav:first-child{left:2px;}
.st-visor-nav:last-child{right:2px;}
.st-visor-info{flex:0 0 auto;max-height:42%;border-left:0;border-top:1px solid var(--st-hair);padding:12px 14px;}
.st-visor-x{min-height:44px;}
.st-visor-esc{display:none;}
.st-visor-desc{margin-top:0;min-height:44px;}
}
/* Los teléfonos más angostos: «Tomar foto» sigue en una sola línea. */
@media (max-width:380px){
.vi-drop .btn{gap:6px;padding:0 8px;font-size:15px;}
}
/* Pantallas táctiles: lo que se toca mide al menos 44 px. */
@media (pointer:coarse){
.st-vi .st-menu>button{min-height:44px;}
.st-vi .vi-todas,button.vi-estado{min-height:44px;}
.vi-global kbd{display:none;}
.st-vi .st-check{position:relative;}
.st-vi .st-check::after{content:"";position:absolute;inset:-11px;}
.vi-thumb{min-width:44px;min-height:44px;}
.st-vi .vi-atajo{display:none;}
.st-visor-nav{width:48px;height:72px;}
}
@media (prefers-reduced-motion:reduce){ .st-vi *{scroll-behavior:auto;} }
/* MENSAJES · TARJETA DE OBRA Y SISTEMA (8 oct) */
/* La tarjeta de obra dentro de la conversación (Mensajes v2, §8): filete del color de su estado, etiqueta, título, detalle y botón. */
.msj-card{--msj-t:var(--neutro);width:420px;max-width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:6px;padding:12px 14px;
background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--msj-t);border-radius:4px;text-align:left;color:var(--text);
transition:transform .2s cubic-bezier(.22,.75,.28,1),box-shadow .2s,border-color .2s;}
.msj-card.t-bueno{--msj-t:var(--bueno);} .msj-card.t-checar{--msj-t:var(--checar);}
.msj-card.t-critico{--msj-t:var(--critico);} .msj-card.t-ajustado{--msj-t:var(--ajustado);}
.msj-card.abre{cursor:pointer;}
.msj-card.abre:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(35,35,32,.10);border-color:var(--gold);border-top-color:var(--msj-t);}
.msj-card:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px;}
.msj-card.apagada{background:var(--surface-2);}
.msj-card.apagada .msj-card-t{color:var(--text-2);font-weight:600;}
.msj-card-h{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.msj-card-k{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10.5px;font-weight:700;letter-spacing:.15em;
text-transform:uppercase;color:var(--text-3);}
.msj-card-h .tag{flex:none;}
.msj-card-t{font-size:15px;font-weight:650;line-height:1.3;overflow-wrap:anywhere;}
.msj-card-s{font-size:13px;line-height:1.4;color:var(--text-2);overflow-wrap:anywhere;}
.msj-card-b{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;margin-top:3px;font-size:13px;font-weight:650;color:var(--gold-ink);}
.msj-card-b svg.i{width:14px;height:14px;}
/* La línea de sistema: gris, centrada, sin autor. Si lleva una tarjeta que se alcanza, se pulsa. */
.msj-sys{max-width:min(92%,560px);text-align:center;line-height:1.4;}
.msj-sys svg.i{width:14px;height:14px;flex:none;}
.msj-sys.abre{cursor:pointer;border-radius:3px;}
.msj-sys.abre:hover span{color:var(--text-2);text-decoration:underline;}
.msj-sys:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px;}
/* Al llegar a la pantalla de una tarjeta, el renglón al que lleva se enciende un momento. */
.msj-resalta{animation:msjResalta 1.8s ease-out;}
@keyframes msjResalta{0%{box-shadow:0 0 0 3px var(--gold),0 0 0 9px var(--gold-soft);}100%{box-shadow:0 0 0 0 transparent;}}
/* «Compartir en Mensajes»: la tarjeta tal como la verán, y la lista de conversaciones. */
.cp-card{margin:4px 0 14px;}
.cp-card .msj-card{width:100%;}
.cp-acts .btn:first-child{margin-right:auto;}
@media (max-width:720px){
.msj-card{width:288px;padding:11px 12px;gap:5px;}
.msj-card-k{font-size:10px;letter-spacing:.14em;}
.msj-card-b{align-self:stretch;justify-content:center;gap:6px;margin-top:4px;min-height:40px;box-sizing:border-box;border:1px solid var(--gold);border-radius:3px;font-size:14px;}
.msj-sys{margin:4px 12px 12px;max-width:none;}
.msj-sys svg.i{display:none;}
.cp-card .msj-card{width:100%;}
.cp-acts{display:grid;grid-template-columns:1fr 1fr;}
.cp-acts .btn{min-height:44px;justify-content:center;}
.cp-acts .btn:first-child{grid-column:1/-1;margin-right:0;}
/* Con una conversación abierta la barra de abajo del Inicio se quita: estaba por encima (el Inicio entero queda bajo ella)
y tapaba la caja de escribir, las respuestas rápidas y el botón de una tarjeta. */
body:has(#msj.con-charla) #sel-rail{display:none;}
body:has(#msj.con-charla) #selector{padding-bottom:0;}
}
@media (prefers-reduced-motion:reduce){ .msj-card{transition:none;} .msj-resalta{animation:none;} }
/* AGENDA DE OBRA (8 oct) */
/* Visitas, juntas y entregas de la obra (Sergio, 25-sep-2026) sobre la capa .st de arriba: la lista agrupada por día y la
ventana para programar y editar. En el teléfono «Programar» va fijo abajo, sobre la barra de la obra; lo que se toca mide
44 px o más y los campos 16 px, para que el teléfono no haga zoom. Solo tokens de :root: el tema oscuro sale solo. */
#sec-agenda .ao{display:flex;flex-direction:column;gap:14px;max-width:960px;}
#sec-agenda .ao-nota{margin:0;}
.ao-barra{padding:8px 10px;}
.ao-filtros>button{white-space:nowrap;font-size:max(13px,var(--t-sm));}
.ao-filtros>button i{margin-left:6px;font-style:normal;font-family:var(--mono);font-size:max(12px,var(--t-micro));color:var(--text-3);}
.ao-filtros>button[aria-pressed="true"] i{color:var(--gold-ink);}
.ao-lista{display:flex;flex-direction:column;gap:18px;}
.ao-dia{display:flex;flex-direction:column;gap:6px;}
.ao-dia-t{display:flex;align-items:baseline;gap:8px;margin:0;padding:0 2px;font-family:var(--mono);font-size:max(12px,var(--t-micro));
font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);}
.ao-dia-t b{font-weight:700;color:var(--text);}
.ao-dia-t span::before{content:"·";margin-right:8px;}
.ao-dia.hoy .ao-dia-t b{color:var(--gold-ink);}
.ao-dia-l{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;}
.ao-ev{width:100%;min-height:64px;align-items:flex-start;gap:12px;padding:12px 14px;text-align:left;font:inherit;color:inherit;cursor:pointer;}
.ao-ev:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px;}
.ao-ev>svg.i{align-self:center;flex:none;color:var(--text-3);}
.ao-hora{flex:none;width:62px;padding-top:2px;font-family:var(--mono);font-size:max(14px,var(--t-base));font-weight:700;
font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--text);}
.ao-hora.dia{font-size:max(11px,var(--t-micro));font-weight:600;letter-spacing:.04em;text-transform:uppercase;line-height:1.3;color:var(--text-2);}
.ao-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.ao-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.ao-tit{font-size:max(15px,var(--t-md));font-weight:650;line-height:1.3;overflow-wrap:anywhere;}
.ao-meta{font-size:max(13px,var(--t-sm));line-height:1.4;color:var(--text-2);overflow-wrap:anywhere;}
.ao-meta b{font-weight:600;color:var(--text);}
.ao-ev.cancelado .ao-tit{text-decoration:line-through;color:var(--text-3);}
.ao-ev.cancelado .ao-hora{color:var(--text-3);}
.ao-t-visita .st-dot{color:var(--gold-deep);}
.ao-t-junta .st-dot{color:var(--info);}
.ao-t-entrega .st-dot{color:var(--bueno);}
.ao-t-otro .st-dot{color:var(--text-3);}
.ao-dot-sin{color:var(--checar);}
.ao-vacio{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:22px 20px;}
.ao-vacio b{font-size:var(--t-md);font-weight:650;}
.ao-vacio span{max-width:60ch;font-size:var(--t-base);color:var(--text-2);}
.ao-carga{padding:18px 20px;}
.ao-mas{display:flex;justify-content:center;}
.ao-mas .btn,.ao-vacio .btn{min-height:44px;}
.ao-fijo{display:none;}
/* La ventana. */
.ao-bd{align-items:center;}
.ao-ven{display:flex;flex-direction:column;width:100%;max-width:620px;max-height:min(92vh,900px);padding:0;overflow:hidden;}
.ao-ven-h{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 16px 12px 20px;border-bottom:1px solid var(--st-hair);}
.ao-ven-h h3{margin:2px 0 0;font-family:var(--font-display);font-size:var(--t-lg);font-weight:600;letter-spacing:-.01em;}
.ao-x{flex:none;width:44px;height:44px;}
.ao-ven-c{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 20px 8px;}
.ao-ven-f{flex:none;display:flex;flex-direction:column;gap:8px;padding:10px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--st-hair);background:var(--surface);}
#ao-msg:empty{display:none;}
#ao-msg .msg{margin:0;}
.ao-acts{display:flex;gap:10px;justify-content:flex-end;}
.ao-acts .btn,.ao-acts .st-cta{min-height:48px;}
.ao-ven .fld{margin-bottom:14px;}
.ao-ven .fld label,.ao-set legend{display:block;margin:0 0 6px;padding:0;font-size:max(12px,var(--t-xs));font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--text-2);}
.ao-ven .fld input,.ao-ven .fld select,.ao-ven .fld textarea{min-height:48px;font-size:16px;}
#ao-hora{font-family:var(--mono);letter-spacing:.04em;}
.ao-ven .fld textarea{min-height:92px;}
.ao-set{min-width:0;margin:0 0 14px;padding:0;border:0;}
.ao-hint{margin-top:5px;font-size:max(12px,var(--t-xs));color:var(--text-2);}
.ao-hint-hora{margin:-8px 0 14px;}
.ao-tipos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.ao-tipo{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 12px;border:1px solid var(--st-hair-3);border-radius:2px;background:var(--surface);
color:var(--text-2);font:inherit;font-size:max(14px,var(--t-base));font-weight:500;line-height:1.2;text-align:left;cursor:pointer;}
.ao-tipo:hover:not(:disabled){border-color:var(--gold-deep);}
.ao-tipo[aria-checked="true"]{padding:0 11px;border:2px solid var(--gold-deep);background:var(--st-sel);color:var(--text);font-weight:650;}
.ao-tipo:disabled{cursor:default;opacity:.75;}
.ao-fila{display:flex;align-items:flex-end;gap:10px;margin-bottom:14px;}
.ao-fila .fld{flex:1;min-width:0;margin-bottom:0;}
.ao-rap{display:flex;flex:none;gap:8px;}
.ao-rap .st-filtro{min-height:48px;padding:0 14px;font-size:max(14px,var(--t-sm));}
.ao-resp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;}
.ao-quien{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 10px 0 12px;border:1px solid var(--st-hair-3);border-radius:2px;
background:var(--surface);color:var(--text);font:inherit;font-size:max(14px,var(--t-base));cursor:pointer;}
.ao-quien svg.i{color:var(--text-3);}
.ao-quien.fijo{padding:0 12px;cursor:default;}
.ao-sin{padding:10px 2px;font-size:max(13px,var(--t-sm));color:var(--text-2);}
.ao-agregar{min-height:44px;}
.ao-pers{margin-top:10px;border:1px solid var(--st-hair);border-radius:2px;background:var(--surface);}
.ao-busca{display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--st-hair);color:var(--text-3);}
.ao-busca input{flex:1;min-width:0;min-height:48px;border:0;outline:none;background:none;color:var(--text);font:inherit;font-size:16px;}
.ao-pers-l{max-height:240px;overflow-y:auto;}
.ao-per{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 12px;border-bottom:1px solid var(--st-hair-2);cursor:pointer;}
.ao-per:last-child{border-bottom:0;}
.ao-per b{display:block;font-size:max(14px,var(--t-base));font-weight:600;}
.ao-per small{display:block;font-size:max(12px,var(--t-xs));color:var(--text-2);}
.ao-per .st-check{width:22px;height:22px;}
:root[data-tema="oscuro"] .ao-ven .fld input,:root[data-tema="oscuro"] .ao-ven .fld select,:root[data-tema="oscuro"] .ao-ven .fld textarea{background:var(--surface-2);}
:root[data-tema="oscuro"] .ao-ven .fld input:focus,:root[data-tema="oscuro"] .ao-ven .fld select:focus,:root[data-tema="oscuro"] .ao-ven .fld textarea:focus{background:var(--surface);}
/* En oscuro, .btn.danger lleva letra oscura (es un botón relleno de rojo); aquí es de contorno: la letra es el rojo claro. */
:root[data-tema="oscuro"] .st .btn.danger{color:var(--st-crit);}
.ao-estado{display:flex;flex-direction:column;gap:10px;margin:6px 0 10px;padding-top:14px;border-top:1px solid var(--st-hair);}
.ao-estado-h{display:flex;align-items:center;gap:10px;}
.ao-min{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:max(14px,var(--t-base));}
.ao-btns{display:flex;flex-wrap:wrap;gap:8px;}
.ao-btns .btn{min-height:44px;}
.ao-conf{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border:1px solid var(--st-crit-bd);border-radius:2px;background:var(--st-crit-bg);
font-size:max(14px,var(--t-base));}
/* La tarjeta del Resumen de la obra en el teléfono (3b). */
#ao-tarjeta:empty{display:none;}
.ao-po .ic3-po-d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ao-po-vacio{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:6px 8px 6px 14px;border:1px dashed var(--line-2);
border-radius:4px;background:var(--surface);color:var(--text-2);font-size:14px;}
.ao-po-vacio .btn{min-height:44px;}
.ao-po-mas{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;}
.ic3-ob .btn.link.ao-po-mas{border-bottom:0;text-decoration:underline;text-underline-offset:4px;}
@media (min-width:721px){
.ao-tipos{grid-template-columns:repeat(4,minmax(0,1fr));}
.ao-hora{width:84px;}
}
@media (max-width:720px){
#sec-agenda .ao{padding-bottom:84px;}
.ao-prog-esc,.ao-vacio-b{display:none;}
.ao-filtros{flex:1;min-width:0;}
.ao-filtros>button{flex:1 1 auto;min-height:44px;padding:2px 6px;font-size:13px;}
.ao-filtros>button i{margin-left:4px;}
.ao-fijo{display:block;position:fixed;left:0;right:0;bottom:var(--ic3-nav);z-index:60;padding:10px 16px 12px;pointer-events:none;
background:linear-gradient(to top,var(--bg) 60%,transparent);}
.ao-fijo .st-cta{width:100%;pointer-events:auto;}
.ao-bd{align-items:stretch;padding:0;}
.ao-ven{max-width:none;max-height:none;height:100%;border-radius:0;box-shadow:none;}
.ao-ven-h{padding:8px 8px 8px 16px;}
.ao-ven-c{padding:14px 16px 8px;}
.ao-ven-f{padding:10px 16px calc(12px + env(safe-area-inset-bottom));}
.ao-acts>*{flex:1;}
.ao-acts>.st-cta{flex:2;}
}
/* FIN DE LA AGENDA DE OBRA */
/* USUARIOS Y PERMISOS · 30a/30b (8 oct) */
/* Fiel a diseno/mejora-uxui/pantallas/Usuarios y Permisos.dc.html y a la sección 18 del documento rector. Prefijo up-.
Las medidas son las del prototipo (a 1440 px) por --esc, como el catálogo 13c; los colores, los de :root en los dos temas.
Compu: la lista y la ficha, cada una con su desplazamiento. Hasta 1100 px la lista se angosta (variante b del paquete).
Teléfono: la lista son tarjetas y la ficha es una pantalla encima. */
body.usr-p .content{padding:0;max-width:none;}
body.usr-p #vistas-bar{display:none;}
@media (min-width:901px){
body.con-sesion.usr-p .railp,body.con-sesion.usr-p .topbar{display:none !important;}
}
.up{--up-checar:#96591B;display:flex;flex-direction:column;height:calc(100vh - 56px*var(--esc) - var(--franja-red,0px));min-height:calc(520px*var(--esc));
background:var(--bg);color:var(--text);font-family:var(--font-body);}
/* El ámbar de «Bloqueado» como letra: el de :root no alcanza 4.5:1 sobre blanco; en oscuro el de :root sí. */
:root[data-tema="oscuro"] .up{--up-checar:var(--checar);}
@keyframes upPop{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.up-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.up.ocupado{cursor:progress;}
.up.ocupado .up-ficha,.up.ocupado .up-cab{pointer-events:none;opacity:.7;}
/* Encabezado: ceja, título, selector Personas · Perfiles y las acciones. */
.up-cab{flex:none;display:flex;align-items:center;gap:calc(14px*var(--esc));min-height:calc(60px*var(--esc));padding:0 calc(22px*var(--esc));border-bottom:1px solid var(--line);}
.up-cab-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.up-ceja{font-size:calc(10.5px*var(--esc));font-weight:600;letter-spacing:.14em;color:var(--text-3);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.up-tit{font-family:var(--font-display);font-size:calc(21px*var(--esc));font-weight:600;letter-spacing:-.015em;}
.up-seg{flex:none;display:flex;padding:2px;background:var(--surface-3);border-radius:3px;}
.up-seg button{height:calc(30px*var(--esc));padding:0 calc(16px*var(--esc));border:0;border-radius:2px;background:transparent;color:var(--text);
font-family:var(--font-body);font-size:calc(13px*var(--esc));font-weight:500;cursor:pointer;}
.up-seg button.on{background:var(--surface);font-weight:650;box-shadow:0 0 0 1px var(--line-2);}
.up-seg.chico button{height:calc(26px*var(--esc));padding:0 calc(12px*var(--esc));font-size:calc(12px*var(--esc));}
.up-acc{flex:none;display:flex;align-items:center;gap:calc(14px*var(--esc));}
.up-b{height:calc(32px*var(--esc));display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 calc(12px*var(--esc));border:1px solid var(--line-2);
border-radius:3px;background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:calc(13px*var(--esc));font-weight:600;cursor:pointer;white-space:nowrap;}
.up-b:hover{border-color:var(--text-3);}
.up-b:disabled{opacity:.55;cursor:not-allowed;}
.up-b.oro{padding:0 calc(14px*var(--esc));border-color:var(--gold);background:var(--gold);color:var(--gold-on);font-weight:650;}
.up-b.oro:hover:not(:disabled){border-color:var(--gold-deep);background:var(--gold-deep);}
.up-b.malo{color:var(--critico);}
.up-b.malo:hover:not(:disabled){border-color:var(--critico);background:var(--critico-bg);}
.up-c{display:none;}
.up-ib{flex:none;width:calc(30px*var(--esc));height:calc(30px*var(--esc));display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:3px;
background:var(--surface);color:var(--text-2);cursor:pointer;}
.up-ib:hover{border-color:var(--text-3);color:var(--text);}
.up-ib.malo:hover{border-color:var(--critico);color:var(--critico);background:var(--critico-bg);}
.up button:focus-visible,.up select:focus-visible,.up input:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px;}
.up-fila:focus-visible,.up-pf:focus-visible,.up-m-col:focus-visible{outline-offset:-2px;}
#up-msg:empty{display:none;}
#up-msg{flex:none;padding:calc(10px*var(--esc)) calc(22px*var(--esc)) 0;}
#up-msg .msg{margin-bottom:0;}
.up-cuerpo{flex:1;min-height:0;display:flex;flex-direction:column;}
.up-carga{padding:calc(52px*var(--esc)) 20px;}
.up-error{padding:calc(22px*var(--esc));display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
.up-error .alert{width:100%;margin:0;}
/* Personas: la lista, con sus filtros, y la ficha. */
.up-pers-v{flex:1;min-height:0;display:flex;}
.up-lista{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--line-2);}
.up-filtros{flex:none;display:flex;flex-wrap:wrap;gap:6px;padding:calc(10px*var(--esc)) calc(16px*var(--esc));border-bottom:1px solid var(--line);}
.up-chip{white-space:nowrap;height:calc(26px*var(--esc));padding:0 calc(10px*var(--esc));border:1px solid var(--line-2);border-radius:13px;background:var(--surface);color:var(--text-2);
font-family:var(--font-body);font-size:calc(12px*var(--esc));font-weight:600;cursor:pointer;}
.up-chip.on{border-color:var(--gold-deep);background:var(--gold-soft);color:var(--gold-ink);}
.up-th,.up-fila{display:grid;grid-template-columns:minmax(calc(150px*var(--esc)),1.4fr) minmax(0,1.3fr) calc(130px*var(--esc)) calc(70px*var(--esc)) calc(96px*var(--esc)) calc(110px*var(--esc));column-gap:calc(14px*var(--esc));align-items:center;}
.up-th{flex:none;height:calc(30px*var(--esc));padding:0 calc(16px*var(--esc));background:var(--surface-2);border-bottom:1px solid var(--line-2);
font-size:calc(10.5px*var(--esc));font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);}
.up-th .d{text-align:right;}
.up-filas{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;}
.up-fila{width:100%;min-height:calc(44px*var(--esc));padding:0 calc(16px*var(--esc));border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);
font-family:var(--font-body);font-size:calc(13px*var(--esc));text-align:left;cursor:pointer;}
.up-fila:hover{background:var(--surface-2);}
.up-fila.on{background:var(--gold-soft);}
.up-pers{display:flex;align-items:center;gap:9px;min-width:0;}
.up-av,.up-f-av{flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--surface-3);color:var(--gold-ink);font-weight:700;}
.up-av{width:calc(28px*var(--esc));height:calc(28px*var(--esc));font-size:calc(10.5px*var(--esc));}
.up-pers-t{display:flex;flex-direction:column;min-width:0;}
.up-pers-t b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.up-sub,.up-meta{display:none;font-size:calc(11.5px*var(--esc));color:var(--text-3);}
.up-mail{color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.up-perfil{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.up-perfil.up-sinp{color:var(--text-3);}
.up-obras{text-align:right;font-variant-numeric:tabular-nums;}
.up-est{font-size:calc(11.5px*var(--esc));font-weight:650;}
.up-est.e-activo{color:var(--bueno);}
.up-est.e-bloqueado{color:var(--up-checar);}
.up-est.e-baja{color:var(--text-3);}
.up-ult{text-align:right;color:var(--text-3);font-size:calc(12px*var(--esc));}
/* Una baja se lee atenuada, pero con el texto en un tono que sigue pasando el contraste. */
.up-fila.baja .up-pers-t b{color:var(--text-2);}
.up-fila.baja .up-av{opacity:.6;}
.up-ficha{flex:none;width:calc(420px*var(--esc));display:flex;flex-direction:column;overflow:auto;background:var(--surface);scrollbar-width:thin;}
.up-f-atras{display:none;}
.up-f-cab{display:flex;align-items:center;gap:12px;padding:calc(16px*var(--esc)) calc(18px*var(--esc));border-bottom:1px solid var(--line);}
.up-f-av{width:calc(44px*var(--esc));height:calc(44px*var(--esc));font-size:calc(14px*var(--esc));}
.up-f-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.up-f-id b{font-family:var(--font-display);font-size:calc(17px*var(--esc));font-weight:600;overflow-wrap:anywhere;}
.up-f-id span{font-size:calc(12px*var(--esc));color:var(--text-3);overflow-wrap:anywhere;}
.up-como-b{flex:none;height:calc(30px*var(--esc));padding:0 calc(11px*var(--esc));border:1px solid var(--gold-deep);border-radius:3px;background:var(--gold-soft);color:var(--gold-ink);
font-family:var(--font-body);font-size:calc(12.5px*var(--esc));font-weight:650;cursor:pointer;}
.up-como-b:hover{background:var(--gold-light);}
.up-f-ctl{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:calc(14px*var(--esc)) calc(18px*var(--esc));border-bottom:1px solid var(--line);}
.up-f-c{display:flex;flex-direction:column;gap:4px;min-width:0;}
.up-eti{font-size:calc(10px*var(--esc));font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);}
.up-ops{display:flex;flex-wrap:wrap;gap:4px;}
.up-op{height:calc(26px*var(--esc));padding:0 calc(9px*var(--esc));border:1px solid var(--line-2);border-radius:3px;background:var(--surface);color:var(--text-2);
font-family:var(--font-body);font-size:calc(12px*var(--esc));font-weight:600;cursor:pointer;}
.up-op:disabled{opacity:.55;cursor:not-allowed;}
.up-op.on{border-color:var(--gold-deep);background:var(--gold-soft);color:var(--gold-ink);}
.up-op.e-activo.on{border-color:var(--bueno);background:var(--surface-2);color:var(--bueno);}
.up-op.e-bloqueado.on{border-color:var(--checar);background:var(--surface-2);color:var(--up-checar);}
.up-op.e-baja.on{border-color:var(--text-3);background:var(--surface-2);color:var(--text-3);}
.up-nota{font-size:calc(11.5px*var(--esc));line-height:1.45;color:var(--text-3);}
.up-sup{grid-column:span 2;display:flex;align-items:flex-start;gap:8px;font-size:calc(12.5px*var(--esc));cursor:pointer;}
.up-sup input{flex:none;margin:2px 0 0;accent-color:var(--gold-deep);}
.up-sup b{flex:none;font-weight:600;}
.up-sup span{min-width:0;color:var(--text-3);}
.up-f-acc{display:flex;flex-wrap:wrap;gap:8px;padding:calc(12px*var(--esc)) calc(18px*var(--esc));border-bottom:1px solid var(--line);}
.up-f-perm{display:flex;flex-direction:column;gap:2px;padding:calc(12px*var(--esc)) calc(18px*var(--esc));}
.up-pers-tag{align-self:flex-start;margin-top:4px;padding:2px 8px;border-radius:10px;background:var(--gold-soft);color:var(--gold-ink);font-size:calc(11px*var(--esc));font-weight:600;}
.up-g{display:flex;flex-direction:column;padding-top:8px;}
.up-g-t{font-size:calc(11px*var(--esc));font-weight:700;color:var(--text-2);padding-bottom:3px;}
.up-p{display:flex;align-items:center;gap:8px;min-height:calc(26px*var(--esc));border-bottom:1px solid var(--line);font-size:calc(12.5px*var(--esc));}
.up-p-t{flex:1;min-width:0;}
.up-aj{font-size:calc(10.5px*var(--esc));font-weight:600;color:var(--gold-ink);}
.up-v{font-size:calc(11px*var(--esc));font-weight:700;letter-spacing:.06em;}
.up-v.v-no{color:var(--text-3);}
.up-v.v-ver{color:var(--info);}
.up-v.v-editar{color:var(--bueno);}
.up-f-pie{margin-top:auto;padding:calc(14px*var(--esc)) calc(18px*var(--esc)) calc(18px*var(--esc));border-top:1px solid var(--line);}
/* Perfiles: la matriz (30a) y un perfil a la vez (30b). */
.up-perf-v{flex:1;min-height:0;display:flex;flex-direction:column;padding:calc(16px*var(--esc)) calc(22px*var(--esc));overflow:auto;scrollbar-width:thin;}
.up-modos{flex:none;display:flex;justify-content:flex-end;margin-bottom:calc(10px*var(--esc));}
.up-vacio{padding:calc(52px*var(--esc)) 20px;}
.up-vacio div{margin-top:14px;}
.up-m{--up-n:5;flex:0 1 auto;min-height:0;overflow:auto;background:var(--surface);border:1px solid var(--line-2);border-radius:4px;scrollbar-width:thin;}
.up-m-in{min-width:calc(220px*var(--esc) + var(--up-n)*120px*var(--esc) + 32px*var(--esc));}
.up-m-h,.up-m-f{display:grid;grid-template-columns:minmax(calc(220px*var(--esc)),1fr) repeat(var(--up-n),calc(120px*var(--esc)));align-items:center;padding:0 calc(16px*var(--esc));}
.up-m-h{position:sticky;top:0;z-index:3;min-height:calc(44px*var(--esc));background:var(--surface-2);border-bottom:1px solid var(--line-2);
font-size:calc(10.5px*var(--esc));font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);}
.up-m-col{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;padding:4px 2px;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;}
.up-m-col span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.up-m-col small{font-size:inherit;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-3);}
.up-m-col:hover span{color:var(--gold-ink);}
.up-m-g{padding:calc(8px*var(--esc)) calc(16px*var(--esc)) 4px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:calc(10.5px*var(--esc));font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);}
.up-m-f{min-height:calc(34px*var(--esc));border-bottom:1px solid var(--line);background:var(--surface);font-size:calc(13px*var(--esc));}
.up-m-t,.up-m-h>span:first-child{position:sticky;left:0;z-index:1;min-width:0;padding-right:8px;background:inherit;}
.up-lock{display:inline-flex;vertical-align:-2px;margin-left:6px;color:var(--text-3);}
.up-cel{justify-self:center;width:calc(84px*var(--esc));height:calc(24px*var(--esc));border:1px solid var(--line-2);border-radius:3px;background:transparent;color:var(--text-3);
font-family:var(--font-body);font-size:calc(11.5px*var(--esc));font-weight:650;cursor:pointer;}
.up-cel:hover{border-color:var(--text-3);}
.up-cel.n-rol{border-style:dashed;font-weight:500;}
.up-cel.n-ver{border-color:var(--info);background:var(--info-bg);color:var(--info);}
.up-cel.n-editar{border-color:var(--bueno);background:var(--bueno-bg);color:var(--bueno);}
.up-pie-nota{display:block;flex:none;padding-top:10px;font-size:calc(12px*var(--esc));color:var(--text-3);}
.up-uno{display:grid;grid-template-columns:calc(240px*var(--esc)) minmax(0,1fr);gap:16px;align-items:start;}
.up-uno-lista{display:flex;flex-direction:column;gap:6px;}
.up-pf{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line-2);border-radius:4px;background:var(--surface);color:var(--text);font-family:var(--font-body);text-align:left;cursor:pointer;}
.up-pf:hover{border-color:var(--text-3);}
.up-pf.on{border-color:var(--gold-deep);background:var(--gold-soft);}
.up-pf b{font-size:calc(13.5px*var(--esc));font-weight:600;}
.up-pf span{font-size:calc(11.5px*var(--esc));color:var(--text-3);}
.up-uno-der{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-2);border-radius:4px;}
.up-pf-sel{display:none;}
.up-uno-cab{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line);}
.up-uno-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.up-uno-id b{font-family:var(--font-display);font-size:calc(17px*var(--esc));font-weight:600;overflow-wrap:anywhere;}
.up-uno-id span{font-size:calc(11.5px*var(--esc));color:var(--text-3);}
.up-uno-g{padding:10px 16px 4px;font-size:calc(10.5px*var(--esc));font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);}
.up-uno-f{display:flex;align-items:center;gap:10px;min-height:calc(40px*var(--esc));padding:4px 16px;border-top:1px solid var(--line);}
.up-uno-t{flex:1;min-width:0;display:flex;flex-direction:column;}
.up-uno-t .n{font-size:calc(13px*var(--esc));font-weight:600;}
.up-uno-t .d{font-size:calc(11.5px*var(--esc));color:var(--text-3);}
.up-opc{flex:none;display:flex;border:1px solid var(--line-2);border-radius:3px;overflow:hidden;}
.up-opc button{height:calc(26px*var(--esc));padding:0 calc(12px*var(--esc));border:0;border-right:1px solid var(--line);background:var(--surface);color:var(--text-2);
font-family:var(--font-body);font-size:calc(12px*var(--esc));font-weight:500;cursor:pointer;}
.up-opc button:last-child{border-right:0;}
.up-opc button.on{font-weight:650;background:var(--surface-3);color:var(--text);}
.up-opc button.on.n-ver{background:var(--info-bg);color:var(--info);}
.up-opc button.on.n-editar{background:var(--bueno-bg);color:var(--bueno);}
.up-opc button.on.n-no{color:var(--text-2);}
/* Ver como: el menú como lo vería la persona (tachado lo que no ve, VE lo de solo lectura). */
.up-como{width:560px;max-width:100%;max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--surface);border-radius:4px;box-shadow:var(--elev-modal);animation:upPop .2s both;}
.up-como-cab{flex:none;display:flex;flex-direction:column;gap:2px;padding:16px 18px;border-bottom:1px solid var(--line);}
.up-como-cab b{font-family:var(--font-display);font-size:17px;font-weight:600;}
.up-como-cuerpo{flex:1;min-height:300px;display:flex;overflow:hidden;}
.up-menu{width:200px;flex:none;overflow:auto;padding:10px 0;background:var(--riel-fondo);color:var(--riel-texto);}
.up-menu-g{padding:8px 14px 2px;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--riel-texto);}
.up-mi{display:flex;align-items:center;gap:8px;min-height:28px;padding:0 14px;font-size:12.5px;color:var(--riel-claro);}
.up-mi span:first-child{flex:1;min-width:0;}
.up-mi.no{color:var(--riel-texto);text-decoration:line-through;}
.up-mi-tag{font-size:10px;font-weight:600;color:var(--gold-light);}
.up-como-txt{flex:1;min-width:0;padding:16px;overflow:auto;font-size:12.5px;line-height:1.5;color:var(--text-2);}
.up-como-txt p{margin:0 0 10px;}
.up-como-aviso{color:var(--text);font-weight:600;}
.up-como-pie{flex:none;display:flex;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line);}
.up-m-ancho{max-width:720px;}
/* Hasta 1100 px: la lista se angosta a nombre, perfil y estado, y la ficha toma el resto (variante b). */
@media (max-width:1100px){
.up-l{display:none;}
.up-c{display:inline;}
.up-lista{flex:0 0 calc(300px*var(--esc));}
.up-th{display:none;}
.up-fila{grid-template-columns:minmax(0,1fr);min-height:calc(56px*var(--esc));}
.up-mail,.up-perfil,.up-obras,.up-est,.up-ult{display:none;}
.up-sub{display:block;}
.up-ficha{flex:1;width:auto;min-width:0;}
}
/* Tableta y teléfono: la página se desplaza entera; sin alto fijo. */
@media (max-width:900px){
.up{height:auto;min-height:0;}
.up-cab{flex-wrap:wrap;gap:8px 14px;padding-top:10px;padding-bottom:10px;}
.up-cab-t{flex:1 1 200px;}
.up-cuerpo,.up-pers-v{min-height:auto;}
.up-filas,.up-ficha{overflow:visible;}
.up-perf-v{overflow:visible;}
}
@media (max-width:720px){
.up-cab{flex-wrap:wrap;gap:10px;padding:12px 16px;}
.up-cab-t{display:none;}
.up-seg{flex:1 1 100%;}
.up-seg button{flex:1;height:44px;font-size:15px;}
.up-acc{flex:1 1 100%;gap:8px;}
.up-acc .up-b{flex:1;height:44px;font-size:14px;}
.up-l{display:none;}
.up-c{display:inline;}
.up-b{height:44px;font-size:14px;}
.up-pers-v{display:block;}
.up-lista{border-right:0;background:transparent;}
.up-filtros{flex-wrap:nowrap;overflow:auto;overflow-y:hidden;padding:10px 16px;}
.up-chip{flex:none;height:44px;padding:0 16px;font-size:14px;border-radius:22px;}
.up-filas{display:flex;flex-direction:column;gap:8px;padding:8px 16px 20px;}
.up-fila{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:64px;padding:10px 14px;border:1px solid var(--line-2);border-radius:4px;background:var(--surface);}
.up-fila.on{border-color:var(--gold-deep);}
.up-pers{width:100%;}
.up-av{width:36px;height:36px;font-size:12px;}
.up-pers-t b{font-size:15px;}
.up-sub,.up-meta{font-size:13px;}
.up-meta{display:block;padding-left:45px;}
.up-ficha{display:none;}
.up.con-ficha .up-ficha{display:flex;position:fixed;inset:0 0 var(--ic3-nav) 0;z-index:95;width:auto;overflow:auto;overscroll-behavior:contain;background:var(--surface);}
.up-f-atras{display:block;position:sticky;top:0;z-index:2;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--line);}
.up-f-ctl{grid-template-columns:1fr;}
.up-sup{grid-column:auto;flex-wrap:wrap;min-height:44px;align-items:center;font-size:14px;}
.up-sup input{width:22px;height:22px;margin:0;}
.up-sup span{flex:1 1 100%;padding-left:30px;}
.up-op{height:44px;padding:0 14px;font-size:14px;}
.up-como-b{height:44px;padding:0 14px;font-size:14px;}
.up-f-id b{font-size:18px;}
.up-f-id span{font-size:13px;white-space:normal;}
.up-p{min-height:36px;font-size:14px;}
.up-v{font-size:12px;}
.up-perf-v{padding:12px 16px 20px;}
.up-modos{display:none;}
.up-uno{display:block;}
.up-uno-lista{display:none;}
.up-pf-sel{display:block;padding:12px 16px 0;}
.up-pf-sel select{min-height:44px;font-size:16px;}
.up-uno-f{flex-direction:column;align-items:stretch;gap:6px;padding:10px 16px;}
.up-opc{width:100%;}
.up-opc button{flex:1;height:44px;padding:0 4px;font-size:14px;}
.up-ib{width:44px;height:44px;}
.up-como{max-height:calc(100vh - 24px);}
.up-como-cuerpo{flex-direction:column;overflow:auto;}
.up-menu{width:auto;max-height:46vh;}
.up-como-pie .up-b{width:100%;}
}
@media (prefers-reduced-motion:reduce){
.up-como{animation:none;}
}
/* DINERO FLUJO Y PROVEEDORES · F6c (8 oct) */
/* ============================================================
Dinero · Flujo: el saldo como gráfica (SVG hecho a mano) sobre las cifras de cada semana, en las mismas columnas, con la primera
semana en rojo señalada y el detalle de la semana que se toca. Va sobre la capa «ESTILO STITCH» (.st): esquinas de 2 px, líneas
finas, etiquetas en mono. Todos los colores salen de los tokens, así que el tema oscuro (tono C) se hereda.
============================================================ */
.fl{--fl-etq:128px;--fl-col:108px;}
.st .fl-card.card.panel{padding:0;overflow:hidden;margin-bottom:14px;}
.fl-card>.panel-h{align-items:center;padding:16px 20px;border-bottom:1px solid var(--st-hair);}
.fl-card .panel-s{margin-bottom:0;}
.fl-acc{display:flex;flex-wrap:wrap;gap:8px;}
.fl-vacio{padding:30px 20px;}
/* Leyenda */
.fl-ley{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:12px 20px 8px;font-size:var(--t-xs);color:var(--text-3);}
.fl-ley>span{display:inline-flex;align-items:center;gap:6px;}
.fl-ley .st-chip{margin-left:auto;}
.fl-sw{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--gold);}
.fl-sw.neg{background:var(--critico);}
.fl-sw.real{width:14px;height:0;border-top:2px dashed var(--text-2);border-radius:0;background:none;}
/* El programa: una sola tabla; la fila de arriba es la gráfica y los renglones de abajo son sus cifras. */
.fl-scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;}
.fl-prog{width:100%;min-width:calc(var(--fl-etq) + var(--n) * var(--fl-col));table-layout:fixed;border-collapse:separate;border-spacing:0;
font-variant-numeric:tabular-nums;}
.fl-prog col.etq{width:var(--fl-etq);}
.fl-prog th,.fl-prog td{height:36px;padding:0 10px;border-top:1px solid var(--st-hair-2);border-left:1px solid var(--st-hair-2);
text-align:right;font-size:var(--t-sm);font-weight:400;color:var(--text);white-space:nowrap;}
.fl-prog th.etq{position:sticky;left:0;z-index:3;padding-left:20px;border-left:0;text-align:left;font-weight:500;color:var(--text-2);
background:var(--surface);}
.fl-prog thead th{font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:.04em;text-transform:uppercase;
color:var(--text-3);background:var(--st-draft-bg);}
.fl-prog thead th.etq{background:var(--st-draft-bg);}
.fl-prog thead th.rojo{color:var(--critico);}
.fl-prog thead th.sel,.fl-prog td.sel{box-shadow:inset 0 -3px 0 var(--gold);}
.fl-hoy{display:block;font-size:var(--t-micro);letter-spacing:.1em;color:var(--gold-ink);line-height:1;}
.fl-prog tbody tr:last-child th,.fl-prog tbody tr:last-child td{font-weight:700;}
.fl-prog td.rojo{background:var(--critico-bg);}
.fl-prog td.neg{color:var(--critico);}
.fl-prog td.pos{color:var(--bueno);}
.fl-prog .nd{color:var(--text-3);}
.fl-prog .m{display:none;}
/* La gráfica: la fila de arriba. El SVG se estira a lo ancho de sus columnas; los botones van encima, uno por semana. */
.fl-prog .fl-graf>td{height:176px;padding:0;border-top:0;vertical-align:top;}
.fl-prog .fl-graf>td.fl-eje{position:sticky;left:0;z-index:3;border-left:0;background:var(--surface);}
.fl-tick{position:absolute;right:8px;top:var(--y);transform:translateY(-50%);font-family:var(--mono);font-size:var(--t-micro);
line-height:1;color:var(--text-3);}
.fl-lienzo{position:relative;}
.fl-svg{display:block;width:100%;height:176px;}
.fl-fondo.rojo{fill:var(--critico-bg);}
.fl-fondo.hoy{fill:var(--surface-2);}
.fl-gl{stroke:var(--st-hair-2);stroke-width:1;vector-effect:non-scaling-stroke;}
.fl-gl.cero{stroke:var(--line-2);}
.fl-barra{fill:var(--gold);}
.fl-barra.neg{fill:var(--critico);}
.fl-real{stroke:var(--text-2);stroke-width:2;stroke-dasharray:5 3;vector-effect:non-scaling-stroke;}
.fl-cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));}
.fl-col{position:relative;display:block;margin:0;padding:0;border:0;border-left:1px solid var(--st-hair-2);border-radius:0;
background:transparent;cursor:pointer;}
.fl-col:hover{background:color-mix(in srgb, var(--gold) 10%, transparent);}
.fl-col.sel{box-shadow:inset 0 -3px 0 var(--gold);}
.fl-col:focus-visible{outline:2px solid var(--gold-deep);outline-offset:-3px;}
.fl-enrojo{position:absolute;top:8px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:var(--t-micro);
font-weight:700;letter-spacing:.08em;color:var(--critico);}
/* Debajo del programa: el aviso de la semana en rojo o el detalle de la semana elegida. */
.fl-det{padding:16px 20px;border-top:1px solid var(--st-hair);}
.fl-aviso{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:10px 14px;border:1px solid var(--st-hair);
border-left:3px solid var(--gold-deep);background:var(--st-canvas);font-size:var(--t-sm);}
.fl-aviso>div{flex:1 1 240px;min-width:0;}
.fl-aviso>svg.i{flex:none;color:var(--gold-ink);}
.fl-aviso.crit{border-left-color:var(--critico);background:var(--critico-bg);}
.fl-aviso.crit>svg.i{color:var(--critico);}
.fl-det-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:12px;}
.fl-det-t{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--slab);font-size:var(--t-md);font-weight:600;}
.fl-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px 18px;padding:12px 14px;
border:1px solid var(--st-hair);background:var(--st-canvas);}
.fl-cifras>div{display:flex;flex-direction:column;gap:2px;min-width:0;}
.fl-cifras b{font-size:var(--t-md);font-weight:600;font-variant-numeric:tabular-nums;}
.fl-cifras b.neg{color:var(--critico);}
.fl-causa{margin:12px 0;font-size:var(--t-sm);}
.fl-pesa{margin:6px 0 10px;padding:0;list-style:none;border-top:1px solid var(--st-hair-2);}
.fl-pesa>li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;min-height:44px;padding:6px 0;
border-bottom:1px solid var(--st-hair-2);font-size:var(--t-sm);}
.fl-pesa-c{min-width:0;}
.fl-pesa-c small{display:block;font-size:var(--t-xs);color:var(--text-3);}
.fl-pesa b{font-variant-numeric:tabular-nums;text-align:right;}
/* Los movimientos */
.fl-filtros{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.fl-sem-chip{min-height:30px;cursor:pointer;border-color:var(--gold-deep);background:var(--gold-soft);color:var(--text);font:inherit;font-size:var(--t-xs);}
.fl-movt{max-height:520px;overflow:auto;}
.fl-movt table.data thead th{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.04em;text-transform:uppercase;
color:var(--text-3);background:var(--st-draft-bg);}
.fl-movt table.data tbody td{padding-top:6px;padding-bottom:6px;border-bottom:1px solid var(--st-hair-2);white-space:nowrap;}
/* Fechas, cifras, estado y botones no se parten; los textos (concepto, con quién, OC) sí, en dos líneas, para que la tabla quepa en 1440 px. */
.fl-movt table.data td.fl-conc,.fl-movt table.data td.fl-txt{white-space:normal;}
.fl-movt table.data td.fl-conc{min-width:120px;max-width:280px;}
.fl-movt table.data tbody tr:hover{background:var(--st-sel);}
.fl-movt table.data tbody tr:hover>td:first-child{box-shadow:inset 3px 0 0 var(--gold-deep);}
.fl-mv.cancelado{opacity:.5;}
/* Celular: columnas más angostas con la cifra corta (la exacta, al tocar la semana), y cada movimiento como una tarjeta. */
@media (max-width:720px){
.fl{--fl-etq:92px;--fl-col:72px;}
.fl-prog .d{display:none;}
.fl-prog .m{display:inline;}
.fl-prog th,.fl-prog td{padding:0 6px;}
.fl-prog th.etq{padding-left:12px;font-size:var(--t-xs);white-space:normal;line-height:1.2;}
.fl-prog .fl-graf>td.fl-eje{padding:0;}
.fl-card>.panel-h{padding:14px;}
.fl-acc{width:100%;}
.fl-acc .btn{flex:1 1 100%;justify-content:center;min-height:44px;}
.fl-ley{padding:10px 14px 6px;}
.fl-ley .st-chip{margin-left:0;}
.fl-det{padding:14px;}
.fl-pesa>li{grid-template-columns:auto minmax(0,1fr) auto;}
.fl-pesa-e{grid-column:2 / -1;grid-row:2;}
.fl-filtros{width:100%;}
}
/* Cada movimiento como tarjeta en el celular y la tableta (la tabla pide más de 900 px para verse); en la compu va la tabla. */
.fl-tjs{display:none;}
@media (max-width:900px){ .fl-movt{display:none;} .fl-tjs{display:block;} }
.fl-tj{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-bottom:1px solid var(--st-hair);}
.fl-tj.cancelado{opacity:.5;}
.fl-tj-t{display:flex;align-items:flex-start;gap:8px;}
.fl-tj-t b{min-width:0;font-weight:600;overflow-wrap:anywhere;}
.fl-tj-f{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;font-size:var(--t-sm);color:var(--text-2);}
.fl-tj-f>span:first-child{min-width:0;}
.fl-nb{white-space:nowrap;}
.fl-tj-f .venc{color:var(--critico);font-weight:700;}
.fl-tj-f .venc svg.i{margin-right:4px;vertical-align:-2px;}
.fl-tj-m{display:flex;flex:none;flex-direction:column;align-items:flex-end;text-align:right;}
.fl-tj-m b{color:var(--text);font-variant-numeric:tabular-nums;}
.fl-tj-m small{font-size:var(--t-xs);color:var(--text-3);}
.fl-tj-a{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;}
.fl-tj-b{display:flex;gap:8px;}
/* Pantallas táctiles: lo que se toca mide al menos 44 px. */
@media (pointer:coarse){
.fl .btn,.fl .st-filtro,.fl .fl-sem-chip{min-height:44px;}
.fl .btn.sm{min-width:44px;}
}
@media (prefers-reduced-motion:reduce){ .fl-col{transition:none;} }
/* «Imprimir vista»: la gráfica y la tabla caben en la hoja y lo que solo sirve en pantalla (botones, filtros) no sale. */
@media print{
.fl-scroll{overflow:visible;}
.fl-prog{min-width:0;}
.fl-cols,.fl-filtros,.fl-acc,.fl-tjs,.fl-det .btn{display:none;}
}
/* ============================================================
Proveedores: la lista con el puntaje del perfil y el estado de los papeles en cada renglón, y el perfil AL LADO (sobre la capa .st).
En una pantalla ancha el perfil ocupa una columna y la lista se angosta sin repintarse; en una angosta es una hoja encima, y en el
celular, a pantalla completa. Todos los colores salen de los tokens, así que el tema oscuro (tono C) se hereda.
============================================================ */
.pv-barra{margin-bottom:12px;gap:10px 14px;justify-content:flex-start;}
.pv-bus{position:relative;display:flex;align-items:center;flex:1 1 240px;min-width:200px;max-width:340px;}
.pv-bus svg.i{position:absolute;left:11px;color:var(--text-3);pointer-events:none;}
.pv-bus input{width:100%;min-height:40px;padding:0 12px 0 36px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);
color:var(--text);font-size:var(--t-base);}
.pv-bus input:focus{outline:none;border-color:var(--gold-deep);box-shadow:var(--focus-halo);}
.pv-filtros{display:flex;flex-wrap:wrap;gap:6px;}
.pv-n{margin-left:2px;font-family:var(--mono);font-weight:600;color:var(--text-3);}
.st-filtro.on .pv-n{color:inherit;}
.pv-acc{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto;}
.pv-md{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;}
.st .pv-lista.card{padding:0;overflow:hidden;margin-bottom:0;}
.pv-aviso{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0;border-width:0 0 1px 0;border-radius:0;}
.pv-th,.pv-fila{display:grid;grid-template-columns:minmax(0,2.2fr) 64px minmax(0,1.5fr) 150px 170px 96px;gap:14px;align-items:center;padding:0 20px;}
.pv-th{min-height:36px;border-bottom:1px solid var(--st-hair);background:var(--st-draft-bg);font-family:var(--mono);font-size:var(--t-micro);
font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);}
.pv-th .obras{text-align:right;}
.pv-fila{min-height:56px;padding-top:8px;padding-bottom:8px;border-bottom:1px solid var(--st-hair-2);background:var(--surface);cursor:pointer;
transition:background-color .14s ease;}
.pv-fila:hover,.pv-fila.sel{background:var(--st-sel);box-shadow:inset 3px 0 0 var(--gold-deep);}
.pv-fila:focus-visible{outline:2px solid var(--gold-deep);outline-offset:-2px;}
.pv-fila.dim{opacity:.7;}
.pv-c{min-width:0;}
.pv-c.nom b{display:block;overflow:hidden;font-size:var(--t-md);font-weight:650;text-overflow:ellipsis;white-space:nowrap;}
.pv-rfc{display:block;font-family:var(--mono);font-size:var(--t-xs);color:var(--text-3);font-variant-numeric:tabular-nums;}
.pv-c.obras{text-align:right;font-variant-numeric:tabular-nums;}
.pv-c.con span{display:block;overflow:hidden;font-size:var(--t-sm);color:var(--text-2);text-overflow:ellipsis;white-space:nowrap;}
.pv-c.con span+span{color:var(--text-3);}
.pv-c.des{display:flex;align-items:baseline;gap:8px;}
.pv-sc{font-family:var(--slab);font-size:var(--t-lg);font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);}
.pv-niv{font-size:var(--t-xs);font-weight:600;color:var(--text-2);}
.pv-sc.bueno,.pv-niv.bueno{color:var(--bueno);}
.pv-sc.info,.pv-niv.info{color:var(--info);}
.pv-sc.checar,.pv-niv.checar{color:var(--checar);}
.pv-sc.critico,.pv-niv.critico{color:var(--critico);}
.pv-sc.nulo,.pv-niv.nulo{color:var(--text-3);}
.pv-pap{font-size:var(--t-sm);color:var(--text-2);}
.pv-pap.vencido{color:var(--critico);font-weight:700;}
.pv-pap.porvencer{color:var(--checar);font-weight:700;}
.pv-pap.nulo{color:var(--text-3);}
.pv-pie{padding:10px 20px;border-top:1px solid var(--st-hair-2);font-size:var(--t-xs);color:var(--text-3);}
/* El perfil de al lado */
.pv-lado{display:flex;flex-direction:column;min-height:0;border:1px solid var(--st-hair);border-radius:2px;background:var(--surface);}
.pv-lado[hidden]{display:none;}
/* La animación de entrada de la sección deja un transform en su hijo, y con él lo fijo de adentro (la hoja del celular) dejaría de ser de la pantalla. */
.sec.on>.pv{animation:none;}
/* Lo que ocupa la cabecera fija de la pantalla: el perfil de al lado se queda debajo de ella al bajar por la lista. */
.pv{--st-top:calc(152px*var(--esc,1) + var(--franja-red,0px));}
.pv-lado-h{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"t a x";align-items:start;gap:8px 10px;padding:16px 18px 12px;
border-bottom:1px solid var(--st-hair);}
.pv-lado-t{grid-area:t;min-width:0;}
.pv-lado-t h3{margin:2px 0 0;font-family:var(--slab);font-size:var(--t-xl);font-weight:600;letter-spacing:-.01em;line-height:1.15;overflow-wrap:anywhere;}
.pv-lado-acc{grid-area:a;display:flex;align-items:center;gap:6px;}
.pv-lado-h>.xbtn{grid-area:x;}
.pv-lado-b{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 18px 20px;}
.pv-lado-pie{display:none;}
.pf-total .n.bueno{color:var(--bueno);}
.pf-total .n.info{color:var(--info);}
.pf-total .n.checar{color:var(--checar);}
.pf-total .n.critico{color:var(--critico);}
/* Pantalla ancha: el perfil es una columna fija junto a la lista, que se angosta. Con la lista aún angosta (de 1200 a 1419 px) cada renglón
se arma en dos líneas, nombre y estado arriba, puntaje y papeles abajo; con la lista ancha vuelven las columnas. */
@media (min-width:1200px){
.pv-md.con-perfil{grid-template-columns:minmax(0,1fr) 480px;}
.con-perfil .pv-th{display:none;}
.con-perfil .pv-fila{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nom est" "des pap";gap:6px 12px;min-height:0;padding:10px 16px;}
.con-perfil .pv-c.nom{grid-area:nom;}
.con-perfil .pv-c.est{grid-area:est;justify-self:end;}
.con-perfil .pv-c.des{grid-area:des;}
.con-perfil .pv-c.pap{grid-area:pap;justify-self:end;text-align:right;}
.con-perfil .pv-c.obras,.con-perfil .pv-c.con,.con-perfil .pv-th .obras,.con-perfil .pv-th .con{display:none;}
.pv-lado{position:sticky;top:var(--st-top);max-height:calc(100vh - var(--st-top) - 12px);}
.pv-velo{display:none !important;}
}
@media (min-width:1420px){
.con-perfil .pv-th{display:grid;}
.con-perfil .pv-th,.con-perfil .pv-fila{grid-template-columns:minmax(0,1.6fr) 150px 150px 84px;grid-template-areas:"nom des pap est";gap:14px;}
.con-perfil .pv-fila{min-height:56px;padding:8px 20px;}
.con-perfil .pv-c.est,.con-perfil .pv-c.pap{justify-self:start;text-align:left;}
}
/* Pantalla angosta: el perfil es una hoja encima de la lista, que no se mueve; la lista deja el contacto para que el nombre respire. */
@media (max-width:1199px){
.pv-lado{position:fixed;top:0;right:0;bottom:0;z-index:150;width:min(480px,100%);border-width:0 0 0 1px;border-radius:0;box-shadow:var(--elev-3);}
.pv-velo{position:fixed;inset:0;z-index:149;background:rgba(20,18,12,.32);}
.pv-th,.pv-fila{grid-template-columns:minmax(0,1.6fr) 48px 144px 150px 80px;}
.pv-c.con,.pv-th .con{display:none;}
}
/* Celular: la lista en tarjetas y el perfil a pantalla completa. */
@media (max-width:720px){
.pv-velo{display:none;}
.pv-lado{width:100%;border-left-width:0;}
.pv-bus{flex-basis:100%;max-width:none;}
.pv-bus input{min-height:44px;font-size:16px;}
.pv-acc{width:100%;margin-left:0;}
.pv-acc .btn{flex:1 1 auto;justify-content:center;}
.pv-th{display:none;}
.pv-fila{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nom est" "des pap" "con obras";gap:6px 12px;min-height:0;padding:12px 14px;}
.pv-c.nom{grid-area:nom;}
.pv-c.est{grid-area:est;justify-self:end;}
.pv-c.des{grid-area:des;}
.pv-c.pap{grid-area:pap;justify-self:end;text-align:right;}
.pv-c.con{display:block;grid-area:con;}
.pv-c.obras{grid-area:obras;justify-self:end;}
.pv-c.obras::before{content:attr(data-et) ": ";font-weight:400;color:var(--text-3);}
.pv-pie{padding:10px 14px;}
.pv-lado-h{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t x" "a a";padding:12px 14px 10px;}
.pv-lado-acc .btn{flex:1 1 auto;justify-content:center;min-height:44px;}
.pv-lado-b{padding:12px 14px 24px;}
.pv-lado .fld select,.pv-lado .fld input,.pv-lado .fld textarea{min-height:44px;font-size:16px;}
.pv-lado-pie{display:block;padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--st-hair);background:var(--surface);}
.pv-lado-pie .btn{width:100%;min-height:48px;justify-content:center;}
}
@media (pointer:coarse){
.pv-lado .btn,.pv-lado .xbtn{min-height:44px;}
.pv-lado .xbtn{min-width:44px;}
.pv-fila{min-height:56px;}
}
@media (prefers-reduced-motion:reduce){ .pv-fila{transition:none;} }
/* CONFIGURACIÓN DE LA OBRA · 17b (8 oct) */
/* Una sola página continua para administración (diseno/mejora-uxui/pantallas/Configuracion de Obra.dc.html, 17b), sobre la capa .st de
arriba: índice que sigue el desplazamiento, buscador de ajustes, un solo «Guardar» con su cuenta y cinco secciones. En escritorio la barra
queda pegada arriba y el índice a la izquierda; en el teléfono el índice es una tira que se desliza y la barra va fija abajo, sobre la
barra de la obra. Lo que se toca mide 44 px o más y los campos 16 px, para que el teléfono no haga zoom. Solo tokens de :root: el tema
oscuro sale solo. */
#sec-config-obra{--co-top:100px;--co-bar:64px;}
#sec-config-obra [hidden]{display:none !important;}
#sec-config-obra .co{display:flex;flex-direction:column;gap:14px;max-width:1160px;}
.co-aviso{margin:0;}
.co-origen{margin:0;font-size:max(13px,var(--t-sm));line-height:1.45;color:var(--text-2);}
.co-origen:empty{display:none;}
/* La barra de guardar. */
.co-barra{position:sticky;top:var(--co-top);z-index:25;gap:12px;padding:8px 12px;}
.co-estado{display:flex;align-items:center;gap:8px;min-width:0;font-size:max(13px,var(--t-sm));font-weight:500;color:var(--text-2);}
.co-pt{color:var(--bueno);}
.co-pt[data-e="cambio"]{color:var(--gold-deep);}
.co-pt[data-e="busy"]{color:var(--gold-deep);animation:coRespira .9s ease-in-out infinite;}
@keyframes coRespira{0%,100%{opacity:.45;}50%{opacity:1;}}
.co-acc{display:flex;align-items:center;gap:8px;}
.co-acc .btn{min-height:40px;}
.co-acc .btn:disabled{opacity:.6;cursor:default;}
.co-barra.con-cambios .co-guardar{background:var(--gold);border-color:var(--gold-deep);color:var(--gold-on);font-weight:700;}
.co-n{display:inline-block;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--gold);color:var(--gold-on);font-size:12px;font-style:normal;
font-weight:700;line-height:20px;text-align:center;font-variant-numeric:tabular-nums;}
.co-barra.con-cambios .co-n{background:var(--surface);}
/* Índice y buscador. */
.co-cuerpo{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start;}
.co-idx{display:flex;flex-direction:column;gap:10px;min-width:0;}
.co-busca{display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--st-hair-3);border-radius:2px;background:var(--surface);color:var(--text-3);}
.co-busca:focus-within{border-color:var(--gold-deep);box-shadow:var(--focus-halo);}
.co-busca input{flex:1;min-width:0;min-height:44px;border:0;outline:none;background:none;color:var(--text);font:inherit;font-size:16px;}
.co-nav{display:flex;flex-direction:column;gap:2px;min-width:0;}
.co-grupo{display:flex;flex-direction:column;gap:2px;}
.co-grupo-t{margin:10px 8px 4px;font-family:var(--mono);font-size:max(11px,var(--t-micro));font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);}
.co-it{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:6px 10px;border:0;border-radius:2px;background:transparent;
color:var(--text);font:inherit;text-align:left;cursor:pointer;}
.co-it:hover{background:var(--st-sel);}
.co-it:focus-visible{outline:2px solid var(--gold-deep);outline-offset:-2px;}
.co-it.on{background:var(--gold-soft);box-shadow:inset 3px 0 0 var(--gold-deep);}
.co-it-i{display:flex;flex:none;color:var(--text-2);}
.co-it.on .co-it-i{color:var(--gold-ink);}
.co-it-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.co-it-t b{font-size:max(14px,var(--t-base));font-weight:600;line-height:1.25;}
.co-it-t small{font-size:max(12px,var(--t-xs));color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.co-dot{display:inline-block;width:8px;height:8px;flex:none;border-radius:50%;background:var(--text-3);}
.co-dot.cambio{background:var(--gold-deep);}
.co-dot.falla{background:var(--critico);}
.co-sin{margin:0;padding:12px 10px;font-size:max(13px,var(--t-sm));color:var(--text-2);}
.co-leyenda{display:flex;gap:14px;padding:10px 4px 0;border-top:1px solid var(--st-hair);font-size:max(12px,var(--t-xs));color:var(--text-2);}
.co-leyenda span{display:inline-flex;align-items:center;gap:6px;}
/* Las secciones. */
.co-secs{display:flex;flex-direction:column;gap:16px;min-width:0;}
.co-sec{scroll-margin-top:calc(var(--co-top) + var(--co-bar) + 12px);}
.co-sec-h{align-items:flex-start;padding:16px 18px 12px;}
.co-sec-t{min-width:0;}
.co-sec-t h2{font-family:var(--font-display);font-size:var(--t-lg);}
.co-sec-t h2:focus{outline:none;}
.co-sec-t p{margin:4px 0 0;font-size:max(13px,var(--t-sm));line-height:1.45;color:var(--text-2);}
.co-alcance{flex:none;font-family:var(--mono);font-size:max(11px,var(--t-micro));font-weight:600;letter-spacing:.05em;text-transform:uppercase;}
.co-sec-b{padding:2px 18px 14px;}
.co-falla{margin:12px 0 0;}
.co-fila{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:14px 0;border-bottom:1px solid var(--st-hair);}
.co-fila:last-child{border-bottom:0;}
.co-fila-e{display:flex;flex-direction:column;gap:3px;}
.co-fila-e label,.co-lbl{font-size:max(14px,var(--t-base));font-weight:600;color:var(--text);}
.co-fila-e small{font-size:max(12px,var(--t-xs));line-height:1.4;color:var(--text-2);}
.co-fila-c{min-width:0;display:flex;flex-direction:column;gap:6px;}
.co-fila .fld{margin:0;}
.co-fila .fld input,.co-fila .fld textarea,.co-cal-ed .fld input{min-height:44px;font-size:16px;}
.co-fila .fld textarea{min-height:92px;}
.co-fila .fld input[aria-invalid="true"]{border-color:var(--critico);}
.co-err{margin:0;font-size:max(13px,var(--t-sm));font-weight:500;color:var(--st-crit);}
.co-ayuda{margin:0;font-size:max(12px,var(--t-xs));line-height:1.45;color:var(--text-2);}
.co-ayuda b{font-weight:600;color:var(--text);}
.co-cont{align-self:flex-end;font-size:max(12px,var(--t-xs));color:var(--text-2);}
.co-vacio{margin:0;font-size:max(13px,var(--t-sm));color:var(--text-2);}
.co-carga{padding:4px 0;}
.co-carga .btn{margin-left:6px;min-height:44px;}
.co-fechas{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;}
.co-fechas .fld{flex:1 1 150px;min-width:0;}
.co-a{color:var(--text-2);}
.co-dur{font-size:max(12px,var(--t-xs));color:var(--text-2);}
.co-tipo{align-self:flex-start;}
.co-tipo>button{min-height:44px;padding:2px 16px;font-size:max(14px,var(--t-sm));}
.co-tipo>button:disabled{cursor:not-allowed;}
.co-tipo>button:disabled:not([aria-pressed="true"]){color:var(--text-2);}
.co-iva{max-width:140px;}
.co-iva input{text-align:right;font-variant-numeric:tabular-nums;}
.co-correo{display:flex;align-items:center;gap:12px;}
.co-correo .fld{flex:1;min-width:0;}
.co-niveles{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.co-niveles .fld{flex:1 1 110px;min-width:0;}
.co-sep{color:var(--text-2);}
.co-sd{display:flex;align-items:center;gap:12px;min-height:44px;font-size:max(14px,var(--t-base));cursor:pointer;}
.co-sd .switch{flex:none;}
/* Con quién se trabaja. */
.co-fichas,.co-cals,.co-fests,.co-chips{margin:0;padding:0;list-style:none;}
.co-fichas,.co-cals{display:flex;flex-direction:column;gap:6px;}
.co-ficha{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;padding:10px 12px;box-shadow:inset 3px 0 0 var(--gold-deep);}
.co-ficha:hover{box-shadow:inset 3px 0 0 var(--gold-deep);}
.co-ficha.baja{box-shadow:none;}
.co-ficha.baja .co-ficha-t b{color:var(--text-2);}
.co-ficha-t{display:flex;flex-direction:column;gap:2px;min-width:0;}
.co-ficha-t b{font-size:max(14px,var(--t-base));font-weight:600;overflow-wrap:anywhere;}
.co-ficha-t small{font-size:max(12px,var(--t-xs));color:var(--text-2);}
.co-ficha-ac{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;}
.co-ficha-ac .st-ico.bloq{color:var(--text-3);}
.co-ficha-n{grid-column:1 / -1;display:flex;flex-direction:column;gap:8px;margin:0;font-size:max(13px,var(--t-sm));}
.co-ficha-na{display:flex;flex-wrap:wrap;gap:8px;}
.co-ficha-na .btn{min-height:44px;}
.co-agregar{position:relative;}
.co-agregar-in{display:flex;align-items:center;gap:8px;padding:0 12px;border:1px dashed var(--st-hair-3);border-radius:2px;background:var(--surface);color:var(--text-3);}
.co-agregar-in:focus-within{border-style:solid;border-color:var(--gold-deep);box-shadow:var(--focus-halo);}
.co-agregar-in input{flex:1;min-width:0;min-height:44px;border:0;outline:none;background:none;color:var(--text);font:inherit;font-size:16px;}
.co-sug{display:flex;flex-direction:column;margin-top:4px;padding:4px;border:1px solid var(--st-hair-3);border-radius:2px;background:var(--surface);}
.co-sug-i{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:0 10px;border:0;border-radius:2px;background:none;
color:var(--text);font:inherit;font-size:max(14px,var(--t-base));text-align:left;cursor:pointer;}
.co-sug-i:hover,.co-sug-i:focus-visible{background:var(--st-sel);}
.co-sug-i small{font-size:max(12px,var(--t-xs));color:var(--text-2);}
.co-sug-no{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px;}
.co-sug-no p{margin:0;font-size:max(13px,var(--t-sm));line-height:1.45;color:var(--text-2);}
.co-sug-no .btn{min-height:44px;}
.co-chips{display:flex;flex-wrap:wrap;gap:6px;}
.co-cli{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 4px 0 12px;border:1px solid var(--st-info-bd);border-radius:2px;background:var(--st-info-bg);
color:var(--st-info);font-size:max(14px,var(--t-sm));font-weight:600;}
.co-cli.baja{background:var(--st-draft-bg);border-color:var(--st-draft-bd);color:var(--st-draft);}
.co-cli.sin-x{padding-right:12px;}
.co-cli-add{display:flex;align-items:center;gap:8px;}
.co-cli-add .fld{flex:1;min-width:0;}
.co-cli-add .btn{min-height:44px;}
/* Documentos y firmas. */
.co-firmas{display:flex;flex-direction:column;gap:6px;max-height:340px;padding:2px;overflow-y:auto;overscroll-behavior:contain;}
.co-firma{flex:none;display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 12px;border:1px solid var(--st-hair);border-radius:2px;background:var(--surface);
color:var(--text);font:inherit;text-align:left;cursor:pointer;}
.co-firma:hover:not(:disabled){border-color:var(--gold-deep);}
.co-firma:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px;}
.co-firma.on{border-color:var(--gold-deep);background:var(--gold-soft);}
.co-firma.bloq{border-style:dashed;cursor:not-allowed;}
.co-firma:disabled{cursor:default;}
.co-radio{flex:none;width:16px;height:16px;border:1.5px solid var(--st-hair-3);border-radius:50%;box-sizing:border-box;}
.co-firma.on .co-radio{border:5px solid var(--gold-deep);}
.co-av{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:2px;background:var(--surface-3);color:var(--gold-ink);
font-size:12px;font-weight:700;}
.co-firma.bloq .co-av{color:var(--text-2);}
.co-firma-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.co-firma-t b{font-size:max(14px,var(--t-base));font-weight:600;}
.co-firma-t small{font-size:max(12px,var(--t-xs));color:var(--text-2);overflow-wrap:anywhere;}
.co-firma.bloq .co-firma-t b{color:var(--text-2);}
.co-firma-w{flex:none;max-width:42%;font-size:max(12px,var(--t-xs));font-weight:600;line-height:1.3;color:var(--st-crit);text-align:right;}
.co-firma-nota{margin:0;font-size:max(13px,var(--t-sm));line-height:1.45;color:var(--st-crit);}
.co-firma-nota:empty{display:none;}
.co-aviso-f{color:var(--st-crit);}
/* Calendario. */
.co-dias{display:flex;gap:3px;}
.co-dia{flex:1 1 0;min-width:40px;max-width:60px;min-height:44px;padding:0;border:1px solid var(--st-hair-3);border-radius:2px;background:var(--surface);color:var(--text-2);
font:inherit;font-size:max(14px,var(--t-base));font-weight:600;cursor:pointer;}
.co-dia:hover:not(:disabled){border-color:var(--gold-deep);}
.co-dia.on{border-color:var(--gold-deep);background:var(--gold-soft);color:var(--gold-ink);}
.co-dia:disabled{cursor:default;}
.co-fests{display:flex;flex-wrap:wrap;gap:6px;}
.co-fest{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:0 4px 0 10px;border:1px solid var(--st-hair-3);border-radius:2px;
font-size:max(13px,var(--t-sm));font-variant-numeric:tabular-nums;}
.co-fest.sin-x{padding-right:10px;}
.co-sinfest{font-size:max(13px,var(--t-sm));color:var(--text-2);}
.co-fest-add{display:flex;align-items:center;gap:8px;margin-top:2px;}
.co-fest-add .fld{flex:0 1 190px;min-width:0;}
.co-fest-add .btn{min-height:44px;}
.co-cal{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;}
.co-cal-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.co-cal-t b{font-size:max(14px,var(--t-base));font-weight:600;overflow-wrap:anywhere;}
.co-cal-t small{font-size:max(12px,var(--t-xs));color:var(--text-2);}
.co-cal-ac{display:flex;gap:4px;}
.co-cal-nuevo{align-self:flex-start;min-height:44px;}
.co-cal-ed{display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid var(--st-hair-3);border-radius:2px;background:var(--st-canvas);}
.co-cal-ed .fld label{display:block;margin-bottom:6px;}
.co-cal-ed-ac{display:flex;justify-content:flex-end;gap:8px;}
.co-cal-ed-ac .btn{min-height:44px;}
.co-cal-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;}
.co-cal-txt{flex:1;margin:0;font-size:max(13px,var(--t-sm));line-height:1.45;color:var(--text);}
.co-cal-pie .btn{flex:none;min-height:44px;}
.co-cal-pie .btn[hidden]{display:none;}
.co-cal-pie .btn:disabled{opacity:.6;cursor:default;}
/* Flujo de etapas. */
.co-mapa-c{overflow-x:auto;padding:14px;border:1px solid var(--st-hair);border-radius:2px;background:var(--st-canvas);}
.co-mapa{display:flex;align-items:stretch;min-width:max-content;margin:0;padding:0;list-style:none;}
.co-etapa{flex:none;width:164px;}
.co-etapa-b{display:flex;flex-direction:column;align-items:flex-start;gap:5px;width:100%;height:100%;min-height:96px;padding:12px 14px;border:1px solid var(--st-hair-3);
border-radius:2px;background:var(--surface);color:var(--text);font:inherit;text-align:left;cursor:pointer;}
.co-etapa-b:hover{border-color:var(--gold-deep);}
.co-etapa.actual .co-etapa-b{border-color:var(--gold-deep);box-shadow:inset 3px 0 0 var(--gold-deep);}
.co-etapa-n{font-size:max(11px,var(--t-micro));font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);}
.co-etapa-b b{font-family:var(--font-display);font-size:var(--t-md);font-weight:600;}
.co-etapa-b small{font-size:max(12px,var(--t-xs));line-height:1.35;color:var(--text-2);}
.co-etapa-b small.nada{color:var(--st-crit);}
.co-paso{flex:1 0 104px;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 8px;}
.co-paso-l{position:relative;display:block;height:1px;background:var(--text-3);}
.co-paso-l::after{content:"";position:absolute;right:0;top:-4px;border-left:6px solid var(--text-3);border-top:4px solid transparent;border-bottom:4px solid transparent;}
.co-paso-t{font-size:max(12px,var(--t-xs));line-height:1.35;color:var(--text);text-align:center;}
.co-paso-v{font-size:max(12px,var(--t-xs));line-height:1.35;color:var(--text-2);text-align:center;}
.co-otros{display:flex;flex-direction:column;gap:4px;margin:10px 0 0;padding:0;list-style:none;font-size:max(13px,var(--t-sm));}
.co-otros li{display:flex;flex-wrap:wrap;gap:4px 10px;}
.co-otros span{color:var(--text-2);}
.co-editor{display:flex;align-items:center;gap:16px;padding:14px 16px;border:1px solid var(--st-hair);border-radius:2px;background:var(--surface-2);}
.co-editor-i{display:flex;flex:none;color:var(--gold-ink);}
.co-editor-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.co-editor-t b{font-size:max(14px,var(--t-md));font-weight:600;}
.co-editor-t span{font-size:max(13px,var(--t-sm));line-height:1.45;color:var(--text-2);}
.co-editor-t small{font-size:max(12px,var(--t-xs));color:var(--text-2);}
.co-editor .btn{flex:none;min-height:44px;}
.co-editor .btn:disabled{opacity:.6;cursor:default;}
.co-mas{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--st-hair);}
.co-mas span{flex:1;font-size:max(13px,var(--t-sm));line-height:1.45;color:var(--text-2);}
.co-mas .btn{flex:none;min-height:44px;}
@media (min-width:721px){
.co-fila{grid-template-columns:200px minmax(0,1fr);gap:16px;}
.co-sec-b{padding:2px 22px 16px;}
.co-sec-h{padding:16px 22px 12px;}
.co-dia{flex:none;width:52px;max-width:none;}
}
@media (pointer:fine) and (min-width:721px){
.co-fila .fld input,.co-fila .fld textarea,.co-cal-ed .fld input{min-height:38px;font-size:var(--t-base);}
.co-fila .fld textarea{min-height:80px;}
.co-busca input,.co-agregar-in input{min-height:38px;font-size:var(--t-base);}
}
@media (min-width:1100px){
.co-cuerpo{grid-template-columns:260px minmax(0,1fr);gap:24px;}
.co-idx{position:sticky;top:calc(var(--co-top) + var(--co-bar));max-height:calc(100vh - var(--co-top) - var(--co-bar) - 16px);overflow-y:auto;overscroll-behavior:contain;}
}
@media (max-width:1099px){
/* Sin lugar para un índice al lado: la búsqueda se desplaza con la página y las secciones quedan en una tira pegada arriba. */
.co-idx{display:contents;}
.co-nav{position:sticky;top:var(--co-top);z-index:24;flex-direction:row;gap:6px;padding:6px 0;overflow-x:auto;background:var(--bg);scrollbar-width:none;}
.co-nav::-webkit-scrollbar{display:none;}
.co-grupo{display:contents;}
.co-grupo-t,.co-leyenda{display:none;}
.co-it{flex:none;width:auto;min-height:44px;padding:0 12px;border:1px solid var(--st-hair-3);background:var(--surface);}
.co-it.on{border-color:var(--gold-deep);box-shadow:none;}
.co-it-i,.co-it-t small{display:none;}
.co-it-t b{white-space:nowrap;}
.co-sin{flex:1;}
.co-sec{scroll-margin-top:calc(var(--co-top) + 64px);}
}
@media (max-width:720px){
#sec-config-obra .co{padding-bottom:84px;}
.co-cal-pie,.co-editor,.co-mas{flex-direction:column;align-items:stretch;}
.co-cal-pie .btn,.co-editor .btn,.co-mas .btn{width:100%;min-height:48px;}
.co-alcance{display:none;}
/* La barra de guardar va fija abajo, sobre la barra de la obra, y solo cuando hay algo que guardar. */
.co-barra{position:fixed;left:0;right:0;top:auto;bottom:var(--ic3-nav);z-index:60;padding:10px 16px 12px;border-radius:0;border-width:1px 0 0;}
.co-barra.vacia{display:none;}
.co-acc{flex:none;}
.co-acc .btn{min-height:48px;}
.co-ficha{grid-template-columns:minmax(0,1fr);}
.co-ficha-ac{justify-content:flex-start;}
.co-ficha-ac .st-ico,.co-cal-ac .st-ico,.co-fest .st-ico,.co-cli .st-ico{min-width:44px;min-height:44px;}
.co-firma-w{max-width:none;flex-basis:100%;text-align:left;}
.co-firma{flex-wrap:wrap;}
.co-etapa{width:auto;}
.co-mapa{flex-direction:column;min-width:0;}
.co-paso{flex:none;flex-direction:column;align-items:flex-start;padding:8px 0 8px 16px;margin-left:22px;border-left:1px solid var(--text-3);}
.co-paso-l{display:none;}
.co-paso-t,.co-paso-v{text-align:left;}
.co-mapa-c{overflow-x:visible;}
.co-fest-add .fld{flex:1 1 auto;}
}
@media (prefers-reduced-motion:reduce){ .co-pt[data-e="busy"]{animation:none;} }
/* FIN DE LA CONFIGURACIÓN DE LA OBRA */
/* ALTA DE PROYECTO · CIERRE Y PANEL (8 oct) */
/* Al crear la obra el asistente se queda con una pantalla de confirmación y tres salidas (17c), y mientras se llena enseña a la derecha
«Así nace el proyecto» con lo que va tecleado. En el teléfono las salidas van una bajo otra, la principal al final, al alcance del pulgar. */
.asis-ok{display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px 4px 4px;text-align:center;}
.asis-ok-ic{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--bueno-bg);color:var(--bueno);}
.asis-ok-ic svg{width:24px;height:24px;}
.asis-ok h3{margin:0;font-family:var(--font-display);font-size:var(--t-xl);}
.asis-ok-t{max-width:520px;margin:0;font-size:max(14px,var(--t-base));line-height:1.55;color:var(--text-2);}
.asis-ok-av{width:100%;max-width:520px;margin:0;padding:0;list-style:none;text-align:left;}
.asis-ok-av li{padding:8px 12px;border-left:3px solid var(--checar);background:var(--checar-bg);font-size:max(13px,var(--t-sm));line-height:1.45;}
.asis-ok-av li+li{margin-top:4px;}
.asis-ok-ac{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding-top:8px;}
.asis-ok-ac .btn{min-height:44px;}
.asis-ok-ac .btn.primary{background:var(--gold);border-color:var(--gold-deep);color:var(--gold-on);font-weight:700;}
.asis-modal{max-width:660px;}
.asis-con-panel{max-width:960px;}
.asis-dos{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;}
.asis-nace{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1px solid var(--st-hair);border-radius:2px;background:var(--surface-2);}
.asis-nace-h{font-family:var(--mono);font-size:max(11px,var(--t-micro));font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);}
.asis-nace-n{display:flex;flex-direction:column;gap:2px;}
.asis-nace-n b{font-family:var(--font-display);font-size:var(--t-md);font-weight:600;overflow-wrap:anywhere;}
.asis-nace-n span{font-size:max(13px,var(--t-sm));color:var(--text-2);}
.asis-nace dl{display:flex;flex-direction:column;margin:0;border-top:1px solid var(--st-hair);}
.asis-nace dl>div{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--st-hair);font-size:max(13px,var(--t-sm));}
.asis-nace dt{flex:none;width:84px;color:var(--text-2);}
.asis-nace dd{flex:1;min-width:0;margin:0;overflow-wrap:anywhere;color:var(--text);}
.asis-nace dd.nada{color:var(--text-2);}
.asis-nace dd.mal{color:var(--st-crit);font-weight:600;}
.asis-nace p{margin:0;font-size:max(12px,var(--t-xs));line-height:1.5;color:var(--text-2);}
@media (min-width:1000px){
.asis-dos{grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:start;}
.asis-nace{position:sticky;top:0;}
}
@media (max-width:720px){
.asis-ok-ac{flex-direction:column;align-items:stretch;}
.asis-ok-ac .btn{width:100%;min-height:48px;}
}
/* FIN DEL ALTA DE PROYECTO */
/* ARCHIVAR · VERSIÓN Y AVISOS (8 oct) */
/* Debajo de un PDF recién archivado: la versión que quedó, las ligas para abrirlo y cada aviso (firmas que faltan, portal), uno por renglón. */
.arch-msg{display:flex;flex-direction:column;gap:8px;margin:10px 16px;}
.arch-msg .alert{margin:0;}
.modal .alert+.alert{margin-top:8px;}
/* En la ventana de avisos la acción va abajo, al alcance del pulgar. */
@media (max-width:720px){ .modal #arch-ok{min-height:48px;} }
/* DOCUMENTOS · ARCHIVO CON VERSIONES (8 oct) */
/* La pantalla de Documentos (25c) sobre la capa «ESTILO STITCH»: búsqueda y filtros arriba, carpetas por tipo, lista y detalle.
En escritorio ancho van lado a lado (carpetas, lista y detalle); en celular y tableta se ve la lista y, al elegir un
documento, su detalle en pantalla completa con las acciones fijas abajo. Lo táctil mide 44 px o más y los campos, 16 px. */
.dcs{--st-top:calc(150px*var(--esc,1));display:flex;flex-direction:column;gap:12px;}
.dcs [hidden]{display:none !important;}
body:has(.dcs) .fab,body:has(.dcs) .fab-menu{display:none !important;}
/* ---- Barra: búsqueda, versiones que se enseñan, filtros y «Nuevo» ---- */
.dcs-barra{display:flex;flex-direction:column;gap:8px;}
.dcs-tool{flex-wrap:wrap;justify-content:flex-start;gap:8px 10px;}
.dcs-buscar{position:relative;display:flex;align-items:center;flex:1 1 260px;min-width:0;}
.dcs-buscar>svg{position:absolute;left:10px;color:var(--text-3);pointer-events:none;}
.dcs-buscar input{width:100%;min-height:36px;padding:6px 10px 6px 34px;border:1px solid var(--st-hair-3);border-radius:2px;
background:var(--surface-2);color:var(--text);font:inherit;font-size:var(--t-sm);}
.dcs-buscar input::placeholder{color:var(--text-3);}
.dcs-buscar input:focus{outline:none;border-color:var(--gold-deep);box-shadow:inset 0 0 0 1px var(--gold-deep);}
.dcs-filtros-b{min-height:36px;}
.dcs-filtros-b.on{border-color:var(--gold-deep);color:var(--gold-ink);}
.dcs-n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:4px;border-radius:2px;
background:var(--gold);color:var(--ink);font-family:var(--mono);font-size:var(--t-micro);font-weight:700;}
.dcs-nuevo{position:relative;display:inline-flex;}
.dcs-nuevo>.btn{min-height:36px;}
.dcs-menu{min-width:280px;}
.dcs-menu>button{align-items:flex-start;}
.dcs-menu>button span{display:flex;flex-direction:column;gap:1px;}
.dcs-menu small{font-size:var(--t-xs);color:var(--text-3);}
.dcs-extra{display:flex;flex-wrap:wrap;gap:12px 28px;padding:12px;background:var(--surface);border:1px solid var(--st-hair);border-radius:2px;}
.dcs-grupo-f{display:flex;flex-direction:column;gap:6px;min-width:0;}
.dcs-fechas{display:flex;flex-wrap:wrap;gap:8px;}
.dcs-fecha{display:flex;flex-direction:column;gap:3px;font-size:var(--t-xs);color:var(--text-3);}
.dcs-fecha input{min-height:36px;padding:4px 8px;border:1px solid var(--st-hair-3);border-radius:2px;background:var(--surface-2);color:var(--text);
font:inherit;font-size:var(--t-sm);}
.dcs-fecha input:focus{outline:none;border-color:var(--gold-deep);box-shadow:inset 0 0 0 1px var(--gold-deep);}
.dcs-link{padding:0 2px;border:0;background:none;color:var(--gold-ink);font:inherit;font-weight:600;text-decoration:underline;
text-underline-offset:2px;cursor:pointer;}
.dcs-link:hover{color:var(--text);}
.dcs-link:disabled{opacity:.5;cursor:default;text-decoration:none;}
.dcs-extra .dcs-link{align-self:flex-end;min-height:36px;}
/* ---- Cuerpo: carpetas, lista y detalle ---- */
.dcs-cuerpo{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start;}
.dcs-carp{display:flex;gap:6px;min-width:0;overflow-x:auto;padding:2px 1px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.dcs-carp::-webkit-scrollbar{display:none;}
.dcs-carp-b{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:3px 12px;border:1px solid var(--st-hair);border-radius:2px;
background:var(--surface);color:var(--text-2);font:inherit;font-size:var(--t-xs);font-weight:500;white-space:nowrap;cursor:pointer;}
.dcs-carp-b svg{color:var(--text-3);}
.dcs-carp-b i{font-family:var(--mono);font-style:normal;font-weight:600;color:var(--text-3);}
.dcs-carp-b:hover{border-color:var(--gold-deep);}
.dcs-carp-b.on{border:2px solid var(--text);padding:2px 11px;color:var(--text);font-weight:600;}
.dcs-carp-b.on svg{color:var(--gold-ink);}
.dcs-lista-col{display:flex;flex-direction:column;gap:8px;min-width:0;}
.dcs-total{min-height:18px;font-family:var(--mono);font-size:var(--t-xs);color:var(--text-3);}
.dcs-lista{display:flex;flex-direction:column;gap:6px;}
.dcs-lista[aria-busy="true"]{opacity:.7;}
.dcs-grupo{padding:10px 2px 0;}
.dcs-vacio{padding:26px 14px;}
.dcs-vacio .btn{margin-top:12px;}
.dcs-fila{width:100%;display:grid;grid-template-columns:36px minmax(0,1fr);align-items:start;gap:4px 12px;padding:10px 12px;text-align:left;
color:var(--text);font:inherit;cursor:pointer;}
.dcs-ico{grid-row:1 / span 2;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--st-hair);border-radius:2px;
background:var(--surface-3);color:var(--gold-ink);}
.dcs-fila-t{min-width:0;}
.dcs-tit{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:var(--t-base);font-weight:650;line-height:1.3;
letter-spacing:-.005em;overflow-wrap:anywhere;}
.dcs-meta{display:block;margin-top:2px;font-size:var(--t-xs);line-height:1.45;color:var(--text-3);overflow-wrap:anywhere;}
.dcs-fila-e{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.dcs-v{font-family:var(--mono);font-weight:600;}
.dcs-fila .st-chip svg{width:13px;height:13px;}
/* ---- Detalle ---- */
.dcs-det-col{min-width:0;}
.dcs-det{padding:0;overflow:hidden;}
.dcs-det-vacio{padding:26px 18px;color:var(--text-2);}
.dcs-det-vacio p{margin:0;}
.dcs-det-h{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 18px 4px;}
.dcs-det-t{min-width:0;max-width:100%;}
.dcs-h{margin:3px 0 0;font-family:var(--slab);font-size:var(--t-xl);font-weight:600;letter-spacing:-.02em;line-height:1.2;overflow-wrap:anywhere;}
.dcs-h:focus{outline:none;}
.dcs-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 18px 4px;}
.dcs-chips .st-chip svg{width:13px;height:13px;}
.dcs-aviso{margin:10px 18px 0;padding:10px 12px;font-size:var(--t-sm);}
.dcs-cinta{margin:0;padding:12px 18px 4px;}
.dcs-dato{margin:6px 18px 0;font-size:var(--t-sm);line-height:1.5;color:var(--text-2);overflow-wrap:anywhere;}
.dcs-dato .st-eyebrow{margin-right:8px;}
.dcs-acc{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px 16px;}
.dcs-acc>a.btn,.dcs-acc>.btn{min-height:36px;}
.dcs-sec{padding:14px 18px 16px;border-top:1px solid var(--st-hair);}
.dcs-sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.dcs-sec-t{display:flex;align-items:center;gap:10px;margin:0;font-size:var(--t-md);font-weight:600;letter-spacing:-.01em;}
.dcs-nota{margin:8px 0 0;font-size:var(--t-sm);line-height:1.5;color:var(--text-2);}
.dcs-acc-s{margin-top:12px;}
.dcs-previa{display:none;}
.dcs-marco{display:block;width:100%;height:min(72vh,760px);border:1px solid var(--st-hair);border-radius:2px;background:var(--surface-3);}
.dcs-sin-previa{justify-content:flex-start;text-align:left;}
.dcs-firmas{list-style:none;margin:0;padding:0;}
.dcs-firma{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 0;border-bottom:1px solid var(--st-hair-2);}
.dcs-firma:last-child{border-bottom:0;}
.dcs-ini{flex:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--st-hair);border-radius:2px;
background:var(--surface-3);color:var(--gold-ink);font-family:var(--mono);font-size:11px;font-weight:700;}
.dcs-firma-t{display:flex;flex-direction:column;min-width:0;}
.dcs-firma-t b{font-size:var(--t-sm);font-weight:600;}
.dcs-firma-t small{font-size:var(--t-xs);color:var(--text-3);overflow-wrap:anywhere;}
.dcs-vers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.dcs-ver{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:start;gap:4px 10px;min-height:48px;padding:8px 10px;
border:1px solid var(--st-hair);border-radius:2px;background:var(--surface);color:var(--text);font:inherit;text-align:left;cursor:pointer;}
.dcs-ver:hover{background:var(--st-sel);}
.dcs-ver.sel{border-color:var(--gold-deep);box-shadow:inset 3px 0 0 var(--gold-deep);}
.dcs-ver-n{grid-row:1 / span 2;font-family:var(--mono);font-size:var(--t-sm);font-weight:700;color:var(--gold-ink);padding-top:1px;}
.dcs-ver-t{display:flex;flex-direction:column;gap:2px;min-width:0;}
.dcs-ver-t b{font-size:var(--t-sm);font-weight:600;overflow-wrap:anywhere;}
.dcs-ver-t small{font-size:var(--t-xs);line-height:1.45;color:var(--text-3);overflow-wrap:anywhere;}
.dcs-ver-e{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;}
.dcs-ver-e .st-chip svg{width:13px;height:13px;}
.dcs-redac summary{display:flex;align-items:center;min-height:44px;font-weight:600;cursor:pointer;}
.dcs-redac-t{margin:6px 0 0;white-space:pre-wrap;line-height:1.6;overflow-wrap:anywhere;}
.dcs-fija{display:none;}
.fm-doc{margin-bottom:10px;font-size:var(--t-sm);color:var(--text-2);overflow-wrap:anywhere;}
.fm-doc b{color:var(--text);}
/* ---- Tableta y celular: la lista o el detalle, nunca los dos ---- */
@media (max-width:1099px){
.dcs[data-panel="lista"] .dcs-det-col{display:none;}
.dcs[data-panel="detalle"] .dcs-barra,.dcs[data-panel="detalle"] .dcs-carp,.dcs[data-panel="detalle"] .dcs-lista-col{display:none;}
.dcs-acc{display:none;}
.dcs-det{border-left:0;border-right:0;}
.dcs[data-panel="detalle"] .dcs-fija{display:flex;align-items:center;gap:8px;position:sticky;bottom:0;z-index:40;padding:10px 12px;
background:var(--surface);border-top:1px solid var(--st-hair-3);}
.dcs-fija .st-cta{flex:1 1 auto;}
.dcs-fija .btn{min-height:48px;min-width:48px;justify-content:center;}
}
@media (max-width:720px){
.dcs[data-panel="detalle"] .dcs-fija{bottom:var(--ic3-nav);}
body:has(.dcs[data-panel="detalle"]) .toast{bottom:calc(var(--ic3-nav) + 84px);}
.dcs-tool{padding:8px;}
.dcs-buscar{flex:1 1 100%;}
.dcs-buscar input,.dcs-fecha input{min-height:48px;font-size:16px;}
.dcs-buscar input{padding-left:38px;}
.dcs-seg{width:100%;}
.dcs-seg>button{flex:1 1 0;justify-content:center;min-height:44px;}
.dcs-filtros-b,.dcs-nuevo>.btn{min-height:44px;}
.dcs-nuevo{margin-left:auto;}
.dcs-menu{right:0;max-width:calc(100vw - 24px);}
.dcs-extra{flex-direction:column;gap:14px;}
.dcs-extra .st-seg>button{min-height:44px;}
.dcs-fecha{flex:1 1 140px;}
.dcs-carp-b{min-height:44px;padding:3px 14px;font-size:14px;}
.dcs-carp-b.on{padding:2px 13px;}
.dcs-fila{padding:12px;}
.dcs-tit{font-size:15px;}
.dcs-meta{font-size:13px;}
.dcs-fila .st-chip{min-height:26px;font-size:12.5px;}
.dcs-det-h{padding:14px 14px 2px;}
.dcs-h{font-size:20px;}
.dcs-chips{padding:8px 14px 2px;}
.dcs-aviso{margin:10px 14px 0;font-size:14px;}
.dcs-cinta{padding:10px 14px 2px;}
.dcs-cinta{gap:4px 16px;}
.dcs-cinta>*{padding:0;border-left:0;}
.dcs-dato{margin:6px 14px 0;font-size:14px;}
.dcs-sec{padding:14px;}
.dcs-sec-t{font-size:16px;}
.dcs-nota{font-size:14px;}
.dcs-acc-s .btn{width:100%;min-height:48px;justify-content:center;}
.dcs-volver{min-height:44px;}
.dcs-ver{padding:10px;}
}
@media (min-width:1100px){
.dcs-cuerpo{grid-template-columns:minmax(300px,380px) minmax(0,1fr);}
.dcs-carp{grid-column:1 / -1;}
.dcs-volver{display:none;}
.dcs-previa{display:block;}
.dcs-det-col{position:sticky;top:var(--st-top,150px);max-height:calc(100vh - var(--st-top,150px) - 16px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;}
}
@media (min-width:1400px){
.dcs-cuerpo{grid-template-columns:184px minmax(300px,380px) minmax(0,1fr);}
.dcs-carp{grid-column:auto;flex-direction:column;overflow:visible;padding:0;gap:2px;}
.dcs-carp-b{width:100%;min-height:34px;border-color:transparent;background:transparent;padding:3px 10px;position:relative;font-size:var(--t-sm);}
.dcs-carp-b .dcs-carp-t{flex:1;text-align:left;}
.dcs-carp-b:hover{background:var(--surface-2);border-color:transparent;}
.dcs-carp-b.on{border:0;background:var(--gold-soft);padding:3px 10px;}
.dcs-carp-b.on::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;background:var(--gold);}
}
@media (pointer:coarse){
.dcs .st-seg>button,.dcs .st-hd,.dcs .dcs-ver,.dcs .btn,.dcs .dcs-carp-b{min-height:44px;}
.dcs .dcs-buscar input,.dcs .dcs-fecha input{min-height:44px;font-size:16px;}
.dcs .dcs-link{min-height:44px;padding:0 6px;}
}
/* La barra de vistas de Documentos lleva una pestaña más («Todos»): en anchos medios se desliza en vez de ensanchar la página. */
#vistas-bar .cv-barra{max-width:100%;overflow-x:auto;scrollbar-width:none;}
#vistas-bar .cv-barra::-webkit-scrollbar{display:none;}
#vistas-bar .cv-lb,#vistas-bar .cv-t{flex:0 0 auto;}
@media (prefers-reduced-motion:reduce){ .dcs-fila,.dcs-ver{transition:none;} }
/* REVISIÓN · BANDEJA DE TODAS LAS OBRAS (8 oct) */
/* Lo que espera a la oficina en cada obra, con la obra de lo más viejo primero. Cada obra es una tarjeta con sus renglones
(jornadas y cierres); un renglón entero se toca y lleva a Revisión de su obra. En el celular, una columna con renglones de 56 px o más. */
.rvb{display:flex;flex-direction:column;gap:14px;max-width:1040px;}
body:has(.rvb) .fab,body:has(.rvb) .fab-menu{display:none !important;}
.rvb-resumen{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding:14px 18px;}
.rvb-cifra{display:flex;flex-direction:column;gap:1px;min-width:72px;}
.rvb-cifra b{font-size:var(--t-2xl);font-weight:600;line-height:1.1;letter-spacing:-.02em;}
.rvb-cifra span{font-size:var(--t-xs);color:var(--text-3);}
.rvb-act{margin-left:auto;min-height:36px;}
.rvb-vacio .empty{padding:34px 18px;}
.rvb-obra{overflow:hidden;}
.rvb-obra-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:14px 18px;border-bottom:1px solid var(--st-hair);}
.rvb-obra-t{flex:1 1 220px;min-width:0;}
.rvb-obra-t h2{margin:0;font-family:var(--slab);font-size:var(--t-lg);font-weight:600;letter-spacing:-.01em;line-height:1.25;overflow-wrap:anywhere;}
.rvb-obra-s{display:block;margin-top:2px;font-size:var(--t-xs);color:var(--text-3);}
.rvb-obra-h .btn{min-height:36px;}
.rvb-items{display:flex;flex-direction:column;gap:6px;padding:10px;}
.rvb-fila{width:100%;display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;text-align:left;
color:var(--text);font:inherit;cursor:pointer;}
.rvb-fila-t{display:flex;flex-direction:column;gap:3px;min-width:0;}
.rvb-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px;}
.rvb-motivo{font-size:var(--t-xs);color:var(--text-2);overflow-wrap:anywhere;}
.rvb-fila-e{display:flex;align-items:center;gap:8px;color:var(--text-3);}
.rvb-fila .st-chip svg{width:13px;height:13px;}
.rvb-mas{margin:0;padding:4px 18px 14px;font-size:var(--t-sm);color:var(--text-3);}
@media (max-width:720px){
.rvb{gap:12px;}
.rvb-resumen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;padding:12px 14px;}
.rvb-cifra{min-width:0;}
.rvb-cifra b{font-size:24px;}
.rvb-act{grid-column:1 / -1;width:100%;min-height:44px;justify-content:center;margin-left:0;}
.rvb-obra-h{padding:12px 14px;}
.rvb-obra-h .btn{min-height:44px;}
.rvb-items{padding:8px;}
.rvb-fila{grid-template-columns:36px minmax(0,1fr);gap:8px 12px;min-height:56px;padding:12px;}
.rvb-fila-e{grid-column:2;justify-content:space-between;}
.rvb-fila .dcs-tit{font-size:15px;}
.rvb-fila .dcs-meta{font-size:13px;}
.rvb-fila .st-chip{min-height:26px;font-size:12.5px;}
}
@media (pointer:coarse){ .rvb .btn{min-height:44px;} }
/* ===================== PROVEEDORES POR PARTIDA · revisión del Excel (xp-) =====================
* Columnas del archivo, altas de proveedores y códigos con varios proveedores. Es la misma lista de hallazgos
* de la revisión (xv-), con controles para decidir: en el celular cada decisión es una fila a todo lo ancho,
* con botones de 44 px; en escritorio el selector de cada columna se pone a la derecha de su encabezado. */
.xp-todo{display:flex;flex-direction:column;gap:12px;margin:12px 0;}
.xp-ocupado{opacity:.55;pointer-events:none;transition:opacity .15s;}
.xp{border:1px solid var(--line);border-left:3px solid var(--gold-deep);background:var(--surface-2);padding:12px 14px;border-radius:var(--r-sm);min-width:0;}
.xp-t{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:var(--t-base);font-weight:650;color:var(--text);}
.xp-t i,.xp > summary i{font-style:normal;font-size:var(--t-xs);font-weight:700;padding:1px 7px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--text-2);font-variant-numeric:tabular-nums;}
.xp > summary{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:44px;cursor:pointer;list-style:none;}
.xp > summary::-webkit-details-marker{display:none;}
.xp > summary::before{content:"";width:7px;height:7px;border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:rotate(-45deg);transition:transform .15s;flex:none;margin-right:4px;}
.xp[open] > summary::before{transform:rotate(45deg);}
.xp > summary:focus-visible,.xp .btn:focus-visible,.xp select:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px;}
.xp-nota{margin:6px 0 8px;font-size:var(--t-sm);line-height:1.5;color:var(--text-2);}
.xp-aviso{margin:8px 0;padding:10px 12px;border-left:3px solid var(--checar);background:var(--checar-bg);font-size:var(--t-sm);line-height:1.5;color:var(--text);border-radius:var(--r-xs);}
.xp-aviso.mal{border-left-color:var(--critico);background:var(--critico-bg);}
.xp-aviso.info{border-left-color:var(--info);background:var(--info-bg);}
.xp-aviso .btn{margin-top:8px;}
.xp-marca,.xp-chip{display:inline-flex;align-items:center;font-size:var(--t-xs);font-weight:600;padding:2px 8px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--text-2);line-height:1.4;}
.xp-marca.sin,.xp-chip.mal{background:var(--critico-bg);color:var(--critico);}
.xp-chip.ok{background:var(--bueno-bg);color:var(--bueno);}
.xp-cols,.xp-pvs,.xp-cfs,.xp-cf-p{list-style:none;margin:0;padding:0;}
.xp-cols{display:grid;margin-top:6px;}
.xp-col{display:grid;gap:6px;padding:10px 0;border-top:1px solid var(--line);}
.xp-col.sin{background:var(--checar-bg);margin:0 -8px;padding:10px 8px;}
.xp-enc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0;}
.xp-enc b{overflow-wrap:anywhere;font-weight:600;}
.xp-num{font-size:var(--t-xs);color:var(--text-2);font-variant-numeric:tabular-nums;}
.xp-campo label{display:block;font-size:var(--t-xs);color:var(--text-2);margin-bottom:3px;}
.xp-campo select{width:100%;min-height:44px;font-size:16px;font-weight:500;border:1px solid var(--line-2);background:var(--surface);color:var(--text);border-radius:var(--r-sm);padding:6px 10px;}
.xp-campo select:hover{border-color:var(--text-3);}
.xp-pvs,.xp-cfs{display:grid;gap:8px;}
.xp-pv,.xp-cf{border:1px solid var(--line);background:var(--surface);padding:10px 12px;border-radius:var(--r-sm);display:grid;gap:8px;min-width:0;}
.xp-pv.conf,.xp-cf.dec{border-left:3px solid var(--bueno);}
.xp-pv-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0;}
.xp-pv-t b{overflow-wrap:anywhere;}
.xp-pv-n{font-size:var(--t-xs);color:var(--text-2);font-variant-numeric:tabular-nums;font-weight:500;}
.xp-q{margin:0;font-size:var(--t-base);font-weight:600;color:var(--text);}
.xp-pv-a,.xp-acc{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.xp-ok{font-size:var(--t-sm);font-weight:600;color:var(--bueno);}
.xp-conf{border:1px solid var(--gold-deep);background:var(--gold-soft);padding:10px 12px;border-radius:var(--r-sm);margin:0 0 8px;}
.xp-conf p{margin:0 0 8px;font-size:var(--t-sm);line-height:1.5;color:var(--text);}
.xp-cf-t{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;}
.xp-cf-t span,.xp-cf-c{font-size:var(--t-sm);color:var(--text-2);}
.xp-cf-p{display:grid;gap:2px;font-size:var(--t-sm);}
.xp-cf-n{margin:0;font-size:var(--t-sm);color:var(--text-2);line-height:1.45;}
.xp .btn.on{background:var(--gold);border-color:var(--gold-deep);color:var(--gold-on);font-weight:700;}
.xp .btn.on::before{content:"✓";font-weight:700;}
.xp-rev{display:flex;justify-content:flex-end;}
@media (min-width:721px){
.xp-col{grid-template-columns:minmax(0,1fr) minmax(240px,320px);align-items:center;gap:12px;}
.xp-campo select{min-height:34px;font-size:var(--t-base);}
.xp-pv{grid-template-columns:minmax(0,1fr) auto;align-items:center;}
.xp-pv .xp-q,.xp-pv .xp-pv-t{grid-column:1;}
.xp-pv .xp-pv-a{grid-column:2;grid-row:1 / span 2;justify-content:flex-end;}
}
@media (pointer:coarse){ .xp .btn,.xp .btn.sm{min-height:44px;} }
@media (prefers-reduced-motion:reduce){ .xp > summary::before,.xp-ocupado{transition:none;} }
/* ===================== CATÁLOGO · proveedores y comparación (cp-) ===================== */
.cp-barra{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0;min-width:0;}
.cp-barra input[type=search],.cp-barra select{min-height:44px;font-size:16px;border:1px solid var(--line-2);background:var(--surface);color:var(--text);border-radius:var(--r-sm);padding:0 10px;min-width:0;}
.cp-barra input[type=search]{flex:1 1 220px;}
.cp-esc{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:var(--t-sm);cursor:pointer;}
.cp-esc input,.data input[type=checkbox]{width:20px;height:20px;}
@media (min-width:721px){ .cp-barra input[type=search],.cp-barra select{min-height:34px;font-size:var(--t-base);} .cp-esc{min-height:34px;} }
.cp-sin{display:inline-flex;align-items:center;font-size:var(--t-xs);font-weight:600;padding:2px 8px;border-radius:var(--r-pill);background:var(--critico-bg);color:var(--critico);}
.rv-caras-c{margin-left:auto;display:inline-flex;align-items:center;gap:8px;}
.rv-caras-c label{font-size:var(--t-xs);color:var(--text-2);white-space:nowrap;}
.rv-caras-c select{min-height:34px;max-width:280px;border:1px solid var(--line-2);background:var(--surface);color:var(--text);border-radius:var(--r-sm);padding:0 8px;font-size:var(--t-sm);}
@media (pointer:coarse){ .rv-caras-c select{min-height:44px;font-size:16px;} }
/* ============================================================================================================
CAPTURA EN OBRA (celular) · modo jornada. Diseño: diseno/mejora-uxui/pantallas/Captura en Obra v2.dc.html.
Pantalla completa sobre la app: oculta el menú inferior y el botón flotante mientras está abierta. Todo con
esquinas rectas, objetivos táctiles de 44 px o más y sin scroll: la altura sigue al área visible (visualViewport),
así que con el teclado abierto el botón principal queda justo arriba de él.
============================================================================================================ */
body.jv2-on{overflow:hidden;}
body.jv2-on #barra-off,body.jv2-on .fab,body.jv2-on #fab-menu,body.jv2-on #sidebar,body.jv2-on .rail,body.jv2-on .ic3-pfab,body.jv2-on .aviso2,body.jv2-on #aviso-cola{display:none !important;}
#jv2{position:fixed;left:0;top:0;right:0;height:var(--jv2-h,100dvh);z-index:230;display:flex;flex-direction:column;background:var(--bg);
color:var(--text);font-family:var(--font-body);overflow:hidden;--jv2-t:.18s;}
#jv2 *,#jv2 *::before,#jv2 *::after{box-sizing:border-box;border-radius:0;}
#jv2 button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;margin:0;}
#jv2 button:disabled{cursor:default;}
#jv2 .i{width:20px;height:20px;flex:none;}
#jv2 .i.lg{width:22px;height:22px;} #jv2 .i.sm{width:16px;height:16px;}
#jv2 input,#jv2 textarea{font-family:inherit;}
:root[data-sol="1"] #jv2{--bg:#FFFFFF;--surface:#FFFFFF;--surface-2:#FFFFFF;--surface-3:#E8E8E4;--chrome:#FFFFFF;--line:#8A8A84;--line-2:#4E4F49;--text:#000000;--text-2:#1C1C19;--text-3:#34342F;--gold-ink:#5A4814;--gold-soft:#F1E7C8;}
/* Encabezado: obra y fecha, señal, título y «Paso N de 4». */
.jv2-cab{flex:none;background:var(--chrome);border-bottom:1px solid var(--line);padding:calc(8px + env(safe-area-inset-top,0px)) 16px 12px;display:flex;flex-direction:column;gap:8px;}
.jv2-cab1{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px;}
.jv2-obra{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:600 11px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);}
.jv2-red{flex:none;white-space:nowrap;display:flex;align-items:center;gap:6px;font:600 12px var(--font-body);color:var(--text-2);}
.jv2-red::before{content:"";width:7px;height:7px;background:var(--bueno);}
.jv2-red.sinsenal::before{background:var(--checar);}
.jv2-cab2{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.jv2-tit{font:600 22px/1.1 var(--font-display);letter-spacing:-.02em;color:var(--text);min-width:0;}
.jv2-paso{flex:none;font:500 13px var(--font-body);color:var(--text-3);}
.jv2-barra{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}
.jv2-barra span{height:4px;background:var(--surface-3);}
.jv2-barra span.on{background:var(--gold);}
.jv2-salir{flex:none;width:44px;height:44px;margin:-12px 0 -12px -12px;border:0;background:transparent;color:var(--text-2);display:flex;align-items:center;justify-content:center;}
/* Encabezado de las pantallas internas: flecha atrás, título y una acción. */
.jv2-cabi{flex:none;background:var(--chrome);border-bottom:1px solid var(--line);padding:calc(4px + env(safe-area-inset-top,0px)) 16px 10px;display:flex;align-items:center;gap:10px;}
.jv2-cabi .jv2-tit{flex:1;}
.jv2-atras{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--surface);color:var(--text);}
.jv2-cabi-b{flex:none;height:44px;display:flex;align-items:center;gap:6px;padding:0 12px;border:1px solid var(--line);background:var(--surface);color:var(--text-2);font:600 13px var(--font-body);}
.jv2-seg3{flex:none;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);margin:0 16px 0;}
.jv2-cuerpo{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;padding:14px 16px;overflow:hidden;position:relative;}
.jv2-pie{flex:none;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));background:var(--chrome);border-top:1px solid var(--line);display:flex;gap:10px;}
.jv2-cta{flex:1;min-width:0;height:58px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;background:var(--gold);color:var(--gold-on);font:600 18px var(--font-display);
transition:background var(--jv2-t) var(--ease),opacity var(--jv2-t) var(--ease);}
.jv2-cta:active{background:var(--gold-deep);}
.jv2-cta:disabled,.jv2-cta.inac{background:var(--surface-3);color:var(--text-3);}
.jv2-cta.sec{background:var(--surface);color:var(--text);border:1.5px solid var(--text);}
.jv2-cta.chico{height:56px;}
.jv2-pie.compacto{padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));}
.jv2-ico-b{flex:none;width:58px;height:58px;display:flex;align-items:center;justify-content:center;border:1px solid var(--text);background:var(--surface);color:var(--text);}
.jv2-ico-b.ok{border-color:var(--bueno);color:var(--bueno);}
.jv2-et{font:600 11px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);}
.jv2-et-fila{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.jv2-et-fila span:last-child{font:500 12px var(--font-body);letter-spacing:0;text-transform:none;color:var(--text-3);}
.jv2-grupo{display:flex;flex-direction:column;gap:8px;min-height:0;}
/* Opciones de un toque (clima, tipo de incidencia, causas…): borde dorado cuando están elegidas. */
.jv2-ops{display:grid;gap:8px;}
.jv2-ops.c2{grid-template-columns:1fr 1fr;} .jv2-ops.c3{grid-template-columns:repeat(3,1fr);gap:6px;}
.jv2-op{display:flex;align-items:center;gap:10px;min-width:0;border:1.5px solid var(--line);background:var(--surface);color:var(--text);font:600 15px var(--font-body);text-align:left;padding:0 14px;height:54px;
transition:background var(--jv2-t) var(--ease),border-color var(--jv2-t) var(--ease);}
.jv2-op.alto{height:64px;font-size:16px;}
.jv2-op.bajo{height:44px;font-size:13.5px;padding:0 6px;justify-content:center;text-align:center;}
.jv2-op.med{height:46px;font-size:14px;justify-content:center;text-align:center;padding:0 6px;}
.jv2-op span{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.jv2-op.on{border-color:var(--gold);background:var(--gold-soft);}
.jv2-op.on.bueno{border-color:var(--bueno);background:var(--bueno-bg);}
.jv2-op.on.checar{border-color:var(--checar);background:var(--checar-bg);}
.jv2-op.on.critico{border-color:var(--critico);background:var(--critico-bg);}
.jv2-op small{display:block;font:400 12px var(--font-body);color:var(--text-3);}
.jv2-op.dosl{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;}
.jv2-aviso{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--checar-bg);border:1px solid var(--checar);}
.jv2-aviso>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.jv2-aviso b{font:650 14px var(--font-body);color:var(--text);} .jv2-aviso span{font:400 13px var(--font-body);color:var(--text-2);}
.jv2-b-mini{flex:none;height:44px;padding:0 14px;border:1px solid var(--text);background:var(--surface);color:var(--text);font:650 14px var(--font-body);}
.jv2-b-txt{flex:none;height:44px;padding:0 12px;border:0;background:transparent;color:var(--gold-ink);font:650 14px var(--font-body);}
.jv2-prog{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:6px;overflow:hidden;}
.jv2-fila-p{flex:none;display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--surface);border:1px solid var(--line);}
.jv2-fila-p>div:first-child{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.jv2-clave{font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--gold-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.jv2-desc{font:500 14px/1.3 var(--font-body);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.jv2-fila-p>div:last-child{flex:none;text-align:right;font:500 12px/1.35 var(--font-body);color:var(--text-2);}
.jv2-mas{flex:none;font:500 12.5px var(--font-body);color:var(--text-3);padding:2px 2px;}
.jv2-vacio{padding:14px;border:1px dashed var(--line-2);font:400 13.5px/1.4 var(--font-body);color:var(--text-2);background:var(--surface);}
.jv2-hora{flex:none;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--line);background:var(--surface);gap:8px;}
.jv2-hora>div{display:flex;flex-direction:column;gap:2px;min-width:0;}
.jv2-hora strong{font:600 20px var(--font-display);color:var(--text);}
.jv2-hora strong small{font:400 13px var(--font-body);color:var(--text-3);}
.jv2-hora input{height:44px;font:600 20px var(--font-display);border:1px solid var(--line-2);background:var(--surface);color:var(--text);padding:0 8px;max-width:150px;}
/* Contadores. */
.jv2-cuentas{flex:none;display:grid;border:1px solid var(--line);background:var(--surface);}
.jv2-cuentas.c3{grid-template-columns:repeat(3,1fr);} .jv2-cuentas.c4{grid-template-columns:repeat(4,1fr);}
.jv2-cuentas>div{padding:7px 10px;display:flex;flex-direction:column;border-right:1px solid var(--line);min-width:0;}
.jv2-cuentas>div:last-child{border-right:0;}
.jv2-cuentas b{font:600 20px var(--font-display);color:var(--text);font-variant-numeric:tabular-nums;font-weight:600;}
.jv2-cuentas span{font:500 11px/1.2 var(--font-body);color:var(--text-2);overflow:hidden;}
.jv2-cuentas.g b{font-size:22px;} .jv2-cuentas.g>div{padding:9px 12px;} .jv2-cuentas.g span{font-size:12px;white-space:normal;}
.jv2-cuentas b.bueno{color:var(--bueno);} .jv2-cuentas b.checar{color:var(--checar);} .jv2-cuentas b.gris{color:var(--text-3);}
/* Asistencia: lista en dos columnas con filete de estado. */
.jv2-nota-fila{flex:none;min-height:40px;display:flex;align-items:center;padding:6px 12px;border:1px solid var(--line);background:var(--surface);font:400 13.5px/1.35 var(--font-body);color:var(--text-2);}
.jv2-lista{flex:1 1 0;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:44px;gap:4px;align-content:start;overflow:hidden;}
.jv2-pers{min-width:0;display:flex;align-items:center;gap:8px;padding:0 8px 0 0;border:1px solid var(--line);background:var(--surface);color:var(--text);text-align:left;
transition:background var(--jv2-t) var(--ease),border-color var(--jv2-t) var(--ease);}
.jv2-pers>i{flex:none;align-self:stretch;width:4px;background:var(--bueno);}
.jv2-pers>span{flex:1;min-width:0;display:flex;flex-direction:column;}
.jv2-pers b{font:650 13.5px/1.2 var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.jv2-pers small{font:500 11px var(--font-body);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.jv2-pers.inc{background:var(--checar-bg);} .jv2-pers.inc>i{background:var(--checar);} .jv2-pers.inc small{color:var(--checar);}
.jv2-pers.fal{background:var(--surface-3);} .jv2-pers.fal>i{background:var(--text-3);} .jv2-pers.fal b{color:var(--text-3);text-decoration:line-through;} .jv2-pers.fal small{color:var(--text-3);}
.jv2-pers.sel{border-color:var(--gold);}
.jv2-pager{flex:none;height:46px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line-2);background:var(--surface-2);}
.jv2-pager button{width:56px;height:44px;border:0;background:transparent;color:var(--text);display:flex;align-items:center;justify-content:center;}
.jv2-pager button:first-child{border-right:1px solid var(--line);} .jv2-pager button:last-child{border-left:1px solid var(--line);}
.jv2-pager button:disabled{color:var(--text-3);opacity:.45;}
.jv2-pager span{font:600 13px var(--font-body);color:var(--text-2);font-variant-numeric:tabular-nums;}
/* Hoja de abajo (panel por persona) y hoja completa (nota). */
.jv2-velo{position:absolute;inset:0;background:rgba(35,35,32,.4);z-index:3;animation:jv2-vela var(--jv2-t) var(--ease);}
.jv2-hoja{position:absolute;left:0;right:0;bottom:0;z-index:4;background:var(--surface);border-top:3px solid var(--gold);display:flex;flex-direction:column;gap:10px;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));
box-shadow:var(--elev-3);max-height:100%;animation:jv2-sube .22s var(--ease);}
.jv2-hoja-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.jv2-hoja-cab>div{display:flex;flex-direction:column;gap:2px;min-width:0;}
.jv2-hoja-cab b{font:600 20px var(--font-display);letter-spacing:-.015em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.jv2-hoja-cab span{font:500 13px var(--font-body);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.jv2-hoja-cab>span{flex:none;font:600 13px var(--font-body);color:var(--text-3);}
.jv2-seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-2);}
.jv2-seg button{height:52px;border:0;background:var(--surface);color:var(--text);font:650 16px var(--font-body);}
.jv2-seg button+button{border-left:1px solid var(--line-2);}
.jv2-seg button.on{background:var(--text);color:var(--bg);}
.jv2-pzs{display:flex;flex-direction:column;border:1px solid var(--line-2);overflow:hidden;transition:opacity var(--jv2-t) var(--ease);}
.jv2-pzs.inac{opacity:.35;}
.jv2-pz{height:50px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 0 0 14px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);font:600 15.5px var(--font-body);text-align:left;}
.jv2-pz:last-child{border-bottom:0;}
.jv2-pz span:last-child{align-self:stretch;width:104px;display:flex;align-items:center;justify-content:center;border-left:1px solid var(--line);font:700 14px var(--font-body);color:var(--bueno);}
.jv2-pz.no{background:var(--critico-bg);} .jv2-pz.no span:last-child{color:var(--critico);}
.jv2-hoja-pie{display:grid;grid-template-columns:1fr 2fr;gap:8px;}
.jv2-hoja-pie button{height:54px;border:1px solid var(--text);background:var(--surface);color:var(--text);font:650 15px var(--font-body);}
.jv2-hoja-pie button.dor{border:0;background:var(--gold);color:var(--gold-on);font:600 17px var(--font-display);}
/* Hoy: registros como lista y la tabla de lo último guardado. */
.jv2-reg{flex:none;display:flex;flex-direction:column;border:1px solid var(--line-2);background:var(--surface);}
.jv2-reg button{height:68px;display:grid;grid-template-columns:52px minmax(0,1fr) auto 36px;align-items:center;border:0;border-top:1px solid var(--line);background:transparent;padding:0;text-align:left;color:var(--text);}
.jv2-reg button:first-child{border-top:0;}
.jv2-reg button>span:first-child{display:flex;justify-content:center;color:var(--text-2);}
.jv2-reg button>span:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0;}
.jv2-reg b{font:600 17px var(--font-display);letter-spacing:-.01em;font-weight:600;}
.jv2-reg small{font:400 12.5px var(--font-body);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.jv2-reg button>span:nth-child(3){display:grid;grid-template-columns:repeat(var(--n,2),14px);gap:3px;margin-right:2px;}
.jv2-reg button>span:nth-child(3) i{height:14px;background:var(--surface-3);} .jv2-reg button>span:nth-child(3) i.on{background:var(--gold);}
.jv2-reg button>span:nth-child(3).jnum{display:block;font:700 12px var(--font-body);color:var(--gold-ink);padding:2px 6px;border:1px solid var(--gold);}
.jv2-reg button>span:last-child{display:flex;justify-content:center;color:var(--text-3);}
.jv2-tabla{flex:1 1 0;min-height:0;display:flex;flex-direction:column;border:1px solid var(--line-2);background:var(--surface);overflow:hidden;}
.jv2-tabla-cab{flex:none;display:flex;justify-content:space-between;align-items:center;height:44px;padding:0 10px;border-bottom:1px solid var(--line-2);background:var(--surface-2);}
.jv2-tabla-cab span{font:650 10.5px var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);}
.jv2-tabla-cab button{border:0;background:transparent;font:650 13px var(--font-body);color:var(--gold-ink);height:44px;padding:0 0 0 12px;letter-spacing:0;text-transform:none;}
.jv2-tabla-cuerpo{flex:1 1 0;min-height:0;overflow:hidden;}
.jv2-ent{height:40px;display:grid;grid-template-columns:56px 92px minmax(0,1fr) 66px;align-items:center;border-bottom:1px solid var(--line);font:500 13px var(--font-body);}
.jv2-ent span:first-child{padding-left:10px;color:var(--text-3);font-variant-numeric:tabular-nums;}
.jv2-ent span:nth-child(2){font-weight:650;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.jv2-ent span:nth-child(3){color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.jv2-ent span:last-child{text-align:right;padding-right:10px;color:var(--text-3);font-size:12px;white-space:nowrap;}
.jv2-ent.porsubir span:last-child{color:var(--checar);}
/* Avance. */
.jv2-av{padding:10px 16px;gap:8px;}
.jv2-part{flex:none;display:flex;flex-direction:column;gap:4px;padding:8px 12px;background:var(--surface);border:1px solid var(--line);}
.jv2-part-fila{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.jv2-part-nav{display:flex;align-items:center;gap:4px;}
.jv2-part-nav button{width:40px;height:34px;border:1px solid var(--line);background:var(--surface);color:var(--text);display:flex;align-items:center;justify-content:center;}
.jv2-part-nav span{font:600 13px var(--font-body);color:var(--text-2);min-width:42px;text-align:center;}
.jv2-part .jv2-clave{font-size:13px;}
.jv2-part-d{font:600 14.5px/1.3 var(--font-body);color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.jv2-cant{flex:none;display:flex;flex-direction:column;gap:4px;}
.jv2-cant-caja{display:flex;align-items:stretch;height:58px;border:2px solid var(--gold);background:var(--surface);transition:border-color var(--jv2-t) var(--ease);}
.jv2-cant-caja.mal{border-color:var(--critico);}
.jv2-cant-caja input{flex:1;min-width:0;border:0;outline:none;background:transparent;padding:0 14px;font:600 28px var(--font-display);color:var(--text);font-variant-numeric:tabular-nums;}
.jv2-cant-caja span{flex:none;display:flex;align-items:center;padding:0 14px;border-left:1px solid var(--line);font:500 17px var(--font-body);color:var(--text-2);}
.jv2-conf{flex:none;display:flex;flex-direction:column;gap:4px;padding:8px 12px;background:var(--surface);border:1px solid var(--line);transition:background var(--jv2-t) var(--ease),border-color var(--jv2-t) var(--ease);}
.jv2-conf.mal{background:var(--critico-bg);border-color:var(--critico);}
.jv2-conf-t{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.jv2-conf-t span:last-child{font:500 12.5px var(--font-body);color:var(--text-2);letter-spacing:0;text-transform:none;}
.jv2-conf-v{font:600 24px/1.1 var(--font-display);letter-spacing:-.015em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.jv2-conf.mal .jv2-conf-v{color:var(--critico);}
.jv2-conf-b{height:6px;background:var(--surface-3);position:relative;overflow:hidden;}
.jv2-conf-b i{position:absolute;top:0;bottom:0;}
.jv2-conf-s{font:500 13px var(--font-body);color:var(--text-2);min-height:17px;}
.jv2-conf.mal .jv2-conf-s{color:var(--critico);}
.jv2-rap{flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.jv2-rap button{height:44px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);font:600 13.5px var(--font-body);}
.jv2-fnm{flex:none;display:flex;align-items:stretch;height:58px;border:1px solid var(--line-2);background:var(--surface);}
.jv2-fnm button{border:0;background:transparent;color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font:650 11px var(--font-body);min-width:44px;}
.jv2-fnm button.foto{flex:none;width:62px;border-right:1px solid var(--line);}
.jv2-fnm button.nota{flex:1;min-width:0;padding:6px 10px;align-items:flex-start;gap:1px;text-align:left;}
.jv2-fnm button.nota b{font:600 10.5px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);}
.jv2-fnm button.nota span{font:400 13px/1.3 var(--font-body);color:var(--text-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;}
.jv2-fnm button.nota.con span{color:var(--text);}
.jv2-fnm button.chi{flex:none;width:52px;border-left:1px solid var(--line);font-size:10.5px;font-weight:600;}
.jv2-fnm button.jmic.on{background:var(--critico-bg);}
.jv2-datos-b{flex:none;height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;border:1px solid var(--line-2);background:var(--surface);color:var(--text);font:600 13.5px var(--font-body);}
.jv2-datos-b.falta{border-color:var(--checar);background:var(--checar-bg);}
.jv2-toast{position:absolute;left:16px;right:16px;top:calc(60px + env(safe-area-inset-top,0px));z-index:6;display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--charcoal);color:#F7F4EC;border-left:3px solid var(--bueno);
font:500 14px var(--font-body);box-shadow:var(--elev-2);animation:jv2-sube .22s var(--ease);}
.jv2-toast.mal{border-left-color:var(--critico);}
/* Nota a pantalla completa: «Listo» y el micrófono arriba, porque el teclado tapa la mitad de abajo. */
.jv2-nota{position:absolute;left:0;right:0;top:0;bottom:0;z-index:8;background:var(--surface);display:flex;flex-direction:column;animation:jv2-vela var(--jv2-t) var(--ease);}
.jv2-nota-cab{flex:none;min-height:56px;display:flex;align-items:center;gap:10px;padding:calc(6px + env(safe-area-inset-top,0px)) 8px 6px 16px;border-bottom:1px solid var(--line-2);background:var(--chrome);}
.jv2-nota-cab>div{flex:1;min-width:0;display:flex;flex-direction:column;}
.jv2-nota-cab b{font:600 18px var(--font-display);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.jv2-nota-cab small{font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--gold-ink);}
.jv2-nota-cab .jmic{flex:none;height:44px;width:44px;border:1px solid var(--line);background:var(--surface);color:var(--text);display:flex;align-items:center;justify-content:center;}
.jv2-nota-cab .jmic.on{background:var(--critico-bg);border-color:var(--critico);}
.jv2-nota-cab .ok{flex:none;height:44px;padding:0 16px;border:0;background:var(--gold);color:var(--gold-on);font:600 16px var(--font-display);}
.jv2-nota textarea{flex:1 1 0;min-height:96px;max-height:220px;border:0;border-bottom:1px solid var(--line);padding:14px 16px;font:400 16px/1.5 var(--font-body);color:var(--text);background:var(--surface);resize:none;outline:none;}
.jv2-nota-est{flex:none;padding:6px 16px 0;font:500 12.5px var(--font-body);color:var(--text-3);min-height:22px;}
.jv2-frases{flex:none;display:flex;flex-direction:column;gap:6px;padding:8px 16px;}
.jv2-frases>div{display:flex;flex-wrap:wrap;gap:6px;}
.jv2-frases button{height:44px;padding:0 12px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);font:600 13px var(--font-body);}
/* Registros (incidencia, suministro, nota). */
.jv2-sum{flex:none;display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);}
.jv2-sum>div:first-child{display:flex;flex-direction:column;gap:2px;}
.jv2-sum b{font:650 15px var(--font-body);color:var(--text);} .jv2-sum span{font:400 13px var(--font-body);color:var(--text-2);}
.jv2-reg-pie{display:flex;flex-direction:column;gap:8px;margin-top:auto;flex:none;}
.jv2-nota-caja{display:flex;align-items:stretch;border:1px solid var(--line-2);background:var(--surface);min-height:76px;}
.jv2-nota-caja>button{border:0;background:transparent;color:var(--text);}
.jv2-nota-caja>button:first-child{flex:1;min-width:0;padding:10px 12px;text-align:left;display:flex;flex-direction:column;gap:3px;}
.jv2-nota-caja b{font:600 11px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);}
.jv2-nota-caja span.t{font:400 14px/1.4 var(--font-body);color:var(--text-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;}
.jv2-nota-caja span.t.con{color:var(--text);}
.jv2-nota-caja>button+button{flex:none;width:58px;border-left:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:600 11px var(--font-body);}
.jv2-nota-caja>button.jmic.on{background:var(--critico-bg);}
.jv2-foto-b{height:56px;display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--text);background:var(--surface);color:var(--text);font:650 14px var(--font-body);}
.jv2-foto-b.ok{border-color:var(--bueno);}
/* Terminar. */
.jv2-causa{flex:none;display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--checar);}
.jv2-causa>div:first-child{display:flex;flex-direction:column;gap:2px;}
.jv2-causa b{font:650 15px var(--font-body);color:var(--text);} .jv2-causa small{font:400 13px var(--font-body);color:var(--text-2);}
.jv2-resumen{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);}
.jv2-resumen>div:first-child{display:flex;justify-content:space-between;align-items:center;}
.jv2-resumen>div:first-child span:last-child{font:500 12px var(--font-body);color:var(--text-3);letter-spacing:0;text-transform:none;}
.jv2-resumen-t{flex:1;min-height:0;overflow:hidden;font:400 14px/1.45 var(--font-body);color:var(--text-2);word-break:break-word;}
.jv2-resumen-t.vacio{color:var(--text-3);}
.jv2-resumen-b{display:flex;gap:6px;}
.jv2-resumen-b button{height:44px;display:flex;align-items:center;gap:8px;padding:0 14px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);font:650 14px var(--font-body);}
.jv2-resumen-b button.jmic.on{background:var(--critico-bg);}
.jv2-err{flex:none;font:600 13px var(--font-body);color:var(--critico);}
.jv2-fin{position:absolute;inset:0;background:var(--bg);z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:32px;text-align:center;animation:jv2-vela var(--jv2-t) var(--ease);}
.jv2-fin>span{width:84px;height:84px;background:var(--bueno-bg);color:var(--bueno);display:flex;align-items:center;justify-content:center;}
.jv2-fin>span .i{width:40px;height:40px;}
.jv2-fin h2{margin:0;font:600 24px var(--font-display);letter-spacing:-.02em;color:var(--text);}
.jv2-fin p{margin:0;font:400 14.5px/1.5 var(--font-body);color:var(--text-2);max-width:290px;}
.jv2-fin button{margin-top:10px;height:48px;padding:0 18px;border:1px solid var(--text);background:var(--surface);color:var(--text);font:650 14px var(--font-body);}
/* Otra partida (buscador) y datos del reporte. */
.jv2-busca{flex:none;height:48px;border:1px solid var(--line-2);background:var(--surface);padding:0 12px;font:400 16px var(--font-body);color:var(--text);outline:none;}
.jv2-prog{font:600 12.5px/1.2 var(--font-body);color:var(--gold-ink);}
.jv2-prog-n{margin-top:6px;padding:7px 10px;border:1px solid var(--gold);border-radius:3px;background:var(--gold-soft);font:600 12.5px/1.35 var(--font-body);color:var(--gold-ink);}
.jv2-resultados{flex:1 1 0;min-height:0;overflow:auto;display:flex;flex-direction:column;border:1px solid var(--line);background:var(--surface);-webkit-overflow-scrolling:touch;}
.jv2-resultados button{flex:none;min-height:54px;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:6px 12px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);text-align:left;}
.jv2-datos{flex:1 1 0;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:14px 16px;-webkit-overflow-scrolling:touch;}
/* Personal sin plantilla: conteo por especialidad. */
.jv2-esp{flex:1 1 0;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:4px;}
.jv2-esp-f{flex:none;height:46px;display:grid;grid-template-columns:minmax(0,1fr) 44px 56px 44px;align-items:center;border:1px solid var(--line);background:var(--surface);}
.jv2-esp-f span{padding:0 12px;font:600 14px var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.jv2-esp-f button{height:44px;border:0;border-left:1px solid var(--line);background:transparent;color:var(--text);font:600 20px var(--font-display);}
.jv2-esp-f b{text-align:center;font:600 18px var(--font-display);font-variant-numeric:tabular-nums;}
@keyframes jv2-vela{from{opacity:0}to{opacity:1}}
@keyframes jv2-sube{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
#jv2 *{animation:none !important;transition:none !important;}
}
#jv2-p{display:contents;}
/* Avance con el teclado abierto: lo secundario se esconde por niveles (jv2Ajustar) y queda lo que se necesita para capturar. */
.jv2-av.k1 .jv2-rap{display:none;}
.jv2-av.k2 .jv2-part-d,.jv2-av.k2 .jv2-conf-b{display:none;}
.jv2-av.k3 .jv2-cant>.jv2-et,.jv2-av.k3 .jv2-conf:not(.mal) .jv2-conf-s{display:none;}
.jv2-av.k3{gap:6px;}
.jv2-av.k4{padding:6px 16px;gap:4px;}
.jv2-av.k4 .jv2-cant-caja{height:48px;} .jv2-av.k4 .jv2-cant-caja input{font-size:22px;}
.jv2-av.k4 .jv2-fnm{height:52px;} .jv2-av.k4 .jv2-conf{padding:4px 12px;gap:2px;} .jv2-av.k4 .jv2-conf-v{font-size:19px;}
.jv2-av.k4 .jv2-part{padding:4px 12px;gap:0;}
.jv2-av.k4 .jv2-fnm button.nota span{-webkit-line-clamp:1;}
.jv2-ops.det{grid-template-columns:90px 1fr;}
.jv2-ent.todas{grid-template-columns:56px 92px minmax(0,1fr) 74px;}
.jv2-esp-f.sinepp{border-color:var(--checar);}
/* Configuración de la obra · Personal y EPP */
.cop-busca input{width:100%;min-height:40px;}
.cop-lista{list-style:none;margin:8px 0 0;padding:0;border:1px solid var(--line);background:var(--surface);}
.cop-fila{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);}
.cop-fila:last-child{border-bottom:0;}
.cop-fila.baja{background:var(--surface-3);}
.cop-fila.baja .cop-n b{text-decoration:line-through;color:var(--text-3);}
.cop-n{display:flex;flex-direction:column;min-width:0;}
.cop-n b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cop-n small{color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cop-acc{display:flex;gap:6px;flex:none;}
.cop-form{margin-top:14px;padding:14px;border:1px solid var(--line-2);background:var(--surface);display:flex;flex-direction:column;gap:10px;}
.cop-form-t{font:600 var(--t-sm) var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);}
.cop-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;}
.cop-botones{display:flex;gap:8px;flex-wrap:wrap;}
.cop-lista-pegada summary{cursor:pointer;font-weight:600;min-height:32px;display:flex;align-items:center;}
.cop-lista-pegada textarea{width:100%;margin:6px 0;font-family:var(--font);}
/* ============================================================
JORNADA DE CAMPO EN ESCRITORIO (je-…)
Esquinas rectas (4 px en tarjetas, 3 px en botones y campos, 2 px en chips) y sin sombras decorativas.
Todo sale de los tokens de :root: el tema oscuro lo toma solo.
============================================================ */
.je-sec{padding-top:18px;}
/* La jornada de escritorio ocupa la pantalla bajo el «Está en»: sin el título de sección, el buscador ni las pestañas Captura, Por revisar y Sin cerrar
(la verificación es de «Reportes por revisar»; las jornadas abiertas salen como aviso en la propia jornada). */
body:has(#sec-avance.je-sec.on) .topbar,body:has(#sec-avance.je-sec.on) #vistas-bar{display:none;}
body:has(#sec-avance.je-sec.on) #sec-avance.je-sec{padding-top:0;}
body:has(#sec-avance.je-sec.on) .je{--je-h:calc(100vh - 178px);}
.je{--je-h:calc(100vh - 292px);display:flex;flex-direction:column;gap:14px;min-height:560px;height:var(--je-h);position:relative;font-family:var(--font);color:var(--text);}
.je *,#je-capa *{box-sizing:border-box;}
#je-capa{font-family:var(--font);color:var(--text);}
#je-capa button{font-family:inherit;}
#je-capa .i svg,#je-capa svg.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
#je-capa :focus-visible{outline:2px solid var(--gold-deep);outline-offset:1px;}
.je button{font-family:inherit;}
.je :focus-visible{outline:2px solid var(--gold-deep);outline-offset:1px;}
.je input:focus,.je select:focus,.je textarea:focus{outline:2px solid var(--gold-deep);outline-offset:-1px;}
.je .i svg,.je .i,.je svg.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.je button svg.i,.je span svg.i,.je a svg.i{width:16px;height:16px;}
.je-vivo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
@keyframes jeEntra{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes jePop{from{opacity:0;transform:translateY(6px) scale(.97);}to{opacity:1;transform:none;}}
/* Cabecera: día, cinta de etapas y acciones */
.je-cab{display:flex;align-items:center;gap:14px;flex:none;}
.je-dia{flex:none;display:flex;align-items:center;border:1px solid var(--line-2);border-radius:3px;background:var(--surface);}
.je-dia-b{width:36px;height:42px;border:0;background:none;color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.je-dia-b:disabled{color:var(--text-3);opacity:.5;cursor:default;}
.je-dia-b:not(:disabled):hover{color:var(--text);}
.je-dia-t{padding:0 12px;border-left:1px solid var(--line);border-right:1px solid var(--line);line-height:1.15;}
.je-dia-t .a{font-family:var(--slab);font-weight:600;font-size:18px;}
.je-dia-t .b{font-size:12px;color:var(--text-3);}
.je-cinta{flex:1;min-width:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;}
.je-et{min-width:0;display:flex;flex-direction:column;gap:5px;}
.je-et i{display:block;height:3px;border-radius:2px;background:var(--line-2);}
.je-et b{font-size:13.5px;font-weight:650;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.je-et span{font-size:12.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.je-et.ok i{background:var(--bueno);}
.je-et.now i{background:var(--gold);}
.je-et.wait b{color:var(--text-3);}
.je-acc{flex:none;display:flex;gap:8px;align-items:center;}
.je-b-lista{max-width:230px;height:40px;padding:0 14px;display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:3px;background:var(--surface);color:var(--text);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;}
.je-b-lista.falta{border-color:var(--gold);background:var(--gold-soft);}
.je-b-lista:hover{border-color:var(--gold);}
.je-b-lista span{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.je-fin-c{position:relative;}
.je-b-fin,.je-b-pri{height:40px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--gold-deep);border-radius:3px;background:var(--gold);color:var(--gold-on);font-size:15px;font-weight:650;cursor:pointer;white-space:nowrap;}
.je-b-fin:hover:not(:disabled),.je-b-pri:hover:not(:disabled){background:var(--gold-deep);color:#fff;}
.je-b-pri:active:not(:disabled){transform:scale(.985);}
.je-b-pri.sm{height:32px;font-size:14px;padding:0 14px;}
.je-b-pri.lg{height:48px;font-size:16px;width:100%;}
.je-b-pri.full{width:100%;height:40px;}
.je-b-pri:disabled,.je-b-fin:disabled{opacity:.45;cursor:default;}
.je-b-sec{height:34px;padding:0 12px;border:1px solid var(--line-2);border-radius:3px;background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;}
.je-b-sec:hover:not(:disabled){border-color:var(--gold);}
.je-b-sec.sm{height:30px;font-size:13px;}
.je-b-sec:disabled{opacity:.5;cursor:default;}
.je-b-link{border:0;background:none;color:var(--text);font-size:14px;font-weight:600;cursor:pointer;padding:6px 10px;border-bottom:1px solid var(--line-2);border-radius:0;}
.je-b-link:hover{color:var(--gold-ink);border-bottom-color:var(--gold);}
.je-fin-t{font-size:13.5px;color:var(--text-2);white-space:nowrap;}
@media (max-width:1559px){.je-fin-t{display:none;}}
.je-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:360px;background:var(--surface);border:1px solid var(--line-2);border-radius:4px;box-shadow:var(--elev-2,0 12px 32px rgba(20,19,16,.2));padding:14px 16px;display:flex;flex-direction:column;gap:10px;animation:jePop .18s cubic-bezier(.22,.75,.28,1) both;}
.je-pop .t{font-size:15px;font-weight:650;}
.je-pop .p{font-size:14px;line-height:1.5;color:var(--text-2);}
.je-pop .pie{display:flex;justify-content:flex-end;gap:8px;align-items:center;}
/* Avisos */
.je-aviso{flex:none;display:flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid var(--line-2);border-left:3px solid var(--gold);border-radius:3px;background:var(--surface);font-size:14px;}
.je-aviso.grave{border-left-color:var(--critico);background:var(--critico-bg);}
.je-aviso .i{color:var(--gold-ink);display:flex;}
.je-aviso.grave .i{color:var(--critico);}
.je-aviso span:nth-child(2){flex:1;min-width:0;}
/* Pantalla de inicio */
.je-centro{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;}
.je-ini{width:620px;max-width:100%;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:4px;padding:32px 36px;display:flex;flex-direction:column;gap:20px;animation:jeEntra .25s both;}
.je-ini-k{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--gold-ink);}
.je-ini h2{margin:8px 0 0;font-family:var(--slab);font-size:32px;font-weight:600;letter-spacing:-.02em;}
.je-ini p{margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--text-2);text-wrap:pretty;}
.je-ini-d{display:flex;flex-direction:column;}
.je-ini-d>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:15px;}
.je-ini-d span{color:var(--text-3);}
.je-ini-d b{font-weight:600;text-align:right;}
.je-ini .je-b-link{align-self:center;}
/* Pestañas */
.je-tabs{flex:none;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);}
.je-tabs-l{display:flex;gap:2px;}
.je-tab{white-space:nowrap;padding:10px 13px 9px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;color:var(--text-2);font-size:15px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:7px;}
.je-tab:hover{color:var(--text);}
.je-tab.on{border-bottom-color:var(--gold);color:var(--text);font-weight:650;}
.je-tab.cierre{margin-left:14px;}
.je-tab .n{min-width:20px;height:20px;border-radius:10px;background:var(--surface-3);color:var(--text-2);font-size:12px;font-weight:700;line-height:20px;text-align:center;padding:0 6px;}
.je-tab.on .n{background:var(--gold);color:var(--gold-on);}
/* Compositor de la jornada: «Agregar al día». Un tipo por botón; el formulario del tipo se abre debajo. */
.je-comp{flex:none;background:var(--surface);border:1px solid var(--line);border-radius:4px;display:flex;flex-direction:column;}
.je-comp-cab{display:flex;align-items:center;gap:14px;padding:10px 14px;flex-wrap:wrap;}
.je-comp-k{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--text-3);white-space:nowrap;}
.je-chips{display:flex;gap:6px;flex-wrap:wrap;}
.je-chip-k{height:34px;padding:0 13px;border:1px solid var(--line-2);border-radius:3px;background:var(--surface);color:var(--text);font-family:inherit;font-size:14px;font-weight:550;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.je-chip-k:hover{border-color:var(--gold);}
.je-chip-k.on{border-color:var(--gold-deep);background:var(--gold-soft);font-weight:650;}
.je-chip-k .n{min-width:20px;height:20px;border-radius:10px;background:var(--surface-3);color:var(--text-2);font-size:11.5px;font-weight:700;line-height:20px;text-align:center;padding:0 5px;}
.je-chip-k.on .n{background:var(--gold);color:var(--gold-on);}
.je-comp .je-busca{margin:0 0 0 auto;width:min(380px,100%);}
.je-comp>.je-form,.je-comp>.je-vis-f{border-top:1px solid var(--line);border-bottom:0;border-radius:0 0 4px 4px;}
.je-comp>.je-vis-f{background:var(--surface-2);}
.je-comp .je-form .r1{grid-template-columns:minmax(0,1fr) 320px;}
.je-comp-sum{border-top:1px solid var(--line);}
.je-comp-sc{max-height:208px;overflow-y:auto;}
.je-comp-sum .je-libre{border-bottom:0;}
.je-hits .p{font-size:12px;font-weight:600;color:var(--gold-ink);}
.je-fila.av .je-nom .s.adel,.je-chip.adel{color:var(--gold-ink);font-weight:600;}
.je-chip.adel{background:var(--gold-soft);border:1px solid var(--gold);border-radius:2px;padding:0 6px;font-size:12px;}
.je-fija{position:sticky;top:0;z-index:3;}
.je-fila.reg{grid-template-columns:22px 56px 116px minmax(0,1fr) 106px 116px 126px;min-height:46px;padding:9px 16px;cursor:pointer;}
.je-fila.reg.sin-din{grid-template-columns:22px 56px 116px minmax(0,1fr) 116px 126px;}
.je-fila.reg:hover{background:var(--surface-2);}
.je-fila.reg.on{background:var(--gold-soft);}
.je-fila.reg .je-nom .t{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.je-fila.reg .je-cl{font-size:13px;font-weight:700;}
.je-fila.reg .je-cant{text-align:right;font-size:14px;font-weight:600;}
.je-fila.reg .je-vis-t{height:32px;}
.je-busca{position:relative;width:340px;margin-bottom:6px;}
.je-busca-c{height:36px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid var(--line-2);border-radius:3px;background:var(--surface);}
.je-busca-c .i{color:var(--text-3);display:flex;}
.je-busca-c input{flex:1;min-width:0;text-overflow:ellipsis;border:0;outline:none !important;background:none;font-family:inherit;font-size:14px;color:var(--text);}
.je-hits{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;background:var(--surface);border:1px solid var(--line-2);border-radius:4px;box-shadow:var(--elev-2,0 12px 32px rgba(20,19,16,.18));padding:4px;}
.je-hits button{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 10px;border:0;border-radius:3px;background:none;color:var(--text);text-align:left;cursor:pointer;}
.je-hits button:hover{background:var(--surface-2);}
.je-hits .c{font-size:12px;font-family:var(--mono,ui-monospace,monospace);color:var(--gold-ink);font-weight:600;}
.je-hits .n{font-size:14px;font-weight:600;}
.je-hits .vacio{padding:10px;font-size:13.5px;color:var(--text-3);}
/* Cuerpo y hojas */
.je-cuerpo{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;}
.je-cuerpo.con-det{grid-template-columns:minmax(0,1fr) 340px;}
.je-hoja{background:var(--surface);border:1px solid var(--line);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;min-height:0;}
.je-hoja-cuerpo{flex:1;min-height:0;overflow-y:auto;}
.je-fila{display:grid;gap:12px;align-items:center;padding:8px 16px;min-height:44px;border-bottom:1px solid var(--line);background:transparent;}
.je-fila.je-h{padding:0 16px;height:34px;min-height:34px;background:var(--surface-2);border-bottom:1px solid var(--line-2);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--text-3);}
.je-fila .d{text-align:right;}
.je-fila .c{text-align:center;}
.je-fila.av{grid-template-columns:128px minmax(0,1fr) 54px 84px 140px 64px;cursor:pointer;}
.je-fila.av:hover{background:var(--surface-2);}
.je-fila.av.on{background:var(--gold-soft);box-shadow:inset 3px 0 0 var(--gold);}
.je-fila.cap{grid-template-columns:22px 56px 116px minmax(0,1fr) 106px 116px 126px;min-height:46px;padding:9px 16px;cursor:pointer;}
.je-fila.cap.sin-din{grid-template-columns:22px 56px 116px minmax(0,1fr) 116px 126px;}
.je-fila.cap:hover{background:var(--surface-2);}
.je-fila.cap .je-nom .t{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.je-fila.cap.arr{opacity:.55;background:var(--gold-soft);}
.je-fila.cap.sobre{box-shadow:inset 0 2px 0 var(--gold);}
.je-fila.cap.on{background:var(--gold-soft);}
.je-fila.inc{grid-template-columns:70px 100px minmax(0,1fr) minmax(0,1fr) 124px 40px;padding:10px 16px;font-size:14px;}
.je-fila.inc.je-h{padding:0 16px;height:32px;min-height:32px;}
.je-fila.inc.sin-din{grid-template-columns:70px 100px minmax(0,1fr) minmax(0,1fr) 124px 40px;}
.je-fila.sum{grid-template-columns:90px minmax(0,1fr) 84px 84px 130px 96px;min-height:50px;}
.je-fila.sum.je-h{height:32px;min-height:32px;}
.je-fila.lib{grid-template-columns:70px minmax(0,1fr) 100px 40px;}
.je-fila.vis{grid-template-columns:70px minmax(0,1fr) 40px;padding:5px 16px;}
.je-sec-t{padding:7px 16px;background:var(--surface-2);border-bottom:1px solid var(--line);border-top:1px solid var(--line);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--text-2);display:flex;justify-content:space-between;}
.je-sec-t span:last-child{color:var(--text-3);letter-spacing:0;font-weight:600;}
.je-hoja-cuerpo>.je-sec-t:first-child{border-top:0;}
.je-clave{font-family:var(--mono,ui-monospace,monospace);font-size:12.5px;font-weight:600;color:var(--gold-ink);}
.je-nom{min-width:0;}
.je-nom .t{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.je-nom .s{font-size:12.5px;color:var(--text-3);display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.je-nom .s.mal{color:var(--critico);}
.je-und{font-size:13px;color:var(--text-2);}
.je-num{text-align:right;font-size:14px;font-variant-numeric:tabular-nums;color:var(--text-2);}
.je-num.suave{color:var(--text-3);}
.je-num.q{font-weight:650;color:var(--text);}
.je-num.q.ok{color:var(--bueno);}
.je-num.q.mal{color:var(--critico);}
.je-hora{font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums;}
.je-hoy{display:flex;align-items:center;gap:6px;justify-content:flex-end;}
.je-hoy .ok{color:var(--bueno);display:flex;}
.je-in{width:96px;height:34px;padding:0 10px;text-align:right;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);color:var(--text);font-family:inherit;font-size:16px;font-weight:650;font-variant-numeric:tabular-nums;}
.je-in.sucio{border-color:var(--gold-deep);background:var(--gold-soft);}
.je-in.mal{border-color:var(--critico);}
.je-in:disabled{opacity:.6;background:var(--surface-2);}
.je-in::-webkit-inner-spin-button,.je-form input[type=number]::-webkit-inner-spin-button,.je-cant input::-webkit-inner-spin-button{display:none;}
.je-in,.je-form input[type=number],.je-cant input{-moz-appearance:textfield;}
.je-ico{display:flex;justify-content:center;gap:10px;color:var(--line-2);}
.je-ico .on{color:var(--gold-ink);}
.je-ico span{display:flex;}
.je-barra{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 16px;border-top:1px solid var(--line-2);}
.je-barra .t{font-size:13px;color:var(--text-2);}
.je-barra .t b{color:var(--text);font-weight:650;}
.je-pie{flex:none;padding:9px 16px;border-top:1px solid var(--line-2);font-size:13px;color:var(--text-2);}
.je-vacio{padding:40px 24px;text-align:center;font-size:14.5px;color:var(--text-2);}
.je-vacio.ch{padding:14px 16px;font-size:14px;color:var(--text-3);text-align:left;border-bottom:1px solid var(--line);}
.je-ayuda{padding:10px 16px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:13.5px;color:var(--text-2);}
/* Capturado hoy */
.je-asa{width:22px;height:30px;padding:0;border:0;background:none;color:var(--text-3);cursor:grab;display:flex;align-items:center;justify-content:center;}
.je-asa:hover:not(:disabled){color:var(--text);}
.je-asa:disabled{cursor:default;opacity:.4;}
.je-cant{text-align:right;font-size:14.5px;font-weight:650;font-variant-numeric:tabular-nums;}
.je-cant input{width:100%;height:30px;padding:0 8px;text-align:right;border:1px solid var(--gold-deep);border-radius:2px;background:var(--gold-soft);color:var(--text);font-family:inherit;font-size:14.5px;font-weight:650;}
.je-imp{text-align:right;font-size:14px;color:var(--text-2);font-variant-numeric:tabular-nums;}
.je-acc-f{display:flex;justify-content:flex-end;gap:6px;}
.je-b-mini{height:30px;padding:0 10px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);color:var(--text);font-size:13px;font-weight:650;cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.je-b-mini:hover:not(:disabled){border-color:var(--gold);background:var(--gold-soft);}
.je-b-mini:disabled{opacity:.4;cursor:default;}
.je-b-ico{width:30px;height:30px;padding:0;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;}
.je-b-ico:hover:not(:disabled){color:var(--critico);border-color:var(--critico);}
.je-b-ico:disabled{opacity:.4;cursor:default;}
.je-fila.inc .je-b-ico,.je-fila.vis .je-b-ico,.je-fila.lib .je-b-ico{border:0;background:none;color:var(--text-3);}
.je-chip{display:inline-block;height:18px;line-height:17px;padding:0 6px;border-radius:2px;border:1px solid var(--line-2);font-size:11px;font-weight:700;color:var(--text-2);}
.je-chip.ok{color:var(--bueno);border-color:var(--bueno);}
.je-chip.info{color:var(--info);border-color:var(--info);}
.je-chip.grave{color:var(--critico);border-color:var(--critico);}
/* Incidencias y extras */
.je-form{flex:none;padding:14px 16px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:12px;background:var(--surface-2);}
.je-form .r1{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:end;}
.je-form .r2{display:grid;grid-template-columns:minmax(0,1fr) auto 150px auto;gap:14px;align-items:end;}
.je-form .r2.sin-monto{grid-template-columns:minmax(0,1fr) auto auto;}
.je-form .g{display:flex;flex-direction:column;gap:5px;}
.je-form .k{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--text-3);}
.je-form input[type=text],.je-form input[type=number]{height:36px;padding:0 10px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);color:var(--text);font-family:inherit;font-size:14.5px;width:100%;}
.je-form input.monto{text-align:right;font-weight:600;}
.je-form input:disabled{opacity:.45;}
.je-seg{display:flex;}
.je-seg button{height:36px;padding:0 13px;border:1px solid var(--line-2);margin-left:-1px;background:var(--surface);color:var(--text);font-size:14px;font-weight:500;cursor:pointer;}
.je-seg button:first-child{margin-left:0;}
.je-seg button.on{border-color:var(--gold-deep);background:var(--gold-soft);font-weight:650;position:relative;}
.je-seg.c2 button{width:56px;padding:0;font-weight:600;}
.je-b-foto{height:36px;padding:0 12px;display:flex;align-items:center;gap:7px;border:1px dashed var(--line-2);border-radius:2px;background:var(--surface);color:var(--text-2);font-size:14px;cursor:pointer;white-space:nowrap;}
.je-b-foto:hover{border-color:var(--gold);color:var(--text);}
.je-cl{font-size:12px;font-weight:700;}
.je-fal{color:var(--text-2);}
.je-cos{text-align:right;font-variant-numeric:tabular-nums;}
/* Suministros y notas */
.je-libre{display:grid;grid-template-columns:minmax(0,1fr) 120px 200px auto;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);}
.je-libre input,.je-vis-f textarea,.je-vis-t{height:36px;padding:0 10px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);color:var(--text);font-family:inherit;font-size:14.5px;width:100%;}
.je-vis-t{height:34px;}
.je-vis-f{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;padding:14px 16px;border-bottom:1px solid var(--line);}
.je-vis-f textarea{height:64px;padding:8px 10px;resize:none;line-height:1.4;}
/* Detalle y resumen */
.je-lado{display:flex;flex-direction:column;gap:12px;min-height:0;overflow-y:auto;}
.je-det{flex:0 0 auto;min-height:250px;background:var(--surface);border:1px solid var(--line);border-radius:4px;display:flex;flex-direction:column;}
.je-det-t{padding:14px 16px 0;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--text-3);}
.je-det-c{padding:6px 16px 0;font-family:var(--mono,ui-monospace,monospace);font-size:12px;font-weight:600;color:var(--gold-ink);}
.je-det-n{padding:2px 16px 12px;font-size:16px;font-weight:650;line-height:1.3;border-bottom:1px solid var(--line);}
.je-det-cu{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px;}
.je-det>.je-vacio{padding:18px 16px;text-align:left;}
.je-cp{display:flex;flex-direction:column;gap:6px;}
.je-cp>span{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--text-3);}
.je-cp select,.je-cp textarea{width:100%;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);color:var(--text);font-family:inherit;font-size:14.5px;}
.je-cp select{height:36px;padding:0 8px;}
.je-cp textarea{padding:8px 10px;resize:none;line-height:1.4;}
.je-campos .fld{margin:0 0 8px;}
.je-exc{padding:10px 12px;border:1px solid var(--critico);border-radius:2px;background:var(--critico-bg);font-size:14px;line-height:1.4;}
.je-exc b{color:var(--critico);}
.je-drop{width:100%;padding:12px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px dashed var(--line-2);border-radius:2px;background:none;color:var(--text-2);font-size:14px;cursor:pointer;text-align:center;}
.je-drop:hover:not(:disabled),.je-drop.arrastrando,.arrastrando{border-color:var(--gold);color:var(--text);background:var(--gold-soft);}
.je-drop:disabled{opacity:.5;cursor:default;}
.je-miniat,.je-fotos{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.je-mini{position:relative;width:64px;height:64px;border-radius:3px;background:var(--surface-3);border:1px solid var(--line-2);overflow:hidden;display:block;}
.je-mini img{width:100%;height:100%;object-fit:cover;display:block;}
.je-mini.por-subir{outline:2px solid var(--gold);outline-offset:-2px;}
.je-mini button{position:absolute;top:2px;right:2px;width:20px;height:20px;padding:0;border:0;border-radius:2px;background:rgba(20,19,16,.7);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.je-mini button svg.i{width:12px;height:12px;}
.je-fotos .je-sinf{font-size:13px;color:var(--text-3);}
.je-res{flex:none;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:6px 16px;}
.je-res>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:14.5px;}
.je-res>div:first-child{border-top:0;}
.je-res span{color:var(--text-2);}
.je-res b{font-variant-numeric:tabular-nums;font-weight:650;}
.je-res b.neg{color:var(--critico);}
.je-res.acum{margin-top:0;}
.je-res.acum .je-res-t{padding:8px 0 4px;border-top:0;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--text-3);display:block;}
/* Cierre */
.je-cierre{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;}
.je-reporte{background:var(--surface);border:1px solid var(--line);border-radius:4px;overflow-y:auto;min-height:0;}
.je-reporte-c{padding:16px 20px 12px;border-bottom:1px solid var(--line);}
.je-reporte-c .t{font-family:var(--slab);font-size:19px;font-weight:600;}
.je-reporte-c .s{font-size:14px;color:var(--text-2);margin-top:2px;}
.je-reporte-b{padding:6px 20px 16px;}
.je-bloque-p{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);}
.je-bloque-p .k{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--text-3);}
.je-bloque-p .v{font-size:15px;font-weight:600;margin-top:3px;}
.je-bloque-t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 0 6px;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--text-3);}
.je-bloque-t span:last-child{font-size:12.5px;font-weight:400;letter-spacing:0;}
.je-ent{padding:12px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;}
.je-ent-c{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.je-ent-c .l{min-width:0;display:flex;align-items:baseline;gap:10px;}
.je-ent-c .l b{font-size:14.5px;font-weight:650;}
.je-ent-c .q{font-size:14.5px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap;}
.je-ent textarea,.je-reporte-b>textarea{width:100%;padding:8px 10px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);color:var(--text);font-family:inherit;font-size:14.5px;line-height:1.4;resize:none;}
.je-reporte-b>textarea{padding:10px 12px;font-size:15px;line-height:1.45;}
.je-corr{padding:8px 10px;border:1px solid var(--critico);border-radius:2px;background:var(--critico-bg);font-size:13.5px;}
.je-corr b{color:var(--critico);}
.je-falta{font-size:13.5px;color:var(--text-2);}
.je-falta span{color:var(--text-3);}
.je-linea{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:14px;}
.je-linea b{font-variant-numeric:tabular-nums;}
.je-linea1{padding:5px 0;border-top:1px solid var(--line);}
.je-linea1 input{width:100%;height:34px;padding:0 10px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);color:var(--text);font-family:inherit;font-size:14px;}
.je-lado-c{display:flex;flex-direction:column;gap:12px;min-height:0;overflow-y:auto;}
.je-antes{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;}
.je-antes-t{font-family:var(--slab);font-size:17px;font-weight:600;}
.je-chk{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4;}
.je-chk .m{width:18px;height:18px;flex:none;margin-top:1px;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
.je-chk .m.ok{background:var(--bueno-bg);color:var(--bueno);}
.je-chk .m.warn{background:var(--checar-bg);color:var(--checar);}
.je-chk .m.mal{background:var(--critico-bg);color:var(--critico);}
.je-chk>div{flex:1;min-width:0;}
.je-chk .a{font-weight:600;}
.je-chk .b{color:var(--text-3);font-size:13px;}
.je-causa{display:flex;gap:8px;align-items:center;margin-top:6px;}
.je-causa span{font-family:var(--mono,ui-monospace,monospace);font-size:12px;color:var(--gold-ink);font-weight:600;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.je-causa select{flex:1;min-width:0;height:32px;padding:0 8px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);color:var(--text);font-family:inherit;font-size:13px;}
.je-err{padding:8px 10px;border:1px solid var(--critico);border-radius:2px;background:var(--critico-bg);color:var(--critico);font-size:13.5px;}
.je-pie-c{font-size:13.5px;line-height:1.5;color:var(--text-2);padding:0 4px;text-wrap:pretty;}
/* Cajón del pase de lista */
.je-fondo{position:fixed;inset:0;z-index:7000;background:rgba(20,19,16,.42);}
.je-cajon{position:fixed;top:0;right:0;bottom:0;z-index:7001;width:640px;max-width:100vw;background:var(--surface);border-left:1px solid var(--line-2);box-shadow:var(--elev-3,-12px 0 36px rgba(20,19,16,.2));display:flex;flex-direction:column;animation:jeEntra .2s both;}
.je-cajon-c{padding:20px 22px 14px;display:flex;justify-content:space-between;gap:14px;align-items:flex-start;}
.je-cajon-c .k{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--gold-ink);}
.je-cajon-c h3{margin:6px 0 0;font-family:var(--slab);font-size:24px;font-weight:600;letter-spacing:-.015em;}
.je-cajon-c p{margin:8px 0 0;font-size:15px;line-height:1.45;color:var(--text-2);}
.je-x{width:32px;height:32px;flex:none;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.je-x:hover{border-color:var(--gold);color:var(--text);}
.je-cuad{display:flex;align-items:center;gap:14px;padding:12px 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.je-cuad-i{width:64px;height:48px;flex:none;border-radius:2px;background:var(--surface-3);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--text-3);overflow:hidden;}
.je-cuad-i img{width:100%;height:100%;object-fit:cover;}
.je-cuad .t{flex:1;min-width:0;display:flex;flex-direction:column;}
.je-cuad .t b{font-size:14.5px;font-weight:650;}
.je-cuad .t span{font-size:13px;color:var(--text-3);}
.je-tabla{flex:1;min-height:0;display:flex;flex-direction:column;}
.je-th,.je-tr{display:grid;grid-template-columns:minmax(0,1fr) 92px repeat(var(--n,5),52px);gap:8px;align-items:center;padding:0 22px;}
.je-th{height:34px;background:var(--surface-2);border-bottom:1px solid var(--line-2);font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--text-3);}
.je-th .c{text-align:center;overflow:hidden;text-overflow:ellipsis;}
.je-tb{flex:1;min-height:0;overflow-y:auto;}
.je-tr{height:46px;border-bottom:1px solid var(--line);}
.je-tr.falto{background:var(--surface-2);}
.je-tr .n{min-width:0;}
.je-tr .n b{display:block;font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.je-tr .n span{font-size:12.5px;color:var(--text-3);}
.je-tr.falto .n b{color:var(--text-3);}
.je-pf{height:30px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);color:var(--text);font-size:13px;font-weight:650;cursor:pointer;}
.je-pf.mal{border-color:var(--critico);background:var(--critico-bg);color:var(--critico);}
.je-pz{width:34px;height:30px;justify-self:center;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);color:var(--bueno);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;font-weight:700;}
.je-pz.mal{border-color:var(--critico);background:var(--critico-bg);color:var(--critico);}
.je-pz:disabled{opacity:.3;cursor:default;}
.je-conteo{flex:1;min-height:0;overflow-y:auto;padding:8px 22px;}
.je-cn{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);}
.je-cn span{flex:1;font-size:15px;}
.je-cn b{min-width:36px;text-align:center;font-size:17px;font-variant-numeric:tabular-nums;}
.je-cn button{width:34px;height:34px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);color:var(--text);font-size:18px;cursor:pointer;}
.je-cn button:hover{border-color:var(--gold);}
.je-cajon-p{flex:none;padding:14px 22px;border-top:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface-2);}
.je-cajon-p .r b{display:block;font-size:14px;font-weight:650;}
.je-cajon-p .r span{font-size:13px;color:var(--text-3);}
.je-cajon-p .b{display:flex;gap:8px;align-items:center;}
/* Aviso abajo a la derecha */
.je-toast{position:fixed;right:24px;bottom:24px;z-index:7100;display:flex;align-items:center;gap:10px;max-width:440px;padding:12px 18px 12px 15px;background:var(--surface);border:1px solid var(--line-2);border-left:3px solid var(--bueno);border-radius:4px;box-shadow:var(--elev-2,0 8px 24px rgba(35,35,32,.16));font-size:15px;font-weight:600;animation:jePop .23s cubic-bezier(.22,.75,.28,1) both;}
.je-toast.mal{border-left-color:var(--critico);}
.je-toast .i{display:flex;color:var(--bueno);}
.je-toast.mal .i{color:var(--critico);}
@media (prefers-reduced-motion:reduce){.je *,#je-capa *{animation:none !important;transition:none !important;}}
:root[data-tema="oscuro"] .je-fondo{background:var(--os-velo-busca);}
:root[data-tema="oscuro"] .je-b-fin,:root[data-tema="oscuro"] .je-b-pri,:root[data-tema="oscuro"] .je-tab.on .n{color:var(--os-sobre-oro);}
/* Ventanas de 1280 a 1499 px: la cinta baja a su propia fila, el detalle se angosta y «Capturado hoy» deja la hora junto al nombre */
.je-hora-m{display:none;font-variant-numeric:tabular-nums;}
@media (max-width:1499px){
.je-fila.cap{grid-template-columns:22px 100px minmax(0,1fr) 96px 108px 112px;gap:8px;}
.je-fila.cap.sin-din{grid-template-columns:22px 100px minmax(0,1fr) 106px 112px;}
.je-fila.cap .je-hora,.je-fila.cap.je-h span:nth-child(2){display:none;}
.je-hora-m{display:inline;}
}
@media (max-width:1439px){
.je-cuerpo.con-det{grid-template-columns:minmax(0,1fr) 300px;gap:12px;}
.je-busca{width:290px;}
.je-tab{padding:10px 10px 9px;}
.je-fila.av{grid-template-columns:104px minmax(0,1fr) 44px 64px 128px 52px;gap:8px;padding:8px 12px;}
.je-fila.je-h{padding:0 12px;}
.je-ico{gap:6px;}
}
@media (max-width:1399px){
.je-cab{flex-wrap:wrap;row-gap:10px;}
.je-cinta{order:3;flex:1 1 100%;}
.je-acc{margin-left:auto;}
}
/* fin de la jornada de escritorio (je-) */
/* Cronograma: líneas de conexión entre partidas */
.cr3-links{position:absolute;left:0;top:0;pointer-events:none;z-index:4;overflow:visible;}
.cr3-links path{fill:none;stroke:var(--text-3);stroke-width:1px;opacity:.95;stroke-linejoin:round;stroke-linecap:round;}
.cr3-links path.halo{stroke:var(--surface);stroke-width:3px;opacity:.7;}
.cr3-links path.crit{stroke:var(--critico);opacity:1;}
.cr3-links path.sel{stroke:var(--gold-deep);stroke-width:1.5px;opacity:1;}
/* Cronograma: panel de la línea base */
.cr3-lb-pop{width:400px;max-width:90vw;}
.cr3-lb-t{font-size:13px;line-height:1.5;color:var(--text-2);margin:6px 0 10px;}
.cr3-lb-v{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--line);border-left:3px solid var(--gold);background:var(--surface-2);}
.cr3-lb-v span{font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--text-3);text-transform:uppercase;}
.cr3-lb-v em{font-style:normal;font-size:12.5px;color:var(--text-3);}
.cr3-lb-c{margin:10px 0;font-size:13px;line-height:1.45;color:var(--checar);}
.cr3-lb-c.ok{color:var(--bueno);}
.cr3-lb-acc{display:flex;margin:10px 0;}
.cr3-lb-h{margin:12px 0 4px;font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--text-3);}
.cr3-lb-l{max-height:180px;overflow-y:auto;border-top:1px solid var(--line);}
.cr3-lb-f{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line);font-size:13px;}
.cr3-lb-f span{display:flex;flex-direction:column;min-width:0;}
.cr3-lb-f span b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cr3-lb-f span em{font-style:normal;font-size:12px;color:var(--text-3);}
.cr3-lb-f i{font-style:normal;font-size:11px;font-weight:700;color:var(--bueno);}
.cr3-strip.info{background:var(--info-bg);}
/* Cronograma: escenario «¿Qué pasaría si?» (nada se guarda hasta aplicar) */
.cr3.esc .cr3-cab{box-shadow:inset 0 -2px 0 var(--gold);}
.cr3-strip.esc{background:var(--gold-soft);box-shadow:inset 3px 0 0 var(--gold);}
.cr3-strip.esc b{color:var(--gold-ink);}
.cr3-strip.esc button{border-color:var(--gold-ink);color:var(--gold-ink);}
.cr3-strip.esc button.pri{background:var(--gold-ink);color:#fff;}
.cr3-strip.esc button[aria-disabled="true"]{opacity:.45;cursor:not-allowed;}
:root[data-tema="oscuro"] .cr3-strip.esc{background:color-mix(in oklab,var(--gold) 14%,var(--surface));}
:root[data-tema="oscuro"] .cr3-strip.esc button.pri{color:var(--bg);}
.cr3-bloques{display:flex;flex-wrap:wrap;gap:4px 18px;max-height:96px;overflow:auto;}
/* Cronograma: grupos de la jerarquía Fase › Bloque › Rubro con su barra de avance */
.cr3-grow.n0{background:color-mix(in oklab,var(--gold) 14%,var(--surface));}
.cr3-grow.n1{background:color-mix(in oklab,var(--text-3) 9%,var(--surface));}
.cr3-grow.n0 .cr3-grow-nombre{letter-spacing:.14em;}
.cr3-grow .cr3-lane{position:relative;}
.cr3-gbar{position:absolute;top:50%;height:10px;margin-top:-5px;border:1px solid var(--gc,var(--text-3));border-radius:1px;background:color-mix(in oklab,var(--gc,var(--text-3)) 16%,var(--surface));overflow:hidden;}
.cr3-gbar.n0,.cr3-gbar.n1{height:12px;margin-top:-6px;}
.cr3-gbar i{display:block;height:100%;background:var(--gc,var(--text-3));opacity:.85;}
/* Cronograma: aviso del catálogo y lista de ajustes */
.cr3-strip.aviso{background:var(--checar-bg,#fbf0dc);box-shadow:inset 3px 0 0 var(--checar,#b9822a);}
.cr3-strip.aviso b{color:var(--checar,#8a5d12);}
.cr3-strip.aviso button{border-color:var(--checar,#8a5d12);color:var(--checar,#8a5d12);}
.cr3-aj{display:flex;flex-direction:column;border:1px solid var(--line);max-height:50vh;overflow:auto;}
.cr3-aj-f{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);}
.cr3-aj-f:last-child{border-bottom:0;}
.cr3-aj-d{flex:1;min-width:0;font-size:13px;}
.cr3-aj-d em{display:block;font-style:normal;font-size:12px;color:var(--text-3);margin-top:2px;}
.cr3-aj-d .mal{color:var(--critico);font-weight:650;}
.cr3-sel{height:26px;margin-left:8px;padding:0 8px;border:1px solid var(--line);border-radius:2px;background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:12px;}
/* Revisión del Excel: elegir qué precios de venta quedan */
.xp-op{display:flex;align-items:flex-start;gap:10px;padding:6px 0;cursor:pointer;font-size:13px;line-height:1.4;}
.xp-op input{flex:none;margin-top:3px;}
/* Cronograma: columna de predecesoras */
.cr3-cx.cr3-pred{justify-content:flex-start;text-align:left;font-size:11.5px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 8px;display:block;line-height:30px;}
/* Reporte semanal (proyectos con frecuencia «semanal»): una sola pantalla para celular y escritorio */
.sem{display:grid;gap:14px;max-width:880px;margin:0 auto;padding:0 0 28px;}
.sem .sem-nav{display:flex;gap:8px;flex-wrap:wrap;}
.sem .sem-est{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px;}
.sem .sem-tipos{margin-bottom:12px;}
.sem .sem-tipos .chip,.sem .sem-dia{min-height:44px;}
.sem .sem-dias{display:flex;gap:6px;flex-wrap:wrap;}
.sem .sem-dia{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:44px;padding:4px 10px;line-height:1.1;}
.sem .sem-dia small{font-size:11px;opacity:.8;}
.sem .sem-dia:disabled{opacity:.4;cursor:not-allowed;}
.sem .sem-filas{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.sem .sem-fila{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 12px;}
.sem .sem-fila-t{display:flex;flex-direction:column;gap:4px;min-width:0;}
.sem .sem-fila-t small{color:var(--text-2);overflow-wrap:anywhere;}
.sem .frm-r{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media (max-width:560px){
.sem .st-card-h{flex-direction:column;align-items:flex-start;gap:8px;}
.sem .frm-r{grid-template-columns:1fr;}
.sem .btn{min-height:44px;}
}