/* meEdificio · Portal. Sistema visual v1.1, densidad "escritorio" (administración). */
:root{
  --tinta:#0C1F2E; --sotano:#132B3D; --hondo:#0A1922;
  --plano:#12324B; --plano-alto:#1D4E75;
  --cal:#F4F2ED; --hueso:#E7E4DC; --hueso-fuerte:#D6D2C6; --blanco:#FFFFFF;
  --humo:#A8B2BC; --concreto:#5B6874;
  --vivo:#35D6C4; --vivo-claro:#0A7A6E;
  --ok:#4FBA88; --ok-claro:#1F6E4A;
  --atencion:#F0B449; --atencion-claro:#8A5D0A;
  --critico:#F2756A; --critico-claro:#A32E27;
  --borde-osc:#22394A; --borde-fuerte:#35506A;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --sans:"Inter","Segoe UI","Helvetica Neue",-apple-system,system-ui,Arial,sans-serif;
  --r-control:10px; --r-panel:16px;
}
*{box-sizing:border-box}
/* El atributo `hidden` sólo trae display:none de la hoja del navegador, y cualquier
   regla de autor con `display` lo gana (p. ej. .centro{display:flex}). Sin este !important
   la vista de login seguía visible sobre el panel después de entrar. */
[hidden]{display:none !important}
body{margin:0;background:var(--cal);color:var(--tinta);font-family:var(--sans);
     line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2{letter-spacing:-.02em;margin:0}
:is(a,button,input,[tabindex]):focus-visible{outline:3px solid var(--vivo-claro);
     outline-offset:3px;border-radius:6px}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* ── marca ── */
.marca{display:flex;align-items:center;gap:10px}
.marca-txt{font-size:18px;letter-spacing:-.04em;font-weight:400}
.marca-txt b{font-weight:650}

/* ── login ── */
.centro{min-height:100vh;display:flex;align-items:center;justify-content:center;
        padding:24px;background:var(--tinta)}
.tarjeta-login{background:var(--blanco);border-radius:var(--r-panel);padding:34px 32px;
        width:100%;max-width:412px;box-shadow:0 24px 60px rgba(0,0,0,.32)}
.tarjeta-login h1{font-size:23px;font-weight:600;margin:22px 0 4px}
.apoyo{color:var(--concreto);font-size:13.5px;margin:0 0 22px}
.tarjeta-login label{display:block;font-size:13px;color:var(--concreto);margin:0 0 6px}
.tarjeta-login input,.tarjeta-login select{width:100%;background:var(--blanco);
        border:1px solid var(--hueso-fuerte);border-radius:var(--r-control);
        padding:12px 14px;font:inherit;color:var(--tinta);margin:0 0 16px}
.tarjeta-login select{appearance:none;cursor:pointer;
        background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235B6874' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
        background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.tarjeta-login select:invalid{color:#8A929A}
.tarjeta-login input::placeholder{color:#9AA3AC}
/* ── autocompletar de copropiedad ── */
.autocompletar{position:relative;margin-bottom:16px}
.autocompletar input[type="text"]{margin-bottom:0}
.sugerencias{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:10;
        background:var(--blanco);border:1px solid var(--hueso-fuerte);
        border-radius:var(--r-control);box-shadow:0 12px 28px rgba(12,31,46,.16);
        list-style:none;margin:0;padding:4px;max-height:240px;overflow-y:auto}
.sugerencias li{padding:10px 12px;border-radius:7px;cursor:pointer;font-size:14px}
.sugerencias li:hover,.sugerencias li[aria-selected="true"]{background:rgba(10,122,110,.09)}
.sugerencias li .ciudad{display:block;font-size:12px;color:var(--concreto)}
.sugerencias li.sin-resultados{color:var(--concreto);cursor:default;font-size:13px}
.sugerencias li.sin-resultados:hover{background:transparent}

.error{background:rgba(163,46,39,.08);border:1px solid rgba(163,46,39,.3);
        color:var(--critico-claro);border-radius:var(--r-control);padding:10px 13px;
        font-size:13.5px;margin:0 0 14px}
.btn{width:100%;background:var(--vivo-claro);color:#fff;border:0;border-radius:var(--r-control);
        padding:13px 20px;font:inherit;font-weight:650;font-size:15px;cursor:pointer}
.btn:hover{background:#0d9184}
.btn[disabled]{opacity:.55;cursor:default}
.pie-login{font-size:12.5px;color:var(--concreto);margin:16px 0 0;text-align:center}
.pie-login a{color:var(--vivo-claro)}

/* ── barra superior ── */
.barra{background:var(--tinta);color:var(--cal);position:sticky;top:0;z-index:20}
.barra-int{max-width:1120px;margin:0 auto;padding:0 22px;height:60px;
        display:flex;align-items:center;justify-content:space-between;gap:16px}
.barra .marca-txt{color:var(--cal)}
.barra-der{display:flex;align-items:center;gap:14px}
.quien{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--humo)}
.chip-rol{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
        background:rgba(53,214,196,.14);color:var(--vivo);padding:4px 10px;border-radius:99px;
        font-weight:600}
.btn-plano{background:transparent;color:var(--cal);border:1px solid var(--borde-fuerte);
        border-radius:var(--r-control);padding:8px 15px;font:inherit;font-size:13.5px;cursor:pointer}
.btn-plano:hover{border-color:var(--vivo);color:var(--vivo)}

/* ── contenido ── */
.contenido{max-width:1120px;margin:0 auto;padding:28px 22px 80px;
        display:flex;flex-direction:column;gap:34px}
.titulo-sec{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
        color:var(--vivo-claro);font-family:var(--mono);margin:0 0 14px}

/* ── selector de rol ── */
.panel-rol{background:var(--blanco);border:1px dashed var(--hueso-fuerte);
        border-radius:var(--r-panel);padding:18px 20px}
.panel-rol-cab{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.panel-rol-cab b{font-size:14.5px}
.nota-dev{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
        color:var(--concreto)}
.roles{display:flex;gap:8px;flex-wrap:wrap}
.rol{background:var(--cal);border:1px solid var(--hueso-fuerte);color:var(--tinta);
        border-radius:99px;padding:7px 15px;font:inherit;font-size:13px;cursor:pointer}
.rol:hover{border-color:var(--vivo-claro);color:var(--vivo-claro)}
.rol[aria-pressed="true"]{background:var(--vivo-claro);border-color:var(--vivo-claro);
        color:#fff;font-weight:650}

/* ── tarjetas de copropiedad ── */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.tarjeta{background:var(--blanco);border:1px solid var(--hueso);border-radius:var(--r-panel);
        padding:20px 22px;cursor:pointer;text-align:left;font:inherit;color:var(--tinta);
        transition:border-color .15s}
.tarjeta:hover{border-color:var(--hueso-fuerte)}
.tarjeta[aria-pressed="true"]{border-color:var(--vivo-claro);
        box-shadow:0 0 0 1px var(--vivo-claro)}
.tarjeta h3{font-size:16.5px;margin:0 0 4px;font-weight:600}
.tarjeta .nit{font-family:var(--mono);font-size:11.5px;color:var(--concreto)}
.tarjeta .dir{font-size:13px;color:var(--concreto);margin:2px 0 14px}
.cifras{display:flex;gap:22px}
.cifra .n{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cifra .l{font-size:10.5px;font-family:var(--mono);letter-spacing:.07em;text-transform:uppercase;
        color:var(--concreto)}
.cifra .n.bien{color:var(--ok-claro)}
.cifra .n.mal{color:var(--critico-claro)}

/* ── mapa de unidades ── */
.cab-unidades{display:flex;justify-content:space-between;align-items:baseline;
        flex-wrap:wrap;gap:10px}
.leyenda{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.leyenda span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--concreto)}
.cua{width:12px;height:10px;border-radius:3px;border:1px solid var(--hueso-fuerte);
        background:var(--cal);display:inline-block}
.cua.c-apto{background:rgba(31,110,74,.22);border-color:rgba(31,110,74,.4)}
.cua.c-local{background:rgba(18,50,75,.16);border-color:rgba(18,50,75,.32)}
.nota-leyenda{font-style:italic;opacity:.85}
.mapa-envoltura{background:var(--blanco);border:1px solid var(--hueso);
        border-radius:var(--r-panel);padding:20px;overflow-x:auto}
.mapa{display:grid;grid-template-columns:auto 1fr;gap:7px 12px;align-items:center;min-width:520px}
.piso{font-family:var(--mono);font-size:10.5px;color:var(--concreto);text-align:right}
.fila{display:grid;gap:5px}
.u{aspect-ratio:1.35;border-radius:4px;background:var(--cal);border:1px solid var(--hueso-fuerte);
        transition:transform .12s;cursor:default}
.u:hover{transform:scale(1.2)}
.u.apto{background:rgba(31,110,74,.22);border-color:rgba(31,110,74,.4)}
.u.local{background:rgba(18,50,75,.16);border-color:rgba(18,50,75,.32)}

/* ── tabla ── */
/* Buscador + contenedor con scroll propio: 265 filas sueltas hacían una página
   de 13.000 px donde se perdía todo lo demás. */
.barra-tabla{display:flex;align-items:center;justify-content:space-between;gap:14px;
        flex-wrap:wrap;margin:16px 0 10px}
.barra-tabla input{flex:1;min-width:220px;max-width:360px;background:var(--blanco);
        border:1px solid var(--hueso-fuerte);border-radius:var(--r-control);
        padding:10px 13px;font:inherit;font-size:13.5px;color:var(--tinta)}
.barra-tabla .apoyo{margin:0;white-space:nowrap}
.tabla-envoltura{background:var(--blanco);border:1px solid var(--hueso);
        border-radius:var(--r-panel);overflow:auto;max-height:60vh}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.09em;
        text-transform:uppercase;color:var(--concreto);font-weight:500;
        padding:14px 16px 10px;border-bottom:1px solid var(--hueso);
        position:sticky;top:0;background:var(--blanco);z-index:1}
td{padding:10px 16px;border-bottom:1px solid #F2EFE8;font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FAF8F4}
td.ident{font-weight:600}
.pie-tabla{margin-top:10px}

/* ── panel del residente ── */
.tarjeta-unidad{background:var(--blanco);border:1px solid var(--hueso);
        border-radius:var(--r-panel);padding:24px 26px}
.tarjeta-unidad .cab{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.tarjeta-unidad .ident{font-size:38px;font-weight:600;letter-spacing:-.04em;
        font-variant-numeric:tabular-nums;line-height:1}
.chip-vinculo{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
        text-transform:uppercase;font-weight:600;padding:5px 11px;border-radius:99px;
        background:rgba(10,122,110,.12);color:var(--vivo-claro)}
.tarjeta-unidad .sub{color:var(--concreto);font-size:13.5px;margin:0 0 18px}
.datos-unidad{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
        gap:16px;border-top:1px solid var(--hueso);padding-top:16px}
.dato .v{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.dato .k{font-size:10.5px;font-family:var(--mono);letter-spacing:.07em;
        text-transform:uppercase;color:var(--concreto);margin-top:2px}

.hogar{list-style:none;margin:0;padding:0;background:var(--blanco);
        border:1px solid var(--hueso);border-radius:var(--r-panel);overflow:hidden}
.hogar li{display:flex;align-items:center;gap:14px;padding:14px 20px;
        border-bottom:1px solid #F2EFE8}
.hogar li:last-child{border-bottom:0}
.hogar .inicial{width:36px;height:36px;border-radius:99px;background:var(--cal);
        display:flex;align-items:center;justify-content:center;font-weight:650;
        color:var(--plano);flex-shrink:0}
.hogar .quien-n{font-size:14.5px;font-weight:600}
.hogar .quien-r{font-size:12px;color:var(--concreto)}
.hogar .yo{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.07em;
        text-transform:uppercase;color:var(--vivo-claro);background:rgba(10,122,110,.1);
        padding:4px 10px;border-radius:99px}

.ficha{background:var(--blanco);border:1px solid var(--hueso);
        border-radius:var(--r-panel);padding:22px 24px}
.ficha h3{font-size:17px;margin:0 0 4px;font-weight:600}
.ficha .dir{color:var(--concreto);font-size:13.5px;margin:0 0 16px}

.proximo{list-style:none;margin:0;padding:0;display:grid;
        grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.proximo li{background:var(--blanco);border:1px dashed var(--hueso-fuerte);
        border-radius:var(--r-control);padding:14px 16px}
.proximo b{display:block;font-size:14px;font-weight:600;margin-bottom:2px}
.proximo span{font-size:12px;color:var(--concreto)}

/* ── cartera ── */
.saldo-caja{background:var(--blanco);border:1px solid var(--hueso);
        border-radius:var(--r-panel);padding:24px 26px;margin-bottom:14px}
.saldo-caja .unidad{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
        text-transform:uppercase;color:var(--concreto)}
.saldo-caja .monto{font-size:36px;font-weight:600;letter-spacing:-.03em;
        font-variant-numeric:tabular-nums;line-height:1.15;margin:2px 0 4px}
.saldo-caja .monto.debe{color:var(--critico-claro)}
.saldo-caja .monto.al-dia{color:var(--ok-claro)}
.saldo-caja .monto.favor{color:var(--vivo-claro)}
.saldo-caja .leyenda-saldo{font-size:13.5px;color:var(--concreto);margin:0}
.cuentas{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--hueso)}
.cuentas li{display:flex;align-items:center;gap:14px;padding:9px 0;
        border-bottom:1px solid #F4F1EA;font-size:13.5px}
.cuentas li:last-child{border-bottom:0}
.cuentas .per{font-family:var(--mono);font-size:12px;min-width:66px}
.cuentas .ref{font-family:var(--mono);font-size:11.5px;color:var(--concreto);
        margin-left:auto;padding-right:14px}
.cuentas .val{font-variant-numeric:tabular-nums;font-weight:600;min-width:110px;text-align:right}
.et{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
        font-weight:600;padding:3px 9px;border-radius:99px}
.et.pag{background:rgba(31,110,74,.1);color:var(--ok-claro)}
.et.pen{background:rgba(138,93,10,.12);color:var(--atencion-claro)}
.et.ven{background:rgba(163,46,39,.1);color:var(--critico-claro)}

.pago-fila{background:var(--blanco);border:1px solid var(--hueso);
        border-radius:var(--r-panel);padding:16px 20px;margin-bottom:10px}
.pago-cab{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.pago-cab .m{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.pago-cab .f{font-size:12.5px;color:var(--concreto)}
.pago-desc{font-size:12.5px;color:var(--concreto);margin:4px 0 10px;
        word-break:break-word;font-family:var(--mono)}
.sugerencias-pago{display:flex;gap:8px;flex-wrap:wrap}
.sug{background:var(--cal);border:1px solid var(--hueso-fuerte);border-radius:99px;
        padding:7px 14px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--tinta)}
.sug:hover{border-color:var(--vivo-claro);color:var(--vivo-claro)}
.sug b{font-weight:650}
.sug .por{color:var(--concreto);font-size:11px}

/* ── vacío ── */
.vacio{background:var(--blanco);border:1.5px dashed var(--hueso-fuerte);
        border-radius:var(--r-panel);padding:34px 24px;text-align:center}
.vacio b{display:block;font-size:15.5px;margin-bottom:5px}
.vacio p{color:var(--concreto);font-size:13.5px;margin:0}

@media (max-width:640px){
  .barra-int{padding:0 16px}
  .contenido{padding:22px 16px 60px}
  .quien span:first-child{display:none}
}