:root{
  --navy:#14213d; --navy-2:#1f3160; --navy-3:#2c4a8a; --gold:#c9a227; --gold-2:#e0bd4a; --gold-soft:#f6efd6;
  --bg:#f4f5f8; --card:#fff; --ink:#1c2430; --muted:#6b7280; --line:#e2e5ec;
  --ok:#2e7d32; --warn:#ed9c00; --bad:#c62828; --info:#1f5fa8;
  --r:12px; --shadow:0 1px 3px rgba(20,33,61,.08),0 4px 14px rgba(20,33,61,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
a{color:var(--navy-3);text-decoration:none}
h1{font-size:1.35rem;margin:.2rem 0 1rem;color:var(--navy)}
h2{font-size:1.05rem;margin:1.2rem 0 .6rem;color:var(--navy);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
h3{font-size:1rem;margin:.6rem 0 .4rem}
small,.muted{color:var(--muted)}
.topbar{background:var(--navy);color:#fff;display:flex;align-items:center;gap:12px;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top,0px));position:sticky;top:0;z-index:20;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.brand{color:#fff;font-weight:700;display:flex;align-items:center;gap:8px;font-size:1.05rem;white-space:nowrap}
.brand-mark{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--gold);color:var(--navy);font-weight:900}
.topnav{display:none;gap:4px;margin-left:12px}
.topnav a{color:#dfe4f0;padding:6px 10px;border-radius:8px;font-weight:500}
.topnav a.active,.topnav a:hover{background:var(--navy-2);color:#fff}
.topnav-extra{display:none}
.user{margin-left:auto;color:#fff;text-align:right;line-height:1.1;font-size:.9rem}
.user small{display:block;color:var(--gold-2);font-size:.72rem}
.container{max-width:1100px;margin:0 auto;padding:16px 16px 24px}
.bottomnav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));z-index:20}
.bottomnav a{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);font-size:.68rem;flex:1;padding:4px 2px;border-radius:8px}
.bottomnav a.active{color:var(--navy);font-weight:700}
.bottomnav a.active svg{color:var(--gold)}
@media(min-width:900px){.topnav{display:flex}.topnav-extra{display:inline-block}.bottomnav{display:none}body{padding-bottom:24px}}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;margin-bottom:14px}
.card.tight{padding:12px 14px}
.card-title{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.card-title h2,.card-title h3{margin:0}
.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr 1fr}
@media(min-width:700px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}}
.flash{padding:12px 14px;border-radius:10px;margin-bottom:12px;font-weight:500}
.flash-ok{background:#e6f4ea;color:#1e5e2a;border:1px solid #b7dfc1}
.flash-error{background:#fdecea;color:#8b1c1c;border:1px solid #f5c2c0}
.flash-info{background:#e8f0fb;color:#1a437a;border:1px solid #c3d6f2}
label{display:block;font-size:.85rem;font-weight:600;color:var(--navy);margin:10px 0 4px}
label .opt{font-weight:400;color:var(--muted)}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=tel],input[type=month],input[type=search],select,textarea{width:100%;font:inherit;padding:12px 12px;border:1px solid #cfd5e1;border-radius:10px;background:#fff;color:var(--ink);min-height:46px}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.row{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:600px){.row-2{grid-template-columns:1fr 1fr}.row-3{grid-template-columns:1fr 1fr 1fr}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:600;padding:12px 18px;border-radius:10px;border:1px solid transparent;cursor:pointer;background:var(--navy);color:#fff;min-height:46px;text-align:center}
.btn:hover{background:var(--navy-2)}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:var(--gold-2)}
.btn-line{background:#fff;color:var(--navy);border-color:#cfd5e1}
.btn-line:hover{background:#f0f2f7}
.btn-danger{background:#fff;color:var(--bad);border-color:#f0c0c0}
.btn-sm{padding:7px 12px;min-height:36px;font-size:.85rem}
.btn-block{width:100%}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;background:#e8ebf2;color:var(--navy)}
.badge-contacto{background:#e8ebf2;color:#3b4a6b}
.badge-diagnostico{background:#e3edfa;color:#1a4f9c}
.badge-propuesta{background:var(--gold-soft);color:#7a5c00}
.badge-cierre{background:#e2f3e5;color:#1e6b2c}
.badge-perdido{background:#fbe5e5;color:#9b2222}
.badge-alto{background:#e2f3e5;color:#1e6b2c}.badge-medio{background:var(--gold-soft);color:#7a5c00}.badge-bajo{background:#fbe5e5;color:#9b2222}
.badge-enviada{background:#e3edfa;color:#1a4f9c}.badge-en_revision{background:var(--gold-soft);color:#7a5c00}.badge-aceptada{background:#e2f3e5;color:#1e6b2c}.badge-rechazada{background:#fbe5e5;color:#9b2222}
.list{display:flex;flex-direction:column;gap:10px}
.item{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:12px 14px;display:block;color:inherit}
.item:active{background:#f7f8fb}
.item .t{font-weight:700;color:var(--navy);display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.item .s{font-size:.86rem;color:var(--muted);margin-top:3px;display:flex;flex-wrap:wrap;gap:4px 10px}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:700px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:12px 14px;border-top:3px solid var(--gold)}
.kpi .n{font-size:1.6rem;font-weight:800;color:var(--navy);line-height:1.1}
.kpi .l{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.kpi .sub{font-size:.8rem;color:var(--muted)}
.sem{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:middle;margin-right:4px}
.sem-verde{background:var(--ok)}.sem-amarillo{background:var(--warn)}.sem-rojo{background:var(--bad)}.sem-gris{background:#b7bcc7}
.bar{height:10px;background:#e8ebf2;border-radius:999px;overflow:hidden;margin-top:4px}
.bar>i{display:block;height:100%;background:var(--navy-3);border-radius:999px}
.bar>i.gold{background:var(--gold)}
.bar>i.ok{background:var(--ok)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.9rem;background:#fff}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap}
th{background:#f1f3f8;color:var(--navy);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
td.num,th.num{text-align:right}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.filters>*{flex:1 1 140px}
.filters label{margin-top:0}
.filters .btn{flex:0 0 auto}
.login{max-width:400px;margin:8vh auto}
.login .brand-big{text-align:center;margin-bottom:18px}
.login .brand-big .brand-mark{width:56px;height:56px;font-size:1.8rem;border-radius:14px;margin-bottom:8px}
.login h1{text-align:center}
.tel,.wa{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:8px;background:#eef1f7;font-size:.85rem;font-weight:600}
.wa{background:#e6f7ea;color:#1e6b2c}
dl.def{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:.95rem}
dl.def dt{color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;padding-top:2px}
dl.def dd{margin:0}
.funnel{display:flex;flex-direction:column;gap:6px}
.funnel .f{display:flex;align-items:center;gap:8px;font-size:.88rem}
.funnel .f b{width:96px;flex:0 0 96px}
.funnel .f .bar{flex:1;margin:0;height:22px}
.funnel .f .bar>i{display:flex;align-items:center;padding-left:8px;color:#fff;font-weight:700;font-size:.8rem;min-width:28px}
.week td.c{text-align:center}
.pill{display:inline-block;padding:3px 8px;border-radius:8px;font-size:.8rem;font-weight:700}
.pill-ok{background:#e2f3e5;color:#1e6b2c}.pill-warn{background:#fff3d6;color:#8a5a00}.pill-bad{background:#fbe5e5;color:#9b2222}.pill-gris{background:#eef0f4;color:#6b7280}
.check{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.check input[type=checkbox]{width:22px;height:22px;flex:0 0 22px}
.check:last-child{border-bottom:0}
.ruta-item.done{opacity:.72}
.ruta-item .t s{color:var(--muted)}
details>summary{cursor:pointer;font-weight:600;color:var(--navy-3);padding:6px 0}
.inline-form{background:#f7f8fb;border-radius:10px;padding:10px 12px;margin-top:8px}
.empty{text-align:center;color:var(--muted);padding:26px 10px}
.tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;padding-bottom:2px}
.tabs a{white-space:nowrap;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:.88rem;color:var(--navy)}
.tabs a.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.fab{position:fixed;right:16px;bottom:calc(80px + env(safe-area-inset-bottom,0px));width:56px;height:56px;border-radius:50%;background:var(--gold);color:var(--navy);display:grid;place-items:center;font-size:2rem;font-weight:800;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:15}
@media(min-width:900px){.fab{bottom:24px}}
.hint{font-size:.82rem;color:var(--muted);margin-top:4px}