/* ---- Tipografías de godoifills.com (marca) ---- */
@font-face{font-family:'Fraunces';src:url('https://godoifills.com/fonts/Fraunces-normal-latin.woff2') format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'Fraunces';font-style:italic;src:url('https://godoifills.com/fonts/Fraunces-italic-latin.woff2') format('woff2');font-weight:300 600;font-display:swap}
@font-face{font-family:'Archivo';src:url('https://godoifills.com/fonts/Archivo-normal-latin.woff2') format('woff2');font-weight:300 600;font-display:swap}

:root{
  --bg:#1D1C1A; --bar:#26241F; --panel:#2A2823; --panel2:#332F29; --line:#453F36;
  --text:#F1ECE2; --soft:#B4AB9B; --dim:#8A8172;
  --bronze:#C79C5E; --bronze-lt:#DcC094; --bronze-dk:#A8814E;
  --verde:#66A15A; --ambar:#D6A23F; --rojo:#CB5A4C; --gris:#6A635A;
  --display:'Fraunces',Georgia,serif; --body:'Archivo',system-ui,-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:#141311;color:var(--text);font-family:var(--body);font-weight:300;font-size:14px;-webkit-font-smoothing:antialiased;padding:12px}

/* marco de la app: ventana con cantos redondeados y navegación fija dentro */
.app-frame{background:var(--bg);border:1px solid var(--line);border-radius:16px;
  height:calc(100vh - 24px);overflow-y:auto;overflow-x:hidden;position:relative}
@media(max-width:640px){
  body{padding:6px}
  .app-frame{height:calc(100vh - 12px);border-radius:12px}
}
em{font-style:italic;color:var(--bronze-lt)}
a{color:inherit;text-decoration:none}

/* ---------- Barra superior ---------- */
.topbar{display:flex;align-items:stretch;gap:1rem;background:var(--bar);border-bottom:1px solid var(--line);
  padding:0 1rem;position:sticky;top:0;z-index:20;min-height:52px}
.brand{display:flex;flex-direction:column;justify-content:center;padding-right:1rem;border-right:1px solid var(--line)}
.brand-name{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.02em;color:var(--bronze-lt);line-height:1}
.brand-sub{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-top:2px}
.tabs{display:flex;align-items:center;flex:1;flex-wrap:wrap;gap:.25rem}
.tab{display:flex;align-items:center;padding:.42rem .9rem;font-size:12.5px;color:var(--soft);
  border:1px solid transparent;border-radius:9px;letter-spacing:.01em;cursor:pointer;transition:.15s}
.tab:hover{color:var(--text)}
.tab.on{color:var(--bronze-lt);border-color:var(--bronze-dk);background:rgba(199,156,94,.10)}
.tab[data-off]{color:var(--dim);cursor:default}
.tab[data-off]:hover{color:var(--dim)}
.userbox{display:flex;align-items:center;gap:.9rem;font-size:12px;color:var(--soft)}
.ejercici{color:var(--dim);letter-spacing:.04em}
.user{color:var(--bronze-lt);font-weight:500}
.logout button{background:transparent;border:1px solid var(--line);color:var(--soft);border-radius:5px;
  padding:.3rem .7rem;font:inherit;font-size:11.5px;cursor:pointer}
.logout button:hover{border-color:var(--bronze-dk);color:var(--text)}

/* ---------- Contenido ---------- */
.content{padding:1rem 1.1rem 3rem}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.8rem}
.panel-head h1{font-family:var(--display);font-weight:400;font-size:22px;color:var(--text)}
.stats{display:flex;gap:.5rem;flex-wrap:wrap}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:.3rem .7rem;font-size:12px;color:var(--soft)}
.stat b{color:var(--text);font-weight:600}
.stat.warn b{color:var(--ambar)}
.stat.alert b{color:var(--rojo)}
.stat.total b{color:var(--bronze-lt)}
.stat.click{cursor:pointer;text-decoration:none;transition:.15s}
.stat.click:hover{border-color:var(--bronze-dk);color:var(--text)}
.stat.click.on{border-color:var(--bronze);background:rgba(199,156,94,.12);color:var(--text)}
.ver-banner{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem;font-size:12.5px;color:var(--soft)}
.ver-banner b{color:var(--bronze-lt);font-weight:600}
.ver-todas{color:var(--soft);border:1px solid var(--line);border-radius:5px;padding:.15rem .5rem;text-decoration:none;transition:.15s}
.ver-todas:hover{border-color:var(--bronze-dk);color:var(--text)}
.fila-vacia{padding:1.2rem .7rem;color:var(--dim);font-style:italic;text-align:center}

