:root{
  --purple:#8b5cf6; --purple2:#a78bfa; --blue:#38bdf8;
  --green:#4ade80; --yellow:#facc15; --red:#fb7185;

  --bg:#0b1020;
  --bg-grad:radial-gradient(circle at top left,#312e81 0,#0b1020 35%,#020617 100%);
  --text:#f8fafc; --muted:#cbd5e1; --soft:#94a3b8; --label:#ddd6fe;
  --card:linear-gradient(180deg,rgba(31,41,55,.96),rgba(15,23,42,.96));
  --border:rgba(255,255,255,.09);
  --chip:rgba(255,255,255,.06);
  --input-bg:#020617;
  --bar:rgba(11,16,32,.92);
  --shadow:0 14px 32px rgba(0,0,0,.28);
  --script-bg:rgba(139,92,246,.12); --script-tx:#ede9fe;
  --note-bg:rgba(56,189,248,.11);
  --tip-bg:rgba(74,222,128,.1);
  --warn-bg:rgba(251,113,133,.12);
  --gold-bg:rgba(250,204,21,.12);
}
[data-theme="light"]{
  --purple:#7c3aed; --purple2:#7c3aed; --blue:#0369a1;
  --green:#15803d; --yellow:#a16207; --red:#be123c;

  --bg:#f1f5f9;
  --bg-grad:radial-gradient(circle at top left,#ede9fe 0,#f1f5f9 40%,#e2e8f0 100%);
  --text:#0f172a; --muted:#334155; --soft:#64748b; --label:#6d28d9;
  --card:linear-gradient(180deg,#ffffff,#fbfaff);
  --border:rgba(15,23,42,.12);
  --chip:rgba(15,23,42,.05);
  --input-bg:#ffffff;
  --bar:rgba(255,255,255,.92);
  --shadow:0 10px 26px rgba(15,23,42,.10);
  --script-bg:rgba(124,58,237,.08); --script-tx:#4c1d95;
  --note-bg:rgba(2,132,199,.08);
  --tip-bg:rgba(21,128,61,.08);
  --warn-bg:rgba(190,18,60,.07);
  --gold-bg:rgba(161,98,7,.09);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;
  background:var(--bg-grad); background-color:var(--bg);
  background-attachment:fixed;
  color:var(--text); line-height:1.45; min-height:100vh;
  padding-bottom:76px;
}
.wrapper{max-width:1100px;margin:auto;padding:16px}
h1{font-size:23px;margin:0;display:flex;align-items:center;gap:9px}
h1 svg{color:var(--purple2)}
h2{color:var(--purple2);margin:0 0 10px;font-size:19px;display:flex;align-items:center;gap:8px}
h3{color:var(--blue);margin:14px 0 6px;font-size:15px}
p{color:var(--muted);margin:6px 0}
a{color:var(--blue)}
svg.ic{width:1.15em;height:1.15em;vertical-align:-.2em;flex:none}

/* ---------- Barras ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  background:var(--bar); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:10px 16px; display:flex; align-items:center; gap:12px;
}
.brandline{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.brandline img{width:30px;height:30px}
.logo{font-weight:900;font-size:19px;letter-spacing:.4px;white-space:nowrap}
.logo span{color:var(--purple2)}
.topbar .who{font-size:12.5px;color:var(--soft);text-align:right;line-height:1.3}
.topbar .who b{color:var(--text)}
.iconbtn{
  background:var(--chip);border:1px solid var(--border);color:var(--text);
  border-radius:10px;padding:7px 9px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-size:13px;
}
.iconbtn svg{width:17px;height:17px}

.tabs{
  position:fixed;bottom:0;left:0;right:0;z-index:20;
  display:flex; background:var(--bar); backdrop-filter:blur(12px);
  border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabs button{
  flex:1; background:none;border:0;color:var(--soft);
  padding:8px 2px 9px; font-size:10.5px; cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.tabs button svg{width:21px;height:21px}
.tabs button.active{color:var(--purple2)}

/* ---------- Tarjetas ---------- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px; padding:16px; margin-bottom:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,#8b5cf6,#2563eb);
  color:white; border:0; border-radius:12px; padding:11px 18px;
  font-weight:700; font-size:15px; cursor:pointer; text-decoration:none;
}
.btn:disabled{opacity:.5}
.btn.secondary{background:var(--chip);border:1px solid var(--border);color:var(--text)}
.btn.small{padding:6px 12px;font-size:13px;border-radius:9px}
.btn.full{display:flex;width:100%}
.btn svg{width:17px;height:17px}

/* ---------- Formularios ---------- */
input,textarea,select{
  width:100%; background:var(--input-bg); color:var(--text);
  border:1px solid var(--border); border-radius:10px;
  padding:10px; font-size:15px; outline:none; font-family:inherit;
}
input:focus,textarea:focus,select:focus{border-color:var(--purple2);box-shadow:0 0 0 3px rgba(139,92,246,.15)}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--input-bg) inset;
  -webkit-text-fill-color:var(--text);
  caret-color:var(--text);
  transition:background-color 99999s ease-in-out 0s;
}
textarea{resize:vertical;min-height:60px}
/* 16px en tactil: bajo eso, iOS/Android hacen zoom automatico al enfocar un campo */
@media(pointer:coarse){
  input,textarea,select{font-size:16px}
}
.field{margin-bottom:10px;min-width:0}
.field label{
  display:block;font-size:14px;font-weight:700;color:var(--text);
  margin-bottom:4px;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:44px}
.pw-eye{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;padding:6px;color:var(--soft);
}
.pw-eye svg{width:19px;height:19px}

/* ---------- Avisos ---------- */
.script,.note,.tip,.warn,.gold{
  padding:14px 16px;border-radius:12px;margin:12px 0;overflow-wrap:anywhere;
  font-size:15px;line-height:1.6;color:var(--text);
}
.script{background:var(--script-bg);border-left:5px solid var(--purple2)}
.note{background:var(--note-bg);border-left:5px solid var(--blue)}
.tip{background:var(--tip-bg);border-left:5px solid var(--green)}
.warn{background:var(--warn-bg);border-left:5px solid var(--red)}
.gold{background:var(--gold-bg);border-left:5px solid var(--yellow)}
.script::before{
  content:'Di esto';
  display:block;font-size:11px;font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;color:var(--purple2);margin-bottom:5px;
}
.say{font-size:16px;font-weight:600;line-height:1.6;color:var(--text)}
.warn svg,.tip svg,.gold svg{vertical-align:-.22em}
.warn{--icon:var(--red)} .warn>svg{color:var(--red)}
.tip>svg{color:var(--green)}
.gold>svg{color:var(--yellow)}

/* ---------- Checklists ---------- */
.checklist label{
  display:flex;align-items:center;gap:8px;
  padding:9px 10px;border:1px solid var(--border);border-radius:10px;
  margin:6px 0;background:var(--chip);color:var(--muted);font-size:14px;
}
.checklist input[type=checkbox]{width:auto;transform:scale(1.2);accent-color:var(--purple)}

/* ---------- Pills y puntos ---------- */
.pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:999px;font-size:12px;white-space:nowrap;
  background:var(--chip);border:1px solid var(--border);color:var(--muted);
  text-decoration:none;
}
.pill svg{width:13px;height:13px}
.pill.green{background:rgba(74,222,128,.14);color:var(--green);border-color:rgba(74,222,128,.35)}
.pill.yellow{background:rgba(250,204,21,.14);color:var(--yellow);border-color:rgba(202,138,4,.35)}
.pill.red{background:rgba(251,113,133,.14);color:var(--red);border-color:rgba(251,113,133,.35)}
.pill.purple{background:rgba(139,92,246,.16);color:var(--purple2);border-color:rgba(139,92,246,.4)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.dot.green{background:#22c55e}.dot.yellow{background:#eab308}.dot.red{background:#f43f5e}

.time{
  float:right;font-size:12px;background:rgba(139,92,246,.16);
  border:1px solid rgba(139,92,246,.4);color:var(--purple2);
  padding:4px 9px;border-radius:999px;
}

/* ---------- Listas ---------- */
.list-item{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:12px;border:1px solid var(--border);border-radius:12px;
  margin:8px 0;background:var(--chip);cursor:pointer;
}
.list-item:hover{border-color:var(--purple2)}
.list-item .main{min-width:0;flex:1}
.list-item .title{font-weight:700;overflow:hidden;text-overflow:ellipsis}
.list-item .sub{font-size:13px;color:var(--soft)}
.list-item .side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none;max-width:46%}

/* ---------- KPIs ---------- */
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
@media(max-width:700px){.kpi{grid-template-columns:1fr 1fr}}
.kpi div{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:var(--shadow)}
.kpi b{display:block;color:var(--text);font-size:22px}
.kpi span{color:var(--soft);font-size:12px}

/* ---------- Tablero ---------- */
.kanban{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 14px;scroll-snap-type:x proximity}
.kanban .col{
  min-width:250px;flex:0 0 250px;scroll-snap-align:start;
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:0 10px 10px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;max-height:70vh;
}
.kanban .colhead{
  position:sticky;top:0;display:flex;align-items:center;gap:8px;
  padding:12px 2px 10px;margin-bottom:2px;
  border-bottom:2px solid var(--stage,var(--purple));
  background:inherit;
}
.kanban .colhead .swatch{width:10px;height:10px;border-radius:3px;background:var(--stage,var(--purple));flex:none}
.kanban .colhead h4{margin:0;font-size:13px;color:var(--text);text-transform:uppercase;letter-spacing:.4px;flex:1}
.kanban .colhead .count{
  font-size:12px;font-weight:800;color:var(--soft);
  background:var(--chip);border:1px solid var(--border);
  border-radius:999px;padding:1px 8px;
}
.kanban .cards{overflow-y:auto}
.kanban .kcard{
  background:var(--input-bg);border:1px solid var(--border);border-left:4px solid var(--stage,var(--purple));
  border-radius:10px;padding:10px;margin:8px 0 0;cursor:pointer;font-size:14px;
}
.kanban .kcard:hover{border-color:var(--purple2);border-left-color:var(--stage,var(--purple))}
.kanban .kcard .sub{font-size:12px;color:var(--soft);margin-top:2px;display:flex;align-items:center;gap:5px}
.kanban .empty{color:var(--soft);font-size:13px;text-align:center;padding:18px 6px}
.kanban .kcard.dragging{opacity:.45}
.kanban .col.dropover{border-color:var(--stage,var(--purple));box-shadow:0 0 0 3px color-mix(in srgb, var(--stage,#8b5cf6) 30%, transparent)}

/* Tablero móvil */
.only-mobile{display:none}
@media(max-width:700px){
  .only-desktop{display:none!important}
  .only-mobile{display:block}
}
.stage-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 10px}
.schip{
  flex:none;display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;border-radius:999px;font-size:13.5px;font-weight:700;
  background:var(--chip);border:1.5px solid var(--border);color:var(--muted);cursor:pointer;
}
.schip .scount{
  font-size:11.5px;font-weight:800;border-radius:999px;padding:1px 7px;
  background:var(--input-bg);border:1px solid var(--border);color:var(--soft);
}
.schip.active{
  background:var(--stage);border-color:var(--stage);color:#fff;
}
.schip.active .scount{background:rgba(0,0,0,.22);border-color:transparent;color:#fff}
.mobile-cards .kcard{
  background:var(--card);border:1px solid var(--border);border-left:4px solid var(--stage,var(--purple));
  border-radius:12px;padding:12px;margin:0 0 10px;cursor:pointer;font-size:15px;
  box-shadow:var(--shadow);
}
.mobile-cards .kcard .sub{font-size:13px;color:var(--soft);margin-top:3px;display:flex;align-items:center;gap:5px}
.movebtn{
  flex:none;background:var(--chip);border:1px solid var(--border);color:var(--text);
  border-radius:9px;padding:7px 9px;cursor:pointer;display:inline-flex;
}
.movebtn svg{width:16px;height:16px}
.movebtn:disabled{opacity:.3}

/* Botones de acción en pareja (ubicación / foto) */
.action-duo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.action-duo .btn{width:100%;padding:12px 8px;font-size:14px}
.btn.geo{background:linear-gradient(135deg,#0ea5e9,#2563eb)}
.btn.photo{background:linear-gradient(135deg,#8b5cf6,#d946ef)}

/* Mapa */
.big-map{
  height:58vh;min-height:320px;border-radius:16px;margin-top:10px;
  border:1px solid var(--border);position:relative;z-index:1;
  box-shadow:var(--shadow);
}
.big-map{border-color:rgba(139,92,246,.45);box-shadow:0 0 24px rgba(139,92,246,.25)}
.big-map canvas{border-radius:16px}
[data-theme="dark"] .maplibregl-map{background:#0d0618}
[data-theme="light"] .maplibregl-map{background:#f5f2ff}

/* Sin firma de atribución */
.maplibregl-ctrl-attrib{display:none!important}

/* Pines */
.map-pin{
  width:18px;height:18px;border-radius:50%;
  border:2.5px solid #fff;cursor:pointer;
  box-shadow:0 0 10px rgba(139,92,246,.8),0 2px 6px rgba(0,0,0,.45);
}
.map-me{
  width:16px;height:16px;border-radius:50%;background:#0ea5e9;
  border:2.5px solid #fff;box-shadow:0 0 0 6px rgba(14,165,233,.25);
}

/* Popups acordes al tema */
.maplibregl-popup-content{border-radius:12px;padding:12px 14px;font-family:inherit}
[data-theme="dark"] .maplibregl-popup-content{background:#1f2937;color:#f8fafc}
[data-theme="dark"] .maplibregl-popup-tip{border-top-color:#1f2937!important;border-bottom-color:#1f2937!important}
[data-theme="dark"] .pop-sub{color:#94a3b8}
[data-theme="light"] .pop-sub{color:#64748b}

/* ---------- Secuencia de la demo ---------- */
.journey{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow);padding:18px 10px 16px;margin-bottom:14px;
  position:relative;
}
.jstep{position:relative;text-align:center;padding:0 8px}
.jstep .jicon{
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 8px;position:relative;z-index:1;
  background:var(--step);color:#fff;
  box-shadow:0 6px 16px color-mix(in srgb, var(--step) 45%, transparent);
}
.jstep .jicon svg{width:22px;height:22px}
.jstep .jnum{
  position:absolute;top:-6px;left:calc(50% + 12px);z-index:2;
  width:20px;height:20px;border-radius:50%;
  background:var(--input-bg);border:2px solid var(--step);color:var(--step);
  font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;
}
.jstep .jlabel{font-size:13px;font-weight:700;color:var(--text);line-height:1.25}
.jstep .jsub{font-size:11.5px;color:var(--soft);margin-top:2px}
.jstep:not(:last-child)::after{
  content:'';position:absolute;top:23px;left:calc(50% + 26px);
  width:calc(100% - 52px);height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--step),var(--step-next,var(--step)));
  opacity:.55;
}
@media(max-width:480px){
  .journey{grid-template-columns:1fr 1fr;gap:14px 8px;padding:16px 10px}
  .jstep{padding:0 4px}
  .jstep:not(:last-child)::after{display:none}
}

/* ---------- Varios ---------- */
.temp-picker{display:flex;gap:8px;margin:8px 0}
.temp-picker button{
  flex:1;padding:10px 6px;border-radius:12px;border:2px solid transparent;
  background:var(--chip);color:var(--muted);cursor:pointer;font-size:13.5px;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.temp-picker button.sel-verde{border-color:#22c55e;color:var(--green)}
.temp-picker button.sel-amarillo{border-color:#eab308;color:var(--yellow)}
.temp-picker button.sel-rojo{border-color:#f43f5e;color:var(--red)}

.photo-preview{max-width:100%;border-radius:12px;margin-top:8px;max-height:220px;object-fit:cover}
.small{font-size:13px;color:var(--soft)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
hr{border:0;border-top:1px solid var(--border);margin:14px 0}
.hidden{display:none!important}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--label);font-size:11px;text-transform:uppercase;letter-spacing:.35px;padding:6px}
td{padding:8px 6px;border-top:1px solid var(--border);color:var(--muted)}
/* Ayuda de etapas */
.stage-help{margin:0 0 14px;border:1px solid var(--border);border-radius:12px;background:var(--chip)}
.stage-help summary{
  padding:10px 12px;cursor:pointer;font-size:13.5px;font-weight:700;color:var(--purple2);
  list-style-position:inside;
}
.stage-help[open] summary{border-bottom:1px solid var(--border)}
.stage-table{margin:4px 0}
.stage-table td{font-size:13px;padding:7px 10px;vertical-align:top}
.stage-table td:first-child{white-space:nowrap;color:var(--text)}
.stage-table i{color:var(--purple2);font-style:normal}
.stage-help p{padding:0 12px 10px}

/* Stepper de etapa */
.stepper{display:flex;align-items:flex-start;margin:4px 0 14px}
.sstep{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;flex:none}
.sdot{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;
  background:var(--chip);border:2px solid var(--border);color:var(--soft);
}
.sdot svg{width:15px;height:15px}
.sstep.done .sdot{background:var(--sc);border-color:var(--sc);color:#fff}
.sstep.current .sdot{
  background:var(--sc);border-color:var(--sc);color:#fff;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--sc) 30%, transparent);
}
.slabel{font-size:10.5px;color:var(--soft);text-align:center;line-height:1.2;max-width:64px}
.sstep.current .slabel{color:var(--text);font-weight:700}
.sline{flex:1;height:2.5px;background:var(--border);margin-top:14px;border-radius:2px;min-width:8px}
.sline.done{background:var(--purple)}

.fab{
  position:fixed;right:18px;bottom:84px;z-index:25;
  width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(135deg,#8b5cf6,#2563eb);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(139,92,246,.5);
}
.fab svg{width:26px;height:26px}
.fab .fab-plus{
  position:absolute;right:-2px;top:-2px;
  width:22px;height:22px;border-radius:50%;
  background:#22c55e;border:2px solid var(--bg);
  display:flex;align-items:center;justify-content:center;
}
.fab .fab-plus svg{width:13px;height:13px}
.fab:active{transform:scale(.94)}

.toast{
  position:fixed;bottom:86px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#8b5cf6,#2563eb);color:white;
  padding:11px 20px;border-radius:999px;font-weight:700;z-index:50;
  box-shadow:0 10px 30px rgba(0,0,0,.4);white-space:nowrap;
}
.login-box{max-width:380px;margin:10vh auto 0}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.login-logo img{width:44px;height:44px}
.back{
  color:var(--blue);cursor:pointer;font-size:14px;margin-bottom:10px;
  display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;font-family:inherit;
}
.meta-row{display:flex;align-items:center;gap:8px;color:var(--muted);margin:6px 0;overflow-wrap:anywhere}
.meta-row svg{color:var(--purple2);flex:none}
.histhead{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-weight:700}
.funnel-track{flex:1;background:var(--chip);border-radius:6px;height:20px;overflow:hidden}
.funnel-fill{background:linear-gradient(135deg,#8b5cf6,#2563eb);height:100%;border-radius:6px}