
:root{
  --marca:#4D4A71;                                     
  --marca-2:color-mix(in srgb,var(--marca) 82%,#000);  
  --marca-s:color-mix(in srgb,var(--marca) 9%,#fff);   
  --marca-b:color-mix(in srgb,var(--marca) 22%,#fff);  
  --marca-t:color-mix(in srgb,var(--marca) 30%,#fff);  
  --negro:#16181C; --tinta:#16181C; --suave:#5B6170; --tenue:#8A8F99;
  --fondo:#F3F4F6; --borde:#E2E4E9; --borde-2:#D0D3DA;
  --ok:#15803D; --ok-s:#E8F5EC; --amb:#B45309; --amb-s:#FDF3E3; --mal:#C81E1E; --mal-s:#FCEBEB; --info:#1D4ED8; --info-s:#EAF0FD;
  --display:"Mulish",system-ui,sans-serif; --texto:"Lato",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r:10px; --r-p:7px; --sombra:0 1px 2px rgba(22,24,28,.05);
  --barra:58px; --lat:240px; --act:330px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font:400 15px/1.5 var(--texto);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.15;margin:0;letter-spacing:-.01em}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--marca);outline-offset:2px}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-3px}
.suave{color:var(--suave)} .tenue{color:var(--tenue)} .peq{font-size:13px} .mono{font-family:var(--mono)} .num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}