/* ---------- Modal / popup dentro de la página ---------- */
.brand{text-decoration:none;transition:.15s}
.brand:hover .brand-name{color:var(--bronze)}
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:5vh 20px}
.modal-backdrop{position:absolute;inset:0;background:rgba(10,9,8,.66)}
.modal-card{position:relative;z-index:1;width:100%;max-width:880px;max-height:88vh;overflow:auto;
  background:var(--bg);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.55);padding:1.3rem 1.5rem}
.modal-close{position:absolute;top:1rem;right:1.1rem;background:var(--panel2);border:1px solid var(--line);
  color:var(--soft);border-radius:6px;padding:.28rem .65rem;font-size:12px;cursor:pointer;transition:.15s}
.modal-close:hover{border-color:var(--bronze-dk);color:var(--text)}
.modal-cargando{color:var(--soft);padding:2rem;text-align:center}
.modal .sub-title{font-family:var(--display);font-weight:400;font-size:20px;color:var(--text);
  margin-bottom:.3rem;padding-right:6rem}
body.modal-open{overflow:hidden}

/* ---------- Tabla ---------- */
.tabla-wrap{border:1px solid var(--line);border-radius:8px;overflow:auto;background:var(--panel)}
.tabla{width:100%;border-collapse:collapse;font-size:13px}
.tabla thead th{position:sticky;top:0;background:var(--panel2);color:var(--bronze-lt);
  font-weight:500;text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.tabla tbody td{padding:.5rem .7rem;border-bottom:1px solid rgba(69,63,54,.5);vertical-align:middle}
.tabla tbody tr:hover{background:rgba(199,156,94,.06)}
.tabla tbody tr.libre{opacity:.62}
.c-num{text-align:right;white-space:nowrap}
/* Cabecera de columna numérica alineada con sus cifras (vence a `.tabla thead th`) */
.tabla thead th.c-num{text-align:right}
/* Columna Índice aplicable: cabecera y etiqueta arrancan en la misma vertical */
.c-indice .act:first-child{margin-left:0}
.c-sem{white-space:nowrap}
.c-cobro{white-space:nowrap}
.dim{color:var(--dim)}
.small{font-size:11px}
.renta{font-variant-numeric:tabular-nums;color:var(--text)}
.c-denom{color:var(--text)}
.libre-lbl{color:var(--dim);font-style:italic}

/* tipo de propiedad (columna propia) */
.tipo{display:inline-block;font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--soft);border:1px solid var(--line);border-radius:4px;padding:.1rem .45rem;
  vertical-align:middle;background:var(--panel2)}
