/* ===== VTPG CRM - sistema visual ===== */ :root{ /* Paleta cálida. El cliente pidió una interfaz más amable, así que el gris frío se cambia por crema y la tinta negra por un marrón oscuro: los mismos contrastes, pero sin el filo de oficina. El naranja de la marca no se toca. */ --bg:#FBF6EE; /* el papel de la página */ --w:#FFFDF9; --w2:#FBF6EE; --w3:#F5EDE1; /* las tarjetas, sobre el papel */ --k:#3B2A1A; --k2:#5A4633; --k3:#6E563D; --k4:#7A6248; /* el gris apagado de la referencia se queda en 4,07:1 sobre crema y estos textos son de 10-11px, así que se oscurece lo justo para pasar de 4,5:1 sin perder el tono cálido */ --o:#FCA629; --o-ink:#944D04; --o-soft:#FDEBCC; --o-line:#F2D49B; --ln:#EADFCD; --ln2:#DCCDB4; --ln3:#3B2A1A; --ok:#1D6B4F; --ok-soft:#DCEFE5; --no:#B3321B; --no-soft:#FBE3DC; --in:#22599C; --in-soft:#DEE9F6; --mo:#6A3D9A; --mo-soft:#ECE2F6; --r:10px; --r-sm:7px; --r-lg:14px; --rail:212px; --sh:0 1px 2px rgba(60,35,5,.05), 0 6px 18px rgba(60,35,5,.05); --sh-alto:0 2px 6px rgba(60,35,5,.07), 0 18px 46px rgba(60,35,5,.11); --lbl:"Figtree",system-ui,-apple-system,sans-serif; /* las micro-etiquetas ya no van en mono */ /* Movimiento: curvas fuertes, UI por debajo de 300ms (Emil Kowalski) */ --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-in-out:cubic-bezier(0.77,0,0.175,1); color-scheme:light; } /* Tema único claro: blanco, naranja y negro. El Modo Puerta es oscuro por decisión de producto (uso en la calle), no por el tema del sistema. */ *{box-sizing:border-box} [hidden]{display:none!important} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--k); font-family:"Figtree",system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.5; -webkit-font-smoothing:antialiased;overflow:hidden;letter-spacing:-.003em} /* Nunito en los títulos: es la letra redonda del ejemplo que mandó el cliente */ h1,h2,h3,h4{margin:0;font-family:"Nunito","Figtree",system-ui,sans-serif;font-weight:700;letter-spacing:-.015em} .mono,.kpi-val,.num,td.n,.tnum,kbd{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums} button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;letter-spacing:inherit} a{color:inherit} svg{display:block;flex-shrink:0} :focus-visible{outline:2px solid var(--o);outline-offset:1px} @media (prefers-reduced-motion:reduce){ *{animation-duration:.12s!important;transition-duration:.12s!important} .overlay,.toast{animation:none!important} } /* micro-etiqueta: la voz del sistema */ .ml{font-family:var(--lbl);font-size:10.5px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--k4)} #app{display:flex;height:100%} .main{flex:1;min-width:0;display:flex;flex-direction:column} .view{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 24px 64px} /* ===== rail ===== */ .rail{width:var(--rail);flex-shrink:0;background:var(--w);border-right:1px solid var(--ln); display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);overflow-y:auto} .rail-logo{display:flex;align-items:center;padding:16px 16px 15px;border-bottom:1px solid var(--ln)} .logo-full{width:176px;height:auto;display:block} .logo-mark{display:none;color:var(--o);line-height:0} .rail-nav{display:flex;flex-direction:column;padding:8px 0 24px} .rail-item{display:flex;align-items:center;gap:10px;padding:7px 16px;color:var(--k2); position:relative;text-align:left;font-size:13px;font-weight:500;transition:color .14s var(--ease-out),background .14s var(--ease-out)} .rail-item svg{width:15px;height:15px;stroke:currentColor;opacity:.75} .rail-item:hover{background:var(--w2);color:var(--k)} .rail-item.on{color:var(--k);font-weight:600;background:var(--w2)} .rail-item.on svg{opacity:1;stroke:var(--o-ink)} .rail-item.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--o)} .rail-item .dot{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600; background:var(--o);color:var(--k);min-width:17px;height:16px;display:grid;place-items:center;padding:0 4px} .rail-sec{padding:14px 16px 5px} /* ===== topbar ===== */ .topbar{display:flex;align-items:center;gap:14px;padding:0 24px;height:54px;background:var(--w); border-bottom:1px solid var(--ln);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .topbar::-webkit-scrollbar{display:none} .crumb{flex-shrink:0} .crumb h1{font-size:15px;font-weight:600} .crumb small{display:block;font-family:var(--lbl);font-size:9.5px;letter-spacing:.05em; color:var(--k4);text-transform:uppercase;margin-top:1px} .spacer{flex:1;min-width:8px} .search{display:flex;align-items:center;gap:8px;border:1px solid var(--ln);padding:5px 10px; color:var(--k4);font-size:12.5px;flex:0 1 237px;min-width:180px;white-space:nowrap} /* al encoger, el texto se corta; nunca se parte en dos líneas */ .search > span{overflow:hidden;text-overflow:ellipsis;min-width:0} @media (max-width:1240px){ .search kbd{display:none} } .search svg{width:13px;height:13px;stroke:currentColor} .search kbd{margin-left:auto;font-size:9.5px;color:var(--k4);border:1px solid var(--ln);padding:0 4px} .seg{display:flex;border:1px solid var(--ln);flex-shrink:0} .seg button{padding:4px 11px;font-size:12px;font-weight:500;color:var(--k3);white-space:nowrap; border-right:1px solid var(--ln)} .seg button:last-child{border-right:0} .seg button.on{background:var(--k);color:var(--w);font-weight:600} .sync{display:flex;align-items:center;gap:6px;font-family:var(--lbl);font-size:10px; letter-spacing:.05em;text-transform:uppercase;color:var(--ok);flex-shrink:0} .sync i{width:5px;height:5px;background:var(--ok);border-radius:50%} .demoswitch{display:flex;align-items:center;gap:8px;border:1px solid var(--o);background:var(--o-soft); padding:3px 3px 3px 9px;flex-shrink:0} .demoswitch .dl{font-family:var(--lbl);font-size:9px;letter-spacing:.055em; text-transform:uppercase;color:var(--o-ink)} .demoswitch .seg{border:0} .demoswitch .seg button{border-right:1px solid var(--o-line);color:var(--o-ink);font-size:11.5px} .demoswitch .seg button:last-child{border-right:0} .demoswitch .seg button.on{background:var(--k);color:var(--w)} .avatar{width:27px;height:27px;background:var(--k);color:var(--w);display:grid;place-items:center; font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:10.5px;flex-shrink:0} /* ===== bandas ===== */ .band{display:flex;align-items:baseline;gap:10px;margin:22px 0 10px;border-bottom:1px solid var(--ln); padding-bottom:7px} .band .bn{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--o-ink);font-weight:600} .band h2{font-family:var(--lbl);font-size:10.5px;font-weight:600;letter-spacing:.055em; text-transform:uppercase;color:var(--k)} .band .hint{font-size:11.5px;color:var(--k4)} .band .lnk{margin-left:auto;font-size:12px;font-weight:600;color:var(--o-ink);display:flex;align-items:center;gap:5px} .band .lnk svg{width:12px;height:12px;stroke:currentColor} /* Banda 1 */ /* El dashboard se lee al entrar y estorba en cuanto bajas a trabajar, así que se va con el scroll como cualquier otro contenido. Estuvo pegado arriba y plegándose al bajar, y era peor: al encogerse quitaba su propio alto del documento, el navegador recortaba el scroll contra el tope y la banda volvía a desplegarse. El resultado era que no se podía bajar. */ .pulso{background:var(--w);padding:18px 24px 14px;margin:0 -24px} .tiles{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(182px,1fr));border:1px solid var(--ln)} .tile{padding:17px 18px 15px;text-align:left;display:flex;flex-direction:column;gap:5px; border-right:1px solid var(--ln);transition:background .14s var(--ease-out);position:relative} .tile:last-child{border-right:0} @media (hover:hover) and (pointer:fine){ .tile:hover{background:var(--w2)} } .tile.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--o)} .tile-l{font-family:var(--lbl);font-size:10.5px;letter-spacing:.055em;text-transform:uppercase; color:var(--k4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tile-v{display:flex;align-items:baseline;gap:8px} .kpi-val{font-size:31px;font-weight:500;line-height:1.05;letter-spacing:-.035em} .kpi-val small{font-size:14px;color:var(--k4)} .delta{font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:500} .delta.up{color:var(--ok)} .delta.down{color:var(--no)} .delta.flat{color:var(--k4)} .tile-spark{margin-top:4px;height:24px;width:100%} .segbar{display:flex;height:5px;margin-top:8px} .segbar i{display:block;height:100%} /* franja negra: se usa una vez por página */ .headline{margin-top:12px;background:var(--k);color:var(--w);padding:14px 18px; display:flex;align-items:center;gap:14px;flex-wrap:wrap} .headline .hk{font-family:var(--lbl);font-size:9.5px;letter-spacing:.055em; text-transform:uppercase;color:var(--o);flex-shrink:0;border-right:1px solid rgba(255,255,255,.2);padding-right:14px} .headline p{margin:0;font-size:15px;line-height:1.4;flex:1;min-width:240px;letter-spacing:-.01em} .headline b{color:var(--o);font-weight:600} .headline .hbtn{background:var(--o);color:var(--k);font-weight:600;font-size:12.5px;padding:8px 15px; white-space:nowrap;display:flex;align-items:center;gap:7px} .headline .hbtn svg{width:13px;height:13px;stroke:currentColor} /* Banda 2 */ .acciones{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));border:1px solid var(--ln)} .acard{padding:14px;display:flex;flex-direction:column;gap:9px;border-right:1px solid var(--ln); border-bottom:1px solid var(--ln);background:var(--w)} .acard-h{display:flex;align-items:center;gap:8px} .acard-h .sw{width:7px;height:7px;flex-shrink:0} .p-rojo .sw{background:var(--no)} .p-ambar .sw{background:var(--o)} .p-azul .sw{background:var(--in)} .p-verde .sw{background:var(--ok)} .acard-t{font-family:var(--lbl);font-size:9.5px;font-weight:600;letter-spacing:.055em; text-transform:uppercase} .p-rojo .acard-t{color:var(--no)} .p-ambar .acard-t{color:var(--o-ink)} .p-azul .acard-t{color:var(--in)} .p-verde .acard-t{color:var(--ok)} .acard-age{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--k4);white-space:nowrap} .acard-s{font-size:14.5px;font-weight:600;line-height:1.3;letter-spacing:-.02em} .acard-w{font-size:12.5px;color:var(--k2);line-height:1.5;border-left:1px solid var(--ln2);padding-left:11px} .acard-w em{font-style:normal;font-weight:600;color:var(--k)} .acard-w .wl{display:block;margin-bottom:3px} .acard-f{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:2px} .allgood{border:1px solid var(--ok);background:var(--ok-soft);padding:13px 16px;display:flex; align-items:center;gap:11px;font-size:13.5px} .allgood svg{width:17px;height:17px;stroke:var(--ok)} /* ===== botones ===== */ .btn{background:var(--k);color:var(--w);font-weight:600;font-size:12.5px;padding:8px 14px; display:inline-flex;align-items:center;gap:7px;transition:opacity .12s var(--ease-out);white-space:nowrap} .btn:hover{opacity:.85} .btn svg{width:13px;height:13px;stroke:currentColor} .btn.ghost{background:transparent;color:var(--k2);border:1px solid var(--ln2);font-weight:500} .btn.ghost:hover{border-color:var(--k3);opacity:1} .btn.pri{background:var(--o);color:var(--k)} .btn.sm{padding:5px 10px;font-size:11.5px} .btn.lg{padding:11px 18px;font-size:14px} .icb{width:26px;height:26px;display:grid;place-items:center;color:var(--k4)} .icb:hover{color:var(--k);background:var(--w2)} .icb svg{width:15px;height:15px;stroke:currentColor} /* ===== superficies ===== */ .card{background:var(--w);border:1px solid var(--ln)} .card-h{display:flex;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px solid var(--ln)} .card-h h3{font-size:13px;font-weight:600} .card-h .sub{font-size:11.5px;color:var(--k4)} .card-b{padding:15px} .grid{display:grid;gap:14px} .g2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))} /* cuatro gráficos: mejor 2x2 que 3 arriba y uno suelto abajo */ @media (min-width:1080px){ .grid.g2.graf4{grid-template-columns:repeat(2,1fr)} } @media (min-width:1560px){ .grid.g2.graf4{grid-template-columns:repeat(4,1fr)} } .g3{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} .toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px} .chip{border:1px solid var(--ln);padding:5px 11px;font-size:12px;font-weight:500;color:var(--k3);white-space:nowrap} .chip:hover{border-color:var(--ln2);color:var(--k)} .chip.on{background:var(--k);color:var(--w);border-color:var(--k);font-weight:600} /* .tabs era una cuarta familia de pestañas -subrayado naranja- para hacer exactamente lo mismo que .seg: cambiar la lista que estás mirando. Aquí solo queda lo que le es propio (que pueda desplazarse cuando son seis); el aspecto lo hereda del bloque «un solo lenguaje de pestañas», al final de este fichero. */ .tabs{display:flex;overflow-x:auto;margin-bottom:14px;flex-wrap:nowrap} .tabs button{white-space:nowrap} /* etiquetas */ .bdg{display:inline-flex;align-items:center;gap:5px;padding:1px 7px;font-size:11px;font-weight:500; white-space:nowrap;line-height:1.55;border:1px solid var(--ln)} .bdg.verde{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-soft)} .bdg.ambar{background:var(--o-soft);color:var(--o-ink);border-color:var(--o-line)} .bdg.rojo{background:var(--no-soft);color:var(--no);border-color:var(--no-soft)} .bdg.azul{background:var(--in-soft);color:var(--in);border-color:var(--in-soft)} .bdg.gris{background:var(--w2);color:var(--k3)} .bdg.morado{background:var(--mo-soft);color:var(--mo);border-color:var(--mo-soft)} .bdg .ab{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.06em;opacity:.7} .sem{width:8px;height:8px;flex-shrink:0;display:inline-block} .sem.verde{background:var(--ok)} .sem.ambar{background:var(--o)} .sem.rojo{background:var(--no)} .sem.gris{background:var(--ln2)} /* tablas */ .tw{overflow-x:auto;border:1px solid var(--ln);background:var(--w)} table{border-collapse:collapse;width:100%;font-size:12.5px;min-width:660px} thead th{background:var(--w2);text-align:left;padding:8px 12px;font-family:var(--lbl); font-size:9.5px;font-weight:500;letter-spacing:.055em;text-transform:uppercase;color:var(--k4); border-bottom:1px solid var(--ln);white-space:nowrap} tbody td{padding:8px 12px;border-bottom:1px solid var(--ln);vertical-align:middle} tbody tr:last-child td{border-bottom:0} tbody tr:hover{background:var(--w2)} tbody tr.clickable{cursor:pointer} td.n{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums} .mini{font-size:11.5px;color:var(--k4)} .trunc{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pbar{height:4px;background:var(--ln);overflow:hidden;min-width:56px;display:block} .pbar i{display:block;height:100%} /* ===== ruta ===== */ .ruta{border:1px solid var(--ln)} .rstep{display:flex;align-items:center;gap:14px;padding:12px 15px;border-bottom:1px solid var(--ln);background:var(--w)} .rstep:last-child{border-bottom:0} .rstep:hover{background:var(--w2)} .rstep .ord{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--k4);width:18px;flex-shrink:0} .rstep .rb{flex:1;min-width:0} .rstep .rt{font-size:14px;font-weight:600;letter-spacing:-.015em} .rstep .rs{font-size:11.5px;color:var(--k3);display:flex;gap:14px;flex-wrap:wrap;margin-top:2px} .rstep .rs .mono{color:var(--k2)} .rstep .rr{display:flex;align-items:center;gap:14px;flex-shrink:0} /* ===== mapa ===== */ .mapwrap{position:relative;border:1px solid var(--ln);padding:16px;background:var(--w)} .mapwrap svg.map{display:block;width:100%;height:auto;max-width:860px;margin:0 auto} .bldg{cursor:pointer} .bldg:hover{opacity:.75} .maplegend{display:flex;gap:16px;flex-wrap:wrap;margin-top:13px;padding-top:12px;border-top:1px solid var(--ln)} .maplegend span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--k3)} .dominio{position:absolute;top:16px;right:16px;border:1px solid var(--k);background:var(--k);color:var(--w); padding:9px 14px;text-align:right;min-width:96px} .dominio .dv{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:27px;line-height:1;color:var(--o)} .dominio .dl{font-family:var(--lbl);font-size:8.5px;letter-spacing:.055em; text-transform:uppercase;opacity:.6;margin-top:3px} /* ===== ficha finca ===== */ .ffhead{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--ln); padding:4px 0 16px;margin-bottom:0} .ffhead .fft{flex:1;min-width:230px} .ffhead h1{font-size:23px;font-weight:600;letter-spacing:-.028em} .ffhead .ffm{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px} .kv{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px solid var(--ln);font-size:12.5px} .kv:last-child{border-bottom:0} .kv span{color:var(--k4);flex-shrink:0} .kv b{font-weight:500;text-align:right} .ring{position:relative} .ring .rv{position:absolute;inset:0;display:grid;place-items:center;font-family:"IBM Plex Mono",monospace; font-weight:500;font-size:14px;line-height:1} /* alzado */ /* ===== alzado de la finca ===== */ .alzado{display:flex;flex-direction:column;align-items:center;padding:16px 14px 12px} .alz-svg{width:100%;max-width:340px;height:auto;display:block;overflow:visible} .alz-u{cursor:pointer} .alz-u rect,.alz-u line{transition:opacity .14s var(--ease-out)} @media (hover:hover) and (pointer:fine){ .alz-u:hover rect:first-of-type{filter:brightness(.96)} } .alz-u:focus-visible{outline:2px solid var(--o);outline-offset:2px} .alz-u.sel rect:first-of-type{filter:brightness(.94)} .alz-legend{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:14px; font-size:11px;color:var(--k3)} .alz-legend span{display:flex;align-items:center;gap:5px} .alz-legend i{width:10px;height:10px;display:inline-block;flex-shrink:0} .alz-pie{margin:9px 0 0;font-size:11.5px;color:var(--k4);text-align:center;max-width:300px;line-height:1.45} /* la tarjeta no se estira para igualar la columna de al lado */ .grid.g2 > .card:has(.alzado){align-self:start} .viv-f.sel td{background:var(--o-soft)} .viv-f.sel .v-lab b{color:var(--o-ink)} /* unidades */ .uni{display:flex;align-items:flex-start;gap:14px;padding:10px 15px;border-bottom:1px solid var(--ln)} .uni:last-child{border-bottom:0} .uni:hover{background:var(--w2)} .uni .ul{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:12px;width:48px;flex-shrink:0} .uni .uc{flex:1;min-width:0} .uni .un{font-size:13px;font-weight:500} .uni .uh{font-size:11.5px;color:var(--k3);margin-top:2px;line-height:1.45} .uni .ug{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px} /* ===== modo puerta ===== Estuvo en oscuro por el uso en la calle, pero rompía la coherencia con el resto. Se queda la ergonomía (dianas grandes, una sola mano) y se pasa al sistema claro. */ .overlay{position:fixed;inset:0;z-index:100;background:var(--w);display:flex;flex-direction:column; animation:mpIn .2s var(--ease-out) both; padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color:var(--k)} .mp-top{display:flex;align-items:center;gap:13px;padding:13px 18px;border-bottom:1px solid var(--ln);flex-shrink:0} .mp-top .mt{font-size:15px;font-weight:600;letter-spacing:-.02em} .mp-top .ms{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.05em;color:var(--k4);margin-top:2px} .mp-x{width:30px;height:30px;border:1px solid var(--ln2);color:var(--k2);display:grid;place-items:center;flex-shrink:0} .mp-x svg{width:14px;height:14px;stroke:currentColor} @media (hover:hover) and (pointer:fine){ .mp-x:hover{border-color:var(--k3);color:var(--k)} } .mp-off{display:flex;align-items:center;gap:6px;font-family:var(--lbl);font-size:9.5px; letter-spacing:.055em;text-transform:uppercase;color:var(--o-ink);border:1px solid var(--o-line); background:var(--o-soft);padding:4px 9px;margin-left:auto} .mp-off svg{stroke:currentColor} .mp-prog{height:3px;background:var(--w3);flex-shrink:0} .mp-prog i{display:block;height:100%;background:var(--o);transition:width .22s var(--ease-out)} .mp-body{flex:1;overflow-y:auto;padding:0 0 24px;-webkit-overflow-scrolling:touch;background:var(--w)} .mp-u{border-bottom:1px solid var(--ln)} .mp-u.done{opacity:.45} .mp-u.open{background:var(--w2)} .mp-uh{display:flex;align-items:center;gap:14px;padding:15px 18px;width:100%;text-align:left} @media (hover:hover) and (pointer:fine){ .mp-uh:hover{background:var(--w2)} } .mp-uh .mul{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:15px;width:52px;flex-shrink:0;color:var(--o-ink)} .mp-uh .mub{flex:1;min-width:0} .mp-uh .mun{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mp-uh .muh{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--k4);margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mp-uh .mur{flex-shrink:0;color:var(--ln2)} .mp-uh .mur svg{width:14px;height:14px;stroke:currentColor} .mp-acts{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:0 18px 14px} .mp-act{min-height:54px;background:var(--w);color:var(--k2);display:flex;align-items:center; justify-content:center;gap:8px;font-size:13px;font-weight:600;border:1px solid var(--ln2); transition:border-color .14s var(--ease-out),background .14s var(--ease-out)} @media (hover:hover) and (pointer:fine){ .mp-act:hover{border-color:var(--k3);background:var(--w2)} } .mp-act:active{background:var(--w3)} .mp-act svg{width:16px;height:16px;stroke:currentColor} .mp-act.good{border-color:var(--ok);color:var(--ok);background:var(--ok-soft)} /* va fuera de la rejilla, así que necesita su propio ancho y margen */ .mp-act.star{background:var(--o);color:var(--k);border-color:var(--o);min-height:50px; width:calc(100% - 36px);margin:0 18px 12px;gap:10px} .mp-act.star .mp-act-sub{color:rgba(10,10,10,.6)} @media (hover:hover) and (pointer:fine){ .mp-act.star:hover{background:#FDB94F;border-color:#FDB94F} } .mp-dict{margin:0 18px 12px;display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px; border:1px dashed var(--ln2);color:var(--k3);font-size:12.5px;width:calc(100% - 36px)} .mp-dict svg{width:14px;height:14px;stroke:currentColor} @media (hover:hover) and (pointer:fine){ .mp-dict:hover{border-color:var(--o);color:var(--o-ink)} } .mp-heard{margin:0 18px 12px;padding:13px 15px;border:1px solid var(--o-line);background:var(--o-soft); font-size:13px;line-height:1.5} .mp-heard .hl{display:block;font-family:var(--lbl);font-size:9px;letter-spacing:.055em; text-transform:uppercase;color:var(--o-ink);margin-bottom:6px;font-weight:600} .mp-heard .hq{color:var(--k2);font-style:italic} .mp-heard .hf{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px} .mp-heard .hf b{font-family:"IBM Plex Mono",monospace;border:1px solid var(--o-line);color:var(--o-ink); font-size:10px;padding:2px 7px;background:var(--w)} .mp-foot{flex-shrink:0;padding:12px 18px;border-top:1px solid var(--ln);background:var(--w2); display:flex;align-items:center;gap:22px} .mp-stat{font-family:var(--lbl);font-size:9.5px;letter-spacing:.055em;text-transform:uppercase; color:var(--k4)} .mp-stat b{display:block;font-size:19px;color:var(--k);font-weight:500;letter-spacing:-.01em} .mp-done{background:var(--o);color:var(--k);font-weight:600;font-size:13px;padding:11px 20px;margin-left:auto} @media (hover:hover) and (pointer:fine){ .mp-done:hover{background:#FDB94F} } .mp-sum{text-align:center;padding:52px 24px} .mp-sum .big{font-family:"IBM Plex Mono",monospace;font-size:52px;font-weight:500;color:var(--o-ink);line-height:1} .mp-sum h2{font-size:20px;margin:12px 0 8px;font-weight:600} .mp-sum p{color:var(--k3);font-size:13.5px;margin:0 auto;max-width:420px;line-height:1.55} .mp-sumgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:26px auto;max-width:440px; border:1px solid var(--ln);background:var(--ln)} .mp-sumgrid div{background:var(--w2);padding:14px 8px} .mp-sumgrid b{display:block;font-family:"IBM Plex Mono",monospace;font-size:21px;font-weight:500} .mp-sumgrid span{font-family:var(--lbl);font-size:9px;letter-spacing:.05em; text-transform:uppercase;color:var(--k4)} /* ===== kanban ===== */ .kb{display:flex;gap:1px;overflow-x:auto;padding-bottom:14px;align-items:flex-start;background:var(--ln); border:1px solid var(--ln)} .kbcol{flex:0 0 244px;background:var(--w);display:flex;flex-direction:column;max-height:66vh} .kbh{padding:10px 12px;border-bottom:1px solid var(--ln);position:sticky;top:0;background:var(--w);z-index:2} .kbh .kt{font-size:12px;font-weight:600;display:flex;align-items:center;gap:7px;letter-spacing:-.01em} .kbh .kc{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--k4);margin-left:auto} .kbh .ks{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--k4);margin-top:4px; display:flex;justify-content:space-between;gap:8px} .kbb{overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;background:var(--w2)} .kcard{background:var(--w);border:1px solid var(--ln);padding:10px;display:flex;flex-direction:column; gap:7px;cursor:pointer} @media (hover:hover) and (pointer:fine){ .kcard:hover{border-color:var(--k3)} } .kcard .kn{font-size:12.5px;font-weight:600;line-height:1.3;letter-spacing:-.015em} .kcard .km{display:flex;justify-content:space-between;font-family:"IBM Plex Mono",monospace; font-size:10.5px;color:var(--k3)} .kcard .age{height:2px;background:var(--ln)} .kcard .age i{display:block;height:100%} .kcard .next{font-size:11.5px;display:flex;align-items:center;gap:6px;padding-top:6px; border-top:1px solid var(--ln);color:var(--k3)} .kcard .next svg{width:11px;height:11px;stroke:currentColor} .kcard .next.none{color:var(--no);font-weight:600} /* ===== muro de exclusivas ===== */ .muro{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(266px,1fr))} .xcard{background:var(--w);border:1px solid var(--ln);display:flex;flex-direction:column;cursor:pointer} @media (hover:hover) and (pointer:fine){ .xcard:hover{border-color:var(--k3)} } .xphoto{height:96px;position:relative;background:var(--w3);border-bottom:1px solid var(--ln); display:flex;align-items:flex-end;justify-content:space-between;padding:9px 11px} .xphoto::before{content:"";position:absolute;inset:0; background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(0,0,0,.028) 9px 10px)} .xphoto .xp-price{position:relative;font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:14px; background:var(--k);color:var(--w);padding:3px 8px} .xphoto .xp-days{position:absolute;right:11px;top:9px;font-family:"IBM Plex Mono",monospace;font-size:10px; color:var(--k3);background:var(--w);padding:2px 7px;border:1px solid var(--ln)} .xb{padding:12px;display:flex;flex-direction:column;gap:10px;flex:1} .xt{display:flex;align-items:flex-start;gap:11px} .xt .xn{flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:1.3;letter-spacing:-.018em} .xt .xsub{font-family:var(--lbl);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase; color:var(--k4);font-weight:400;margin-top:3px} .xstatus{display:flex;align-items:center;gap:8px} .xstats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ln);border:1px solid var(--ln)} .xstats div{background:var(--w);padding:6px 3px;text-align:center} .xstats b{display:block;font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:500} .xstats span{font-family:var(--lbl);font-size:8.5px;letter-spacing:.05em; text-transform:uppercase;color:var(--k4)} .xdocs{display:flex;align-items:center;gap:8px;font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--k4)} .xports{display:flex;gap:4px;flex-wrap:wrap} .pchip{font-family:var(--lbl);font-size:9px;letter-spacing:.04em;padding:1px 6px;border:1px solid} .pchip.live{color:var(--ok);border-color:var(--ok)} .pchip.err{color:var(--no);border-color:var(--no);background:var(--no-soft)} .pchip.off{color:var(--k4);border-color:var(--ln2)} /* timeline */ /* diagnóstico */ .diag{display:flex;flex-direction:column} .ditem{display:flex;gap:11px;font-size:13px;line-height:1.55;padding:10px 0;border-bottom:1px solid var(--ln)} .ditem:last-child{border-bottom:0} .ditem .dd{width:7px;height:7px;flex-shrink:0;margin-top:7px} .ditem b{font-weight:600} .foco{background:var(--k);color:var(--w);padding:15px 18px;margin-top:14px} .foco .fl{font-family:var(--lbl);font-size:9.5px;letter-spacing:.055em; text-transform:uppercase;color:var(--o)} .foco p{margin:6px 0 0;font-size:14.5px;line-height:1.45;letter-spacing:-.01em} /* funnel */ .funnel{display:flex;align-items:stretch;overflow-x:auto;border:1px solid var(--ln)} .fnode{flex:1;min-width:92px;padding:12px 9px;text-align:center;border-right:1px solid var(--ln)} .fnode:last-child{border-right:0} .fnode b{display:block;font-family:"IBM Plex Mono",monospace;font-size:21px;font-weight:500;letter-spacing:-.02em} .fnode span{font-family:var(--lbl);font-size:9px;letter-spacing:.05em; text-transform:uppercase;color:var(--k4)} .farrow{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 7px; flex-shrink:0;border-right:1px solid var(--ln);background:var(--w2)} .farrow .fp{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600} .farrow .ft{font-family:"IBM Plex Mono",monospace;font-size:8.5px;color:var(--k4)} /* objetivos */ .goals{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));background:var(--ln); border:1px solid var(--ln)} .goal{background:var(--w);padding:11px 13px} .goal .gl{font-family:var(--lbl);font-size:9.5px;letter-spacing:.055em; text-transform:uppercase;color:var(--k4)} .goal .gv{font-family:"IBM Plex Mono",monospace;font-size:17px;margin:3px 0 6px;font-weight:500} .goal .gv small{font-size:11px;color:var(--k4)} /* matriz */ .mx{overflow-x:auto;border:1px solid var(--ln);background:var(--w)} .mx table{min-width:880px} .mx th.rot{font-size:9px;padding:8px 2px;text-align:center;width:40px} .mx td.c{text-align:center;padding:4px 2px} .mxd{width:22px;height:22px;display:inline-grid;place-items:center;font-family:"IBM Plex Mono",monospace; font-size:10px;font-weight:600;cursor:pointer;border:1px solid transparent} .mxd.ok{background:var(--ok-soft);color:var(--ok)} .mxd.falta{background:var(--no-soft);color:var(--no)} .mxd.pend{background:var(--o-soft);color:var(--o-ink)} .mxd.cad{background:var(--o-soft);color:var(--o-ink);border-color:var(--o)} .mxd.na{background:var(--w2);color:var(--ln2)} /* agenda */ .week{display:grid;grid-template-columns:52px repeat(6,1fr);gap:1px;min-width:680px;background:var(--ln); border:1px solid var(--ln)} .week .wh{background:var(--w);text-align:center;font-family:var(--lbl);font-size:9.5px; letter-spacing:.055em;text-transform:uppercase;color:var(--k4);padding:7px 0} .week .wt{background:var(--w);color:var(--k4);text-align:right;padding:6px 7px 0 0; font-family:"IBM Plex Mono",monospace;font-size:9.5px} /* pedidos */ /* Score de pedido: número sobre 100 con su semáforo. Una letra no dice si hay que llamar hoy; un 82 en verde, sí. */ .score{display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 6px; font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600; border:1px solid var(--ln);background:var(--w2);color:var(--k)} .score i{width:7px;height:7px;flex-shrink:0} .score.sem-verde{background:var(--ok-soft);border-color:var(--ok-soft);color:var(--ok)} .score.sem-verde i{background:var(--ok)} .score.sem-ambar{background:var(--o-soft);border-color:var(--o-line);color:var(--o-ink)} .score.sem-ambar i{background:var(--o)} .score.sem-rojo{background:var(--no-soft);border-color:var(--no-soft);color:var(--no)} .score.sem-rojo i{background:var(--no)} /* toast */ .toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:200;background:var(--k); animation:toastIn .2s var(--ease-out) both; color:var(--w);padding:11px 18px;font-size:13px;display:flex;align-items:center;gap:14px; max-width:calc(100vw - 48px);border-left:2px solid var(--o)} .toast .u{font-family:var(--lbl);font-size:10.5px;letter-spacing:.05em; text-transform:uppercase;color:var(--o);cursor:pointer} .protonote{margin:30px 0 0;padding:12px 16px;border:1px solid var(--ln);border-left:2px solid var(--o); font-size:11.5px;color:var(--k3);line-height:1.55;background:var(--w2)} .protonote b{color:var(--k);font-weight:600} .empty{text-align:center;padding:48px 20px;color:var(--k4)} /* ===== PC primero; tablet/móvil provisional ===== */ @media (max-width:1180px){ :root{--rail:60px} .rail-item{justify-content:center;padding:10px 0} .rail-item .rl{display:none} /* el contador no se esconde: se va a la esquina, más abajo */ .rail-logo{justify-content:center;padding:15px 0} .logo-full{display:none} .logo-mark{display:block} } @media (max-width:900px){ .rail{position:fixed;bottom:0;left:0;right:0;width:100%;height:auto;flex-direction:row;z-index:50; border-right:0;border-top:1px solid var(--ln);padding-top:0;padding-bottom:env(safe-area-inset-bottom,0px)} .rail-logo{display:none} .rail-nav{flex-direction:row;padding:0;overflow-x:auto;width:100%} .rail-item{flex:0 0 auto;min-width:56px;padding:11px 8px} .rail-item.on::before{left:0;right:0;top:0;bottom:auto;width:auto;height:2px} #app{flex-direction:column} .view{padding:0 16px 88px} .pulso{margin:0 -16px;padding:14px 16px 10px} .search{display:none} .mp-acts{grid-template-columns:repeat(2,1fr)} .mp-act.star{grid-column:span 2} } @keyframes mpIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}} @keyframes toastIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}} .empty svg{margin:0 auto;stroke:var(--ln2)} .band .bn{display:none} .acard-rest{background:var(--w2)} .acard-rest .acard-w{color:var(--k4);font-size:12px} .acard-rest{background:var(--w2)} .acard-rest .acard-w{color:var(--k4);font-size:12px;border-color:var(--ln)} /* ===== Leaflet 1.9.4 (BSD-2), incrustado: la CSP bloquea hojas externas ===== */ /* required styles */ .leaflet-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile-container, .leaflet-pane > svg, .leaflet-pane > canvas, .leaflet-zoom-box, .leaflet-image-layer, .leaflet-layer { position: absolute; left: 0; top: 0; } .leaflet-container { overflow: hidden; } .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-user-drag: none; } /* Prevents IE11 from highlighting tiles in blue */ .leaflet-tile::selection { background: transparent; } /* Safari renders non-retina tile on retina better with this, but Chrome is worse */ .leaflet-safari .leaflet-tile { image-rendering: -webkit-optimize-contrast; } /* hack that prevents hw layers "stretching" when loading new tiles */ .leaflet-safari .leaflet-tile-container { width: 1600px; height: 1600px; -webkit-transform-origin: 0 0; } .leaflet-marker-icon, .leaflet-marker-shadow { display: block; } /* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */ /* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */ .leaflet-container .leaflet-overlay-pane svg { max-width: none !important; max-height: none !important; } .leaflet-container .leaflet-marker-pane img, .leaflet-container .leaflet-shadow-pane img, .leaflet-container .leaflet-tile-pane img, .leaflet-container img.leaflet-image-layer, .leaflet-container .leaflet-tile { max-width: none !important; max-height: none !important; width: auto; padding: 0; } .leaflet-container img.leaflet-tile { /* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */ mix-blend-mode: plus-lighter; } .leaflet-container.leaflet-touch-zoom { -ms-touch-action: pan-x pan-y; touch-action: pan-x pan-y; } .leaflet-container.leaflet-touch-drag { -ms-touch-action: pinch-zoom; /* Fallback for FF which doesn't support pinch-zoom */ touch-action: none; touch-action: pinch-zoom; } .leaflet-container.leaflet-touch-drag.leaflet-touch-zoom { -ms-touch-action: none; touch-action: none; } .leaflet-container { -webkit-tap-highlight-color: transparent; } .leaflet-container a { -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4); } .leaflet-tile { filter: inherit; visibility: hidden; } .leaflet-tile-loaded { visibility: inherit; } .leaflet-zoom-box { width: 0; height: 0; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 800; } /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */ .leaflet-overlay-pane svg { -moz-user-select: none; } .leaflet-pane { z-index: 400; } .leaflet-tile-pane { z-index: 200; } .leaflet-overlay-pane { z-index: 400; } .leaflet-shadow-pane { z-index: 500; } .leaflet-marker-pane { z-index: 600; } .leaflet-tooltip-pane { z-index: 650; } .leaflet-popup-pane { z-index: 700; } .leaflet-map-pane canvas { z-index: 100; } .leaflet-map-pane svg { z-index: 200; } .leaflet-vml-shape { width: 1px; height: 1px; } .lvml { behavior: url(#default#VML); display: inline-block; position: absolute; } /* control positioning */ .leaflet-control { position: relative; z-index: 800; pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ pointer-events: auto; } .leaflet-top, .leaflet-bottom { position: absolute; z-index: 1000; pointer-events: none; } .leaflet-top { top: 0; } .leaflet-right { right: 0; } .leaflet-bottom { bottom: 0; } .leaflet-left { left: 0; } .leaflet-control { float: left; clear: both; } .leaflet-right .leaflet-control { float: right; } .leaflet-top .leaflet-control { margin-top: 10px; } .leaflet-bottom .leaflet-control { margin-bottom: 10px; } .leaflet-left .leaflet-control { margin-left: 10px; } .leaflet-right .leaflet-control { margin-right: 10px; } /* zoom and fade animations */ .leaflet-fade-anim .leaflet-popup { opacity: 0; -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .leaflet-fade-anim .leaflet-map-pane .leaflet-popup { opacity: 1; } .leaflet-zoom-animated { -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } svg.leaflet-zoom-animated { will-change: transform; } .leaflet-zoom-anim .leaflet-zoom-animated { -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1); -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1); transition: transform 0.25s cubic-bezier(0,0,0.25,1); } .leaflet-zoom-anim .leaflet-tile, .leaflet-pan-anim .leaflet-tile { -webkit-transition: none; -moz-transition: none; transition: none; } .leaflet-zoom-anim .leaflet-zoom-hide { visibility: hidden; } /* cursors */ .leaflet-interactive { cursor: pointer; } .leaflet-grab { cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .leaflet-crosshair, .leaflet-crosshair .leaflet-interactive { cursor: crosshair; } .leaflet-popup-pane, .leaflet-control { cursor: auto; } .leaflet-dragging .leaflet-grab, .leaflet-dragging .leaflet-grab .leaflet-interactive, .leaflet-dragging .leaflet-marker-draggable { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } /* marker & overlays interactivity */ .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-image-layer, .leaflet-pane > svg path, .leaflet-tile-container { pointer-events: none; } .leaflet-marker-icon.leaflet-interactive, .leaflet-image-layer.leaflet-interactive, .leaflet-pane > svg path.leaflet-interactive, svg.leaflet-image-layer.leaflet-interactive path { pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ pointer-events: auto; } /* visual tweaks */ .leaflet-container { background: #ddd; outline-offset: 1px; } .leaflet-container a { color: #0078A8; } .leaflet-zoom-box { border: 2px dotted #38f; background: rgba(255,255,255,0.5); } /* general typography */ .leaflet-container { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 12px; font-size: 0.75rem; line-height: 1.5; } /* general toolbar styles */ .leaflet-bar { box-shadow: 0 1px 5px rgba(0,0,0,0.65); border-radius: 4px; } .leaflet-bar a { background-color: #fff; border-bottom: 1px solid #ccc; width: 26px; height: 26px; line-height: 26px; display: block; text-align: center; text-decoration: none; color: black; } .leaflet-bar a, .leaflet-control-layers-toggle { background-position: 50% 50%; background-repeat: no-repeat; display: block; } .leaflet-bar a:hover, .leaflet-bar a:focus { background-color: #f4f4f4; } .leaflet-bar a:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } .leaflet-bar a:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom: none; } .leaflet-bar a.leaflet-disabled { cursor: default; background-color: #f4f4f4; color: #bbb; } .leaflet-touch .leaflet-bar a { width: 30px; height: 30px; line-height: 30px; } .leaflet-touch .leaflet-bar a:first-child { border-top-left-radius: 2px; border-top-right-radius: 2px; } .leaflet-touch .leaflet-bar a:last-child { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } /* zoom control */ .leaflet-control-zoom-in, .leaflet-control-zoom-out { font: bold 18px 'Lucida Console', Monaco, monospace; text-indent: 1px; } .leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out { font-size: 22px; } /* layers control */ .leaflet-control-layers { box-shadow: 0 1px 5px rgba(0,0,0,0.4); background: #fff; border-radius: 5px; } .leaflet-control-layers-toggle { background-image: url(images/layers.png); width: 36px; height: 36px; } .leaflet-retina .leaflet-control-layers-toggle { background-image: url(images/layers-2x.png); background-size: 26px 26px; } .leaflet-touch .leaflet-control-layers-toggle { width: 44px; height: 44px; } .leaflet-control-layers .leaflet-control-layers-list, .leaflet-control-layers-expanded .leaflet-control-layers-toggle { display: none; } .leaflet-control-layers-expanded .leaflet-control-layers-list { display: block; position: relative; } .leaflet-control-layers-expanded { padding: 6px 10px 6px 6px; color: #333; background: #fff; } .leaflet-control-layers-scrollbar { overflow-y: scroll; overflow-x: hidden; padding-right: 5px; } .leaflet-control-layers-selector { margin-top: 2px; position: relative; top: 1px; } .leaflet-control-layers label { display: block; font-size: 13px; font-size: 1.08333em; } .leaflet-control-layers-separator { height: 0; border-top: 1px solid #ddd; margin: 5px -10px 5px -6px; } /* Default icon URLs */ .leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */ background-image: url(images/marker-icon.png); } /* attribution and scale controls */ .leaflet-container .leaflet-control-attribution { background: #fff; background: rgba(255, 255, 255, 0.8); margin: 0; } .leaflet-control-attribution, .leaflet-control-scale-line { padding: 0 5px; color: #333; line-height: 1.4; } .leaflet-control-attribution a { text-decoration: none; } .leaflet-control-attribution a:hover, .leaflet-control-attribution a:focus { text-decoration: underline; } .leaflet-attribution-flag { display: inline !important; vertical-align: baseline !important; width: 1em; height: 0.6669em; } .leaflet-left .leaflet-control-scale { margin-left: 5px; } .leaflet-bottom .leaflet-control-scale { margin-bottom: 5px; } .leaflet-control-scale-line { border: 2px solid #777; border-top: none; line-height: 1.1; padding: 2px 5px 1px; white-space: nowrap; -moz-box-sizing: border-box; box-sizing: border-box; background: rgba(255, 255, 255, 0.8); text-shadow: 1px 1px #fff; } .leaflet-control-scale-line:not(:first-child) { border-top: 2px solid #777; border-bottom: none; margin-top: -2px; } .leaflet-control-scale-line:not(:first-child):not(:last-child) { border-bottom: 2px solid #777; } .leaflet-touch .leaflet-control-attribution, .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar { box-shadow: none; } .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar { border: 2px solid rgba(0,0,0,0.2); background-clip: padding-box; } /* popup */ .leaflet-popup { position: absolute; text-align: center; margin-bottom: 20px; } .leaflet-popup-content-wrapper { padding: 1px; text-align: left; border-radius: 12px; } .leaflet-popup-content { margin: 13px 24px 13px 20px; line-height: 1.3; font-size: 13px; font-size: 1.08333em; min-height: 1px; } .leaflet-popup-content p { margin: 17px 0; margin: 1.3em 0; } .leaflet-popup-tip-container { width: 40px; height: 20px; position: absolute; left: 50%; margin-top: -1px; margin-left: -20px; overflow: hidden; pointer-events: none; } .leaflet-popup-tip { width: 17px; height: 17px; padding: 1px; margin: -10px auto 0; pointer-events: auto; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: white; color: #333; box-shadow: 0 3px 14px rgba(0,0,0,0.4); } .leaflet-container a.leaflet-popup-close-button { position: absolute; top: 0; right: 0; border: none; text-align: center; width: 24px; height: 24px; font: 16px/24px Tahoma, Verdana, sans-serif; color: #757575; text-decoration: none; background: transparent; } .leaflet-container a.leaflet-popup-close-button:hover, .leaflet-container a.leaflet-popup-close-button:focus { color: #585858; } .leaflet-popup-scrolled { overflow: auto; } .leaflet-oldie .leaflet-popup-content-wrapper { -ms-zoom: 1; } .leaflet-oldie .leaflet-popup-tip { width: 24px; margin: 0 auto; -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)"; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678); } .leaflet-oldie .leaflet-control-zoom, .leaflet-oldie .leaflet-control-layers, .leaflet-oldie .leaflet-popup-content-wrapper, .leaflet-oldie .leaflet-popup-tip { border: 1px solid #999; } /* div icon */ .leaflet-div-icon { background: #fff; border: 1px solid #666; } /* Tooltip */ /* Base styles for the element that has a tooltip */ .leaflet-tooltip { position: absolute; padding: 6px; background-color: #fff; border: 1px solid #fff; border-radius: 3px; color: #222; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,0.4); } .leaflet-tooltip.leaflet-interactive { cursor: pointer; pointer-events: auto; } .leaflet-tooltip-top:before, .leaflet-tooltip-bottom:before, .leaflet-tooltip-left:before, .leaflet-tooltip-right:before { position: absolute; pointer-events: none; border: 6px solid transparent; background: transparent; content: ""; } /* Directions */ .leaflet-tooltip-bottom { margin-top: 6px; } .leaflet-tooltip-top { margin-top: -6px; } .leaflet-tooltip-bottom:before, .leaflet-tooltip-top:before { left: 50%; margin-left: -6px; } .leaflet-tooltip-top:before { bottom: 0; margin-bottom: -12px; border-top-color: #fff; } .leaflet-tooltip-bottom:before { top: 0; margin-top: -12px; margin-left: -6px; border-bottom-color: #fff; } .leaflet-tooltip-left { margin-left: -6px; } .leaflet-tooltip-right { margin-left: 6px; } .leaflet-tooltip-left:before, .leaflet-tooltip-right:before { top: 50%; margin-top: -6px; } .leaflet-tooltip-left:before { right: 0; margin-right: -12px; border-left-color: #fff; } .leaflet-tooltip-right:before { left: 0; margin-left: -12px; border-right-color: #fff; } /* Printing */ @media print { /* Prevent printers from removing background-images of controls. */ .leaflet-control { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* ===== mapa real (Leaflet) ===== */ .mapa-barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:11px} .mapa-real{height:clamp(420px,64vh,720px);width:100%;border:1px solid var(--ln);background:var(--w2)} .pin-wrap{background:none;border:0} .pin{width:34px;height:34px;border:2.5px solid #fff;color:#fff;font-family:"IBM Plex Mono",monospace; font-size:11px;font-weight:600;display:grid;place-items:center;cursor:pointer; border-radius:50%;box-shadow:0 2px 7px rgba(0,0,0,.4)} .pin.toca{border-color:#0A0A0A;border-style:dashed} .pin:hover{outline:2px solid #0A0A0A;z-index:500} .mapa-leyenda-zonas{display:flex;gap:16px;flex-wrap:wrap;margin-top:11px} .mapa-leyenda-zonas span{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--k2)} .mapa-leyenda-zonas i{width:11px;height:11px;display:inline-block;opacity:.85} .mapa-leyenda-zonas b{color:var(--k4);font-weight:500} /* ===== editor de zonas ===== Va encima del mapa, a la izquierda, porque mientras se arrastra una esquina hay que ver a la vez la forma y el número de metros que va marcando. */ .mapa-zona{position:relative} .ez{position:absolute;left:14px;top:14px;z-index:6;width:278px;max-height:calc(100% - 28px); display:flex;flex-direction:column;background:var(--w);border:1px solid var(--ln2); box-shadow:var(--sh-alto)} .ez-h{padding:11px 13px;border-bottom:1px solid var(--ln)} .ez-h b{display:block;font-size:13px;font-weight:700} .ez-h .mini{display:block;margin-top:3px;color:var(--k4);line-height:1.4} .ez-lista{overflow:auto;flex:1} .ez-z{padding:8px 13px;border-bottom:1px solid var(--ln);cursor:pointer} .ez-z.sel{background:var(--w3)} .ez-z-t{display:flex;align-items:center;gap:8px} .ez-z-t i{width:11px;height:11px;flex-shrink:0} .ez-z-t b{font-size:12.5px;font-weight:600} .ez-m2{margin-left:auto;font-size:11.5px;color:var(--k3)} .ez-z-b{display:flex;align-items:center;gap:7px;margin-top:6px} .ez-z-b select{max-width:118px;font-size:11.5px;padding:3px 6px} .ez-del{color:var(--no)} .ez-aviso{display:flex;gap:8px;align-items:flex-start;padding:9px 13px; background:var(--o-soft);border-top:1px solid var(--o-line); font-size:11.5px;color:var(--o-ink);line-height:1.45} .ez-aviso svg{flex-shrink:0;margin-top:1px} .ez-pie{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:10px 13px; border-top:1px solid var(--ln)} @media (max-width:900px){ .ez{position:static;width:auto;max-height:none;margin-bottom:11px} } /* ===== el mapa de Google, con lo nuestro encima ===== El callejero lo pone Google; las zonas, los portales, sus globos y los números de zona los dibujamos nosotros en una capa que no recibe clics, para que el mapa siga arrastrándose por debajo con normalidad. */ .gm-base{position:absolute;inset:0} .gm-capa{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden} .gm-lienzo{position:absolute;left:0;top:0} .gm-zona-num{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center; width:30px;height:30px;border-radius:50%;background:var(--zc);color:#fff; font-family:"Nunito","Figtree",sans-serif;font-size:15px;font-weight:800; box-shadow:0 2px 6px rgba(0,0,0,.35);border:2px solid #fff;will-change:transform} .gm-globo{position:absolute;max-width:290px;background:var(--w);color:var(--k); border:1px solid var(--ln2);box-shadow:var(--sh);padding:6px 9px;font-size:12px; line-height:1.45;z-index:3} .gm-globo i{color:var(--k4);font-style:normal} /* Google mete su propia tipografía y su propio azul en los rótulos de los controles; se dejan con la letra de la casa para que no canten. */ .gm-base .gm-style, .gm-base .gm-style-cc span{font-family:"Figtree",system-ui,-apple-system,sans-serif} /* ===== el mapa, con la misma piel que el resto del CRM ===== El callejero lo dibuja MapLibre en un canvas; todo lo que va encima -fincas, zonas, globos y controles- sigue siendo de Leaflet, así que se le da el mismo tratamiento que a cualquier tarjeta: crema, esquinas rectas y la tipografía de la casa. */ .leaflet-container{font-family:"Figtree",system-ui,-apple-system,sans-serif;background:var(--w2)} .leaflet-gl-layer canvas{outline:none} .leaflet-tooltip{font-size:12px;border:1px solid var(--ln2);background:var(--w);color:var(--k); border-radius:0;padding:6px 9px;box-shadow:var(--sh);line-height:1.45} .leaflet-tooltip i{color:var(--k4);font-style:normal} .leaflet-tooltip-top:before{border-top-color:var(--ln2)} .leaflet-tooltip-bottom:before{border-bottom-color:var(--ln2)} .leaflet-control-attribution{font-size:9.5px;background:rgba(251,246,238,.86);color:var(--k4); border:1px solid var(--ln);border-right:0;border-bottom:0;padding:2px 7px} .leaflet-control-attribution a{color:var(--k3);text-decoration:none} /* los dos botones de zoom: los mismos que los chips de la barra de arriba */ .leaflet-bar{border:0;box-shadow:var(--sh)} .leaflet-bar a,.leaflet-bar a:hover{border-radius:0;color:var(--k2);background:var(--w); border:1px solid var(--ln);width:30px;height:30px;line-height:28px;font-size:17px;font-weight:600} .leaflet-bar a:first-child{border-bottom:0} .leaflet-bar a:hover{background:var(--w3);color:var(--k);border-color:var(--ln2)} .leaflet-bar a.leaflet-disabled{background:var(--w2);color:var(--ln2)} .leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:28px} .pin-etq{display:inline-block;background:var(--k);color:#fff;font-family:var(--lbl); font-size:9.5px;font-weight:600;padding:1px 5px;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.4)} td select{font:inherit;font-size:12.5px;border:1px solid var(--ln2);background:var(--w); padding:4px 7px;color:var(--k);max-width:180px} /* ===== Modo Puerta: tipos de noticia y marcas ===== */ .mp-act.star{flex-direction:column;gap:1px;min-height:54px} .mp-act-sub{font-family:var(--lbl);font-size:9px;letter-spacing:.05em; text-transform:uppercase;opacity:.65;font-weight:500} .mp-marcas{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:11px 18px 14px} .mp-marcas .ml{color:var(--k4)} .mp-marca{border:1px solid var(--ln2);color:var(--k2);font-size:11.5px;padding:6px 11px;background:var(--w)} @media (hover:hover) and (pointer:fine){ .mp-marca:hover{border-color:var(--k3);color:var(--k)} } .mp-marca.on{background:var(--o);border-color:var(--o);color:var(--k);font-weight:600} .mp-tipos{padding:0 18px 14px} .mp-tipos-h{display:flex;align-items:center;justify-content:space-between;padding:4px 0 9px} .mp-tipos-h .ml{color:var(--o-ink)} .mp-volver{display:flex;align-items:center;gap:6px;color:var(--k3);font-size:12px} @media (hover:hover) and (pointer:fine){ .mp-volver:hover{color:var(--k)} } .mp-tipos-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px; background:var(--ln);border:1px solid var(--ln)} .mp-tipo{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:13px; background:var(--w);color:var(--k);text-align:left;min-height:66px; transition:background .14s var(--ease-out)} .mp-tipo svg{stroke:var(--o-ink);margin-bottom:2px} @media (hover:hover) and (pointer:fine){ .mp-tipo:hover{background:var(--o-soft)} } .mp-tipo:active{background:var(--o)} .mt-l{font-size:13px;font-weight:600} .mt-n{font-family:var(--lbl);font-size:9.5px;letter-spacing:.05em; text-transform:uppercase;color:var(--k4)} .mp-sumtipos{margin:16px auto 0;max-width:440px} .mp-sumtipos > div{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:6px} @media (max-width:640px){ .mp-tipos-grid{grid-template-columns:1fr} } /* ===== captación del comercial ===== */ .grafcard .card-h{align-items:flex-start;padding-bottom:10px} .grafcard .card-b{padding:10px 14px 12px} .graf{width:100%;height:auto;display:block} .gc-t{display:flex;flex-direction:column;gap:1px;min-width:0} .gc-t h3{font-size:13.5px} .gc-t .sub{margin:0} .gc-n{display:flex;align-items:baseline;gap:6px;white-space:nowrap} .gc-n b{font-size:22px;font-weight:500;letter-spacing:-.03em} .gc-p{font-size:11.5px;font-weight:600;padding-left:6px;border-left:1px solid var(--ln)} .gc-bar{display:block;height:3px;background:var(--w3);margin-top:8px} .gc-bar i{display:block;height:100%} .ratios{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px; background:var(--ln);border:1px solid var(--ln)} .ratio{background:var(--w);padding:11px 13px} .ratio .rv{display:flex;align-items:baseline;gap:7px;margin:3px 0 6px} .ratio .rv b{font-size:16px} .objfila{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .objring{flex-shrink:0;text-align:center} @media (max-width:700px){ .objfila{gap:14px} .objring{margin:0 auto} } /* ===== panel lateral ===== */ /* ===== panel lateral ===== Faltaba por completo la regla del contenedor, así que el panel se pintaba como un bloque normal al final de la página, fuera de la pantalla: se abría de verdad pero no se veía, y parecía que los botones no hacían nada. */ .panel{position:fixed;top:0;right:0;bottom:0;width:min(430px,94vw);z-index:300; background:var(--w);border-left:1px solid var(--ln2); box-shadow:-16px 0 44px rgba(10,10,10,.13); display:flex;flex-direction:column; animation:panel-entra .24s var(--ease-out)} @keyframes panel-entra{from{transform:translateX(18px);opacity:0}to{transform:none;opacity:1}} @media (prefers-reduced-motion:reduce){ .panel{animation:none} } .panel-h{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-bottom:1px solid var(--ln)} .panel-t{font-size:15px;font-weight:600;letter-spacing:-.02em;line-height:1.25} .panel-b{flex:1;overflow-y:auto;padding:12px 16px 18px} .panel-f{display:flex;gap:7px;padding:12px 16px;border-top:1px solid var(--ln);background:var(--w2)} .panel-sec{margin:16px 0 6px;padding-top:11px;border-top:1px solid var(--ln)} .panel-ring{display:flex;align-items:center;gap:15px;padding:2px 0 10px} .panel-big{font-size:17px;font-weight:600;letter-spacing:-.02em} .panel-cita{margin:0;padding:11px 13px;background:var(--w2);border-left:2px solid var(--ln2); font-size:12.5px;line-height:1.55;color:var(--k2)} .panel-b .lnk{font-size:12px;font-weight:600;color:var(--o-ink);display:inline-flex;align-items:center;gap:4px} .panel-b select{font:inherit;font-size:12px;border:1px solid var(--ln2);background:var(--w);padding:3px 6px;color:var(--k)} .panel-foto{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ln);border-bottom:1px solid var(--ln)} .panel-acc{display:flex;gap:7px;padding:11px 16px;border-bottom:1px solid var(--ln)} .panel-acc .btn{text-decoration:none} .foto-ph{background:var(--w2);aspect-ratio:1.5;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:7px;color:var(--k4)} .foto-ph svg{stroke:var(--ln2)} .sync .blob{width:6px;height:6px;background:var(--ok);border-radius:50%} /* ===== modal ===== */ .modal{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-start;justify-content:center; padding:6vh 16px 16px;overflow-y:auto} .modal-bg{position:fixed;inset:0;background:rgba(10,10,10,.34)} .modal-caja{position:relative;background:var(--w);border:1px solid var(--ln2);width:min(560px,100%); box-shadow:0 30px 70px -30px rgba(0,0,0,.5);animation:modalIn .19s var(--ease-out) both} @keyframes modalIn{from{opacity:0;transform:translateY(-8px) scale(.99)}to{opacity:1;transform:none}} .modal-h{display:flex;align-items:flex-start;gap:10px;padding:15px 18px;border-bottom:1px solid var(--ln)} .modal-b{padding:16px 18px} .modal-f{display:flex;justify-content:flex-end;gap:8px;padding:13px 18px;border-top:1px solid var(--ln);background:var(--w2)} .campos{display:grid;grid-template-columns:1fr 1fr;gap:12px} .campo{display:flex;flex-direction:column;gap:5px} .campo.ancho{grid-column:span 2} .campo input,.campo select,.campo textarea{font:inherit;font-size:13px;color:var(--k);background:var(--w); border:1px solid var(--ln2);padding:8px 10px;width:100%;border-radius:0} .campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--o);outline-offset:-1px;border-color:var(--o)} .campo input.malo,.campo select.malo{border-color:var(--no);background:var(--no-soft)} .campo textarea{resize:vertical;font-family:inherit} .modal-nota{margin:14px 0 0;padding:10px 12px;background:var(--o-soft);border-left:2px solid var(--o); font-size:12px;color:var(--o-ink);line-height:1.5} .modal-error{margin:12px 0 0;padding:9px 12px;background:var(--no-soft);border-left:2px solid var(--no); font-size:12.5px;color:var(--no);line-height:1.5} .nuevo-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ln);border:1px solid var(--ln)} .nuevo-op{display:flex;align-items:center;gap:11px;padding:15px 16px;background:var(--w);font-size:13.5px; font-weight:500;text-align:left} .nuevo-op svg{stroke:var(--o-ink)} @media (hover:hover) and (pointer:fine){ .nuevo-op:hover{background:var(--o-soft)} } /* ===== buscador ===== */ .buscador{width:min(620px,100%)} .buscador-h{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid var(--ln)} .buscador-h svg{stroke:var(--k4)} .buscador-h input{flex:1;font:inherit;font-size:15px;border:0;outline:0;background:transparent;color:var(--k)} .buscador-res{max-height:52vh;overflow-y:auto} .q-item{display:grid;grid-template-columns:96px 1fr;gap:3px 12px;width:100%;text-align:left; padding:10px 16px;border-bottom:1px solid var(--ln);align-items:baseline} .q-item:last-child{border-bottom:0} @media (hover:hover) and (pointer:fine){ .q-item:hover{background:var(--o-soft)} } .q-tipo{grid-row:span 2} .q-txt{font-size:13.5px;font-weight:600;letter-spacing:-.015em} .q-item .mini{grid-column:2} /* ===== ficha de piso ===== */ .ffprecio{text-align:right;flex-shrink:0} .ffprecio .kpi-val{font-size:26px} .galeria{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--ln);border:1px solid var(--ln)} .galeria .foto-ph{aspect-ratio:1.35} .galeria .foto-ph.mas{background:var(--w3)} .galeria .foto-ph.mas b{font-size:17px;color:var(--k3)} .galeria-pie{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px} .tile-nota{display:block;margin-top:2px} .mx-col1{position:sticky;left:0;background:var(--w);z-index:1;min-width:210px;box-shadow:1px 0 0 var(--ln)} thead .mx-col1{background:var(--w2)} @media (max-width:1100px){ .galeria{grid-template-columns:repeat(3,1fr)} } @media (max-width:560px){ .galeria{grid-template-columns:repeat(2,1fr)} .ffprecio{text-align:left} .campos,.nuevo-grid{grid-template-columns:1fr} .campo.ancho{grid-column:span 1} } /* ===== documentos: tabla visual ===== */ .doc-lista{border:1px solid var(--ln);background:var(--w)} .doc-cab,.doc-fila{display:grid;grid-template-columns:minmax(150px,1.1fr) 116px minmax(180px,1.6fr) 118px; gap:18px;align-items:center;width:100%;text-align:left;padding:11px 16px;border-bottom:1px solid var(--ln)} .doc-cab{background:var(--w2);padding-top:8px;padding-bottom:8px} .doc-cab span{font-family:var(--lbl);font-size:9.5px;letter-spacing:.055em; text-transform:uppercase;color:var(--k4)} .doc-cab span:last-child,.doc-fila .doc-cifra{text-align:right;justify-content:flex-end} .doc-fila:last-child{border-bottom:0} @media (hover:hover) and (pointer:fine){ .doc-fila:hover{background:var(--w2)} } .doc-nom{display:flex;align-items:center;gap:8px;min-width:0} .doc-t{font-size:13.5px;font-weight:600;letter-spacing:-.015em;white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .doc-quien{font-family:var(--lbl);font-size:9.5px;letter-spacing:.05em; text-transform:uppercase;color:var(--k4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .doc-barra{display:flex;height:18px;gap:1px;overflow:hidden;background:var(--ln)} .doc-barra i{display:block;min-width:0} .b-ok{background:var(--ok)} .b-pend{background:var(--o)} .b-cad{background:var(--o);opacity:.45} .b-falta{background:var(--no)} .b-na{background:var(--w3)} .doc-chips{display:flex;gap:5px;flex-wrap:wrap} .doc-chips .bdg{cursor:pointer} .doc-cifra{display:flex;align-items:center;gap:9px} .doc-cifra b{font-size:15px;font-weight:600;font-family:"IBM Plex Mono",monospace} .doc-prop{cursor:default} .doc-leyenda{display:flex;gap:15px;flex-wrap:wrap;margin:11px 0 0} .doc-leyenda span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--k3)} .doc-leyenda i{width:11px;height:11px;display:inline-block} .doc-vista{aspect-ratio:1.5;background:var(--w2);border:1px solid var(--ln);display:flex; flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--k4);margin-bottom:14px} .doc-vista svg{stroke:var(--ln2)} .doc-vista.falta{border-style:dashed;border-color:var(--no);background:var(--no-soft)} .doc-vista.falta svg{stroke:var(--no)} @media (max-width:900px){ .doc-cab{display:none} .doc-fila{grid-template-columns:1fr;gap:8px} .doc-fila .doc-cifra{justify-content:flex-start} } .kbh .conv{font-weight:600} .reg-acts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ln);border:1px solid var(--ln)} .reg-act{display:flex;align-items:center;gap:9px;padding:11px 12px;background:var(--w); font-size:12.5px;font-weight:600;text-align:left} .reg-act svg{stroke:var(--o-ink)} .reg-act:hover{background:var(--o-soft)} .reg-tipos{display:grid;grid-template-columns:1fr;gap:1px;background:var(--ln);border:1px solid var(--ln)} .reg-tipo{display:flex;align-items:center;gap:9px;padding:9px 12px;background:var(--w); font-size:12.5px;text-align:left} .reg-tipo svg{stroke:var(--k4)} .reg-tipo:hover{background:var(--o-soft)} .reg-tipo:hover svg{stroke:var(--o-ink)} .reg-marcas{display:flex;gap:6px;flex-wrap:wrap} .reg-marcas .bdg{cursor:pointer} .uni .btn{flex-shrink:0;align-self:center} .mapa-sep{width:1px;height:20px;background:var(--ln2);margin:0 3px} .sello{border:1px solid var(--ln);padding:3px 7px;color:var(--k4);white-space:nowrap;flex-shrink:0} /* En portátil no caben todos: lo primero que sobra es el sello de versión, y después el rótulo del conmutador de demostración. */ @media (max-width:1480px){ .topbar .sello{display:none} } @media (max-width:1560px){ .demoswitch .dl{display:none} .demoswitch{padding-left:3px} } @media (max-width:1180px){ .topbar .sync{display:none} } /* ===== línea de tiempo por tramos de urgencia ===== */ .tl2{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--ln)} .tl2-col{background:var(--w);display:flex;flex-direction:column;min-width:0} .tl2-h{padding:12px 13px 11px;border-bottom:1px solid var(--ln);display:flex; flex-direction:column;gap:2px} .tl2-col.urge .tl2-h{background:var(--o-soft)} .tl2-col:first-child .tl2-h{background:var(--no-soft)} .tl2-t{font-size:13.5px;font-weight:600;letter-spacing:-.015em} .tl2-n{display:flex;align-items:baseline;gap:7px;margin-top:4px} .tl2-n b{font-size:19px;font-weight:500} .tl2-h .bdg{align-self:flex-start;margin-top:5px} .tl2-b{padding:8px;display:flex;flex-direction:column;gap:6px; max-height:none;overflow:visible} .tl2-item{display:grid;grid-template-columns:auto 1fr;gap:2px 9px;width:100%;text-align:left; padding:8px 10px;border:1px solid var(--ln);border-left-width:3px;background:var(--w)} .tl2-item.verde{border-left-color:var(--ok)} .tl2-item.ambar{border-left-color:var(--o)} .tl2-item.rojo{border-left-color:var(--no);background:var(--no-soft)} @media (hover:hover) and (pointer:fine){ .tl2-item:hover{border-color:var(--k3);border-left-width:3px} } .tl2-dias{grid-row:span 2;align-self:center;font-size:13px;font-weight:600;color:var(--k3); min-width:30px;text-align:right} .tl2-item.rojo .tl2-dias{color:var(--no)} .tl2-dir{font-size:12.5px;font-weight:600;line-height:1.3;letter-spacing:-.01em; overflow-wrap:anywhere} .tl2-meta{display:flex;align-items:baseline;gap:8px} .tl2-meta .mono{font-size:11.5px;color:var(--k3)} .tl2-vacio{padding:14px 4px;text-align:center} @media (max-width:1100px){ .tl2{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:640px){ .tl2{grid-template-columns:1fr} } /* ===== barra de filtros ===== */ .filtros{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;padding:11px 13px; border:1px solid var(--ln);background:var(--w2);margin-bottom:12px} .filtro{display:flex;flex-direction:column;gap:3px;min-width:0} .filtro select{font:inherit;font-size:12.5px;border:1px solid var(--ln2);background:var(--w); padding:5px 8px;color:var(--k);max-width:170px} .filtro select:focus{outline:2px solid var(--o);outline-offset:-1px} .filtro-busca{display:flex;align-items:center;gap:7px;border:1px solid var(--ln2);background:var(--w); padding:5px 9px;min-width:190px} .filtro-busca svg{stroke:var(--k4)} .filtro-busca input{font:inherit;font-size:12.5px;border:0;outline:0;background:transparent; color:var(--k);width:100%} .filtro-cuenta{white-space:nowrap} /* ===== listas ricas (ofertas, visitas) ===== */ .lista-rica{border:1px solid var(--ln);background:var(--w)} .lr-fila{display:grid;grid-template-columns:minmax(170px,1.1fr) 130px minmax(220px,1.7fr) 140px; gap:16px;align-items:center;width:100%;text-align:left;padding:12px 15px; border-bottom:1px solid var(--ln);border-left:3px solid var(--ln2);background:var(--w)} .lr-fila:last-child{border-bottom:0} .lr-fila.sem-verde{border-left-color:var(--ok)} .lr-fila.sem-ambar{border-left-color:var(--o)} .lr-fila.sem-rojo{border-left-color:var(--no)} .lr-fila.sem-azul{border-left-color:var(--in)} @media (hover:hover) and (pointer:fine){ .lr-fila:hover{background:var(--w2)} } .lr-quien{display:flex;flex-direction:column;gap:2px;min-width:0} .lr-t{font-size:13.5px;font-weight:600;letter-spacing:-.015em;line-height:1.3;overflow-wrap:anywhere} .lr-importe{display:flex;flex-direction:column;gap:3px} .lr-importe b{font-size:15px;font-weight:600} .lr-barra{display:block;height:4px;background:var(--ln);overflow:hidden} .lr-barra i{display:block;height:100%;background:var(--o)} .lr-cuando{display:flex;flex-direction:column;gap:1px} .lr-cuando b{font-size:15px;font-weight:600} .lr-estado,.lr-res{display:flex;flex-direction:column;gap:5px;align-items:flex-start;min-width:0} .lr-cita{font-size:12px;color:var(--k2);line-height:1.45;border-left:2px solid var(--ln2); padding-left:9px;overflow-wrap:anywhere} .lr-fin{display:flex;align-items:center;gap:8px;justify-content:flex-end} .lr-alerta{color:var(--no);font-weight:600} @media (max-width:1000px){ .lr-fila{grid-template-columns:1fr;gap:9px} .lr-fin{justify-content:flex-start} } /* ===== informe de valoración ===== */ .overlay.informe{background:var(--w3);color:var(--k)} .inf-barra{display:flex;align-items:center;gap:13px;padding:11px 18px;background:var(--k); color:#fff;flex-shrink:0} .inf-barra .mt{font-size:14.5px;font-weight:600} .inf-barra .ms{font-family:"IBM Plex Mono",monospace;font-size:10px;color:rgba(255,255,255,.55)} .inf-scroll{flex:1;overflow-y:auto;padding:26px 16px 60px} .inf-hoja{background:#fff;max-width:820px;margin:0 auto;padding:46px 52px 40px; border:1px solid var(--ln);color:#111} .inf-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:20px; padding-bottom:20px;border-bottom:2px solid var(--o)} .inf-fecha{text-align:right;line-height:1.6} .inf-h1{font-size:25px;font-weight:600;letter-spacing:-.025em;margin:26px 0 4px} .inf-sub{margin:0;font-size:13px;color:#555} .inf-valor{margin:26px 0;padding:22px 24px;background:var(--o-soft);border-left:3px solid var(--o)} .inf-cifra{font-family:"IBM Plex Mono",monospace;font-size:38px;font-weight:600;letter-spacing:-.03em; line-height:1.1;margin:4px 0 8px} .inf-horquilla{font-size:14px;margin-bottom:4px} .inf-m2{font-size:12.5px;color:#555} .inf-h2{font-size:16px;font-weight:600;letter-spacing:-.02em;margin:30px 0 8px; padding-bottom:6px;border-bottom:1px solid var(--ln)} .inf-p{font-size:13.5px;line-height:1.65;margin:0 0 12px;color:#222} .inf-tabla{width:100%;border-collapse:collapse;font-size:12.5px;margin:12px 0 4px} .inf-tabla th{text-align:left;padding:7px 9px;border-bottom:1.5px solid #111; font-family:var(--lbl);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase} .inf-tabla td{padding:7px 9px;border-bottom:1px solid var(--ln)} .inf-tabla tr.inf-destaca td{background:var(--o-soft);font-weight:600} .inf-aviso{margin:20px 0;padding:14px 16px;background:#FBECEC;border-left:3px solid var(--no); font-size:13.5px;line-height:1.6} .inf-lista{font-size:13.5px;line-height:1.7;padding-left:20px;margin:10px 0} .inf-lista li{margin-bottom:5px} .inf-pie{display:flex;justify-content:space-between;gap:24px;margin-top:34px;padding-top:16px; border-top:1px solid var(--ln);font-size:12px;line-height:1.6} .inf-pie .ml{max-width:330px;text-align:right;text-transform:none;letter-spacing:0;font-size:10.5px} @media print{ .rail,.topbar,.no-print,#panel,#modal,#toast{display:none!important} .overlay.informe{position:static;background:#fff} .inf-scroll{overflow:visible;padding:0} .inf-hoja{border:0;max-width:none;padding:0} .inf-tabla{page-break-inside:avoid} .inf-h2{page-break-after:avoid} @page{margin:16mm} } .doc-fila2{grid-template-columns:minmax(180px,1.1fr) minmax(190px,1.3fr) minmax(190px,1.3fr) 190px} .doc-grupo{display:flex;flex-direction:column;gap:5px;min-width:0} .chip-doc{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;font-size:11px; font-weight:500;border:1px solid var(--ln);background:var(--w);white-space:nowrap} .chip-doc svg{stroke:currentColor} .chip-doc.ok{color:var(--ok);border-color:var(--ok-soft);background:var(--ok-soft)} .chip-doc.falta{color:var(--no);border-color:var(--no-soft);background:var(--no-soft)} .chip-doc.pend{color:var(--o-ink);border-color:var(--o-line);background:var(--o-soft)} .chip-doc:hover{border-color:currentColor} .doc-acc{display:flex;align-items:center;gap:9px;justify-content:flex-end;flex-wrap:wrap} .pedir-resumen{border:1px solid var(--ln);background:var(--w2);padding:9px 12px;margin-bottom:14px} .pedir-resumen .kv b{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end} @media (max-width:1000px){ .doc-fila2{grid-template-columns:1fr} .doc-acc{justify-content:flex-start} } .publi-fila{grid-template-columns:minmax(190px,1.2fr) minmax(210px,1fr) minmax(170px,1fr) 150px} .publi-portales{display:flex;gap:5px;flex-wrap:wrap} @media (max-width:1000px){ .publi-fila{grid-template-columns:1fr} } /* ===== agenda: color por tipo, contorno hasta confirmar ===== */ .week .wc{background:var(--w);min-height:34px;padding:4px 7px;font-size:11.5px;font-weight:500; overflow:hidden;line-height:1.3;border-left:3px solid transparent} .wc-t{display:block;overflow:hidden;text-overflow:ellipsis} .week .wc.sigue .wc-t{display:none} .week .ev-pz{--ev:var(--k)} .week .ev-vis{--ev:var(--in)} .week .ev-tas{--ev:var(--o-ink)} .week .ev-sug{--ev:var(--k4)} .week .wc.propuesta{background:var(--w);border-left-color:var(--ev);color:var(--ev); box-shadow:inset 0 0 0 1px var(--ln)} .week .wc.firme{background:color-mix(in srgb, var(--ev) 12%, var(--w)); border-left-color:var(--ev);color:var(--ev);font-weight:600} .week .wc.firme.ev-pz{background:var(--k);color:var(--w);border-left-color:var(--k)} .week .wc.sigue{border-top:0} .ley{width:11px;height:11px;display:inline-block;border-left:3px solid var(--ev); background:color-mix(in srgb, var(--ev) 14%, #fff)} .ley.ev-pz{--ev:var(--k)} .ley.ev-vis{--ev:var(--in)} .ley.ev-tas{--ev:var(--o-ink)} .ley.ev-sug{--ev:var(--k4)} /* ===== bandeja de conversaciones ===== */ .cv{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:1px;background:var(--ln); border:1px solid var(--ln);min-height:520px} .cv-lista{background:var(--w);overflow-y:auto;max-height:640px} .cv-item{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;padding:11px 13px; border-bottom:1px solid var(--ln);background:var(--w)} .cv-item:last-child{border-bottom:0} @media (hover:hover) and (pointer:fine){ .cv-item:hover{background:var(--w2)} } .cv-item.on{background:var(--o-soft);box-shadow:inset 3px 0 0 var(--o)} .cv-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .cv-n{font-size:13px;font-weight:600;letter-spacing:-.01em} .cv-p{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.05em;color:var(--k4); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cv-m{font-size:12px;color:var(--k3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px} .cv-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0} .cv-hilo{background:var(--w);display:flex;flex-direction:column;min-width:0} .cv-cab{display:flex;align-items:center;gap:11px;padding:12px 15px;border-bottom:1px solid var(--ln)} .cv-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px; background:var(--w2);max-height:420px} .cv-msg{display:flex} .cv-msg.nuestro{justify-content:flex-end} .cv-burbuja{max-width:78%;background:var(--w);border:1px solid var(--ln);padding:9px 12px; display:flex;flex-direction:column;gap:5px} .cv-msg.nuestro .cv-burbuja{background:var(--k);color:var(--w);border-color:var(--k)} .cv-msg.nuestro .cv-burbuja .ml{color:rgba(255,255,255,.5)} .cv-msg.nota .cv-burbuja{background:var(--o-soft);border-color:var(--o-line);color:var(--o-ink)} .cv-burbuja p{margin:0;font-size:13px;line-height:1.5} .cv-canal{align-self:flex-start;font-size:9.5px} .cv-plantillas{display:flex;gap:6px;flex-wrap:wrap;padding:10px 15px;border-top:1px solid var(--ln)} .cv-envio{display:flex;gap:8px;padding:11px 15px;border-top:1px solid var(--ln);background:var(--w2)} .cv-envio select{font:inherit;font-size:12.5px;border:1px solid var(--ln2);background:var(--w);padding:7px 8px} .cv-envio input{flex:1;font:inherit;font-size:13px;border:1px solid var(--ln2);background:var(--w); padding:7px 11px;color:var(--k)} .cv-envio input:focus{outline:2px solid var(--o);outline-offset:-1px} .cv-vacio{align-items:center;justify-content:center;gap:10px;color:var(--k4)} .cv-vacio svg{stroke:var(--ln2)} @media (max-width:900px){ .cv{grid-template-columns:1fr} .cv-lista{max-height:260px} } /* fotos de piso: si el servicio no carga, queda el marcador de siempre */ .xphoto{background:var(--w3)} .xp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .xp-img.sinfoto{display:none} .foto-ph{position:relative;overflow:hidden} .foto-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1} .galeria .foto-ph.mas img{display:none} /* ===== demanda y cruce ===== */ .seg.sm button{padding:4px 9px;font-size:11px} .cx-mandos{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 12px;margin-bottom:12px; border:1px solid var(--ln);background:var(--w2)} .cx-expl{font-size:12.5px;color:var(--k3);line-height:1.5;max-width:74ch;margin:0 0 14px} .cx{border:1px solid var(--ln);background:var(--w);margin-bottom:12px} .cx-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 14px;border-bottom:1px solid var(--ln)} .cx-quien{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;min-width:0; padding:0;transition:color .16s var(--ease-out)} .cx-n{font-size:14px;font-weight:600;letter-spacing:-.018em} @media (hover:hover) and (pointer:fine){ .cx-quien:hover .cx-n{color:var(--o-ink)} } .cx-nota{display:flex;gap:7px;align-items:flex-start;margin:0;padding:9px 14px;font-size:12.5px; color:var(--k2);background:var(--w2);border-bottom:1px solid var(--ln)} .cx-nota svg{color:var(--k4);margin-top:2px} .cx-lista{display:flex;flex-direction:column} .cx-m{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:flex-start; padding:13px 14px;border-bottom:1px solid var(--ln);border-left:3px solid transparent} .cx-m:last-child{border-bottom:0} .cx-m.sem-verde{border-left-color:var(--ok)} .cx-m.sem-ambar{border-left-color:var(--o)} .cx-m.sem-rojo{border-left-color:var(--no)} @media (hover:hover) and (pointer:fine){ .cx-m:hover{background:var(--w2)} } .cx-ring{display:flex;flex-direction:column;align-items:center;gap:3px} .cx-info{min-width:0;display:flex;flex-direction:column;gap:4px} .cx-dir{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .cx-dir b{font-size:13.5px;font-weight:600;letter-spacing:-.015em} .cx-meta{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap} .cx-meta b{font-size:14px} .cx-frase{margin:2px 0 0;font-size:12.5px;color:var(--k2);line-height:1.45} .cx-frase.grande{font-size:14px;color:var(--k);line-height:1.5;margin-bottom:12px} .cx-motivos{display:flex;gap:5px;flex-wrap:wrap;margin-top:3px} .mot{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;font-size:10.5px;font-weight:500; border:1px solid var(--ln);color:var(--k3);cursor:default} .mot.si{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-soft)} .mot.quiza{background:var(--o-soft);color:var(--o-ink);border-color:var(--o-line)} .mot.no{background:var(--no-soft);color:var(--no);border-color:var(--no-soft)} .cx-acc{display:flex;flex-direction:column;gap:6px;align-items:stretch} .cx-acc.fila{flex-direction:row;align-items:center} .cx-acc .btn{justify-content:center} .cx-acc .btn[disabled]{opacity:.5;pointer-events:none} .cx-mas{width:100%;padding:9px;font-size:11.5px;font-weight:500;color:var(--k3); border-top:1px solid var(--ln);background:var(--w2);transition:color .16s var(--ease-out)} @media (hover:hover) and (pointer:fine){ .cx-mas:hover{color:var(--o-ink)} } .cx-sep{margin:26px 0 12px;padding-top:18px;border-top:1px solid var(--ln2)} .cx-sep h3{font-size:15px} .cx-sep p{margin:5px 0 0;font-size:12.5px;color:var(--k3);max-width:74ch;line-height:1.5} .cx.sin{border-left:3px solid var(--no)} .cx-busca{padding:13px 14px;display:flex;flex-direction:column;gap:9px} .cx-busca-t{display:flex;flex-direction:column;gap:6px} .cx-chips{display:flex;gap:5px;flex-wrap:wrap} .cx-chips .chip{cursor:default;background:var(--w2)} /* cobertura */ .cob{border:1px solid var(--ln);background:var(--w)} .cob-f{display:grid;grid-template-columns:minmax(150px,1fr) minmax(220px,2fr) 88px 110px;gap:14px; align-items:center;padding:11px 14px;border-bottom:1px solid var(--ln);border-left:3px solid transparent} .cob-f:last-child{border-bottom:0} .cob-f.critico{border-left-color:var(--no);background:var(--no-soft)} .cob-q{display:flex;flex-direction:column;gap:1px} .cob-q b{font-size:13px;font-weight:600} .cob-b{display:flex;flex-direction:column;gap:5px} .cob-par{display:grid;grid-template-columns:62px 1fr 30px;gap:8px;align-items:center} .cob-barra{display:block;height:8px;background:var(--w3)} .cob-barra i{display:block;height:100%} .cob-barra.dem i{background:var(--o)} .cob-barra.st i{background:var(--k)} .cob-par b{font-size:12px;text-align:right} .cob-idx{display:flex;flex-direction:column;align-items:flex-end;gap:0} .cob-idx b{font-size:17px;font-weight:600;letter-spacing:-.02em} .cob-est{display:flex;justify-content:flex-end} /* candidatos desde la ficha del piso */ .cand{border-top:1px solid var(--ln)} .cand-f{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--ln); border-left:3px solid transparent;width:100%;text-align:left} .cand-f:last-child{border-bottom:0} .cand-f.sem-verde{border-left-color:var(--ok)} .cand-f.sem-ambar{border-left-color:var(--o)} .cand-f.sem-rojo{border-left-color:var(--no)} @media (hover:hover) and (pointer:fine){ .cand-f:hover{background:var(--w2)} } .cand-q{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-align:left;padding:0} .cand-i{display:flex;flex-direction:column;gap:2px;min-width:0} .cand-i b{font-size:13.5px;font-weight:600} .cand-a{display:flex;gap:6px;align-items:center;flex-shrink:0} /* panel: de dónde sale el porcentaje */ .pcruce{display:grid;grid-template-columns:46px 1fr auto;gap:10px;align-items:center; padding:8px 0;border-bottom:1px solid var(--ln);border-left:3px solid transparent;padding-left:9px} .pcruce.sem-verde{border-left-color:var(--ok)} .pcruce.sem-ambar{border-left-color:var(--o)} .pcruce.sem-rojo{border-left-color:var(--no)} .pc-pct{font-size:14px;font-weight:600} .pc-dir{display:flex;flex-direction:column;gap:1px;min-width:0;font-size:12.5px;font-weight:500} .pq-f{display:grid;grid-template-columns:120px 1fr 70px 52px;gap:9px;align-items:center; padding:7px 0;border-bottom:1px solid var(--ln)} .pq-et{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600} .pq-f.si .pq-et{color:var(--ok)} .pq-f.no .pq-et{color:var(--no)} .pq-f.quiza .pq-et{color:var(--o-ink)} .pq-txt{font-size:12px;color:var(--k2);line-height:1.4} .pq-barra{display:block;height:5px;background:var(--w3)} .pq-barra i{display:block;height:100%;background:var(--k)} .pq-p{font-size:11px;text-align:right;color:var(--k3)} .pq-bloq{display:flex;gap:8px;align-items:flex-start;margin:0 0 14px;padding:10px 12px; background:var(--no-soft);color:var(--no);font-size:12.5px;line-height:1.45} .pq-bloq svg{flex-shrink:0;margin-top:1px} @media (max-width:1180px){ .cx-m{grid-template-columns:56px 1fr} .cx-acc{grid-column:1/-1;flex-direction:row;flex-wrap:wrap} .cob-f{grid-template-columns:minmax(130px,1fr) 1fr 70px} .cob-est{grid-column:1/-1;justify-content:flex-start} } /* ===== desplegables propios ===== El