/* Estilo Casa Prefumo — tomado de casaprefumo.com.ar: Poppins, carbón y blanco, acento madera (la fachada). */
:root{--carbon:#2B2B2B;--madera:#9A6A3C;--maderaf:#F4ECE2;--fondo:#F5F3EF;--card:#fff;--txt:#212529;--titulo:#2E2E2E;
--gris:#6B6B6B;--linea:#E6E2DA;--btn:#2B2B2B;--btntxt:#fff;
--ok:#1E6B45;--okf:#EAF4EE;--warn:#9A5B13;--warnf:#FBF3E6;--err:#A8322A;--errf:#FBEDEB}
@media (prefers-color-scheme:dark){:root{--fondo:#151515;--card:#1F1F1F;--txt:#ECECEC;--titulo:#F2F2F2;--gris:#A3A3A3;
--linea:#323232;--madera:#C99A6B;--maderaf:#2A2219;--btn:#ECECEC;--btntxt:#1A1A1A;
--ok:#6CC596;--okf:#14251B;--warn:#E0A55C;--warnf:#2A2013;--err:#EE8A80;--errf:#2C1715}}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--fondo);
color:var(--txt);font-size:15px;line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased}
a{color:inherit}
b,strong,th{font-weight:600}

/* encabezado: barra carbón como la web, logo en serif minúscula */
header{background:var(--carbon);color:#fff;padding:0 12px 0 20px;position:sticky;top:0;z-index:10}
header .contenedor{max-width:760px;margin:0 auto;height:60px;display:flex;align-items:center;gap:12px}
header .logo{font-family:Domine,Georgia,serif;font-size:22px;font-weight:500;letter-spacing:-.01em;text-decoration:none;color:#fff;white-space:nowrap}
header .sub{font-size:12px;color:#BDBDBD;letter-spacing:.04em;margin-left:auto}
header .seccion{margin-left:auto;font-size:13px;color:#CFCFCF;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* botón hamburguesa: área de toque de 44 px */
.hamb{width:44px;height:44px;flex:none;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
background:none;border:0;cursor:pointer;border-radius:6px;padding:0}
.hamb span{display:block;width:22px;height:2px;background:#fff;border-radius:2px}
.hamb:hover,.hamb:focus-visible{background:rgba(255,255,255,.1)}
/* panel lateral */
.velo{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:20}
.menu{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:var(--card);z-index:21;display:flex;flex-direction:column;
transform:translateX(100%);transition:transform .22s ease;box-shadow:-8px 0 24px rgba(0,0,0,.18);visibility:hidden}
.menu.abierto{transform:none;visibility:visible}
body.sin-scroll{overflow:hidden}
.menu-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:18px 16px 14px 20px;border-bottom:1px solid var(--linea)}
.menu-cab b{font-size:15px}
.menu .cerrar{width:40px;height:40px;flex:none;border:0;background:none;font-size:28px;line-height:1;color:var(--gris);cursor:pointer;border-radius:6px}
.menu .cerrar:hover{background:var(--fondo)}
.menu nav{flex:1;overflow-y:auto;padding:8px 0}
.menu nav a,.menu-pie button{display:flex;align-items:center;gap:14px;padding:13px 20px;text-decoration:none;font-size:16px;color:var(--txt);
border-left:3px solid transparent}
.menu nav a:hover,.menu-pie button:hover{background:var(--fondo)}
.menu nav a.act{border-left-color:var(--madera);background:var(--maderaf);font-weight:500}
.menu .ico{width:22px;height:22px;flex:none;color:var(--madera)}
.menu-sep{height:1px;background:var(--linea);margin:8px 20px}
.menu-pie{border-top:1px solid var(--linea);padding:6px 0 14px}
.menu-pie button{width:100%;background:none;border:0;border-left:3px solid transparent;font:inherit;font-size:15px;color:var(--gris);cursor:pointer}
.menu-pie .ico{color:var(--gris)}
@media (prefers-reduced-motion:reduce){.menu{transition:none}}
/* accesos rápidos de la portada */
.accesos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.accesos a{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--linea);border-radius:6px;
padding:16px;text-decoration:none;min-height:96px}
.accesos a:hover{border-color:var(--madera)}
.accesos .ico{width:26px;height:26px;color:var(--madera)}
.accesos b{font-size:15px;font-weight:500;line-height:1.3}
.accesos small{color:var(--gris);font-size:12.5px;line-height:1.35;margin-top:-4px}

main{max-width:760px;margin:0 auto;padding:22px 16px}
h2{font-size:22px;font-weight:500;letter-spacing:-.01em;margin:26px 0 12px;color:var(--titulo)}
.kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin:22px 0 -6px}

.card{background:var(--card);border:1px solid var(--linea);border-radius:6px;padding:18px 20px;margin-bottom:14px}
.uf{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--madera)}
.monto{font-size:34px;font-weight:500;letter-spacing:-.02em;margin:2px 0 6px;color:var(--titulo)}
.muted{color:var(--gris);font-size:14px}
.chip{display:inline-block;padding:3px 12px;border-radius:999px;font-size:12.5px;font-weight:500}
.pagado,.acreditado,.a_favor,.compensa{background:var(--okf);color:var(--ok)}
.informado{background:var(--warnf);color:var(--warn)}
.pendiente,.rechazado{background:var(--errf);color:var(--err)}

.btn{display:inline-block;background:var(--btn);color:var(--btntxt);border:1px solid var(--btn);border-radius:4px;
padding:11px 18px;font:500 14px/1.2 Poppins,system-ui,sans-serif;letter-spacing:.02em;text-decoration:none;cursor:pointer}
.btn:hover{opacity:.88}
.btn.sec{background:transparent;color:var(--txt);border-color:var(--linea)}
.btn.sec:hover{border-color:var(--txt);opacity:1}
.btn.oro{background:var(--madera);border-color:var(--madera);color:#fff}
.btn.chico{padding:7px 12px;font-size:13px}

form .campo{margin-bottom:14px}
label{display:block;font-size:13px;font-weight:500;margin-bottom:5px}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--linea);border-radius:4px;font:inherit;font-size:16px;
background:var(--card);color:var(--txt)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--madera);outline-offset:-1px;border-color:transparent}
input[type=checkbox]{width:auto}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:9px 6px;border-bottom:1px solid var(--linea);text-align:left}
th{font-weight:500;color:var(--titulo)}
td.n,th.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
details summary{cursor:pointer}

