
:root{
  --bg:#0b0c10; --panel:#11131a; --ink:#e9ebef; --muted:#a3a8b5; --stroke:#1f2230;
  --have:#00d07f; --wish:#3aa0ff; --want:#ffb020; --need:#ff4d5a;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,#0b0c10 0,#0a0a0f 60%,#0b0c10 100%);color:var(--ink);font:15.8px/1.55 system-ui,Roboto,Arial,sans-serif}
.top{max-width:1200px;margin:auto;padding:1.25rem 1rem 0}
h1{margin:.2rem 0 .6rem;font-weight:750;letter-spacing:.2px}
.hint{color:var(--muted);margin:.2rem 0 1rem}
.filters{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:.4rem 0 1rem}
.filters span{opacity:.85}
.filters label{display:inline-flex;gap:.4rem;align-items:center;background:#121420;border:1px solid var(--stroke);padding:.3rem .55rem;border-radius:999px;cursor:pointer}
.filters input{accent-color:#39f}
.sheet{max-width:1200px;margin:auto;padding:0 1rem 2rem}
.table{border:1px solid var(--stroke);border-radius:16px;background:rgba(17,19,26,.7);backdrop-filter:blur(6px);overflow:hidden}
.thead .tr, .tbody .tr{display:grid;grid-template-columns: 1.6fr .5fr .5fr .5fr .5fr;align-items:center}
.head{background:#0f1118;position:sticky;top:0;z-index:5;border-bottom:1px solid var(--stroke)}
.th,.td{padding:.65rem .75rem}
.th{color:#cfd3df;text-transform:uppercase;font-size:.78rem;letter-spacing:.12em}
.tbody{display:block}
.tr{border-bottom:1px solid #171a27}
.tr:last-child{border-bottom:0}
.row{--accent: #3aa0ff; display:grid; grid-template-columns:inherit; background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent)}
.row:hover{background:linear-gradient(180deg,rgba(255,255,255,0.035),transparent)}
.col-item{font-weight:600}
.td input[type=checkbox]{width:1.15rem;height:1.15rem;accent-color:#7aa0ff}
/* Accent by selection */
.row:has(.col-need input:checked){--accent:var(--need)}
.row:has(.col-want input:checked):not(:has(.col-need input:checked)){--accent:var(--want)}
.row:has(.col-wish input:checked):not(:has(.col-need input:checked)):not(:has(.col-want input:checked)){--accent:var(--wish)}
.row:has(.col-have input:checked):not(:has(.col-need input:checked)):not(:has(.col-want input:checked)):not(:has(.col-wish input:checked)){--accent:var(--have)}
.row{box-shadow: inset 4px 0 0 var(--accent,transparent)}
.row .td{border-left:1px solid #151827}
.row .td:first-child{border-left:none}
/* Filters -> hide categories */
#f-salud:not(:checked) ~ .sheet .row.cat-salud{display:none}
#f-outdoor:not(:checked) ~ .sheet .row.cat-outdoor{display:none}
#f-infra:not(:checked) ~ .sheet .row.cat-infra{display:none}
#f-comms:not(:checked) ~ .sheet .row.cat-comms{display:none}
#f-alimentos:not(:checked) ~ .sheet .row.cat-alimentos{display:none}
#f-servicios:not(:checked) ~ .sheet .row.cat-servicios{display:none}
#f-m-sica:not(:checked) ~ .sheet .row.cat-m-sica{display:none}
#f-eventos:not(:checked) ~ .sheet .row.cat-eventos{display:none}
#f-varios:not(:checked) ~ .sheet .row.cat-varios{display:none}
/* Responsive */
@media (max-width:760px){
  .thead{display:none}
  .tr{grid-template-columns: 1fr 1fr; grid-template-areas:
    "item item"
    "have wish"
    "want need";
  }
  .col-item{grid-area:item}
  .col-have{grid-area:have}
  .col-wish{grid-area:wish}
  .col-want{grid-area:want}
  .col-need{grid-area:need}
  .row .td{border-left:none}
}
/* Print */
@media print{
  body{background:#fff;color:#000}
  .filters{display:none}
  .table{border:1px solid #000}
  .row{box-shadow:none;border-left:4px solid #000}
}
.foot{max-width:1200px;margin:1rem auto 2.5rem;padding:0 1rem;color:var(--muted)}
.savebar{display:flex;gap:.75rem;align-items:center;justify-content:flex-end;margin:.75rem 0 0}
.savebar button{background:#1a2031;color:#eaeef7;border:1px solid #2a3046;border-radius:10px;padding:.55rem .8rem;font-weight:600;cursor:pointer}
.savebar button:hover{filter:brightness(1.15)}