.c2-barra{position:fixed;inset:0 0 auto 0;height:var(--barra);background:#fff;border-bottom:1px solid var(--borde);display:flex;align-items:center;gap:14px;padding:0 16px;z-index:40}
.c2-marca{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.c2-marca img{height:32px;max-width:120px;object-fit:contain}
.c2-marca .ini{width:32px;height:32px;border-radius:7px;background:var(--marca);color:#fff;display:grid;place-items:center;font:900 15px/1 var(--display)}
.c2-marca b{font:900 15px/1.1 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c2-marca small{display:block;font:800 10.5px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);margin-top:3px}
.c2-caras{display:inline-flex;border:1px solid var(--borde-2);border-radius:8px;overflow:hidden;margin-left:8px}
.c2-caras a{padding:7px 11px;font:800 12.5px/1 var(--display);text-decoration:none;color:var(--suave);white-space:nowrap}
.c2-caras a.on{background:var(--marca);color:#fff}
.c2-caras a:not(.on):hover{background:var(--fondo);color:var(--tinta)}
.c2-barra .der{margin-left:auto;display:flex;align-items:center;gap:8px}
.c2-yo{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--suave);white-space:nowrap}
.c2-yo b{color:var(--tinta);font-family:var(--display)}
.c2-menu-movil{display:none}
.c2-lat{position:fixed;top:var(--barra);bottom:0;left:0;width:var(--lat);background:#fff;border-right:1px solid var(--borde);overflow-y:auto;padding:10px 10px 20px;z-index:30}
.c2-lat .grupo{font:900 10.5px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);margin:16px 10px 6px}
.c2-lat a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:7px;text-decoration:none;font-weight:700;font-size:14.5px;color:#30343C}
.c2-lat a:hover{background:var(--fondo)}
.c2-lat a.activo{background:var(--marca);color:#fff}
.c2-lat a .cnt{margin-left:auto;background:var(--mal);color:#fff;border-radius:6px;font:900 11px/1 var(--display);padding:4px 6px}
.c2-lat a.activo .cnt{background:#fff;color:var(--marca)}
.c2-lat a .ext{margin-left:auto;width:14px;height:14px;color:var(--tenue)}
.c2-lat .pie{margin:22px 10px 0;font-size:12px;color:var(--tenue);line-height:1.45}
.c2-main{margin:var(--barra) var(--act) 0 var(--lat);padding:22px 24px 80px;min-height:calc(100vh - var(--barra))}
.c2-act{position:fixed;top:var(--barra);bottom:0;right:0;width:var(--act);background:#fff;border-left:1px solid var(--borde);display:flex;flex-direction:column;z-index:30}
.c2-act .cab{padding:14px 16px 10px;border-bottom:1px solid var(--borde)}
.c2-act .cab h3{font-size:15px;display:flex;align-items:center;gap:8px}
.c2-act .cab p{margin:4px 0 0;font-size:12.5px;color:var(--suave)}
.c2-feed{list-style:none;margin:0;padding:6px 10px 30px;overflow-y:auto;flex:1}
.c2-feed li{display:flex;gap:10px;padding:9px 6px;border-bottom:1px solid #F0F1F4;font-size:13.5px;line-height:1.4}
.c2-feed li a{text-decoration:none}
.c2-feed li a:hover b{text-decoration:underline}
.c2-feed li .t{display:block;font-size:11.5px;color:var(--tenue);margin-top:2px}
.c2-feed li.nuevo{animation:entra .5s ease;background:var(--marca-s);border-radius:7px}
@keyframes entra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.tag{display:inline-block;vertical-align:1px;margin-left:6px;font:900 9.5px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;border-radius:4px;padding:3px 5px;white-space:nowrap;background:var(--marca-s);color:var(--marca)}
.tag.persona{background:var(--negro);color:#fff}
@media (max-width:1280px){ :root{--act:0px} .c2-act{display:none} .c2-act.abierto{display:flex;width:340px;box-shadow:-10px 0 30px rgba(0,0,0,.12)} }
@media (min-width:1281px){ body.sin-act{--act:0px} body.sin-act .c2-act{display:none} }   
#c2-ver-act.on{background:var(--marca-s);border-color:var(--marca-b);color:var(--marca)}
.c2-act .cab{position:relative} .c2-act .cab .cerrar-act{position:absolute;top:10px;right:10px}
@media (max-width:900px){
  :root{--lat:0px}
  .c2-lat{display:none}
  .c2-lat.abierto{display:block;width:260px;box-shadow:10px 0 30px rgba(0,0,0,.14)}
  .c2-menu-movil{display:inline-flex}
  .c2-yo,.solo-escr,.c2-marca small{display:none}
  .c2-main{padding:16px 14px 80px}
}
@media (max-width:560px){ .c2-marca b{display:none} .c2-marca img{max-width:96px} .c2-caras{display:none} }   


.av{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:900 12.5px/1 var(--display);background:#fff;color:var(--marca);border:2px solid var(--marca);flex:none;position:relative}
.av.ia{background:var(--marca);color:#fff}
.av.persona{background:var(--negro);border-color:var(--negro);color:#fff}
.av.g{width:44px;height:44px;font-size:17px}


.vista-cab{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.vista-cab h1{font-size:27px;font-weight:900}
.vista-cab p{margin:6px 0 0;color:var(--suave);max-width:780px}
.vista-cab .der{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.ey{font:900 11px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--marca);margin:0 0 8px}
.miga{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--suave);margin-bottom:10px}
.miga a{text-decoration:none;font-weight:700} .miga a:hover{color:var(--marca)}


.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--borde-2);background:#fff;color:var(--tinta);font:800 14px/1 var(--display);padding:10px 14px;border-radius:var(--r-p);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s}
.btn:hover{border-color:var(--negro)}
.btn.pri{background:var(--marca);border-color:var(--marca);color:#fff}
.btn.pri:hover{background:var(--marca-2);border-color:var(--marca-2)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.mal{background:#fff;border-color:var(--mal);color:var(--mal)}
.btn.fant{border-color:transparent;background:transparent}
.btn.fant:hover{background:var(--fondo)}
.btn.peq{padding:7px 10px;font-size:13px}
.btn[disabled]{opacity:.45;cursor:default}


.tarjeta{background:#fff;border:1px solid var(--borde);border-radius:var(--r);padding:18px;box-shadow:var(--sombra)}
.tarjeta h2{font-size:16.5px;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.tarjeta h2 .der{margin-left:auto}
.tarjeta .sub{color:var(--suave);font-size:13.5px;margin:0 0 12px}
.rejilla{display:grid;gap:16px}
.rejilla>*{min-width:0}
.r2{grid-template-columns:1fr 1fr} .r3{grid-template-columns:repeat(3,1fr)} .r4{grid-template-columns:repeat(4,1fr)}
.r-hoy{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
@media (max-width:1100px){ .r3,.r4{grid-template-columns:1fr 1fr} .r-hoy,.r2{grid-template-columns:1fr} }
@media (max-width:560px){ .r3,.r4{grid-template-columns:1fr} }
.mb{margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--borde);border-radius:var(--r);padding:14px 16px;text-decoration:none;display:block}
a.kpi:hover{border-color:var(--negro)}
.kpi .v{font:900 28px/1 var(--display);margin:6px 0 4px;font-variant-numeric:tabular-nums}
.kpi .l{font-size:12.5px;color:var(--suave);font-weight:800}
.kpi .d{font-size:12.5px;color:var(--suave)}
.kpi.osc{background:var(--marca);border-color:var(--marca);color:#fff} .kpi.osc .l,.kpi.osc .d{color:var(--marca-t)}
.kpi.osc:hover{border-color:var(--marca-2)}
.chip{display:inline-flex;align-items:center;gap:5px;font:800 11.5px/1 var(--display);padding:5px 7px;border-radius:5px;background:var(--fondo);color:var(--suave);white-space:nowrap}
.chip.ok{background:var(--ok-s);color:var(--ok)} .chip.amb{background:var(--amb-s);color:var(--amb)} .chip.mal{background:var(--mal-s);color:var(--mal)}
.chip.pri{background:var(--marca-s);color:var(--marca)} .chip.info{background:var(--info-s);color:var(--info)} .chip.osc{background:var(--negro);color:#fff}
.vacio{padding:26px;text-align:center;color:var(--suave)}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{font:900 10.5px/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--tenue);text-align:left;padding:8px 10px;border-bottom:1px solid var(--borde)}
table.t td{padding:9px 10px;border-bottom:1px solid #F0F1F4;vertical-align:middle}
table.t tr.cap td{background:var(--fondo);font:900 12px/1.2 var(--display);letter-spacing:.04em;color:var(--suave)}
table.t td.n,table.t th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.t tr.clic{cursor:pointer} table.t tr.clic:hover td{background:var(--marca-s)}
.tabla-scroll{overflow-x:auto}
.barra-uso{height:8px;background:#E9EAEE;border-radius:4px;overflow:hidden;min-width:70px}
.barra-uso i{display:block;height:100%;background:var(--marca)}
.barra-uso i.ok{background:var(--ok)} .barra-uso i.amb{background:var(--amb)} .barra-uso i.mal{background:var(--mal)}
.medidor{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:center;font-size:12.5px;color:var(--suave)}
.medidor b{color:var(--tinta);font-variant-numeric:tabular-nums}
.aviso{display:flex;gap:10px;align-items:flex-start;background:var(--amb-s);border:1px solid #F1D9AE;border-radius:var(--r-p);padding:10px 12px;font-size:13.5px;margin:10px 0}
.aviso.ok{background:var(--ok-s);border-color:#BFE2CB}
.aviso.mal{background:var(--mal-s);border-color:#F3C1C1}
.aviso.info{background:var(--marca-s);border-color:var(--marca-b)}
.aviso .ic{margin-top:1px}
.datos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 18px;margin:12px 0}
.datos div span{display:block;font:900 10.5px/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--tenue);margin-bottom:3px}
.datos div b{font-weight:700;font-size:14px;word-break:break-word}


.saludo{background:var(--marca);color:#fff;border-radius:12px;padding:22px 24px;display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.saludo .fecha{font:900 11.5px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--marca-t)}
.saludo h1{font-size:34px;font-weight:900;margin:8px 0 6px}
.saludo p{margin:0;color:#fff;opacity:.9;font-size:15.5px;max-width:620px}
.saludo .cifras{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.saludo .cifras div{border:1px solid rgba(255,255,255,.28);border-radius:8px;padding:10px 14px;min-width:120px}
.saludo .cifras b{display:block;font:900 22px/1 var(--display);font-variant-numeric:tabular-nums}
.saludo .cifras span{font-size:12px;opacity:.85}
.toca{display:flex;gap:12px;align-items:center;border:1px solid var(--borde);border-radius:var(--r-p);padding:11px 12px;margin-top:9px;flex-wrap:wrap;text-decoration:none}
a.toca:hover{border-color:var(--negro)}
.toca .txt{flex:1;min-width:200px}
.toca .txt b{display:block;font-family:var(--display);font-size:14.5px}
.toca .txt span{font-size:13px;color:var(--suave)}
.toca .ico-c{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:var(--marca-s);color:var(--marca);flex:none}
.toca .ico-c.mal{background:var(--mal-s);color:var(--mal)} .toca .ico-c.amb{background:var(--amb-s);color:var(--amb)}
.fila-obra{display:block;padding:12px 6px;border-bottom:1px solid #F0F1F4;text-decoration:none;border-radius:6px}
.fila-obra:last-child{border-bottom:0}
.fila-obra:hover{background:var(--marca-s)}
.fo-tit{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.fo-tit b{font-family:var(--display);font-size:14.5px;line-height:1.3}
.fila-obra>.peq{display:block;margin-top:2px}
.fo-med{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:9px}
.med-l{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--suave);margin-bottom:4px}
.med-l b{color:var(--tinta);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:480px){ .fo-med{grid-template-columns:1fr} }


.bandeja{display:grid;grid-template-columns:minmax(260px,350px) 1fr;gap:16px;align-items:start}
.bandeja>*{min-width:0}
@media (max-width:560px){ .acciones .btn{white-space:normal;text-align:left} }
@media (max-width:1050px){ .bandeja{grid-template-columns:1fr} }
.lista-msg{background:#fff;border:1px solid var(--borde);border-radius:var(--r);overflow:hidden}
.lista-msg a{display:block;text-decoration:none;border-bottom:1px solid #F0F1F4;padding:12px 14px}
.lista-msg a:last-child{border-bottom:0}
.lista-msg a:hover{background:var(--fondo)}
.lista-msg a.on{background:var(--marca-s);box-shadow:inset 0 0 0 1.5px var(--marca)}
.lista-msg .l1{display:flex;gap:8px;align-items:center}
.lista-msg .l1 b{font-family:var(--display);font-size:14px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lista-msg .l1 small{color:var(--tenue);white-space:nowrap}
.lista-msg .l2{font-size:13px;color:var(--suave);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lista-msg .l3{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.filtros{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.filtros button{border:1px solid var(--borde-2);background:#fff;border-radius:6px;padding:6px 10px;font:800 12.5px/1 var(--display);cursor:pointer;color:var(--suave)}
.filtros button.on{background:var(--negro);border-color:var(--negro);color:#fff}
.cab-fila{display:flex;gap:8px 10px;align-items:center;flex-wrap:wrap}
.cab-fila h2{flex:1 1 240px;font-size:19px}
.acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px;border:1px solid var(--borde);border-radius:var(--r-p);background:var(--fondo);margin:14px 0}
.acciones .q{flex:1;min-width:200px;font-size:13.5px}
.acciones .q .tt{display:flex;align-items:center;gap:6px;font:800 14px/1.3 var(--display);margin-bottom:2px}
.linea-t{list-style:none;margin:0;padding:0}
.linea-t li{display:grid;grid-template-columns:30px 1fr;gap:10px;position:relative;padding-bottom:12px}
.linea-t li::before{content:"";position:absolute;left:14px;top:30px;bottom:0;width:2px;background:var(--borde)}
.linea-t li:last-child::before{display:none}
.linea-t .pt{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--fondo);color:var(--suave);border:1px solid var(--borde)}
.linea-t .pt.ia{background:var(--marca);color:#fff;border-color:var(--marca)}
.linea-t .pt.persona{background:var(--negro);color:#fff;border-color:var(--negro)}
.linea-t .pt .ic{width:15px;height:15px}
.linea-t .cu{padding-top:4px;min-width:0}
.linea-t .cu b{font-family:var(--display);font-size:14px}
.linea-t .cu .t{font-size:12px;color:var(--tenue)}
.linea-t .cu details{margin-top:4px}
.linea-t .cu summary{cursor:pointer;font-size:12.5px;color:var(--marca);font-weight:800}
.linea-t .cu pre{white-space:pre-wrap;font:13px/1.5 var(--texto);background:var(--fondo);border-radius:7px;padding:10px;margin:6px 0 0;max-height:260px;overflow:auto}


.tablero{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(196px,1fr);gap:10px;overflow-x:auto;padding-bottom:8px}
.col{background:#E9EAEE;border-radius:var(--r);padding:8px;min-height:200px}
.col .cab{display:flex;align-items:center;gap:6px;padding:4px 4px 8px;font:900 12px/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
.col .cab .n{margin-left:auto;background:#fff;border-radius:5px;padding:3px 6px;color:var(--tinta)}
.col.viva .cab{color:var(--marca)}
.ficha-obra{display:block;background:#fff;border:1px solid var(--borde);border-radius:var(--r-p);padding:11px;margin-bottom:8px;text-decoration:none}
.ficha-obra:hover{border-color:var(--negro)}
.ficha-obra .cod{font:800 11.5px/1 var(--mono);color:var(--tenue)}
.ficha-obra b{display:block;font-family:var(--display);font-size:14px;margin:5px 0 2px;line-height:1.25}
.ficha-obra .peq{color:var(--suave)}
.ficha-obra .imp{font:900 15px/1 var(--display);margin-top:8px;font-variant-numeric:tabular-nums}
.ficha-obra .medidor{margin-top:8px}
.fases{display:flex;gap:4px;flex-wrap:wrap;margin:10px 0 4px}
.fases span{font:800 11.5px/1 var(--display);padding:7px 9px;border-radius:5px;background:#E9EAEE;color:var(--tenue)}
.fases span.hecha{background:var(--marca-s);color:var(--marca)}
.fases span.ahora{background:var(--marca);color:#fff}


.c2-modal{position:fixed;inset:0;background:rgba(22,24,28,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:100}
.c2-modal .caja{background:#fff;border-radius:12px;max-width:620px;width:100%;max-height:90vh;display:flex;flex-direction:column}
.c2-modal .cab{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--borde)}
.c2-modal .cab h3{flex:1;font-size:17px}
.c2-modal .cuerpo{padding:18px;overflow:auto}
.c2-modal .pie{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--borde);flex-wrap:wrap}
.c2-modal textarea,.c2-modal input{width:100%;border:1px solid var(--borde-2);border-radius:7px;padding:9px 10px;font:inherit}
.c2-modal pre{white-space:pre-wrap;font:13.5px/1.5 var(--texto);background:var(--fondo);border-radius:7px;padding:12px;margin:0}
.c2-toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:110;width:min(520px,calc(100% - 32px))}
.toast{background:var(--negro);color:#fff;border-radius:8px;padding:11px 14px;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.2);animation:entra .3s ease}
.toast.ok{background:#0F5F2E} .toast.mal{background:var(--mal)}
.cargando{padding:40px;text-align:center;color:var(--suave)}
.cargando::before{content:"";display:block;width:26px;height:26px;margin:0 auto 10px;border-radius:50%;border:3px solid var(--borde);border-top-color:var(--marca);animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}


.c2-entrar{min-height:100vh;display:grid;place-items:center;padding:16px}
.c2-entrar .caja{background:#fff;border:1px solid var(--borde);border-radius:12px;padding:30px 28px;width:min(400px,100%)}
.c2-entrar h1{font-size:24px;margin:10px 0 4px}
.c2-entrar p{color:var(--suave);margin:0 0 18px;font-size:14px}
.c2-entrar label{display:block;font:800 12.5px/1 var(--display);color:var(--suave);margin:12px 0 6px}
.c2-entrar input{width:100%;border:1px solid var(--borde-2);border-radius:7px;padding:11px 12px;font:inherit}
.c2-entrar .btn{width:100%;margin-top:18px;padding:13px}
.c2-entrar .error{color:var(--mal);font-size:13.5px;margin-top:10px;min-height:1.2em}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
