/* Gastos Comunes Palo Negro Cunco */
:root{
  --bosque:#24523B; --corteza:#14201B; --niebla:#F1F4EF; --madera:#E4DFD0;
  --copihue:#A93226; --panel:#FFF; --panel2:#E9EEE7; --ink:#1C2B24; --ink2:#51665B;
  --line:#C9D4C8; --ok:#2E7D4F; --warn:#A93226; --pend:#B07D2B;
}
*{box-sizing:border-box}
body{margin:0;background:var(--niebla);color:var(--ink);
  font:15px/1.55 -apple-system,"Helvetica Neue","Segoe UI",Roboto,sans-serif;
  display:flex;min-height:100vh;flex-direction:column}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px;width:100%}
main.wrap{flex:1;padding-top:26px;padding-bottom:44px}
a{color:var(--bosque)}
h1{font-size:1.55rem;color:var(--bosque);margin:.2em 0 .5em}
h2{font-size:1.15rem;color:var(--bosque);margin:1.2em 0 .5em}
h1,h2{font-family:"Avenir Next Condensed","Arial Narrow","Helvetica Neue",sans-serif}

.topbar{background:var(--bosque);color:var(--madera);border-bottom:3px solid var(--corteza)}
.topbar .wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding-top:13px;padding-bottom:13px}
.topbar .marca{color:var(--madera);text-decoration:none;font-weight:700;letter-spacing:.06em;
  font-family:"Avenir Next Condensed","Arial Narrow",sans-serif;font-size:1.05rem}
.topbar .marca span{font-weight:400;font-size:.72rem;letter-spacing:.18em;opacity:.8;text-transform:uppercase;margin-left:8px}
.topbar nav{display:flex;gap:16px;flex-wrap:wrap;flex:1}
.topbar nav a{color:var(--madera);text-decoration:none;font-size:.88rem;opacity:.92}
.topbar nav a:hover{text-decoration:underline}
.topbar .quien{font-size:.8rem;opacity:.85}
.topbar .quien a{color:var(--madera)}
.topbar.admin{background:var(--corteza)}

footer{background:var(--corteza);color:var(--madera);font-size:.8rem;padding:16px 0;opacity:.95}

.card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:22px;margin-bottom:20px}
.card.ancho-medio{max-width:460px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.grid2,.grid3{grid-template-columns:1fr}}

.stat{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:14px 18px}
.stat .num{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--bosque);
  font-family:"Avenir Next Condensed","Arial Narrow",sans-serif}
.stat .num.rojo{color:var(--warn)}
.stat .lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink2)}

table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink2);
  padding:8px 10px;border-bottom:2px solid var(--line)}
td{padding:8px 10px;border-bottom:1px solid var(--panel2);vertical-align:top}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.total td{font-weight:700;border-top:2px solid var(--line);color:var(--bosque)}
.tabla-scroll{overflow-x:auto}

.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.72rem;font-weight:700}
.badge.ok{background:#e2efe6;color:var(--ok)}
.badge.pendiente{background:#f5ecd9;color:var(--pend)}
.badge.error,.badge.rechazado{background:#f6e2df;color:var(--warn)}
.badge.borrador{background:var(--panel2);color:var(--ink2)}
.badge.emitido{background:#dfe9f2;color:#2a5d8a}
.badge.cerrado{background:#e2efe6;color:var(--ok)}

.flash{padding:11px 16px;border-radius:6px;margin-bottom:16px;font-size:.9rem;border:1px solid}
.flash.ok{background:#e2efe6;border-color:#b8d6c2;color:#20573a}
.flash.error{background:#f6e2df;border-color:#e3b7b0;color:#7c221a}
.flash.aviso{background:#f5ecd9;border-color:#e0cfa4;color:#6d4e17}

form .campo{margin-bottom:14px}
label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink2);
  font-weight:600;margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:4px;
  font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--bosque);outline-offset:1px}
.btn{display:inline-block;padding:9px 18px;border-radius:4px;font-weight:600;font-size:.9rem;
  border:1px solid transparent;cursor:pointer;text-decoration:none;background:var(--bosque);color:#fff}
.btn:hover{filter:brightness(1.1)}
.btn.rojo{background:var(--copihue)}
.btn.linea{background:transparent;border-color:var(--bosque);color:var(--bosque)}
.btn.chico{padding:4px 12px;font-size:.8rem}
.btn.gris{background:var(--ink2)}
.acciones{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.barra{height:6px;background:var(--panel2);border-radius:3px;overflow:hidden;margin-top:4px}
.barra i{display:block;height:100%;background:var(--bosque)}

.detalle-json{font:.78rem/1.5 ui-monospace,Menlo,monospace;background:var(--panel2);
  padding:8px 10px;border-radius:4px;white-space:pre-wrap;word-break:break-word;max-width:420px}
.muted{color:var(--ink2);font-size:.85rem}
.derecha{text-align:right}
code{background:var(--panel2);padding:1px 6px;border-radius:3px;font-size:.85em}

/* ---- Hero del muro público ---- */
.hero{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  margin-bottom:26px;background:#EEF3EC}
.hero-escena{display:block;width:100%;height:auto;min-height:200px;object-fit:cover}
.hero-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:0 5%;max-width:none}
.hero-copy::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(241,244,239,.96) 0%,rgba(241,244,239,.88) 38%,rgba(241,244,239,0) 62%)}
.hero-copy>*{position:relative;max-width:460px}
.hero-eyebrow{font-size:.68rem;text-transform:uppercase;letter-spacing:.18em;color:#51665B;
  font-weight:700;margin-bottom:6px}
.hero-copy h1{margin:0 0 8px;font-size:clamp(1.4rem,3.6vw,2.6rem);line-height:1.05;
  color:var(--bosque);text-wrap:balance;max-width:14ch}
.hero-copy p{margin:0 0 16px;color:#51665B;font-size:clamp(.82rem,1.5vw,1rem);max-width:44ch}
.hero-botones{display:flex;gap:10px;flex-wrap:wrap}

/* ---- Responsivo ---- */
@media(max-width:860px){
  .hero-copy{position:static;padding:18px 20px 22px;max-width:none}
  .hero-copy::before{display:none}
  .hero-escena{min-height:0;max-height:220px}
}
@media(max-width:640px){
  body{font-size:14px}
  main.wrap{padding-top:18px}
  h1{font-size:1.3rem}
  .topbar .wrap{gap:10px;padding-top:10px;padding-bottom:10px}
  .topbar nav{gap:4px 14px;flex:0 0 100%;order:3}
  .topbar nav a{font-size:.82rem}
  .stat .num{font-size:1.2rem}
  .card{padding:16px}
  .card.ancho-medio{max-width:none}
  th,td{padding:6px 7px}
  table{font-size:.82rem}
  .btn{padding:9px 14px;font-size:.85rem}
  .acciones{gap:8px}
  .hero-botones .btn{flex:1;text-align:center}
  .detalle-json{max-width:240px}
}
@media(max-width:400px){
  .grid3{grid-template-columns:1fr}
}