.t-vivienda{color:var(--soft)}
.t-habitacion{color:#b8c48f;border-color:#525c3f}
.t-local{color:var(--bronze-lt);border-color:var(--bronze-dk)}
.t-garaje{color:#9fb6c9;border-color:#3f556b}

/* total (destacado) */
.total-col{color:var(--bronze-lt);font-weight:500}

/* impresora */
.c-print{text-align:center;white-space:nowrap}
.print-btn{display:inline-flex;color:var(--soft);padding:.2rem;border-radius:5px;transition:.15s}
.print-btn:hover{color:var(--bronze-lt);background:rgba(199,156,94,.12)}
.pdf-btn{display:inline-block;font-size:11.5px;color:var(--bronze-lt);border:1px solid var(--bronze-dk);
  border-radius:5px;padding:.25rem .7rem;transition:.15s}
.pdf-btn:hover{background:var(--bronze);color:#1a1815}

/* página de recibos */
.volver{font-size:12px;color:var(--soft)}
.volver:hover{color:var(--bronze-lt)}
.sub-recibos{color:var(--soft);font-size:13px;margin-bottom:1rem}
.tabla-wrap.estrecha{max-width:760px}
.vacio{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:1.5rem;
  color:var(--soft);display:grid;gap:.4rem;max-width:640px}

/* semáforo */
.sem{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.45rem;vertical-align:middle;
  box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.sem-verde{background:var(--verde)}
.sem-ambar{background:var(--ambar);box-shadow:0 0 6px rgba(214,162,63,.5)}
.sem-rojo{background:var(--rojo);box-shadow:0 0 7px rgba(203,90,76,.6)}
.sem-gris{background:var(--gris)}

/* etiqueta actualización */
.act{display:inline-block;font-size:10.5px;letter-spacing:.03em;padding:0 .35rem;border-radius:3px;border:1px solid var(--line);margin-left:.2rem}
.act-irav{color:#8fd0c0;border-color:#3f6b62}
.act-ipc{color:#c9b06f;border-color:#6b5f3f}
.act-exento{color:var(--dim)}
.act-revisar{color:var(--rojo);border-color:#6b3f3a}

/* forma de cobro */
.fp{display:inline-block;font-size:10.5px;letter-spacing:.03em;padding:.05rem .4rem;border-radius:3px;
  background:var(--panel2);border:1px solid var(--line);color:var(--soft)}
.fp-g1,.fp-g2{color:var(--bronze-lt);border-color:var(--bronze-dk)}

/* cabeceras ordenables */
.sort{display:inline-flex;align-items:center;gap:.3rem;color:var(--bronze-lt);white-space:nowrap}
.sort:hover{color:var(--text)}
.ar{font-size:10px;color:var(--dim)}
.ar.on{color:var(--bronze)}

/* fechas alineadas */
.c-fecha{white-space:nowrap}
.fecha{display:inline-block;min-width:74px;font-variant-numeric:tabular-nums;color:var(--text)}

/* % del índice */
.pct{color:var(--bronze-lt);font-variant-numeric:tabular-nums;font-size:12px}

/* barra de índices INE */
.indices{background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:.4rem .8rem;margin-bottom:.7rem;font-size:12.5px;color:var(--soft);display:inline-block}
.indices b{color:var(--bronze-lt);font-variant-numeric:tabular-nums}

/* leyenda */
.leyenda{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-top:.8rem;font-size:11.5px;color:var(--dim)}
.leyenda .sem{margin-right:.25rem}
.leyenda b{color:var(--soft);font-weight:500}
.leyenda .sep{color:var(--line)}

/* ---------- Login ---------- */
.login-body{min-height:calc(100vh - 24px);display:grid;place-items:center;border-radius:16px;
  background:radial-gradient(1200px 600px at 50% -10%,#2A2823 0%,#1A1917 60%)}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:2.4rem 2.2rem;width:min(360px,92vw);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.login-brand{font-family:var(--display);font-weight:600;font-size:22px;color:var(--bronze-lt);text-align:center}
.login-sub{text-align:center;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-top:4px;margin-bottom:1.8rem}
.login-form{display:grid;gap:1rem}
.login-form label{display:grid;gap:.35rem;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--soft)}
.login-form input{font:inherit;font-size:14px;background:#211F1B;border:1px solid var(--line);border-radius:7px;
  padding:.65rem .8rem;color:var(--text)}
.login-form input:focus{outline:none;border-color:var(--bronze)}
.login-form button{margin-top:.6rem;background:var(--bronze);color:#1a1815;border:0;border-radius:7px;
  padding:.7rem;font:inherit;font-weight:600;letter-spacing:.03em;cursor:pointer;transition:.15s}
.login-form button:hover{background:var(--bronze-lt)}
.login-error{background:rgba(203,90,76,.15);border:1px solid #6b3f3a;color:#e6a79f;
  padding:.5rem .7rem;border-radius:6px;font-size:12px;text-transform:none;letter-spacing:0}

/* ojo mostrar/ocultar contraseña — cuadradito oscuro, ojo oro */
.eye-wrap{position:relative;display:block}
.eye-wrap input{width:100%;padding-right:3rem}
.eye-wrap .eye-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  margin:0;padding:0;width:36px;height:34px;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  color:var(--bronze-lt);cursor:pointer;line-height:0}
.eye-wrap .eye-btn:hover{background:#403b34;color:var(--bronze)}
.eye-wrap .eye-btn.on{color:var(--bronze)}
.eye-wrap .eye-btn svg{display:block}