/* ==========================================================
   Estudio Maru Sac — portal de obras. Hoja de estilos compartida.
   ========================================================== */
:root{
  --papel:#FFFFFF; --superficie:#F3F0EC; --tinta:#4D4E4F; --tinta-2:#666768; --tinta-3:#767778;
  --regla:#E2DED9; --regla-fuerte:#C4C0BB; --mo:#4D4E4F; --mat:#C4C0BB; --casco:#B3A99B;
  --alerta:#7D6A5C; --r:2px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);
  font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.55;
  font-optical-sizing:auto;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.02em;line-height:1.15}
em.ac{font-style:italic;font-weight:300;color:var(--tinta-2)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
input,select{font-family:inherit;color:inherit}
:focus-visible{outline:2px solid var(--tinta);outline-offset:2px;border-radius:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.ancho{max-width:1320px;margin:0 auto;padding:0 24px}

/* ---------- barra del portal ---------- */
.nav{position:sticky;top:0;z-index:40;background:var(--tinta);color:var(--papel)}
.nav-in{display:flex;align-items:center;gap:18px;padding:11px 0;min-height:56px}
.marca{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.03em;font-size:17px}
.marca .glifo{width:26px;height:26px;flex:none}
.marca .glifo svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.miga{display:flex;align-items:center;gap:9px;font-family:'Inter';font-size:13.5px;
  opacity:.78;flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.miga a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.miga i{opacity:.45;font-style:normal}
.nav-user{display:flex;align-items:center;gap:12px;font-family:'Inter';font-size:13px;opacity:.85}
.nav-user .cfg{border:1px solid rgba(255,255,255,.35);border-radius:var(--r);padding:4px 10px;
  font-size:12.5px;color:inherit;opacity:.9}
.nav-user .cfg:hover{border-color:var(--papel);opacity:1}
.nav-user .av{width:27px;height:27px;border-radius:50%;background:var(--casco);color:var(--tinta);
  display:grid;place-items:center;font-family:'Inter';font-weight:700;font-size:12px;letter-spacing:0}
.nav-user button{background:transparent;border:1px solid rgba(231,234,230,.35);border-radius:var(--r);
  padding:4px 10px;font-family:'Inter';font-size:12.5px;color:inherit}
.nav-user button:hover{border-color:var(--papel)}

/* ---------- cabeceras de página ---------- */
.pag-cab{padding:34px 0 26px;border-bottom:1px solid var(--tinta)}
.pag-cab .kicker{font-family:'Inter';font-size:13px;color:var(--tinta-2);margin-bottom:6px}
.pag-cab h1{font-size:clamp(28px,4.4vw,44px);font-weight:800}
.pag-cab p{margin:10px 0 0;font-family:'Inter';font-size:14.5px;color:var(--tinta-2);max-width:62ch}
.pag-cab .fila{display:flex;flex-wrap:wrap;gap:16px 30px;align-items:flex-end;justify-content:space-between}

/* ---------- fichas / tarjetas ---------- */
.rejilla{display:grid;gap:18px;padding:30px 0 46px}
.rejilla.obras{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.rejilla.secciones{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

.obra-card{display:block;background:var(--superficie);border:1px solid var(--regla);
  border-radius:var(--r);overflow:hidden;transition:box-shadow .18s ease,transform .18s ease;text-align:left}
.obra-card:hover{box-shadow:0 3px 0 var(--regla-fuerte)}
.obra-img{aspect-ratio:16/10;background:var(--tinta);position:relative;overflow:hidden;
  background-size:cover;background-position:center;display:grid;place-items:center}
.obra-img svg{width:78%;height:78%;fill:none;stroke:rgba(231,234,230,.5);stroke-width:1.2;stroke-linejoin:round}
.obra-estado{position:absolute;top:11px;left:11px;font-family:'Inter';font-size:11.5px;font-weight:600;
  padding:3px 10px;border-radius:20px;background:var(--casco);color:var(--tinta);letter-spacing:.01em}
.obra-estado.fin{background:var(--mo);color:var(--papel)}
.obra-cuerpo{padding:15px 17px 17px}
.obra-cuerpo h3{font-size:19px;margin-bottom:2px}
.obra-cuerpo .ubi{font-family:'Inter';font-size:13px;color:var(--tinta-2)}
.obra-datos{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:13px;padding-top:11px;
  border-top:1px solid var(--regla);font-family:'Inter';font-size:12.5px;color:var(--tinta-2)}
.obra-datos b{display:block;font-family:'Inter';font-weight:700;font-size:14.5px;color:var(--tinta);letter-spacing:-.01em}
.obra-barra{height:6px;background:#EAE6E1;border-radius:1px;margin-top:12px;overflow:hidden}
.obra-barra i{display:block;height:100%;background:var(--mo)}

.sec-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;background:var(--superficie);border:1px solid var(--regla);
  border-top:4px solid var(--mo);border-radius:var(--r);padding:20px 20px 19px;text-align:left;
  transition:box-shadow .18s ease}
.sec-card:hover{box-shadow:0 3px 0 var(--regla-fuerte)}
.sec-card .ilu{height:66px;color:var(--mo);margin-bottom:14px;display:flex;align-items:center;justify-content:center;width:100%}
.sec-card .ilu svg{width:auto;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.sec-card h3{font-size:17px;margin-bottom:4px}
.sec-card p{margin:0;font-family:'Inter';font-size:13px;color:var(--tinta-2);line-height:1.4}
.sec-card .pie{width:100%;justify-content:center;margin-top:14px;padding-top:10px;border-top:1px solid var(--regla);
  display:flex;justify-content:space-between;align-items:center;
  font-family:'Inter';font-size:12.5px;color:var(--tinta-3)}
.sec-card .pie svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.sec-card.destacada{border-top-color:var(--casco);background:#fff}
.sec-card.vacia{opacity:.6}

/* ---------- listados de documentos ---------- */
.doc-lista{border-top:1px solid var(--tinta);margin-bottom:40px}
.doc{display:grid;grid-template-columns:32px 1fr 130px 92px 20px;gap:14px;align-items:center;
  padding:12px 4px;border-bottom:1px solid var(--regla);width:100%;background:transparent;border-left:0;border-right:0;border-top:0;text-align:left}
.doc:hover{background:var(--superficie)}
.doc .tipo{width:32px;height:32px;color:var(--tinta-2)}
.doc .tipo svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.doc .nom{font-size:15px;font-weight:600;letter-spacing:-.01em}
.doc .nom em{display:block;font-style:normal;font-family:'Inter';font-size:12.5px;font-weight:400;color:var(--tinta-2);margin-top:1px}
.doc .fecha,.doc .peso{font-family:'Inter';font-size:13px;color:var(--tinta-2);text-align:right}
.doc .chev{width:16px;height:16px;color:var(--tinta-3);justify-self:end}
.doc .chev svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2}
.grupo-tit{display:flex;align-items:baseline;gap:12px;padding:24px 4px 8px;
  font-family:'Inter';font-size:13px;color:var(--tinta-2)}
.grupo-tit b{font-family:'Inter';font-weight:700;font-size:15px;color:var(--tinta);letter-spacing:-.01em}
.grupo-tit span{flex:1;height:1px;background:var(--regla)}

/* ---------- galería ---------- */
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;padding:26px 0 46px}
.foto{aspect-ratio:4/3;background:var(--tinta);border-radius:var(--r);overflow:hidden;position:relative;
  display:grid;place-items:center;background-size:cover;background-position:center}
.foto svg{width:70%;height:70%;fill:none;stroke:rgba(231,234,230,.45);stroke-width:1.2}
.foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:9px 12px;
  background:linear-gradient(transparent,rgba(19,42,36,.85));color:var(--papel);
  font-family:'Inter';font-size:12.5px}

/* ---------- avisos y vacíos ---------- */
.aviso{display:flex;gap:11px;align-items:flex-start;background:#E9E3DA;border:1px solid var(--casco);
  border-radius:var(--r);padding:13px 16px;font-family:'Inter';font-size:13.5px;
  color:var(--tinta);line-height:1.45;margin:22px 0}
.aviso .ic{width:18px;height:18px;flex:none;color:#8A8175}
.aviso .ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8}
.aviso b{font-family:'Inter';font-weight:600}
.vacio{padding:52px 20px;text-align:center;border:1px dashed var(--regla-fuerte);border-radius:var(--r);
  font-family:'Inter';color:var(--tinta-2);margin:26px 0 46px}
.vacio b{display:block;font-family:'Inter';font-size:16px;color:var(--tinta);margin-bottom:5px}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--tinta);color:var(--papel);border:0;
  border-radius:var(--r);padding:9px 17px;font-weight:600;font-size:14.5px}
.btn:hover{background:#3C3D3E}
.btn.sec{background:transparent;color:var(--tinta);border:1px solid var(--regla-fuerte);font-weight:500}
.btn.sec:hover{border-color:var(--tinta);background:transparent}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

footer.pie{border-top:1px solid var(--tinta);padding:26px 0 46px;
  font-family:'Inter';font-size:13px;color:var(--tinta-2)}
footer.pie p{margin:0 0 6px;max-width:74ch}

@media (max-width:720px){
  .doc{grid-template-columns:28px 1fr 18px}
  .doc .fecha,.doc .peso{display:none}
  .nav-user .rol{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}