/* ===========================================================================
   DriverAlertas · Sistema de diseño (lenguaje Lemon Cash)
   Fondo gris claro, cards blancas flotantes (22px), acento verde lima #C6FF00.
   =========================================================================== */

:root{
  --lime:#C6FF00; --lime-ink:#0E0E0E; --lime-press:#b2e600;
  --ground:#EBEBEB; --card:#FFFFFF; --dark:#111210;
  --ink:#0E0E0E; --ink-2:#6B6B6B; --ink-3:#9A9A93;
  --on-dark:#FFFFFF; --on-dark-2:#A6A79F;
  --line:#E4E4E1; --danger:#E5484D;
  --radius:22px; --radius-sm:14px;
  --shadow-card:0 10px 26px rgba(0,0,0,.07);
  --shadow-float:0 14px 34px rgba(0,0,0,.16);
  --font:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --maxw:480px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); background:var(--ground); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh;
}
a{color:inherit}
button{font-family:inherit}

/* ---------- Shell mobile-first ---------- */
.shell{ max-width:var(--maxw); margin:0 auto; min-height:100vh; position:relative;
  padding:0 18px calc(96px + env(safe-area-inset-bottom)); }
.shell.no-nav{ padding-bottom:32px }

/* ---------- App bar ---------- */
.appbar{ display:flex; align-items:center; justify-content:space-between; padding:18px 4px 14px; }
.brand{ font-size:24px; font-weight:800; letter-spacing:-.03em; color:var(--ink); text-decoration:none }
.brand .dot{ color:var(--lime); -webkit-text-stroke:.5px #b7ec00; }
.appbar-icons{ display:flex; gap:10px }
.iconbtn{ width:42px; height:42px; border-radius:50%; background:var(--card); border:none;
  display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.06); cursor:pointer; }
.iconbtn svg{ width:20px; height:20px; stroke:var(--ink); fill:none; stroke-width:2.2 }
.iconbtn.bell{ position:relative }
.iconbtn.bell.has-dot::after{ content:""; position:absolute; top:9px; right:11px; width:8px; height:8px;
  border-radius:50%; background:var(--lime); box-shadow:0 0 0 2px var(--card) }

/* ---------- Location row ---------- */
.loc{ display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:13px;
  color:var(--ink-2); margin:0 4px 14px; }
.loc svg{ width:15px; height:15px; stroke:var(--ink-2); fill:none; stroke-width:2.2 }
.loc b{ color:var(--ink) }

/* ---------- Featured dark card ---------- */
.featured{ background:var(--dark); color:var(--on-dark); border-radius:var(--radius);
  padding:20px; margin-bottom:22px; box-shadow:0 18px 34px rgba(0,0,0,.18); }
.featured .eyebrow{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px }
.featured .eyebrow .lbl{ font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--on-dark-2) }
.featured h2{ margin:0; font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1.05 }
.featured .addr{ margin:8px 0 0; font-size:15px; font-weight:600; color:#EDEDEA }
.fmeta{ display:flex; align-items:center; gap:14px; margin-top:16px }
.fstat{ display:flex; flex-direction:column; gap:2px }
.fstat .n{ font-size:20px; font-weight:800; letter-spacing:-.01em }
.fstat .k{ font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--on-dark-2); text-transform:uppercase }
.fdiv{ width:1px; align-self:stretch; background:rgba(255,255,255,.12) }

/* ---------- Live / badges ---------- */
.live{ display:inline-flex; align-items:center; gap:6px; background:var(--lime); color:var(--lime-ink);
  font-size:11px; font-weight:800; letter-spacing:.04em; padding:5px 10px; border-radius:999px; }
.live .pulse{ width:7px; height:7px; border-radius:50%; background:var(--lime-ink); animation:pulse 1.4s infinite }
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){ .live .pulse{ animation:none } }
.badge{ font-size:11px; font-weight:800; letter-spacing:.04em; padding:5px 10px; border-radius:999px }
.badge.on{ background:var(--lime); color:var(--lime-ink) }
.badge.warn{ background:#F1F1EF; color:#8A8A83 }
.badge.done{ background:#E9E9E6; color:#8A8A83 }

/* ---------- Section header ---------- */
.sec{ display:flex; align-items:baseline; justify-content:space-between; margin:0 4px 12px }
.sec h3{ margin:0; font-size:13px; font-weight:800; letter-spacing:.12em; color:var(--ink-2); text-transform:uppercase }
.sec a{ font-size:13px; font-weight:700; text-decoration:none }

/* ---------- Operativo card ---------- */
.op{ background:var(--card); border-radius:var(--radius); padding:18px; margin-bottom:14px; box-shadow:var(--shadow-card) }
.op-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px }
.op-type{ font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--ink) }
.op-addr{ font-size:14px; font-weight:600; color:var(--ink); margin:2px 0 0 }
.op-meta{ display:flex; align-items:center; gap:8px; margin-top:8px; font-size:13px; font-weight:600; color:var(--ink-2); flex-wrap:wrap }
.op-meta .d{ width:3px; height:3px; border-radius:50%; background:#C9C9C4 }
.op-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:15px;
  padding-top:14px; border-top:1px solid var(--line) }
