/* Avisa · avisos ciudadanos. Marca municipal en verde azulado. */
:root{--brand:#0f766e;--brand-2:#0b5e57;--brand-soft:rgba(15,118,110,.12)}
@media (prefers-color-scheme:dark){:root{--brand:#2dd4bf;--brand-2:#5eead4;--brand-ink:#04211e;--brand-soft:rgba(45,212,191,.14)}}

.hero{position:relative;margin:16px 16px 0;padding:22px 20px 18px;border-radius:26px;color:#fff;overflow:hidden;
  background:radial-gradient(420px 220px at 110% -20%,rgba(255,255,255,.22),transparent 60%),linear-gradient(145deg,#0f766e,#0b4f4a 70%)}
.hero::after{content:'';position:absolute;right:-30px;bottom:-40px;width:180px;height:180px;border-radius:50%;border:28px solid rgba(255,255,255,.06)}
.hero__org{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;opacity:.85}
.hero__seal{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.16)}
.hero__seal svg{width:17px;height:17px}
.hero h1{font:800 27px/1.1 var(--fh);letter-spacing:-.7px;margin:14px 0 6px}
.hero p{font-size:14px;line-height:1.5;opacity:.82;max-width:300px}
.stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}
.stat{padding:12px;border-radius:16px;background:rgba(255,255,255,.12);backdrop-filter:blur(6px)}
.stat b{display:block;font:800 22px var(--fh)}.stat span{font-size:11.5px;opacity:.8}

.av{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:14px;border-radius:var(--r);background:var(--card);box-shadow:var(--shadow-1);transition:transform .25s var(--ease)}
.av:active{transform:scale(.985)}
.cat-tile{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.cat-tile svg{width:23px;height:23px}
.av__top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.av__cat{font-size:11.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.5px}
.av__title{font:700 15.5px/1.3 var(--fh);letter-spacing:-.2px;margin:3px 0 6px}
.av__where{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--ink-2)}
.av__where svg{width:14px;height:14px}
.av__foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.av__foot small{font-size:12px;color:var(--ink-3)}

/* ficha del aviso */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 0}
.topbar .icon-btn{background:var(--card)}
.head{padding:16px 20px 0}
.head__row{display:flex;align-items:center;gap:12px}
.head h1{font:800 24px/1.18 var(--fh);letter-spacing:-.6px;margin:14px 0 10px}
.head__code{font:600 12.5px var(--mono);color:var(--ink-3);letter-spacing:.5px}
.success{margin:16px 20px 0;padding:18px;border-radius:20px;background:var(--ok-soft);display:flex;gap:14px;align-items:center;animation:view-in .5s var(--ease) both}
.success .done__check{width:52px;height:52px;margin:0;box-shadow:0 0 0 6px var(--ok-soft);flex:none}
.success .done__check svg{width:26px;height:26px}
.success b{font:800 16px var(--fh)}.success p{font-size:13.5px;color:var(--ink-2);margin-top:3px;line-height:1.45}
.map{position:relative;margin:18px 20px 0;height:170px;border-radius:20px;overflow:hidden;background:var(--card-2)}
.map svg.plan{position:absolute;inset:0;width:100%;height:100%}
.map__pin{position:absolute;width:46px;height:46px;margin:-46px 0 0 -23px;display:grid;place-items:center;animation:pin .7s var(--ease) both}
.map__pin i{position:absolute;inset:6px 6px 0;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--brand);box-shadow:0 8px 18px rgba(0,0,0,.25)}
.map__pin svg{position:relative;z-index:1;width:18px;height:18px;color:#fff;margin-top:-4px}
.map__pulse{position:absolute;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:var(--brand);opacity:.18;animation:pulse 2.2s ease-out infinite}
@keyframes pin{from{transform:translateY(-24px);opacity:0}to{transform:none;opacity:1}}
@keyframes pulse{from{transform:scale(.4);opacity:.35}to{transform:scale(1.6);opacity:0}}
.map__cap{position:absolute;left:10px;bottom:10px;padding:6px 10px;border-radius:10px;background:var(--glass);backdrop-filter:blur(10px);font-size:11.5px;color:var(--ink-2);font-weight:600}
.progress{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
.progress i{height:6px;border-radius:3px;background:var(--card-2)}.progress i.on{background:var(--brand)}
.progress__labels{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px;font-size:11px;color:var(--ink-3);font-weight:600}
.progress__labels .on{color:var(--ink)}
.box{padding:16px;border-radius:var(--r);background:var(--card);box-shadow:var(--shadow-1)}
.box p{font-size:15px;line-height:1.6;color:var(--ink-2)}
.timeline{list-style:none;position:relative;display:grid;gap:18px;padding-left:28px}
.timeline::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line)}
.timeline li{position:relative}
.timeline li::before{content:'';position:absolute;left:-26px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--card);border:2.5px solid var(--ink-3)}
.timeline li.now::before{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 5px var(--brand-soft)}
.timeline b{font:700 14.5px var(--fh)}.timeline time{display:block;font-size:12px;color:var(--ink-3);margin:2px 0 4px}
.timeline p{font-size:14px;color:var(--ink-2);line-height:1.5}
.photo{margin:18px 20px 0;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-1)}
.photo img{width:100%;max-height:260px;object-fit:cover}
.kv{display:grid;gap:1px;border-radius:var(--r);overflow:hidden;background:var(--line);box-shadow:var(--shadow-1)}
.kv div{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--card)}
.kv svg{color:var(--ink-3);margin-top:1px}.kv small{display:block;font-size:12px;color:var(--ink-3)}.kv b{font-size:14.5px;font-weight:600}

