[hidden]{display:none!important}
html,body{margin:0}
img{max-width:100%}
:root{padding-top:env(safe-area-inset-top,0px)}

/* Layout: app de una columna para teléfono — cabecera tipo cartel de obra, pestañas abajo, hojas de detalle deslizables */
:root{
  --bg:#eef1f3; --surface:#ffffff; --surface-2:#e3e8ec; --line:#cdd5dc;
  --fg:#1d2a33; --muted:#5b6b77; --brand:#1c6b36; --brand-fg:#ffffff; --logo-bg:#ffffff; --leaf:#8cc63f;
  --signal:#f2b01e; --signal-fg:#1d2a33;
  --st-new:#b4530f; --st-new-bg:#fbe9da; --st-prog:#1f5fa8; --st-prog-bg:#dfeafb;
  --st-done:#2b7a3d; --st-done-bg:#dcf0e0; --st-no:#6b6f75; --st-no-bg:#e7e8ea;
  --danger:#b3261e;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:10px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#12191e; --surface:#1a2329; --surface-2:#232e35; --line:#33414a;
  --fg:#e6ecef; --muted:#9aabb6; --brand:#8cc63f; --brand-fg:#13200c; --logo-bg:#ffffff; --leaf:#8cc63f;
  --signal:#f2b01e; --signal-fg:#1d2a33;
  --st-new:#f0a46a; --st-new-bg:#3a2516; --st-prog:#8fb9ef; --st-prog-bg:#1b2b40;
  --st-done:#7fcf8f; --st-done-bg:#183020; --st-no:#aab0b6; --st-no-bg:#2a2f33;
  --danger:#f2867f; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#12191e; --surface:#1a2329; --surface-2:#232e35; --line:#33414a;
  --fg:#e6ecef; --muted:#9aabb6; --brand:#8cc63f; --brand-fg:#13200c; --logo-bg:#ffffff; --leaf:#8cc63f;
  --signal:#f2b01e; --signal-fg:#1d2a33;
  --st-new:#f0a46a; --st-new-bg:#3a2516; --st-prog:#8fb9ef; --st-prog-bg:#1b2b40;
  --st-done:#7fcf8f; --st-done-bg:#183020; --st-no:#aab0b6; --st-no-bg:#2a2f33;
  --danger:#f2867f; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:16px/1.45 var(--body);padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px}

header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--brand);color:var(--brand-fg)}
.logo-band{background:var(--logo-bg);padding:10px 16px;display:flex;justify-content:center}
.logo-band img{display:block;height:44px;width:auto;max-width:100%}
.stripe{height:5px;background:repeating-linear-gradient(-45deg,var(--signal) 0 12px,#1d2a33 12px 24px)}
.top-in{display:flex;align-items:center;gap:12px;padding:10px 16px;max-width:640px;margin:0 auto}
.badge{flex:none;width:40px;height:40px;border-radius:8px;background:var(--signal);color:var(--signal-fg);display:grid;place-items:center;font:700 18px/1 var(--display)}
.top h1{margin:0;font:700 22px/1.05 var(--display);letter-spacing:.01em;text-transform:uppercase}
.top small{display:block;font-size:13px;opacity:.85}
.top .muni{font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:12px;margin-bottom:2px}
.sec{border-top:1px solid var(--line);padding-top:16px}
.req{color:var(--danger)}

main{max-width:640px;margin:0 auto;padding-inline:16px;padding-block:16px}
.view[hidden]{display:none}
h2{font:700 24px/1.1 var(--display);text-transform:uppercase;margin:4px 0 4px;text-wrap:balance}
.lead{color:var(--muted);margin:0 0 16px;font-size:15px}

/* formulario */
form{display:grid;gap:18px}
fieldset{border:0;padding:0;margin:0;display:grid;gap:8px;min-width:0}
legend,label.lbl{font:600 13px/1.2 var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:0;margin-bottom:2px}
.cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cat{position:relative}
.cat input{position:absolute;opacity:0;inset:0}
.cat span{display:flex;align-items:center;gap:8px;min-height:52px;padding:8px 10px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--surface);font-weight:500;font-size:15px;line-height:1.15;cursor:pointer}
.cat svg{flex:none;width:22px;height:22px;stroke:var(--brand);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cat input:checked+span{border-color:var(--brand);box-shadow:inset 0 0 0 1.5px var(--brand);background:var(--surface-2)}
.cat input:focus-visible+span{outline:3px solid var(--signal);outline-offset:2px}
.field{display:grid;gap:6px;min-width:0}
input[type=text],input[type=tel],select,textarea{width:100%;padding:12px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--surface);min-height:48px}
textarea{min-height:96px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:380px){.row2{grid-template-columns:1fr}}
.hint{font-size:13px;color:var(--muted)}
.photo{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.photo label.btn2{display:inline-flex;align-items:center;gap:8px}
.photo input{position:absolute;width:1px;height:1px;opacity:0}
.thumb{width:84px;height:84px;border-radius:8px;object-fit:cover;border:1px solid var(--line)}
.btn{appearance:none;border:0;border-radius:var(--r);background:var(--brand);color:var(--brand-fg);font:700 19px/1 var(--display);text-transform:uppercase;letter-spacing:.04em;padding:16px;min-height:54px;cursor:pointer;width:100%}
.btn[disabled]{opacity:.55;cursor:default}
.btn2{appearance:none;border:1.5px solid var(--line);background:var(--surface);border-radius:var(--r);padding:10px 14px;min-height:44px;font-weight:600;cursor:pointer}
.err{color:var(--danger);font-size:14px;margin:0}

/* lista */
.counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:14px}
.count{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 6px;text-align:center}
.count b{display:block;font:700 26px/1 var(--display);font-variant-numeric:tabular-nums}
.count span{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.filters{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px;scrollbar-width:none}
.chip{flex:none;border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 12px;font-size:14px;font-weight:600;cursor:pointer;min-height:38px}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.list{display:grid;gap:8px}
.item{display:grid;grid-template-columns:1fr auto;gap:4px 10px;text-align:left;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;cursor:pointer}
.item .code{font:600 13px/1 var(--body);color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.03em}
.item .what{grid-column:1/-1;font-weight:600;font-size:16px;line-height:1.25;min-width:0}
.item .where{grid-column:1/-1;color:var(--muted);font-size:14px;min-width:0;overflow-wrap:anywhere}
.pill{justify-self:end;font:600 12px/1 var(--body);text-transform:uppercase;letter-spacing:.05em;padding:5px 8px;border-radius:999px;white-space:nowrap}
.s-nuevo{color:var(--st-new);background:var(--st-new-bg)}
.s-curso{color:var(--st-prog);background:var(--st-prog-bg)}
.s-resuelto{color:var(--st-done);background:var(--st-done-bg)}
.s-rechazado{color:var(--st-no);background:var(--st-no-bg)}
.empty{background:var(--surface);border:1.5px dashed var(--line);border-radius:var(--r);padding:24px 16px;text-align:center;color:var(--muted)}

/* hoja de detalle */
.sheet{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;background:rgba(10,18,24,.5)}
.sheet-in{background:var(--bg);width:100%;max-width:640px;max-height:92vh;overflow-y:auto;border-radius:16px 16px 0 0;padding:8px 16px calc(24px + env(safe-area-inset-bottom,0px))}
.grab{width:44px;height:5px;border-radius:3px;background:var(--line);margin:4px auto 10px}
.sheet h3{font:700 24px/1.1 var(--display);text-transform:uppercase;margin:6px 0 2px}
.dl{display:grid;gap:10px;margin:14px 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.dl div{display:grid;gap:2px;min-width:0}
.dl dt{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.dl dd{margin:0;overflow-wrap:anywhere}
.big{width:100%;border-radius:var(--r);border:1px solid var(--line)}
.timeline{list-style:none;margin:8px 0 0;padding:0 0 0 14px;border-left:2px solid var(--line);display:grid;gap:10px}
.timeline li{position:relative;font-size:14px}
.timeline li::before{content:"";position:absolute;left:-20px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--signal);border:2px solid var(--bg)}
.timeline time{display:block;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.staff{margin-top:18px;padding:14px;border:1.5px solid var(--signal);border-radius:var(--r);display:grid;gap:10px;background:var(--surface)}
.staff h4{margin:0;font:700 17px/1 var(--display);text-transform:uppercase}

/* barra inferior */
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--surface);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);padding-bottom:env(safe-area-inset-bottom,0px)}
nav.tabs button{appearance:none;background:none;border:0;padding:10px 4px 12px;display:grid;justify-items:center;gap:3px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;min-height:60px}
nav.tabs svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
nav.tabs button[aria-current="page"]{color:var(--brand)}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:12px 16px;border-radius:10px;font-weight:600;z-index:30;max-width:calc(100% - 32px)}
.avisos{display:grid;gap:10px;margin-bottom:16px}
.aviso{background:var(--st-done-bg);color:var(--fg);border:1.5px solid var(--st-done);border-radius:var(--r);padding:12px 14px;display:grid;gap:8px}
.aviso.no{background:var(--st-no-bg);border-color:var(--st-no)}
.aviso b{font:700 18px/1.1 var(--display);text-transform:uppercase;color:var(--st-done)}
.aviso.no b{color:var(--st-no)}
.aviso p{margin:0;font-size:15px;overflow-wrap:anywhere}
.aviso .acc{display:flex;gap:8px;flex-wrap:wrap}
nav.tabs button{position:relative}
.dot{position:absolute;top:6px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger);color:#fff;font:700 11px/18px var(--body);text-align:center}
.item.unread{border-color:var(--st-done);box-shadow:inset 0 0 0 1px var(--st-done)}
.done{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 16px;text-align:center}
.done .num{font:700 34px/1 var(--display);letter-spacing:.03em;margin:8px 0;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:no-preference){.sheet-in{animation:up .22s ease-out}@keyframes up{from{transform:translateY(30px);opacity:.6}}}

/* ---- agregados versión municipal ---- */
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.consulta{display:grid;gap:8px}
.consulta-row{display:flex;gap:8px}
.consulta-row input{flex:1;min-width:0;text-transform:uppercase}
.contacto{text-align:center;margin-top:24px}
a{color:var(--brand)}
.wa{display:flex;justify-content:center;text-decoration:none;color:var(--fg);margin-top:4px}
body.panel{padding-bottom:24px}
main.wide{max-width:960px}
.btn-top{appearance:none;border:1.5px solid currentColor;background:none;color:inherit;border-radius:8px;padding:8px 12px;font-weight:600;cursor:pointer}
.login{max-width:420px;margin:24px auto;display:grid;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 16px}
.login h2,.login .lead{margin:0}
input[type=email],input[type=password],input[type=search]{width:100%;padding:12px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--surface);min-height:48px}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.tools input{flex:1 1 240px;min-width:0}
.tools select{flex:0 1 220px}
@media (min-width:760px){.panel .list{grid-template-columns:1fr 1fr}}