.conf{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap }
.cbadge{ display:inline-flex; align-items:center; gap:6px; background:var(--lime); color:var(--lime-ink);
  font-size:12px; font-weight:800; padding:5px 10px; border-radius:999px }
.cbadge svg{ width:13px; height:13px; stroke:var(--lime-ink); fill:none; stroke-width:2.6 }
.conf .no{ font-size:12px; font-weight:700; color:var(--ink-2) }
.acts{ display:flex; gap:8px; flex-shrink:0 }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer;
  font-weight:800; letter-spacing:-.01em; border-radius:var(--radius-sm); padding:14px 18px; font-size:15px;
  transition:transform .06s ease, background .15s ease; }
.btn:active{ transform:scale(.98) }
.btn-block{ width:100% }
.btn-primary{ background:var(--lime); color:var(--lime-ink) }
.btn-primary:hover{ background:var(--lime-press) }
.btn-dark{ background:var(--dark); color:var(--on-dark) }
.btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2.4 }
.pill{ font-size:13px; font-weight:800; border-radius:11px; padding:9px 14px; cursor:pointer; border:none;
  display:inline-flex; align-items:center; text-decoration:none }
.pill.primary{ background:var(--lime); color:var(--lime-ink) }
.pill.ghost{ background:transparent; color:var(--ink-2); border:1.5px solid var(--line) }
.pill.ghost-light{ background:transparent; color:var(--on-dark); border:1.5px solid rgba(255,255,255,.28) }
.pill:active{ transform:scale(.97) }
.featured-acts{ margin-top:18px; display:flex; gap:10px }
.featured-acts .pill{ flex:1; padding:12px }

/* ---------- Tabbar ---------- */
.tabbar{ position:fixed; left:50%; transform:translateX(-50%); bottom:16px; width:calc(100% - 32px); max-width:calc(var(--maxw) - 4px);
  height:70px; background:var(--card); border-radius:26px; box-shadow:var(--shadow-float);
  display:flex; align-items:center; justify-content:space-around; padding:0 12px; z-index:50; }
