/* =====================================================================
   BTS · Portal de proyectos (muestra) — hoja de estilos
   Identidad tomada de la web nueva de BTS: tinta, cian, papel y las
   tres fuentes de la marca. Sin librerías.
   ===================================================================== */

@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url("fuentes/schibsted-grotesk.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url("fuentes/public-sans.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fuentes/jetbrains-mono-500.woff2") format("woff2")}

:root{
  color-scheme:light;
  --tinta:#0E1217;--tinta-2:#1A2129;--tinta-3:#2A333C;--tinta-4:#3A4550;
  --cian:#00AFEF;--cian-dato:#0093C9;--cian-texto:#00739F;--cian-suave:#E3F5FC;--cian-borde:#A9DDF3;--cian-hondo:#004E6C;
  --papel:#F3F5F7;--blanco:#FFFFFF;--linea:#D7DDE3;--linea-suave:#E6EAEE;--pista:#E3E8EC;
  --gris:#56616C;--texto-2:#2E3740;--gris-claro:#AAB4BE;
  --ok:#1C7C4A;--ok-suave:#E5F3EB;--ok-dato:#2E9A61;
  --aviso:#8A5A00;--aviso-suave:#FDF0D5;--aviso-dato:#D98E04;
  --alerta:#B42318;--alerta-suave:#FDECEA;--alerta-dato:#D92D20;
  --f-display:"Schibsted Grotesk","Segoe UI",system-ui,sans-serif;
  --f-texto:"Public Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --radio:6px;--ancho:1280px;
  --sombra:0 1px 2px rgba(14,18,23,.05);
  --sombra-alta:0 24px 48px -28px rgba(14,18,23,.5);
  --barra-h:60px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:120px}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--f-texto);font-size:15px;line-height:1.5;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--cian-texto)}