/* formulario */
.steps{position:sticky;top:0;z-index:5;padding:14px 20px 12px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px)}
.steps__bar{height:6px;border-radius:3px;background:var(--card-2);overflow:hidden}
.steps__bar i{display:block;height:100%;width:100%;background:var(--brand);border-radius:3px;transform-origin:left;transition:transform .4s var(--ease)}
.steps__txt{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--ink-3);margin-top:8px}
.q{padding:22px 20px 0}
.q__n{font-size:12px;font-weight:700;color:var(--brand-2);letter-spacing:.4px;text-transform:uppercase}
@media (prefers-color-scheme:dark){.q__n{color:var(--brand)}}
.q h2{font:800 19px var(--fh);letter-spacing:-.3px;margin:4px 0 12px}
.q h2 small{font:500 13px var(--fb);color:var(--ink-3);margin-left:6px}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cat{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 4px 10px;border-radius:16px;background:var(--card);box-shadow:var(--shadow-1);border:1.5px solid transparent;font-size:11.5px;font-weight:600;line-height:1.2;text-align:center;color:var(--ink-2);transition:border-color .2s,transform .2s var(--ease)}
.cat .cat-tile{width:40px;height:40px;border-radius:12px}
.cat.is-on{border-color:var(--brand);color:var(--ink);background:var(--brand-soft)}
.cat:active{transform:scale(.95)}
.suggest{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.suggest button{height:34px;padding:0 12px;border-radius:999px;background:var(--card-2);font-size:12.5px;font-weight:600;color:var(--ink-2)}
.loc-row{display:flex;gap:8px;margin-top:10px}
.loc-row .btn{min-height:48px;flex:1;font-size:14px}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:140px;border-radius:20px;border:2px dashed rgba(127,138,160,.35);background:var(--card);color:var(--ink-2);font-size:14px;font-weight:600;cursor:pointer;transition:border-color .2s}
.drop:hover{border-color:var(--brand)}
.drop svg{width:30px;height:30px;color:var(--brand)}
.drop small{font-size:12px;color:var(--ink-3);font-weight:500}
.preview{position:relative;border-radius:20px;overflow:hidden}
.preview img{width:100%;max-height:240px;object-fit:cover}
.preview button{position:absolute;top:10px;right:10px}
.submit{padding:24px 20px 0}
/* Objetivos táctiles de 48 px en todo lo que se pulsa. */
.chip{height:48px}.icon-btn{width:48px;height:48px}.suggest button{height:48px;padding:0 14px}