.tab{ display:flex; flex-direction:column; align-items:center; gap:5px; background:none; border:none; text-decoration:none;
  cursor:pointer; font-size:10.5px; font-weight:800; letter-spacing:.02em; color:#B4B4AE; }
.tab svg{ width:23px; height:23px; stroke:#B4B4AE; fill:none; stroke-width:2 }
.tab.active{ color:var(--ink) } .tab.active svg{ stroke:var(--ink) }
.fab{ width:60px; height:60px; margin-top:-30px; border-radius:22px; background:var(--lime);
  display:grid; place-items:center; box-shadow:0 10px 22px rgba(198,255,0,.5); border:4px solid var(--ground); cursor:pointer; text-decoration:none }
.fab svg{ width:26px; height:26px; stroke:var(--lime-ink); fill:none; stroke-width:2.6 }
.tab-admin{ display:none } body.is-admin .tab-admin{ display:flex }

/* ---------- Auth (login / registro) ---------- */
.auth{ max-width:var(--maxw); margin:0 auto; min-height:100vh; padding:0 22px 40px; display:flex; flex-direction:column }
.auth-head{ padding:48px 0 28px; text-align:center }
.auth-head .brand{ font-size:30px }
.auth-head p{ margin:10px 0 0; color:var(--ink-2); font-weight:600; font-size:15px }
.auth-card{ background:var(--card); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-card) }
.field{ margin-bottom:14px }
.field label{ display:block; font-size:12px; font-weight:800; letter-spacing:.04em; color:var(--ink-2);
  text-transform:uppercase; margin:0 0 7px 2px }
.field input{ width:100%; border:1.5px solid var(--line); background:#FAFAF9; border-radius:var(--radius-sm);
  padding:14px; font-size:16px; font-weight:600; font-family:inherit; color:var(--ink); }
.field input:focus{ outline:none; border-color:var(--ink); background:#fff }
.chips{ display:flex; flex-wrap:wrap; gap:6px }
.chip-opt{ position:relative }
.chip-opt input{ position:absolute; opacity:0; pointer-events:none }
.chip-opt label{ display:inline-block; padding:5px 9px; border-radius:999px; background:#F2F2F0;
  border:1.5px solid transparent; font-size:11px; font-weight:800; color:var(--ink-2); cursor:pointer; letter-spacing:0; text-transform:none }
.chip-opt input:checked + label{ background:var(--lime); color:var(--lime-ink); border-color:var(--lime-press) }
.chip-opt input:focus-visible + label{ outline:2px solid var(--ink); outline-offset:2px }
.auth-foot{ text-align:center; margin-top:20px; font-size:14px; font-weight:600; color:var(--ink-2) }
.auth-foot a{ font-weight:800; text-decoration:none }

/* ---------- Misc ---------- */
.msg{ border-radius:var(--radius-sm); padding:12px 14px; font-size:14px; font-weight:700; margin-bottom:14px; display:none }
.msg.show{ display:block }
.msg.error{ background:#FDECEC; color:var(--danger) }
.msg.info{ background:#F1F1EF; color:var(--ink-2) }
.empty{ text-align:center; color:var(--ink-3); font-weight:700; padding:50px 20px }
.skeleton{ background:linear-gradient(90deg,#e7e7e4,#f1f1ef,#e7e7e4); background-size:200% 100%;
  animation:sk 1.2s infinite; border-radius:var(--radius); height:120px; margin-bottom:14px }
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){ .skeleton{ animation:none } }

/* ---------- Responsive: tablet (≥640px) y desktop (≥1024px) ---------- */
@media (min-width: 640px) {
  :root { --maxw: 620px; }
}
@media (min-width: 1024px) {
  :root { --maxw: 800px; }
  /* Admin: 4 tarjetas en fila en lugar de 2 */
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  /* Mapa más alto en pantalla grande */
  #mapa { height: 360px; }
}
.push-cta{ background:var(--dark); color:var(--on-dark); border-radius:var(--radius); padding:16px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px }
.push-cta .txt{ font-size:14px; font-weight:700 } .push-cta .txt small{ display:block; color:var(--on-dark-2); font-weight:600; margin-top:2px }

button:focus-visible, a:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }

/* ---------- Cargar operativo (mapa + formulario) ---------- */
.form-group{ margin-bottom:18px }
.form-label{ display:block; font-size:12px; font-weight:800; letter-spacing:.04em; color:var(--ink-2);
  text-transform:uppercase; margin:0 0 8px 2px }
.tipo-chips{ display:flex; flex-wrap:wrap; gap:8px }
.map-wrap{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-card) }
#mapa{ width:100%; height:280px; background:#DDD; z-index:1 }
.map-search{ position:absolute; top:12px; left:12px; right:12px; z-index:2; display:flex; gap:8px }
.map-search input{ flex:1; border:none; background:var(--card); border-radius:12px; padding:12px 14px;
  font-size:14px; font-weight:600; font-family:inherit; box-shadow:0 4px 14px rgba(0,0,0,.14); }
.map-search input:focus{ outline:2px solid var(--lime) }
.map-search button{ border:none; background:var(--ink); color:#fff; border-radius:12px; padding:0 14px;
  font-weight:800; font-family:inherit; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.14) }
.map-gps{ position:absolute; bottom:12px; right:12px; z-index:2; display:inline-flex; align-items:center; gap:7px;
  border:none; background:var(--lime); color:var(--lime-ink); border-radius:12px; padding:11px 14px;
  font-weight:800; font-size:13px; font-family:inherit; cursor:pointer; box-shadow:0 6px 16px rgba(198,255,0,.5) }
.map-gps svg{ width:16px; height:16px; stroke:var(--lime-ink); fill:none; stroke-width:2.4 }
.map-hint{ font-size:12.5px; font-weight:600; color:var(--ink-2); margin:8px 4px 0; display:flex; align-items:center; gap:6px }
.map-hint.set{ color:#3B8A00 }
textarea.field-input{ width:100%; border:1.5px solid var(--line); background:#FAFAF9; border-radius:var(--radius-sm);
  padding:14px; font-size:16px; font-weight:600; font-family:inherit; color:var(--ink); resize:vertical; min-height:52px }
textarea.field-input:focus, input.field-input:focus, select.field-input:focus{ outline:none; border-color:var(--ink); background:#fff }
input.field-input{ width:100%; border:1.5px solid var(--line); background:#FAFAF9; border-radius:var(--radius-sm);
  padding:14px; font-size:16px; font-weight:600; font-family:inherit; color:var(--ink) }
select.field-input{ width:100%; border:1.5px solid var(--line); background:#FAFAF9; border-radius:var(--radius-sm);
  padding:14px 44px 14px 14px; font-size:16px; font-weight:600; font-family:inherit; color:var(--ink);
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111210' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center }

/* ---------- Bottom sheet (modal duplicado) ---------- */
.sheet-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200; display:none;
  align-items:flex-end; justify-content:center }
.sheet-backdrop.show{ display:flex }
.sheet{ background:var(--card); width:100%; max-width:var(--maxw); border-radius:24px 24px 0 0; padding:24px 22px calc(28px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 40px rgba(0,0,0,.25); animation:sheet-up .28s ease }
@keyframes sheet-up{ from{ transform:translateY(100%) } to{ transform:translateY(0) } }
@media (prefers-reduced-motion:reduce){ .sheet{ animation:none } }
.sheet h3{ margin:0 0 8px; font-size:20px; font-weight:800; letter-spacing:-.01em }
.sheet p{ margin:0 0 18px; font-size:14px; font-weight:600; color:var(--ink-2); line-height:1.5 }
.sheet .op{ margin-bottom:18px }
.sheet-actions{ display:flex; flex-direction:column; gap:10px }

/* ---------- Admin (dashboard, gestión, notificar) ---------- */
.segmented{ display:flex; gap:6px; background:#E1E1DE; border-radius:16px; padding:5px; margin:2px 0 20px }
.seg-btn{ flex:1; border:none; background:transparent; font-family:inherit; font-weight:800; font-size:13px;
  color:var(--ink-2); padding:10px 6px; border-radius:12px; cursor:pointer }
.seg-btn.active{ background:var(--card); color:var(--ink); box-shadow:0 2px 8px rgba(0,0,0,.08) }
.tab-panel[hidden]{ display:none }

.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:8px }
.stat{ background:var(--card); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-card) }
.stat .n{ font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1 }
.stat .k{ font-size:12px; font-weight:700; color:var(--ink-2); margin-top:6px }
.stat.accent{ background:var(--lime) } .stat.accent .n{ color:var(--lime-ink) } .stat.accent .k{ color:var(--lime-ink) }
.stat.dark{ background:var(--dark) } .stat.dark .n{ color:#fff } .stat.dark .k{ color:var(--on-dark-2) }

.bars{ background:var(--card); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-card); margin-bottom:14px }
.bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:12px }
.bar-row:last-child{ margin-bottom:0 }
.bar-row .lbl{ width:110px; font-size:12.5px; font-weight:700; color:var(--ink); flex-shrink:0 }
.bar-track{ flex:1; background:#EDEDEA; border-radius:8px; height:20px; overflow:hidden }
.bar-fill{ display:block; height:100%; background:var(--lime); border-radius:8px; min-width:3px; transition:width .4s ease }
.bar-row .val{ font-size:13px; font-weight:800; width:28px; text-align:right; font-variant-numeric:tabular-nums }

.pill.danger{ background:transparent; color:var(--danger); border:1.5px solid #F3C6C7 }

/* ---------- Listado (búsqueda + filtros) ---------- */
.search-row{ position:relative; margin-bottom:12px }
.search-row svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; stroke:var(--ink-3); fill:none; stroke-width:2.2; pointer-events:none }
.search-row input{ width:100%; border:1.5px solid var(--line); background:var(--card); border-radius:var(--radius-sm);
  padding:13px 14px 13px 40px; font-size:15px; font-weight:600; font-family:inherit; color:var(--ink);
  box-shadow:var(--shadow-card) }
.search-row input:focus{ outline:none; border-color:var(--ink) }
.search-row .clear{ position:absolute; right:8px; top:50%; transform:translateY(-50%); border:none; background:none;
  width:28px; height:28px; border-radius:50%; display:none; align-items:center; justify-content:center; cursor:pointer;
  color:var(--ink-3); font-size:16px; font-weight:800 }
.search-row.has-text .clear{ display:flex }

.filter-scroll{ display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none }
.filter-scroll::-webkit-scrollbar{ display:none }
.filter-scroll .chip-opt label{ white-space:nowrap }
.list-count{ font-size:12.5px; font-weight:700; color:var(--ink-2); margin:0 4px 10px }

/* ---------- Splash (carga inicial + cold start del servidor) ---------- */
.da-splash{ position:fixed; inset:0; z-index:9999; background:var(--ground);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  padding:32px; text-align:center; transition:opacity .35s ease; }
.da-splash.hidden{ opacity:0; pointer-events:none }
.da-splash-mark{ font-size:30px; font-weight:800; letter-spacing:-.03em; color:var(--ink) }
.da-splash-mark .dot{ color:var(--lime); -webkit-text-stroke:.5px #b7ec00 }
.da-splash-spinner{ width:38px; height:38px; border-radius:50%;
  border:4px solid #D9D9D6; border-top-color:var(--lime); animation:da-spin .8s linear infinite }
@keyframes da-spin{ to{ transform:rotate(360deg) } }
.da-splash-msg{ font-size:14px; font-weight:700; color:var(--ink-2); min-height:20px; max-width:280px }
@media (prefers-reduced-motion:reduce){ .da-splash-spinner{ animation-duration:1.6s } }