a:hover{color:var(--cian-hondo)}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;line-height:1.15;letter-spacing:-.015em;color:var(--tinta)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--cian-texto);outline-offset:2px}
.barra :focus-visible,.oscuro :focus-visible{outline-color:var(--cian)}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.ico.g{width:22px;height:22px}
.ico.c{width:15px;height:15px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.saltar{position:absolute;left:-999px;top:8px;background:var(--tinta);color:#fff;padding:8px 14px;z-index:200;border-radius:var(--radio)}
.saltar:focus{left:8px}
.mono{font-family:var(--f-mono);font-weight:500;font-variant-numeric:tabular-nums}
.etq{font-family:var(--f-mono);font-weight:500;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--gris);line-height:1.3}
.etq.cian{color:var(--cian-texto)}
.texto-gris{color:var(--gris)}
.solo-impresion{display:none}
.texto-ok{color:var(--ok)}
.texto-aviso{color:var(--aviso)}
.texto-alerta{color:var(--alerta)}
.nowrap{white-space:nowrap}
.sin-js{padding:40px 20px;text-align:center}

/* ---------------------------------------------------------------- barra superior */
.barra{background:var(--tinta);color:#fff;position:sticky;top:0;z-index:60;border-bottom:1px solid #000}
.barra-fila{max-width:var(--ancho);margin:0 auto;padding:0 24px;height:var(--barra-h);display:flex;align-items:center;gap:18px}
.barra-marca{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff;min-height:44px;flex:none}
.barra-marca img{height:30px;width:auto}
.barra-producto{font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:-.005em;padding-left:14px;border-left:1px solid var(--tinta-4);white-space:nowrap}
.barra-marca:hover{color:#fff}
.muestra{font-family:var(--f-mono);font-weight:500;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#C7CED5;border:1px dashed #5A6672;border-radius:999px;padding:4px 10px;white-space:nowrap;cursor:help}
.rol{margin-left:auto;display:flex;align-items:center;gap:10px}
.rol-t{font-size:12.5px;color:var(--gris-claro);white-space:nowrap}
.rol-opciones{display:flex;background:var(--tinta-2);border:1px solid var(--tinta-3);border-radius:8px;padding:3px;gap:2px}
.rol-opciones a{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border-radius:5px;color:#C7CED5;text-decoration:none;font-weight:600;font-size:14px;white-space:nowrap;transition:background .15s,color .15s}
.rol-opciones a:hover{color:#fff;background:var(--tinta-3)}
.rol-opciones a[aria-current="page"]{background:var(--cian);color:var(--tinta)}
.barra-acciones{display:flex;gap:4px}
.barra-btn{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:#C7CED5;font-size:13.5px;font-weight:500;white-space:nowrap}
.barra-btn:hover{background:var(--tinta-3);color:#fff}
.barra-btn .ico{width:17px;height:17px}

/* ---------------------------------------------------------------- pie */
.pie{margin-top:auto;border-top:1px solid var(--linea);background:var(--blanco);color:var(--gris);font-size:13px}
.pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 16px;padding:18px 20px 22px;text-align:center}
.pie-btn{border:0;background:none;color:var(--cian-texto);font-size:13px;font-weight:600;min-height:40px;padding:0 6px;text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------------- contexto (barra del proyecto + pestañas) */
#principal{flex:1;outline:none}
.contexto{background:var(--blanco)}
.pestanas-barra{background:var(--blanco);border-bottom:1px solid var(--linea);position:sticky;top:var(--barra-h);z-index:40}
.contexto-fila{max-width:var(--ancho);margin:0 auto;padding:12px 24px 0;display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.contexto-t{flex:1;min-width:0;padding-bottom:10px}
.contexto-t .etq{display:block;margin-bottom:3px}
.contexto-t h1{font-size:19px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conectado{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:12.5px;color:var(--gris);min-width:0}
.conectado .ico{width:14px;height:14px;flex:none}
.conectado b{color:var(--texto-2);font-weight:600}
.contexto-acciones{display:flex;gap:8px;align-items:center;padding-bottom:10px;flex-wrap:wrap}
.etq-sel{white-space:nowrap}
.migas{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--gris);margin-bottom:3px;flex-wrap:wrap}
.migas a{color:var(--gris);text-decoration:none;display:inline-flex;align-items:center;min-height:24px}
.migas a:hover{color:var(--tinta);text-decoration:underline}
.migas .ico{width:13px;height:13px}
.pestanas{max-width:var(--ancho);margin:0 auto;padding:0 24px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pestanas::-webkit-scrollbar{display:none}
.pestanas a{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;color:var(--gris);text-decoration:none;font-weight:600;font-size:14px;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-1px}
.pestanas a:hover{color:var(--tinta)}
.pestanas a[aria-current="page"]{color:var(--tinta);border-bottom-color:var(--cian)}
.pestanas .n{font-family:var(--f-mono);font-size:11px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--papel);color:var(--texto-2);display:inline-grid;place-items:center;border:1px solid var(--linea)}
.pestanas .n.alerta{background:var(--alerta-suave);color:var(--alerta);border-color:#F4C7C2}
.pestanas .n.aviso{background:var(--aviso-suave);color:var(--aviso);border-color:#F0D49A}

/* ---------------------------------------------------------------- página y rejillas */
.pagina{max-width:var(--ancho);margin:0 auto;padding:24px 24px 48px;width:100%}
.pila{display:grid;gap:16px;align-content:start;min-width:0}
.pila>*{min-width:0}
.rejilla{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.rejilla>*{min-width:0}
@media (min-width:1100px){
  .g-principal{grid-template-columns:minmax(0,1.72fr) minmax(0,1fr);align-items:start}
  .g-mitad{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .g-tres{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:720px) and (max-width:1099px){
  .g-mitad{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .g-tres{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.titulo-vista{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.titulo-vista h1{font-size:27px;font-weight:800;letter-spacing:-.02em}
.titulo-vista p{color:var(--gris);margin-top:4px}

/* ---------------------------------------------------------------- tarjetas */
.tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:18px 20px;box-shadow:var(--sombra);min-width:0}
.tarjeta.plana{padding:0}
.tarjeta-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.tarjeta-cab .etq{display:block;margin-bottom:4px}
.tarjeta-t{font-size:17px;font-weight:700}
.tarjeta-sub{color:var(--gris);font-size:13.5px;margin-top:3px}
.tarjeta-pie{margin-top:14px;padding-top:12px;border-top:1px solid var(--linea-suave);display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.enlace{display:inline-flex;align-items:center;gap:6px;color:var(--cian-texto);font-weight:600;font-size:14px;text-decoration:none;min-height:36px;border:0;background:none;padding:0}
.enlace:hover{text-decoration:underline;text-underline-offset:3px;color:var(--cian-hondo)}
.enlace .ico{width:16px;height:16px;transition:transform .15s}
.enlace:hover .ico{transform:translateX(2px)}

/* ---------------------------------------------------------------- botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 16px;border-radius:var(--radio);border:1.5px solid transparent;font-weight:600;font-size:14.5px;line-height:1.2;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s;text-align:center}
.btn .ico{width:17px;height:17px}
.btn-marca{background:var(--cian);color:var(--tinta)}
.btn-marca:hover{background:#33C1F3;color:var(--tinta)}
.btn-tinta{background:var(--tinta);color:#fff}
.btn-tinta:hover{background:var(--tinta-3);color:#fff}
.btn-linea{background:var(--blanco);color:var(--tinta);border-color:var(--linea)}
.btn-linea:hover{border-color:var(--tinta);color:var(--tinta)}
.btn-ok{background:var(--ok);color:#fff}
.btn-ok:hover{background:#166A3E;color:#fff}
.btn-peligro{background:var(--blanco);color:var(--alerta);border-color:#EBB4AE}
.btn-peligro:hover{background:var(--alerta-suave);color:var(--alerta)}
.btn-fantasma{background:transparent;color:var(--cian-texto);padding:0 10px}
.btn-fantasma:hover{background:var(--cian-suave);color:var(--cian-hondo)}
.btn-chico{min-height:36px;padding:0 12px;font-size:13.5px}
.btn-bloque{width:100%}
.btn-grande{min-height:52px;font-size:16px;padding:0 22px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btns{display:flex;flex-wrap:wrap;gap:8px}

/* ---------------------------------------------------------------- insignias de estado (siempre con texto, a veces ícono) */
.insignia{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap;border:1px solid transparent}
.insignia .ico{width:13px;height:13px;stroke-width:2.2}
.insignia.ok{background:var(--ok-suave);color:var(--ok);border-color:#BFE0CC}
.insignia.aviso{background:var(--aviso-suave);color:var(--aviso);border-color:#F0D49A}
.insignia.alerta{background:var(--alerta-suave);color:var(--alerta);border-color:#F4C7C2}
.insignia.info{background:var(--cian-suave);color:var(--cian-hondo);border-color:var(--cian-borde)}
.insignia.neutra{background:var(--papel);color:var(--texto-2);border-color:var(--linea)}
.insignia.tinta{background:var(--tinta);color:#fff}

/* ---------------------------------------------------------------- rótulo de obra (cartela de plano) */
.rotulo{display:grid;grid-template-columns:minmax(0,1fr) 300px;background:var(--blanco);border:1.5px solid var(--tinta);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra)}
.rotulo-datos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));min-width:0}
.rc{padding:12px 14px;border-right:1px solid var(--linea);border-bottom:1px solid var(--linea);min-width:0}
.rc .etq{display:block;margin-bottom:5px;font-size:10.5px}
.rc-v{font-weight:600;font-size:14.5px;line-height:1.3}
.rc-v.mono{font-size:13.5px}
.rc-obra{grid-column:span 4;padding:16px 18px}
.rc-obra h2{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.rc-obra p{margin-top:5px;color:var(--texto-2);font-size:14.5px}
.rc-logo{grid-column:span 2;display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.rc-logo img{height:34px;width:auto;align-self:flex-start}
.rc-dos{grid-column:span 2}
.rc-tres{grid-column:span 3}
.rc-cifra{grid-column:span 2;border-bottom:0;padding:14px 16px 16px}
.rc-cifra .cifra{font-family:var(--f-mono);font-weight:500;font-size:30px;line-height:1;letter-spacing:-.02em}
.rc-cifra .cifra small{font-size:16px;margin-left:2px}
.rc-cifra .rc-nota{margin-top:7px;font-size:12.5px;color:var(--gris)}
.rc-cifra.real .cifra{color:var(--tinta)}
.rotulo-foto{position:relative;border-left:1.5px solid var(--tinta);min-height:100%;background:#243039;margin:0}
.rotulo-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rotulo-foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 9px;font-size:12px;color:#fff;background:linear-gradient(0deg,rgba(14,18,23,.82),rgba(14,18,23,0))}
.rotulo-foto button{position:absolute;inset:0;border:0;background:transparent;padding:0}
.barra-avance{height:6px;border-radius:3px;background:var(--pista);margin-top:10px;position:relative;overflow:hidden}
.barra-avance i{position:absolute;left:0;top:0;bottom:0;background:var(--cian-dato);border-radius:3px}

/* ---------------------------------------------------------------- avisos al cliente (franja) */
.franja{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--radio);background:var(--cian-suave);border:1px solid var(--cian-borde);color:var(--cian-hondo);font-size:14px}
.franja .ico{width:20px;height:20px;flex:none}
.franja b{font-weight:700}
.franja .crece{flex:1;min-width:0}
.franja.aviso{background:var(--aviso-suave);border-color:#F0D49A;color:var(--aviso)}
.franja.alerta{background:var(--alerta-suave);border-color:#F4C7C2;color:var(--alerta)}
.franja.ok{background:var(--ok-suave);border-color:#BFE0CC;color:var(--ok)}
.franja.neutra{background:var(--blanco);border-color:var(--linea);color:var(--texto-2)}
.interruptor{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--cian-hondo);white-space:nowrap;cursor:pointer;min-height:36px}
.interruptor input{position:absolute;opacity:0;width:1px;height:1px}
.interruptor .riel{width:38px;height:22px;border-radius:999px;background:#9AA5AF;position:relative;transition:background .15s;flex:none}
.interruptor .riel::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.interruptor input:checked+.riel{background:var(--cian-texto)}
.interruptor input:checked+.riel::after{transform:translateX(16px)}
.interruptor input:focus-visible+.riel{outline:3px solid var(--cian-texto);outline-offset:2px}

/* ---------------------------------------------------------------- etapas de la obra */
.etapas{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;counter-reset:etapa}
.etapa{position:relative;padding:0 10px 4px 0;min-width:0}
.etapa-barra{height:6px;background:var(--pista);border-radius:0;position:relative;overflow:hidden;margin-bottom:12px}
.etapa:first-child .etapa-barra{border-radius:3px 0 0 3px}
.etapa:last-child .etapa-barra{border-radius:0 3px 3px 0}
.etapa-barra i{position:absolute;left:0;top:0;bottom:0;background:var(--cian-dato)}
.etapa.hecha .etapa-barra i{background:var(--tinta);width:100%}
.etapa+.etapa .etapa-barra{margin-left:-10px}
.etapa-cab{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.etapa-marca{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;border:1.5px solid var(--linea);background:var(--blanco)}
.etapa-marca .ico{width:12px;height:12px;stroke-width:2.6}
.etapa.hecha .etapa-marca{background:var(--tinta);border-color:var(--tinta);color:#fff}
.etapa.curso .etapa-marca{border-color:var(--cian-dato);background:var(--cian-suave)}
.etapa.curso .etapa-marca::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--cian-dato)}
.etapa-n{font-weight:700;font-size:13.5px;line-height:1.25}
.etapa.pendiente .etapa-n{color:var(--gris);font-weight:600}
.etapa-f{font-family:var(--f-mono);font-size:11px;color:var(--gris);padding-left:27px}
.etapa-p{font-family:var(--f-mono);font-size:11.5px;color:var(--cian-texto);padding-left:27px;margin-top:2px}
.etapa.principal .etapa-n::after{content:"Etapa actual";display:block;font-family:var(--f-mono);font-weight:500;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--cian-texto);margin-top:2px}
.etapas-nota{margin-top:14px;padding-top:12px;border-top:1px dashed var(--linea);font-size:13.5px;color:var(--texto-2);display:flex;gap:10px;align-items:flex-start}
.etapas-nota .ico{color:var(--cian-texto);margin-top:1px}

/* ---------------------------------------------------------------- curva S */
.curva{position:relative;min-height:220px}
.curva svg{display:block;width:100%;height:auto;overflow:visible}
.curva:focus-visible{outline:3px solid var(--cian-texto);outline-offset:4px;border-radius:4px}
.curva .rejilla-l{stroke:var(--linea-suave);stroke-width:1}
.curva .eje{stroke:var(--linea);stroke-width:1}
.curva .t-eje{font-family:var(--f-mono);font-size:10.5px;fill:var(--gris)}
.curva .l-prog{fill:none;stroke:var(--gris);stroke-width:2;stroke-dasharray:6 5;stroke-linecap:round}
.curva .l-real{fill:none;stroke:var(--cian-dato);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.curva .a-real{fill:var(--cian-dato);opacity:.1}
.curva .hoy{stroke:var(--tinta);stroke-width:1}
.curva .t-hoy{font-family:var(--f-mono);font-size:10.5px;fill:var(--tinta);font-weight:500}
.curva .p-real{fill:var(--cian-dato);stroke:#fff;stroke-width:2}
.curva .p-prog{fill:var(--gris);stroke:#fff;stroke-width:2}
.curva .t-valor{font-family:var(--f-mono);font-size:11.5px;fill:var(--tinta);font-weight:500}
.curva .t-valor.g{fill:var(--gris)}
.curva .cruz{stroke:var(--tinta-4);stroke-width:1}
.curva .zona-hover{fill:transparent;cursor:crosshair}
.curva-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.leyenda{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--texto-2)}
.leyenda span{display:inline-flex;align-items:center;gap:7px}
.leyenda .k{width:22px;height:0;border-top:2.4px solid var(--cian-dato);display:inline-block}
.leyenda .k.prog{border-top:2px dashed var(--gris)}
.leyenda .k.cuadro{width:12px;height:12px;border:0;border-radius:2px}
.curva-tip{position:absolute;pointer-events:none;background:var(--tinta);color:#fff;border-radius:6px;padding:8px 10px;font-size:12.5px;line-height:1.45;min-width:150px;box-shadow:0 8px 24px rgba(14,18,23,.25);z-index:5;transform:translate(-50%,-100%);white-space:nowrap}
.curva-tip b{font-family:var(--f-mono);font-weight:500;font-size:13px}
.curva-tip .lk{display:inline-block;width:14px;height:0;border-top:2px solid var(--cian);vertical-align:middle;margin-right:6px}
.curva-tip .lk.prog{border-top:2px dashed #AAB4BE}
.curva-tip .fecha{color:#AAB4BE;font-size:11.5px;margin-bottom:2px;display:block}
.tabla-ver{margin-top:10px}
.tabla-ver summary{cursor:pointer;color:var(--cian-texto);font-weight:600;font-size:13.5px;min-height:36px;display:inline-flex;align-items:center;gap:6px;list-style:none}
.tabla-ver summary::-webkit-details-marker{display:none}
.tabla-ver summary::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s;margin-right:2px}
.tabla-ver[open] summary::before{transform:rotate(45deg)}
.tabla-ver .tabla-scroll{max-height:260px;overflow:auto;border:1px solid var(--linea-suave);border-radius:var(--radio);margin-top:6px}

/* ---------------------------------------------------------------- tablas */
.tabla{width:100%;border-collapse:collapse;font-size:13.5px}
.tabla th{font-family:var(--f-mono);font-weight:500;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);text-align:left;padding:9px 12px;border-bottom:1px solid var(--linea);background:var(--papel);position:sticky;top:0;white-space:nowrap}
.tabla td{padding:10px 12px;border-bottom:1px solid var(--linea-suave);vertical-align:middle}
.tabla tr:last-child td{border-bottom:0}
.tabla .num,.tabla .der{text-align:right}
.tabla .num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------------------------------------------------------------- avance por sistema */
.sistemas{display:grid;gap:4px}
.sis{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr) 62px;gap:4px 14px;align-items:center;padding:9px 0;border-bottom:1px solid var(--linea-suave)}
.sis:last-child{border-bottom:0}
.sis-nombre{font-weight:600;font-size:14px;line-height:1.3;min-width:0}
.sis-nombre small{display:block;font-weight:400;color:var(--gris);font-size:12.5px;margin-top:1px}
.sis-pista{position:relative;height:14px;background:var(--pista);border-radius:2px}
.sis-real{position:absolute;left:0;top:0;bottom:0;background:var(--cian-dato);border-radius:0 4px 4px 0;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.sis-real.atraso{background:var(--aviso-dato)}
.sis-real.critico{background:var(--alerta-dato)}
.sis-prog{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--tinta);margin-left:-1px}
.sis-prog::after{content:"";position:absolute;top:-3px;left:-3px;width:8px;height:3px;background:var(--tinta)}
.sis-v{text-align:right;font-family:var(--f-mono);font-size:14px;font-weight:500}
.sis-v small{display:block;font-size:11px;color:var(--gris)}
.sis-nota{grid-column:2 / 4;font-size:12.5px;display:flex;gap:6px;align-items:flex-start;color:var(--aviso)}
.sis-nota.alerta{color:var(--alerta)}
.sis-nota .ico{width:14px;height:14px;margin-top:2px;stroke-width:2.2}
.sis.destacado{background:linear-gradient(90deg,var(--cian-suave),transparent 70%);margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:4px}
.leyenda-sis{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--gris);margin-top:10px}
.leyenda-sis span{display:inline-flex;align-items:center;gap:6px}
.leyenda-sis .k-real{width:16px;height:10px;background:var(--cian-dato);border-radius:0 3px 3px 0}
.leyenda-sis .k-prog{width:2px;height:14px;background:var(--tinta)}
.leyenda-sis .k-atraso{width:16px;height:10px;background:var(--aviso-dato);border-radius:0 3px 3px 0}

/* ---------------------------------------------------------------- listas y filas */
.lista>li{border-bottom:1px solid var(--linea-suave)}
.lista>li:last-child{border-bottom:0}
.fila{display:flex;gap:12px;align-items:flex-start;padding:11px 0}
.fila-ico{width:34px;height:34px;border-radius:6px;display:grid;place-items:center;flex:none;background:var(--papel);color:var(--texto-2);border:1px solid var(--linea-suave)}
.fila-ico.ok{background:var(--ok-suave);color:var(--ok);border-color:#CDE7D7}
.fila-ico.aviso{background:var(--aviso-suave);color:var(--aviso);border-color:#F3DEB0}
.fila-ico.alerta{background:var(--alerta-suave);color:var(--alerta);border-color:#F6D3CF}
.fila-ico.info{background:var(--cian-suave);color:var(--cian-hondo);border-color:var(--cian-borde)}
.fila-cuerpo{flex:1;min-width:0}
.fila-t{font-weight:600;font-size:14.5px;line-height:1.35}
.fila-s{color:var(--gris);font-size:13px;margin-top:2px;line-height:1.45}
.fila-acc{flex:none;display:flex;gap:6px;align-items:center;align-self:center}
.fecha-caja{flex:none;width:50px;text-align:center;border:1px solid var(--linea);border-radius:6px;overflow:hidden;background:var(--blanco)}
.fecha-caja b{display:block;font-family:var(--f-mono);font-weight:500;font-size:17px;line-height:1;padding:6px 0 3px}
.fecha-caja span{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;background:var(--papel);border-top:1px solid var(--linea-suave);padding:2px 0;color:var(--gris)}
.fecha-caja.aviso{border-color:#F0D49A}
.fecha-caja.aviso span{background:var(--aviso-suave);color:var(--aviso)}
.vacio{padding:26px 16px;text-align:center;color:var(--gris);font-size:14px;border:1px dashed var(--linea);border-radius:var(--radio);background:var(--papel)}
.vacio .ico{width:26px;height:26px;margin:0 auto 8px;display:block;color:var(--gris-claro)}

/* ---------------------------------------------------------------- KPIs */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.kpi{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:14px 16px;min-width:0;box-shadow:var(--sombra)}
.kpi .etq{display:flex;align-items:center;gap:6px}
.kpi .etq .ico{width:14px;height:14px}
.kpi-v{font-family:var(--f-mono);font-weight:500;font-size:24px;line-height:1.1;margin-top:8px;letter-spacing:-.02em;white-space:nowrap}
.kpi-s{font-size:12.5px;color:var(--gris);margin-top:5px;line-height:1.4}
.kpi.dinero{background:var(--tinta);border-color:var(--tinta);color:#fff}
.kpi.dinero .etq{color:#C7CED5}
.kpi.dinero .kpi-s{color:#C7CED5}
.kpi.dinero .kpi-v{color:var(--cian)}
a.kpi,button.kpi{text-decoration:none;color:inherit;text-align:left;cursor:pointer;transition:border-color .15s}
a.kpi:hover,button.kpi:hover{border-color:var(--tinta)}
a.kpi.dinero:hover{border-color:var(--cian)}
/* cartera: cinco cifras de dinero en una fila */
.kpis-cinco{grid-template-columns:repeat(5,minmax(0,1fr))}

/* ---------------------------------------------------------------- fotos */
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.galeria.compacta{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.foto{position:relative;display:block;width:100%;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;background:var(--blanco);padding:0;text-align:left;color:inherit}
.foto:hover{border-color:var(--tinta)}
.foto-img{display:block;aspect-ratio:4/3;background:#DCE2E7;overflow:hidden}
.foto-img img,.foto-img svg{width:100%;height:100%;object-fit:cover;display:block}
.foto-pie{display:block;padding:8px 10px 9px}
.foto-pie b{display:block;font-size:13px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foto-pie span{display:block;font-size:12px;color:var(--gris);margin-top:2px}
.foto .nuevo{position:absolute;top:8px;left:8px}
.filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;border-radius:999px;border:1px solid var(--linea);background:var(--blanco);font-size:13.5px;font-weight:600;color:var(--texto-2)}
.chip:hover{border-color:var(--tinta)}
.chip[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:#fff}
.chip .n{font-family:var(--f-mono);font-size:11px;opacity:.75}

/* ---------------------------------------------------------------- observaciones */
.obs-lista{display:grid;gap:12px}
.obs{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:14px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;box-shadow:var(--sombra)}
.obs.abierta{border-left:3px solid var(--alerta-dato)}
.obs.revision{border-left:3px solid var(--aviso-dato)}
.obs.levantada{border-left:3px solid var(--cian-dato)}
.obs.cerrada{border-left:3px solid var(--ok-dato)}
.obs-cab{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-bottom:4px}
.obs-cod{font-family:var(--f-mono);font-size:12px;color:var(--gris)}
.obs-t{font-weight:700;font-size:15px;line-height:1.35}
.obs-s{color:var(--gris);font-size:13px;margin-top:4px;display:flex;flex-wrap:wrap;gap:4px 14px}
.obs-s span{display:inline-flex;align-items:center;gap:5px}
.obs-s .ico{width:14px;height:14px}
.obs-fotos{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:10px}
.obs-acc{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.af{margin:0;position:relative;border-radius:5px;overflow:hidden;border:1px solid var(--linea);background:#DCE2E7}
.af button{display:block;width:100%;padding:0;border:0;background:none}
.af img,.af svg{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.af figcaption{position:absolute;left:6px;top:6px;font-family:var(--f-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;padding:2px 7px;border-radius:3px;background:var(--tinta);color:#fff}
.af.despues figcaption{background:var(--ok)}
.af.sin{display:grid;place-items:center;aspect-ratio:4/3;color:var(--gris);font-size:12px;text-align:center;padding:8px;border-style:dashed;background:var(--papel)}
.obs-nota{grid-column:1 / -1;font-size:13px;color:var(--texto-2);background:var(--papel);border-radius:5px;padding:8px 10px}
.obs-nota b{font-weight:600}

/* ---------------------------------------------------------------- documentos */
.docs-cat{margin-top:4px}
.docs-cat+.docs-cat{margin-top:18px}
.docs-cat-t{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.docs-cat-t h3{font-size:15px;font-weight:700}
.doc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--linea-suave)}
.doc:last-child{border-bottom:0}
.doc-ico{width:34px;height:40px;border:1px solid var(--linea);border-radius:3px;display:grid;place-items:center;color:var(--gris);background:var(--blanco);position:relative}
.doc-ico::after{content:"";position:absolute;top:-1px;right:-1px;width:9px;height:9px;background:var(--papel);border-left:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.doc-t{font-weight:600;font-size:14px;line-height:1.35}
.doc-s{font-size:12.5px;color:var(--gris);margin-top:2px;display:flex;flex-wrap:wrap;gap:2px 12px}
.doc-s .mono{font-size:12px;color:var(--texto-2)}
.doc-acc{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.doc.destacado{background:var(--aviso-suave);margin:0 -12px;padding:10px 12px;border-radius:5px;border-bottom-color:transparent}

/* ---------------------------------------------------------------- pagos */
.pagos{display:grid;gap:0}
.pago{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:4px 14px;padding:14px 0;border-bottom:1px solid var(--linea-suave);align-items:start}
.pago:last-child{border-bottom:0}
.pago-n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-size:12px;border:1.5px solid var(--linea);color:var(--gris);background:var(--blanco)}
.pago.pagado .pago-n{background:var(--tinta);border-color:var(--tinta);color:#fff}
.pago.aprobado .pago-n{background:var(--ok);border-color:var(--ok);color:#fff}
.pago.revision .pago-n{border-color:var(--cian-dato);color:var(--cian-hondo);background:var(--cian-suave)}
.pago.detenido .pago-n{border-color:var(--aviso-dato);color:var(--aviso);background:var(--aviso-suave)}
.pago-t{font-weight:700;font-size:14.5px;line-height:1.35}
.pago-s{font-size:12.5px;color:var(--gris);margin-top:2px}
.pago-monto{text-align:right}
.pago-monto b{display:block;font-family:var(--f-mono);font-weight:500;font-size:15px;white-space:nowrap}
.pago-monto .insignia{margin-top:5px}
.reqs{grid-column:2 / -1;margin-top:8px;display:grid;gap:5px;padding:10px 12px;background:var(--papel);border-radius:5px}
.reqs-t{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--gris);margin-bottom:2px}
.reqs li{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.4}
.reqs li .ico{width:16px;height:16px;margin-top:1px;stroke-width:2.2}
.reqs li.si{color:var(--ok)}
.reqs li.si span{color:var(--texto-2)}
.reqs li.no{color:var(--texto-2)}
.reqs li.no .ico{color:var(--alerta)}
.reqs .accion{margin-left:auto;flex:none}
.cobro-resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;margin-bottom:16px}
.cobro-resumen>div{padding:12px 14px;border-right:1px solid var(--linea);background:var(--blanco)}
.cobro-resumen>div:last-child{border-right:0}
.cobro-resumen b{display:block;font-family:var(--f-mono);font-weight:500;font-size:18px;margin-top:5px;white-space:nowrap}
.barra-cobro{display:flex;height:14px;border-radius:3px;overflow:hidden;gap:2px;background:var(--blanco)}
.barra-cobro i{display:block;height:100%}
.k-pagado{background:var(--tinta)}
.k-aprobado{background:var(--ok-dato)}
.k-revision{background:var(--cian-dato)}
.k-detenido{background:var(--aviso-dato)}
.k-pendiente{background:var(--pista)}

/* ---------------------------------------------------------------- dossier */
.dossier-cab{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center}
.anillo{width:96px;height:96px;position:relative;flex:none}
.anillo svg{width:100%;height:100%;transform:rotate(-90deg)}
.anillo .pista-a{fill:none;stroke:var(--pista);stroke-width:9}
.anillo .valor-a{fill:none;stroke:var(--cian-dato);stroke-width:9;stroke-linecap:butt;transition:stroke-dashoffset .7s cubic-bezier(.2,.8,.2,1)}
.anillo b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-mono);font-weight:500;font-size:21px}
.dossier-cat{border:1px solid var(--linea);border-radius:var(--radio);background:var(--blanco);overflow:hidden}
.dossier-cat+.dossier-cat{margin-top:10px}
.dossier-cat>summary{display:grid;grid-template-columns:minmax(0,1fr) 140px 64px 18px;gap:14px;align-items:center;padding:12px 16px;cursor:pointer;list-style:none;min-height:52px}
.dossier-cat>summary::-webkit-details-marker{display:none}
.dossier-cat>summary:hover{background:var(--papel)}
.dossier-cat>summary .ico.flecha{transition:transform .15s;color:var(--gris)}
.dossier-cat[open]>summary .ico.flecha{transform:rotate(90deg)}
.dc-t{font-weight:700;font-size:14.5px}
.dc-t small{display:block;font-weight:400;color:var(--gris);font-size:12.5px}
.dc-barra{height:8px;background:var(--pista);border-radius:2px;position:relative;overflow:hidden}
.dc-barra i{position:absolute;left:0;top:0;bottom:0;background:var(--cian-dato);border-radius:0 3px 3px 0}
.dc-barra i.completo{background:var(--ok-dato)}
.dc-n{font-family:var(--f-mono);font-size:13px;text-align:right;white-space:nowrap}
.dossier-items{border-top:1px solid var(--linea-suave)}
.di{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 16px;border-bottom:1px solid var(--linea-suave);font-size:13.5px}
.di:last-child{border-bottom:0}
.di .ico{width:18px;height:18px;stroke-width:2.2}
.di.listo .ico{color:var(--ok)}
.di.revision .ico{color:var(--aviso)}
.di.falta .ico{color:var(--gris-claro)}
.di-t{line-height:1.35}
.di-o{display:block;font-size:12px;color:var(--gris);margin-top:1px}
.di.recien{animation:recien 2.4s ease-out}
@keyframes recien{0%,30%{background:var(--ok-suave)}100%{background:transparent}}
.punto-vacio{width:16px;height:16px;border-radius:50%;border:1.5px dashed var(--gris-claro);display:inline-block}

/* ---------------------------------------------------------------- cartera */
.cartera{width:100%;border-collapse:collapse}
.cartera th{font-family:var(--f-mono);font-weight:500;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);text-align:left;padding:10px 14px;border-bottom:1px solid var(--linea);white-space:nowrap;background:var(--papel)}
.cartera td{padding:14px;border-bottom:1px solid var(--linea-suave);vertical-align:middle;font-size:13.5px}
.cartera tr:last-child td{border-bottom:0}
.cartera tbody tr{cursor:pointer;transition:background .12s}
.cartera tbody tr:hover{background:#F8FAFB}
.cartera .num{text-align:right;font-family:var(--f-mono);white-space:nowrap;font-variant-numeric:tabular-nums}
.proy-cel{display:flex;gap:12px;align-items:center;min-width:240px}
.proy-mini{width:56px;height:42px;border-radius:4px;overflow:hidden;flex:none;background:#243039}
.proy-mini img{width:100%;height:100%;object-fit:cover}
.proy-mini.sin-foto{background:var(--cian-suave);color:var(--cian-texto);display:grid;place-items:center;border:1px solid var(--cian-borde)}
.proy-mini.sin-foto .ico{width:20px;height:20px}
.proy-cel a{font-weight:700;color:var(--tinta);text-decoration:none;font-size:14.5px;line-height:1.3}
.proy-cel a:hover{text-decoration:underline;text-underline-offset:3px}
.proy-cel small{display:block;color:var(--gris);font-size:12.5px;margin-top:2px}
.mini-avance{width:132px}
.mini-avance .mono{font-size:12.5px;display:flex;justify-content:space-between;gap:6px}
.mini-pista{height:8px;background:var(--pista);border-radius:2px;position:relative;margin-top:5px}
.mini-pista i{position:absolute;left:0;top:0;bottom:0;background:var(--cian-dato);border-radius:0 3px 3px 0}
.mini-pista i.atraso{background:var(--aviso-dato)}
.mini-pista u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--tinta);margin-left:-1px;text-decoration:none}
.tarjetas-proy{display:none}
.alerta-fila{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--linea-suave)}
.alerta-fila:last-child{border-bottom:0}
.dinero-filas{display:grid;gap:14px}
.dinero-fila .df-cab{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;margin-bottom:6px}
.dinero-fila .df-cab b{font-weight:600}
.dinero-fila .df-cab span{font-family:var(--f-mono);font-size:12.5px;color:var(--gris);white-space:nowrap}
.leyenda-dinero{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--texto-2);margin-top:14px;padding-top:12px;border-top:1px solid var(--linea-suave)}
.leyenda-dinero span{display:inline-flex;align-items:center;gap:6px}
.leyenda-dinero i{width:12px;height:12px;border-radius:2px;display:inline-block}

/* ---------------------------------------------------------------- partes diarios */
.parte{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:14px 16px;box-shadow:var(--sombra)}
.parte.pendiente{border-color:var(--cian-borde);box-shadow:0 0 0 3px var(--cian-suave)}
.parte-cab{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.parte-quien{display:flex;gap:10px;align-items:center}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--tinta-3);color:#fff;font-weight:700;font-size:12.5px;flex:none;letter-spacing:.02em}
.avatar.c{background:var(--cian-hondo)}
.parte-t{font-weight:700;font-size:15px;margin-top:10px;line-height:1.35}
.parte-datos{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:6px;font-size:13px;color:var(--gris)}
.parte-datos b{color:var(--tinta);font-weight:600}
.parte-fotos{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.parte-fotos button{width:96px;height:72px;border-radius:4px;overflow:hidden;border:1px solid var(--linea);padding:0;background:#DCE2E7}
.parte-fotos img,.parte-fotos svg{width:100%;height:100%;object-fit:cover;display:block}
.parte-acc{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--linea-suave)}
.efecto{margin-top:10px;font-size:13px;color:var(--cian-hondo);background:var(--cian-suave);border-radius:5px;padding:8px 10px;display:flex;gap:8px;align-items:flex-start}
.efecto .ico{width:16px;height:16px;margin-top:1px}

/* ---------------------------------------------------------------- formularios */
.campo{display:grid;gap:6px;margin-bottom:14px;min-width:0}
.campo>label,.campo>.campo-l{font-size:13.5px;font-weight:600;color:var(--texto-2)}
.campo-ayuda{font-size:12.5px;color:var(--gris)}
.entrada,.campo input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),.campo select,.campo textarea{width:100%;min-height:44px;padding:9px 12px;border:1.5px solid var(--linea);border-radius:var(--radio);background:var(--blanco);font-size:15px;color:var(--tinta)}
.campo textarea{min-height:88px;resize:vertical;line-height:1.45}
.campo input:focus,.campo select:focus,.campo textarea:focus,.entrada:focus{outline:none;border-color:var(--cian-texto);box-shadow:0 0 0 2px var(--cian-texto)}
.campo [aria-invalid="true"]{border-color:var(--alerta)!important}
.campo-error{font-size:12.5px;color:var(--alerta);font-weight:600}
.doble{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.triple{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}
.opciones{display:flex;flex-wrap:wrap;gap:8px}
.opcion{position:relative}
.opcion input{position:absolute;opacity:0;width:1px;height:1px}
.opcion span{display:inline-flex;align-items:center;justify-content:center;min-height:42px;min-width:52px;padding:0 14px;border:1.5px solid var(--linea);border-radius:var(--radio);background:var(--blanco);font-weight:600;font-size:14px;cursor:pointer;font-family:var(--f-mono)}
.opcion.texto span{font-family:var(--f-texto)}
.opcion input:checked+span{border-color:var(--tinta);background:var(--tinta);color:#fff}
.opcion input:focus-visible+span{outline:3px solid var(--cian-texto);outline-offset:2px}
.opcion.texto span{min-width:0;padding:0 12px;font-size:13.5px}
.etapa-edit{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--linea-suave)}
.etapa-edit:last-child{border-bottom:0}
.etapa-edit .etapa-pct{grid-column:1 / -1;margin:0}
.casilla{display:flex;gap:10px;align-items:flex-start;font-size:14px;cursor:pointer;padding:6px 0}
.casilla input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--cian-texto);flex:none}
.subir{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:110px;border:1.5px dashed var(--gris-claro);border-radius:var(--radio);background:var(--papel);color:var(--texto-2);text-align:center;padding:14px;cursor:pointer;position:relative;font-size:14px}
.subir:hover{border-color:var(--cian-texto);background:var(--cian-suave)}
.subir input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.subir .ico{width:26px;height:26px;color:var(--cian-texto)}
.subir:focus-within{outline:3px solid var(--cian-texto);outline-offset:2px}
.previas{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.previa{position:relative;width:92px;height:70px;border-radius:5px;overflow:hidden;border:1px solid var(--linea);background:#DCE2E7}
.previa img,.previa svg{width:100%;height:100%;object-fit:cover;display:block}
.previa button{position:absolute;top:3px;right:3px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(14,18,23,.8);color:#fff;display:grid;place-items:center;padding:0}
.previa button .ico{width:14px;height:14px;stroke-width:2.4}
.rango-cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.rango-v{font-family:var(--f-mono);font-size:20px;color:var(--tinta)}
input[type=range]{width:100%;accent-color:var(--cian-texto);min-height:32px}

/* ---------------------------------------------------------------- modal */
.modal{border:0;padding:0;border-radius:10px;width:min(640px,calc(100vw - 24px));max-height:calc(100vh - 40px);background:var(--blanco);color:var(--tinta);box-shadow:0 30px 80px -20px rgba(14,18,23,.5)}
.modal.ancho{width:min(960px,calc(100vw - 24px))}
.modal::backdrop{background:rgba(14,18,23,.62)}
.modal[open]{display:flex;flex-direction:column}
.modal-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 12px;border-bottom:1px solid var(--linea-suave)}
.modal-cab h2{font-size:19px;font-weight:700}
.modal-cab p{color:var(--gris);font-size:13.5px;margin-top:3px}
.modal-cerrar{width:40px;height:40px;border-radius:6px;border:0;background:transparent;display:grid;place-items:center;color:var(--gris);flex:none;margin:-6px -8px 0 0}
.modal-cerrar:hover{background:var(--papel);color:var(--tinta)}
.modal-cuerpo{padding:16px 20px;overflow-y:auto;flex:1;min-height:0}
.modal-pie{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;padding:12px 20px 16px;border-top:1px solid var(--linea-suave);background:var(--papel);border-radius:0 0 10px 10px}
.visor{background:#0B0F13;border-radius:6px;overflow:hidden;display:grid;place-items:center}
.visor img,.visor svg{max-width:100%;max-height:68vh;width:auto;height:auto;display:block}
.visor svg{width:100%}
.visor-pie{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:13.5px}
.nota-final{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--texto-2);background:var(--papel);border:1px dashed var(--linea);border-radius:6px;padding:10px 12px;margin-top:14px}
.nota-final .etq{flex:none;color:var(--cian-texto);padding-top:2px}

/* hoja de documento (vista previa) */
.hoja{background:#fff;border:1px solid var(--linea);box-shadow:0 10px 30px -18px rgba(14,18,23,.45);padding:22px 24px;position:relative;overflow:hidden;font-size:12.5px}
.hoja::before{content:"MUESTRA";position:absolute;left:50%;top:48%;transform:translate(-50%,-50%) rotate(-24deg);font-family:var(--f-display);font-weight:800;font-size:84px;letter-spacing:.08em;color:rgba(14,18,23,.045);pointer-events:none;white-space:nowrap}
.hoja-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:2px solid var(--tinta);padding-bottom:10px;margin-bottom:12px}
.hoja-cab img{height:30px;width:auto}
.hoja-cab .mono{font-size:11px;text-align:right;color:var(--texto-2);line-height:1.5}
.hoja h3{font-size:16px;margin-bottom:8px}
.hoja .tabla{font-size:12px}
.hoja .tabla td,.hoja .tabla th{padding:6px 8px}
.firmas{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:26px}
.firmas div{border-top:1px solid var(--tinta);padding-top:6px;font-size:11.5px;color:var(--gris)}
.rotulo-mini{display:grid;grid-template-columns:2fr 1fr 1fr;border:1.5px solid var(--tinta);margin-top:12px;font-size:11px}
.rotulo-mini div{padding:5px 7px;border-right:1px solid var(--linea)}
.rotulo-mini div:last-child{border-right:0}
.rotulo-mini b{display:block;font-size:11.5px}

/* ---------------------------------------------------------------- avisos flotantes (toasts) */
.avisos{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:300;display:grid;gap:8px;width:min(460px,calc(100vw - 24px));pointer-events:none}
.aviso-t{display:flex;gap:10px;align-items:flex-start;background:var(--tinta);color:#fff;border-radius:8px;padding:12px 14px;font-size:14px;line-height:1.4;box-shadow:0 14px 34px -10px rgba(14,18,23,.55);animation:entra .22s ease-out;pointer-events:auto}
.aviso-t .ico{width:18px;height:18px;flex:none;margin-top:1px;color:var(--cian)}
.aviso-t.ok .ico{color:#6FD39B}
.aviso-t small{display:block;color:#AAB4BE;font-size:12.5px;margin-top:2px}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- pista de bienvenida y recorrido */
.pista-bienvenida{background:var(--tinta-2);color:#E3E8EC;border-bottom:1px solid #000}
.pista-bienvenida .fila-pista{max-width:var(--ancho);margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:14px}
.pista-bienvenida b{color:#fff}
.pista-bienvenida .crece{flex:1;min-width:240px}
.pista-bienvenida .btn-linea{background:transparent;color:#fff;border-color:#5A6672}
.pista-bienvenida .btn-linea:hover{border-color:#fff;color:#fff}
.tour{position:fixed;right:20px;bottom:20px;z-index:250;width:min(380px,calc(100vw - 24px));background:var(--blanco);border:1.5px solid var(--tinta);border-radius:10px;box-shadow:var(--sombra-alta);padding:16px 18px}
.tour-paso{font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--cian-texto)}
.tour h2{font-size:17px;margin-top:6px}
.tour p{font-size:14px;color:var(--texto-2);margin-top:6px}
.tour-puntos{display:flex;gap:5px;margin-top:12px}
.tour-puntos i{width:18px;height:3px;border-radius:2px;background:var(--pista)}
.tour-puntos i.on{background:var(--cian-dato)}
.tour-acc{display:flex;gap:8px;justify-content:space-between;align-items:center;margin-top:12px}
.tour-cerrar{position:absolute;top:8px;right:8px}
.resaltar{animation:resalta 2.2s ease-out 1}
@keyframes resalta{0%{box-shadow:0 0 0 0 rgba(0,175,239,.0)}15%{box-shadow:0 0 0 6px rgba(0,175,239,.45)}100%{box-shadow:0 0 0 0 rgba(0,175,239,0)}}

/* ---------------------------------------------------------------- técnico (vista celular) */
.escena-tel{display:grid;grid-template-columns:minmax(0,1fr) 390px minmax(0,1fr);gap:40px;align-items:start;max-width:var(--ancho);margin:0 auto;padding:28px 24px 48px}
.escena-nota{padding-top:40px;max-width:340px;justify-self:end}
.escena-nota h1{font-size:24px;font-weight:800;letter-spacing:-.02em}
.escena-nota p{color:var(--texto-2);margin-top:10px;font-size:14.5px}
.escena-pasos{margin-top:18px;display:grid;gap:0;border-top:2px solid var(--tinta)}
.escena-pasos li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:12px 0;border-bottom:1px solid var(--linea);font-size:14px;color:var(--texto-2)}
.escena-pasos li b{color:var(--tinta)}
.escena-pasos .mono{font-size:12px;color:var(--cian-texto);padding-top:2px}
.escena-lado{padding-top:40px;max-width:320px}
.telefono{width:390px;height:min(812px,calc(100vh - 120px));min-height:600px;border:11px solid var(--tinta);border-radius:42px;overflow:hidden;background:var(--papel);display:flex;flex-direction:column;box-shadow:0 40px 80px -40px rgba(14,18,23,.6),0 0 0 1px #000;position:relative}
.tel-estado{display:flex;justify-content:space-between;align-items:center;padding:9px 22px 5px;font-family:var(--f-texto);font-weight:600;font-size:13px;background:var(--blanco);flex:none}
.tel-estado span{display:inline-flex;gap:4px;align-items:center}
.tel-estado .ico{width:15px;height:15px}
.tel-cab{background:var(--blanco);border-bottom:1px solid var(--linea);padding:10px 16px 12px;display:flex;align-items:center;gap:10px;flex:none}
.tel-cab img{height:22px;width:auto}
.tel-cab .crece{flex:1;min-width:0}
.tel-cab b{display:block;font-size:14px;line-height:1.2}
.tel-cab small{display:block;color:var(--gris);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tel-volver{width:40px;height:40px;border-radius:8px;border:1px solid var(--linea);background:var(--blanco);display:grid;place-items:center;color:var(--tinta);text-decoration:none;flex:none}
.tel-cuerpo{flex:1;overflow-y:auto;padding:14px 14px 20px;-webkit-overflow-scrolling:touch}
.tel-nav{display:flex;background:var(--blanco);border-top:1px solid var(--linea);flex:none;padding-bottom:env(safe-area-inset-bottom,0)}
.tel-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;font-size:11.5px;font-weight:600;color:var(--gris);text-decoration:none;position:relative}
.tel-nav a[aria-current="page"]{color:var(--tinta)}
.tel-nav a[aria-current="page"]::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;background:var(--cian);border-radius:0 0 3px 3px}
.tel-nav .ico{width:21px;height:21px}
.tel-nav .bolita{position:absolute;top:8px;left:calc(50% + 6px);min-width:17px;height:17px;border-radius:9px;background:var(--alerta);color:#fff;font-size:10.5px;display:grid;place-items:center;padding:0 4px;font-family:var(--f-mono)}
.tel-saludo{font-size:20px;font-weight:800;letter-spacing:-.02em}
.tel-tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:10px;padding:14px;margin-top:12px}
.tel-tarjeta .etq{display:block;margin-bottom:8px}
.tel-lista li{border-bottom:1px solid var(--linea-suave)}
.tel-lista li:last-child{border-bottom:0}
.tel-item{display:flex;gap:10px;align-items:center;padding:11px 0;text-decoration:none;color:inherit;width:100%;border:0;background:none;text-align:left}
.tel-item .crece{flex:1;min-width:0}
.tel-item b{display:block;font-size:14px;line-height:1.3}
.tel-item small{display:block;color:var(--gris);font-size:12.5px;margin-top:2px}
.tel-item .ico.flecha{color:var(--gris)}
.tel-mini{width:48px;height:48px;border-radius:6px;overflow:hidden;flex:none;background:#DCE2E7;border:1px solid var(--linea)}
.tel-mini img,.tel-mini svg{width:100%;height:100%;object-fit:cover}
.tel-hecho{text-align:center;padding:26px 8px 10px}
.tel-hecho .sello{width:64px;height:64px;border-radius:50%;background:var(--ok-suave);color:var(--ok);display:grid;place-items:center;margin:0 auto 14px;border:1.5px solid #BFE0CC}
.tel-hecho .sello .ico{width:30px;height:30px;stroke-width:2.4}
.tel-hecho h2{font-size:20px}
.tel-hecho p{color:var(--texto-2);margin-top:8px;font-size:14px}
.tel-flujo{margin-top:16px;text-align:left;display:grid;gap:0;border:1px solid var(--linea);border-radius:8px;background:var(--blanco)}
.tel-flujo li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;padding:10px 12px;border-bottom:1px solid var(--linea-suave);font-size:13.5px;align-items:start}
.tel-flujo li:last-child{border-bottom:0}
.tel-flujo .ico{width:18px;height:18px}
.tel-flujo li.ok .ico{color:var(--ok)}
.tel-flujo li.espera .ico{color:var(--aviso)}
.tel-flujo li.luego .ico{color:var(--gris-claro)}

/* ---------------------------------------------------------------- nuevo proyecto */
.asistente{max-width:1040px;margin:0 auto}
.pasos-asist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-bottom:20px;border-top:2px solid var(--linea)}
.pasos-asist li{padding:10px 10px 0 0;font-size:13.5px;color:var(--gris);font-weight:600;position:relative}
.pasos-asist li .mono{display:block;font-size:11px;letter-spacing:.06em;margin-bottom:2px}
.pasos-asist li.hecho{color:var(--tinta)}
.pasos-asist li.actual{color:var(--tinta)}
.pasos-asist li.actual::before,.pasos-asist li.hecho::before{content:"";position:absolute;top:-2px;left:0;right:0;height:2px;background:var(--tinta)}
.pasos-asist li.actual::before{background:var(--cian)}
.plantillas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.plantilla{position:relative;display:block;cursor:pointer}
.plantilla input{position:absolute;opacity:0;width:1px;height:1px}
.plantilla-caja{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;height:100%;padding:16px 18px;border:1.5px solid var(--linea);border-radius:8px;background:var(--blanco);transition:border-color .15s,box-shadow .15s}
.plantilla:hover .plantilla-caja{border-color:var(--gris)}
.plantilla input:checked+.plantilla-caja{border-color:var(--tinta);box-shadow:0 0 0 3px var(--cian-suave),inset 0 0 0 1px var(--tinta)}
.plantilla input:focus-visible+.plantilla-caja{outline:3px solid var(--cian-texto);outline-offset:2px}
.plantilla-ico{width:46px;height:46px;border-radius:8px;background:var(--papel);display:grid;place-items:center;color:var(--tinta);border:1px solid var(--linea)}
.plantilla input:checked+.plantilla-caja .plantilla-ico{background:var(--cian);border-color:var(--cian)}
.plantilla h3{font-size:16px;font-weight:700}
.plantilla p{font-size:13.5px;color:var(--gris);margin-top:4px}
.plantilla-datos{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:10px;font-family:var(--f-mono);font-size:11.5px;color:var(--texto-2)}
.plantilla-sis{margin-top:8px;font-size:12.5px;color:var(--texto-2);line-height:1.5}
.asist-pie{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--linea);flex-wrap:wrap}
.carga{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:0;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;background:var(--blanco)}
.carga div{padding:12px 14px;border-right:1px solid var(--linea-suave);border-bottom:1px solid var(--linea-suave)}
.carga b{display:block;font-family:var(--f-mono);font-weight:500;font-size:22px}
.carga span{font-size:12.5px;color:var(--gris)}
.invitado{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,1fr) 44px;gap:8px;align-items:end;margin-bottom:8px}
.invitado .campo{margin-bottom:0}
.creado{text-align:center;max-width:620px;margin:10px auto 0}
.creado .sello{width:72px;height:72px;border-radius:50%;background:var(--ok-suave);color:var(--ok);display:grid;place-items:center;margin:0 auto 16px;border:1.5px solid #BFE0CC}
.creado .sello .ico{width:34px;height:34px;stroke-width:2.4}
.creado h1{font-size:26px;font-weight:800}
.creado>p{color:var(--texto-2);margin-top:8px}

/* ---------------------------------------------------------------- informe semanal (correo) */
.correo{max-width:760px;margin:0 auto;background:var(--blanco);border:1px solid var(--linea);border-radius:8px;overflow:hidden;box-shadow:var(--sombra-alta)}
.correo-cab{padding:14px 20px;border-bottom:1px solid var(--linea);background:#FBFCFD;font-size:13.5px;display:grid;gap:4px}
.correo-cab div{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px}
.correo-cab span{color:var(--gris)}
.correo-cab .asunto{font-family:var(--f-display);font-weight:700;font-size:17px;margin-top:6px;grid-template-columns:1fr}
.informe{padding:26px 30px 30px}
.informe-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:16px;border-bottom:2px solid var(--tinta)}
.informe-cab img{height:36px;width:auto}
.informe h2{font-size:22px;font-weight:800;margin-top:18px}
.informe h3{font-size:15px;font-weight:700;margin:22px 0 8px;display:flex;align-items:center;gap:8px}
.informe p,.informe li{font-size:14.5px;color:var(--texto-2)}
.informe .bullets li{padding:7px 0 7px 18px;position:relative;border-bottom:1px dashed var(--linea-suave)}
.informe .bullets li::before{content:"";position:absolute;left:0;top:16px;width:9px;height:2px;background:var(--cian-dato)}
.informe-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--linea);border-radius:6px;overflow:hidden;margin-top:16px}
.informe-kpis div{padding:12px;border-right:1px solid var(--linea)}
.informe-kpis div:last-child{border-right:0}
.informe-kpis b{display:block;font-family:var(--f-mono);font-weight:500;font-size:20px;margin-top:4px;white-space:nowrap}
.informe-pie{margin-top:26px;padding-top:14px;border-top:1px solid var(--linea);font-size:12.5px;color:var(--gris)}
.informe-fotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.informe-fotos figure{margin:0}
.informe-fotos img,.informe-fotos svg{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;display:block}
.informe-fotos figcaption{font-size:11.5px;color:var(--gris);margin-top:4px;line-height:1.35}
.barra-informe{max-width:760px;margin:0 auto 14px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* ---------------------------------------------------------------- postventa */
.garantia-cab{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center}
.dias-garantia{font-family:var(--f-mono);font-size:30px;line-height:1}
.equipos .vence{white-space:nowrap}
.estado-punto{display:inline-flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
.estado-punto::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok-dato)}
.estado-punto.aviso::before{background:var(--aviso-dato)}
.estado-punto.alerta::before{background:var(--alerta-dato)}

/* ---------------------------------------------------------------- impresión: informe y dossier salen limpios en PDF */
@media print{
  @page{margin:14mm}
  body{background:#fff}
  .barra,.pie,.contexto,.pista-bienvenida,.tour,.avisos,.barra-informe,.no-imprimir{display:none!important}
  .pagina{padding:0;max-width:none}
  .correo{box-shadow:none;border:0;max-width:none}
  .correo-cab{display:none}
  .informe{padding:0}
  .tarjeta{box-shadow:none;break-inside:avoid}
  body.imprimiendo-modal>*:not(.modal){display:none!important}
  .solo-impresion{display:block;margin-top:6px;font-weight:600}
  .modal::backdrop{background:transparent}
  body.imprimiendo-modal .modal{position:absolute;inset:0 auto auto 0;margin:0;width:100%;max-width:none;height:auto;max-height:none;box-shadow:none;border:0;border-radius:0;overflow:visible;display:block}
  .informe h3{break-after:avoid}
  .informe-fotos,.informe-kpis,.bullets li,.hoja .tabla tr{break-inside:avoid}
  body.imprimiendo-modal .modal-cab,body.imprimiendo-modal .modal-pie,body.imprimiendo-modal .no-imprimir{display:none!important}
  body.imprimiendo-modal .modal-cuerpo{overflow:visible;padding:0}
  .hoja{box-shadow:none;border:0;padding:0}
}

/* ---------------------------------------------------------------- escritorio angosto: barra compacta */
@media (max-width:1279px){
  .rol-t{display:none}
  .barra-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .barra-btn{width:40px;justify-content:center;padding:0}
  .barra-btn .solo-ancho{display:none}
}
@media (min-width:1100px) and (max-width:1279px){
  .kpis-cinco .kpi-v{font-size:21px}
}

/* ---------------------------------------------------------------- tablet */
@media (max-width:1099px){
  .solo-ancho{display:none}
  :root{--barra-h:auto}
  .barra{position:relative}
  .barra-fila{height:auto;flex-wrap:wrap;padding:10px 20px 12px;gap:10px 14px}
  .barra-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .barra-btn{width:40px;justify-content:center;padding:0}
  .barra-acciones{margin-left:auto}
  .rol{order:4;width:100%;margin:0}
  .rol-t{display:none}
  .rol-opciones{width:100%}
  .rol-opciones a{flex:1;padding:0 6px}
  .pestanas-barra{top:0}
  .cartera-tabla{display:none}
  .tarjetas-proy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .kpis-cinco{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis-cinco>*:last-child{grid-column:span 2}
  .kpi-v{font-size:22px}
  .rotulo{grid-template-columns:minmax(0,1fr) 230px}
  .rotulo-datos{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rc-obra{grid-column:span 4}
  .rc-logo{display:none}
  .rc-cifra{grid-column:span 2}
  .rc-cifra:nth-last-child(-n+2){border-bottom:0}
  .rc-cifra:nth-last-child(3),.rc-cifra:nth-last-child(4){border-bottom:1px solid var(--linea)}
  .escena-tel{grid-template-columns:390px minmax(0,1fr);gap:28px}
  .escena-nota{grid-column:2;grid-row:1;justify-self:start;padding-top:10px;max-width:none}
  .escena-lado{grid-column:2;grid-row:2;padding-top:0;max-width:none}
  .escena-tel>.telefono{grid-row:1 / span 2}
  .plantillas{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------- etapas en vertical (tableta angosta y celular) */
@media (max-width:899px){
  .etapas{grid-template-columns:1fr;gap:0}
  .etapa{display:grid;grid-template-columns:20px minmax(0,1fr);gap:0 10px;padding:0 0 12px 0;position:relative}
  .etapa-barra{display:none}
  .etapa::before{content:"";position:absolute;left:9.25px;top:22px;bottom:0;width:1.5px;background:var(--linea)}
  .etapa.hecha::before{background:var(--tinta)}
  .etapa:last-child::before{display:none}
  .etapa-cab{display:contents}
  .etapa-marca{grid-row:1 / span 3;position:relative;z-index:1}
  .etapa-f,.etapa-p{padding-left:0;grid-column:2}
  .etapa.principal .etapa-n::after{display:inline-block;margin:0 0 0 8px;vertical-align:1px}
}

/* ---------------------------------------------------------------- celular */
@media (max-width:719px){
  body{font-size:15px}
  html{scroll-padding-top:70px}
  .barra-fila{padding:10px 16px 12px;gap:10px 12px}
  .barra-marca img{height:26px}
  .barra-producto{font-size:13.5px;padding-left:10px}
  .muestra{order:3;margin-left:0;font-size:10px;padding:3px 8px}
  .rol-opciones a{min-height:40px;font-size:14px}
  .franja-avisos{flex-wrap:wrap}
  .franja-avisos .crece{flex-basis:calc(100% - 34px)}
  .franja-avisos .interruptor{margin-left:32px}
  .fila{flex-wrap:wrap}
  .fila-acc{width:100%;padding-left:46px;align-self:auto}
  .rc-cifra:last-child{grid-column:span 2;border-top:1px solid var(--linea)}
  .contexto-fila{padding:10px 16px 0;gap:8px}
  .contexto-t{padding-bottom:6px}
  .contexto-t h1{font-size:17px;white-space:normal}
  .contexto-acciones{padding-bottom:8px;width:100%}
  .contexto-acciones .btn{flex:1}
  .etq-sel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .contexto-acciones select{flex:1 1 100%;max-width:none!important;min-width:0;width:100%}
  .tarjeta-cab{flex-wrap:wrap}
  .tarjeta-cab>div:first-child{flex:1 1 240px;min-width:0}
  .pestanas{padding:0 10px}
  .pestanas a{padding:0 9px;font-size:13.5px}
  .pagina{padding:16px 16px 40px}
  .pila{gap:12px}
  .rejilla{gap:12px}
  .tarjeta{padding:15px 14px}
  .titulo-vista h1{font-size:22px}
  .rotulo{grid-template-columns:1fr}
  .rotulo-foto{border-left:0;border-bottom:1.5px solid var(--tinta);order:-1;aspect-ratio:16/9;min-height:0}
  .rotulo-datos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rc-obra{grid-column:span 2;padding:14px}
  .rc-obra h2{font-size:21px}
  .rc{padding:10px 12px}
  .rc-dos,.rc-tres{grid-column:span 1}
  .rc-ancho-m{grid-column:span 2}
  .rc-cifra{grid-column:span 1;padding:12px}
  .rc-cifra .cifra{font-size:24px}
  .rc:nth-child(odd),.rc-cifra:last-child{border-right:0}
  .sis{grid-template-columns:minmax(0,1fr) 56px;gap:6px 10px}
  .sis-nombre{grid-column:1 / -1}
  .sis-pista{grid-column:1}
  .sis-v{grid-column:2;grid-row:2}
  .sis-nota{grid-column:1 / -1}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpis:not(.kpis-tres)>*:last-child:nth-child(odd){grid-column:span 2}
  .alerta-fila{grid-template-columns:34px minmax(0,1fr)}
  .alerta-fila>.btn{grid-column:2;justify-self:start}
  .kpi{padding:12px}
  .kpi-v{font-size:19px}
  .galeria{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .obs{grid-template-columns:1fr;padding:13px 14px}
  .obs-acc{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start}
  .obs-fotos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .doc{grid-template-columns:auto minmax(0,1fr)}
  .doc-acc{grid-column:2;justify-content:flex-start}
  .pago{grid-template-columns:28px minmax(0,1fr);gap:4px 12px}
  .pago-monto{grid-column:2;text-align:left;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .pago-monto .insignia{margin-top:0}
  .reqs{grid-column:1 / -1}
  .cobro-resumen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cobro-resumen>div{border-bottom:1px solid var(--linea)}
  .cobro-resumen>div:nth-child(2n){border-right:0}
  .dossier-cab{grid-template-columns:auto minmax(0,1fr)}
  .dossier-cab .btns{grid-column:1 / -1}
  .anillo{width:84px;height:84px}
  .dossier-cat>summary{grid-template-columns:minmax(0,1fr) 54px 18px;gap:10px;padding:12px 14px}
  .dc-barra{grid-column:1 / -1;grid-row:2}
  .di{padding:9px 14px;grid-template-columns:22px minmax(0,1fr)}
  .di>.btn,.di>.insignia,.di>.di-acc{grid-column:2;justify-self:start}
  .tarjetas-proy{grid-template-columns:1fr}
  .doble,.triple{grid-template-columns:1fr}
  .invitado{grid-template-columns:1fr 44px;gap:8px}
  .invitado .campo:nth-child(1),.invitado .campo:nth-child(2),.invitado .campo:nth-child(3){grid-column:1 / -1}
  .escena-tel{display:block;padding:0}
  .escena-nota,.escena-lado{display:none}
  .telefono{width:100%;height:auto;min-height:0;border:0;border-radius:0;overflow:visible;box-shadow:none;background:var(--papel)}
  .tel-estado{display:none}
  .tel-cab{position:sticky;top:0;z-index:30}
  .tel-cuerpo{overflow:visible;padding:14px 16px 90px}
  .tel-nav{position:fixed;left:0;right:0;bottom:0;z-index:50}
  body.en-tecnico .pie{padding-bottom:84px}
  .pasos-asist{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pasos-asist li{font-size:12px;padding-right:6px}
  .pasos-asist li .mono{font-size:10px}
  .pasos-asist li .paso-n-t{display:none}
  .informe{padding:18px 16px 22px}
  .informe-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .informe-kpis div:nth-child(2n){border-right:0}
  .informe-kpis div:nth-child(-n+2){border-bottom:1px solid var(--linea)}
  .informe-fotos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .correo-cab{padding:12px 14px}
  .modal{width:calc(100vw - 16px);max-height:calc(100vh - 16px)}
  .modal-cab{padding:16px 16px 10px}
  .modal-cuerpo{padding:14px 16px}
  .modal-pie{padding:10px 16px 14px}
  .modal-pie .btn{flex:1}
  .tour{right:12px;left:12px;bottom:12px;width:auto}
  body.en-tecnico .tour{bottom:76px}
  .garantia-cab{grid-template-columns:1fr}
  .avisos{bottom:14px}
  body.en-tecnico .avisos{bottom:76px}
}
@media (max-width:380px){
  .rol-opciones a{font-size:13.5px}
  .kpi-v{font-size:17px}
  .rc-cifra .cifra{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}