:root{
  --bg:#f1f5f9; --surface:#ffffff; --surface2:#f8fafc;
  --txt:#0f172a; --muted:#64748b; --border:#e2e8f0;
  --accent:#2563eb; --accent-d:#1d4ed8;
  --ok:#16a34a; --ok-bg:#dcfce7; --warn:#d97706; --warn-bg:#fef3c7;
  --info:#2563eb; --info-bg:#dbeafe; --err:#dc2626; --err-bg:#fee2e2;
  --dark:#0f172a; --shadow:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
.hidden{display:none !important}
.muted{color:var(--muted);font-size:.85rem}
.err{color:var(--err);font-size:.85rem;min-height:1.1em;margin:.4em 0 0}
.screen{min-height:100dvh;display:flex;flex-direction:column}

/* ---------- botones ---------- */
.btn{font-size:.95rem;font-weight:600;border:1px solid transparent;border-radius:10px;
  padding:.6em 1em;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:.4em;justify-content:center}
.btn:disabled{opacity:.5;cursor:default}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--accent-d)}
.btn-ghost{background:transparent;color:inherit;border-color:transparent}
.btn-outline{background:var(--surface);color:var(--txt);border-color:var(--border)}
.btn-ok{background:var(--ok);color:#fff}
.btn-warn{background:var(--warn);color:#fff}
.btn-danger{background:var(--err);color:#fff}
.btn-block{width:100%}
.btn-sm{padding:.4em .7em;font-size:.85rem;border-radius:8px}
.btn-row{display:flex;gap:.5em;flex-wrap:wrap}

/* ---------- login ---------- */
.login{align-items:center;justify-content:center;background:
  radial-gradient(1200px 600px at 50% -10%, #1e293b, var(--dark))}
.login-card{background:var(--surface);border-radius:18px;padding:2em 1.6em;width:92%;max-width:360px;
  box-shadow:0 20px 40px rgba(0,0,0,.3);text-align:center}
.login-card .logo{font-size:2.6rem}
.login-card h1{margin:.1em 0 0;font-size:1.35rem}
.login-card input{width:100%;margin:.4em 0;padding:.8em;border:1px solid var(--border);
  border-radius:10px;font-size:1rem;background:var(--surface2)}
.login-card .btn{margin-top:.6em}

/* ---------- topbar + tabs ---------- */
.topbar{display:flex;align-items:center;gap:.6em;background:var(--dark);color:#fff;
  padding:.7em 1em;position:sticky;top:0;z-index:20}
.brand{font-weight:700;font-size:1rem}
.spacer{flex:1}
.who{font-size:.85rem;opacity:.9;display:flex;align-items:center;gap:.4em}
.who .role{background:rgba(255,255,255,.15);padding:.1em .5em;border-radius:999px;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
.topbar .btn-ghost{color:#fff}
.tabs{display:flex;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:48px;z-index:15;overflow-x:auto}
.tab{flex:1;min-width:max-content;background:none;border:none;padding:.9em 1.1em;color:var(--muted);
  font-weight:600;font-size:.9rem;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- vistas / layout ---------- */
.view{flex:1;display:flex;flex-direction:column;min-height:0}
.wrap{padding:.9em;max-width:860px;margin:0 auto;width:100%}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:1em;margin-bottom:.9em;box-shadow:var(--shadow)}
.card h3{margin:.1em 0 .6em}
.section-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:.2em 0 .5em}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.6em;margin-bottom:.9em}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.7em;text-align:center;box-shadow:var(--shadow)}
.stat .n{font-size:1.5rem;font-weight:700}
.stat .l{font-size:.72rem;color:var(--muted)}
@media(max-width:520px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- forms ---------- */
.field{margin:.5em 0}
.field label{display:block;font-size:.78rem;color:var(--muted);margin-bottom:.2em;font-weight:600}
.field input,.field select,.field textarea{width:100%;padding:.7em;border:1px solid var(--border);
  border-radius:10px;font-size:1rem;background:var(--surface)}
.filebtn{display:flex;flex-direction:column;align-items:center;gap:.3em;background:var(--surface2);
  border:2px dashed var(--border);border-radius:14px;padding:1.4em;cursor:pointer;color:var(--muted);font-weight:600}
.preview{width:100%;border-radius:12px;margin-top:.7em;max-height:46vh;object-fit:cover;border:1px solid var(--border)}
.inline{display:flex;align-items:center;gap:.6em;flex-wrap:wrap}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:.3em;padding:.2em .6em;border-radius:999px;
  font-size:.74rem;font-weight:700}
.b-enviado{background:var(--warn-bg);color:var(--warn)}
.b-aprobado{background:var(--ok-bg);color:var(--ok)}
.b-observado{background:var(--info-bg);color:var(--info)}
.b-rechazado{background:var(--err-bg);color:var(--err)}

/* ---------- listas ---------- */
.list{display:flex;flex-direction:column;gap:.55em}
.item{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.8em;
  display:flex;align-items:center;gap:.7em;cursor:pointer;box-shadow:var(--shadow)}
.item:hover{border-color:var(--accent)}
.item .thumb{width:46px;height:46px;border-radius:8px;object-fit:cover;background:var(--surface2);flex:none}
.item .grow{flex:1;min-width:0}
.item .t{font-weight:600}
.item .s{font-size:.8rem;color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:2.5em 1em}

/* ---------- mapa ---------- */
.map{flex:1;min-height:60vh}
.maptools{display:flex;gap:.5em;align-items:center;padding:.55em .9em;background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap}
.legend{display:flex;gap:.8em;flex-wrap:wrap;font-size:.76rem;color:var(--muted);margin-left:auto}
.legend span{display:inline-flex;align-items:center;gap:.3em}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.leaflet-popup-content{margin:.6em .8em}
.leaflet-popup-content img{width:190px;border-radius:8px;margin-top:.4em;display:block}

/* ---------- sheet ---------- */
.sheet{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center}
.sheet-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.45)}
.sheet-panel{position:relative;background:var(--surface);width:100%;max-width:560px;max-height:92dvh;
  border-radius:18px 18px 0 0;display:flex;flex-direction:column;animation:up .2s ease}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-head{display:flex;align-items:center;padding:.9em 1em;border-bottom:1px solid var(--border)}
.sheet-head h3{margin:0;flex:1;font-size:1.05rem}
.sheet-body{padding:1em;overflow:auto}
.sheet-body img.full{width:100%;border-radius:12px;border:1px solid var(--border);margin-bottom:.6em}
.kv{display:flex;justify-content:space-between;gap:1em;padding:.35em 0;border-bottom:1px dashed var(--border);font-size:.9rem}
.kv .k{color:var(--muted)}
@media(min-width:560px){.sheet{align-items:center}.sheet-panel{border-radius:18px}}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:1.2em;transform:translateX(-50%);background:var(--dark);color:#fff;
  padding:.7em 1.1em;border-radius:10px;font-size:.9rem;z-index:60;box-shadow:0 8px 20px rgba(0,0,0,.3);max-width:90%}
.banner{background:var(--warn-bg);color:var(--warn);border:1px solid #fde68a;border-radius:10px;padding:.6em .8em;font-size:.85rem;margin-bottom:.8em}
.banner.info{background:var(--info-bg);color:var(--info);border-color:#bfdbfe}