.flash{padding:11px 14px;border-radius:4px;margin-bottom:14px}
.flash.ok{background:var(--okf);color:var(--ok)}.flash.error{background:var(--errf);color:var(--err)}
.aviso{background:var(--card);border:1px solid var(--linea);border-left:3px solid var(--madera);padding:12px 16px;
border-radius:4px;margin-bottom:12px;font-size:14px}
.fila{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tabla-scroll{overflow-x:auto}
.barra{height:8px;background:var(--linea);border-radius:99px;overflow:hidden}
.barra>div{height:100%;background:var(--ok)}
footer{text-align:center;color:var(--gris);font-size:12px;padding:28px 16px 36px}

/* normas: se leen y se opinan en la app */
h3{font-size:18px;font-weight:500;margin:2px 0 8px;color:var(--titulo)}
.seccion,#n-general{scroll-margin-top:60px}
.norma{display:grid;grid-template-columns:42px 1fr;gap:10px;padding:11px 0;border-top:1px solid var(--linea);scroll-margin-top:60px}
.norma:target{background:var(--maderaf);margin:0 -12px;padding:11px 12px;border-radius:4px}
.norma .num{color:var(--madera);font-weight:500;font-variant-numeric:tabular-nums}
.opinar{margin-top:4px}
.opinar summary{display:inline-block;font-size:13px;color:var(--gris);cursor:pointer;list-style:none}
.opinar summary::-webkit-details-marker{display:none}
.opinar summary:hover{color:var(--txt)}
.opinar[data-con] summary{color:var(--madera);font-weight:500}
.opinar[open] summary{margin-bottom:6px}
.comentario{background:var(--fondo);border-radius:4px;padding:9px 12px;margin:6px 0;font-size:14px}
.comentario.admin{border-left:3px solid var(--madera)}
.hilo{margin-bottom:10px}
.comentario.respuesta,.form-com.respuesta{margin-left:22px}
.comentario .quien{font-size:13px;margin-bottom:2px}
.form-com{display:flex;gap:8px;align-items:flex-end;margin-top:6px}
.form-com textarea{font-size:14px;resize:vertical}
button.link{background:none;border:0;color:var(--gris);text-decoration:underline;cursor:pointer;font:inherit;font-size:12px;padding:0 4px}
.buscador{margin:18px 0 10px}
.indice{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.indice a{font-size:12.5px;text-decoration:none;padding:4px 10px;border:1px solid var(--linea);border-radius:999px;
color:var(--gris);background:var(--card)}
.indice a:hover{color:var(--txt);border-color:var(--txt)}
.indice-sel{display:none;margin:0 0 16px}
/* en el celu, en vez de una fila que se corre a la derecha, un desplegable "Ir a una sección" */
@media (max-width:560px){.form-com{flex-direction:column;align-items:stretch}
  .indice{display:none}.indice-sel{display:block}}

/* reclamos */
.est-recibido{background:var(--errf);color:var(--err)}
.est-en_curso{background:var(--warnf);color:var(--warn)}
.est-resuelto{background:var(--okf);color:var(--ok)}
.est-descartado{background:var(--linea);color:var(--gris)}
a.reclamo-item{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;text-decoration:none}
a.reclamo-item:hover{border-color:var(--gris)}
.reclamo-item img,.reclamo-item .sinfoto{width:64px;height:64px;border-radius:4px;object-fit:cover;background:var(--fondo)}
.reclamo-item .sinfoto{display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--madera)}
.titulo-rec{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.miniaturas{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.miniaturas img{width:96px;height:96px;object-fit:cover;border-radius:4px;border:1px solid var(--linea)}
.tipos{display:grid;gap:8px}
.tipo{display:flex;gap:10px;align-items:flex-start;font-weight:400;padding:12px;border:1px solid var(--linea);
border-radius:6px;cursor:pointer;margin:0}
.tipo:has(input:checked){border-color:var(--madera);background:var(--maderaf)}
.tipo input{width:auto;margin-top:4px}
@media (max-width:560px){a.reclamo-item{grid-template-columns:52px 1fr}.reclamo-item img,.reclamo-item .sinfoto{width:52px;height:52px}
  a.reclamo-item .chip{grid-column:2;justify-self:start}}

/* ingreso: render del edificio al costado, como la portada de la web */
.portada{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin:10px 0 0}
.portada .foto{aspect-ratio:4/5;border-radius:4px;background:#2B2B2B center/cover no-repeat;
background-image:url("https://ss-cnt-001c.esmsv.com/r/content/host1/88661d1af34f092d9c63090151f0825a/editor/Render%20frente%20nocturno.webp")}
.portada h2{font-size:34px;line-height:1.2;margin:8px 0 14px}
@media (max-width:720px){.portada{grid-template-columns:1fr;gap:20px}.portada .foto{aspect-ratio:16/10;order:-1}
  .portada h2{font-size:26px}}
/* liquidación leída en la app */
.volver{margin:0;font-size:14px}.volver a{color:var(--gris);text-decoration:none}.volver a:hover{color:var(--txt)}
.resumen-uf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px}
.monto.chico{font-size:24px;margin:0}
.hojas{display:flex;flex-direction:column;gap:12px;margin-bottom:10px}
.hojas img{display:block;width:100%;height:auto;border:1px solid var(--linea);border-radius:4px;background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.06)}
.doc{padding:12px 0;border-bottom:1px solid var(--linea)}.doc:last-child{border-bottom:0;padding-bottom:0}
.doc a{text-decoration:none}.doc a b{font-weight:500}.doc .muted a{text-decoration:underline}
/* textos largos sin espacios (mails, links) cortan la línea en vez de salirse de la pantalla */
main{overflow-wrap:anywhere}
/* avisos push */
.menu-avisos{border-top:1px solid var(--linea);padding:8px 20px}
.menu-avisos button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:8px 0;font:inherit;
font-size:14px;color:var(--txt);cursor:pointer;text-align:left}
.menu-avisos p{font-size:12.5px;margin:6px 0}
.punto{width:10px;height:10px;border-radius:50%;border:2px solid var(--gris);flex:none}
.punto.on{background:var(--ok);border-color:var(--ok)}
.avisos-card{border-color:var(--madera);background:var(--maderaf)}