/* ============================================================
 * SíVABiker · Dark/Light Neumorphism · v2.0
 * Mismo lenguaje visual de SíVAMarket (neumorfismo + gradiente
 * naranja), con selector de tema claro/oscuro.
 * ============================================================ */

:root{
  --siva-orange:#FF4713;
  --siva-orange-dark:#D9380A;
  --siva-orange-soft:#FF6B3D;
  --siva-yellow:#FFC53D;
  --siva-green:#2ECC81;
  --siva-blue:#5A8CFF;
  --siva-red:#FF6B5B;

  --bg:#0E0D10;
  --panel:#18171B;
  --panel-2:#1F1E23;
  --line:#2A2830;
  --text-hi:#F5F2ED;
  --text-mid:#B4AFA8;
  --text-mute:#726D66;

  --shadow-out:8px 8px 18px rgba(0,0,0,.55), -6px -6px 14px rgba(255,255,255,.02);
  --shadow-out-sm:4px 4px 10px rgba(0,0,0,.5), -3px -3px 8px rgba(255,255,255,.02);
  --shadow-in:inset 3px 3px 8px rgba(0,0,0,.5), inset -2px -2px 6px rgba(255,255,255,.03);
  --shadow-in-sm:inset 2px 2px 6px rgba(0,0,0,.45), inset -2px -2px 5px rgba(255,255,255,.03);

  --grad-orange:linear-gradient(135deg, #FF5B24 0%, var(--siva-orange) 55%, #D9380A 100%);

  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:11px;
}

[data-theme="light"]{
  --bg:#EEEBE6;
  --panel:#EEEBE6;
  --panel-2:#F1EEE9;
  --line:#E0DBD3;
  --text-hi:#2B2823;
  --text-mid:#6E6860;
  --text-mute:#9C958B;
  --siva-green:#0FBE7E;
  --siva-red:#E5453A;

  --shadow-out:6px 6px 14px rgba(163,150,133,.42), -6px -6px 14px rgba(255,255,255,.9);
  --shadow-out-sm:3px 3px 8px rgba(163,150,133,.38), -3px -3px 8px rgba(255,255,255,.85);
  --shadow-in:inset 3px 3px 7px rgba(163,150,133,.4), inset -3px -3px 7px rgba(255,255,255,.88);
  --shadow-in-sm:inset 2px 2px 5px rgba(163,150,133,.36), inset -2px -2px 5px rgba(255,255,255,.85);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{
  overflow-x:hidden; width:100%; height:100%;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  overscroll-behavior-y:none;
}
html, body{height:100%;}
body{
  font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color:var(--text-hi);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; width:100%; min-height:100%;
  transition:background .2s ease, color .2s ease;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
button{cursor:pointer; font-family:inherit; -webkit-tap-highlight-color:transparent;}
a{color:inherit; text-decoration:none;}
:focus-visible{outline:2px solid var(--siva-orange); outline-offset:2px;}
::-webkit-scrollbar{height:0; width:0;}

/* Elementos interactivos: sin flash gris al tocar, sin menú de
   "copiar/seleccionar" al mantener presionado, y sin delay de 300ms
   antes del tap (touch-action evita también el doble-tap-zoom). */
button, .btn, .tab, .tab-nav-btn, .theme-toggle, .toggle-pill,
.photo-upload, .pw-toggle, .admin-toggle, a{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
button, .theme-toggle, .toggle-pill, .biker-marker, .icon-circle, .title-icon,
.logo img, .status-dot{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
img{-webkit-user-drag:none; user-drag:none; -webkit-touch-callout:none;}

/* Hover solo para dispositivos con mouse real: en touch evita que el
   estado ":hover" se quede "pegado" después de tocar un botón. */
@media (hover:hover) and (pointer:fine){
          }

#app{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  min-height:calc(var(--vh, 1vh) * 100);
  min-height:100dvh;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  position:relative;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}

/* ============================================================
   THEME TOGGLE
   ============================================================ */
.theme-toggle{
  position:relative; width:56px; height:30px; border-radius:20px;
  background:var(--panel-2); box-shadow:var(--shadow-in-sm); border:1px solid var(--line);
  display:flex; align-items:center; padding:3px; flex-shrink:0;
  transition:background .2s ease;
}
.theme-toggle .tt-thumb{
  position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:var(--grad-orange); box-shadow:0 2px 6px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
[data-theme="light"] .theme-toggle .tt-thumb{transform:translateX(26px);}
.theme-toggle .tt-thumb svg{width:13px; height:13px;}
.theme-toggle .tt-icon{
  flex:1; display:flex; align-items:center; justify-content:center; color:var(--text-mute);
}
.theme-toggle .tt-icon svg{width:13px; height:13px;}

/* ---------- Header compartido ---------- */
.topbar{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:12px;
  padding:14px 20px;
  padding-top:calc(14px + env(safe-area-inset-top));
  background:rgba(14,13,16,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
[data-theme="light"] .topbar{background:rgba(238,235,230,.9);}
.topbar .logo{display:flex; align-items:center; gap:8px; font-weight:800; font-size:19px; color:var(--text-hi);}
.topbar .logo img{width:26px; height:26px; border-radius:7px;}
.topbar .app-tag{
  font-size:10.5px; font-weight:800; letter-spacing:.06em;
  color:#fff; background:var(--grad-orange);
  padding:4px 11px; border-radius:20px;
  box-shadow:0 4px 12px rgba(255,71,19,.28);
}
.topbar .theme-toggle{margin-left:auto;}

/* ---------- Pantallas (una app de una sola página) ---------- */
.screen{
  display:none;
  flex:1;
  flex-direction:column;
  padding:24px 20px 32px;
  padding-bottom:calc(32px + env(safe-area-inset-bottom));
  animation:fadeIn .25s ease;
}
.screen.active{display:flex;}

@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

.screen h1{font-size:24px; font-weight:800; margin-bottom:6px; color:var(--text-hi); display:flex; align-items:center; gap:10px;}
.screen .subtitle{color:var(--text-mid); font-size:14px; margin-bottom:22px; line-height:1.5; font-weight:500;}

.title-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:11px; flex-shrink:0;
  background:var(--panel-2); box-shadow:var(--shadow-out-sm); color:var(--siva-orange);
}
.title-icon svg{width:19px; height:19px;}

/* ---------- Formulario de registro ---------- */
.field{margin-bottom:16px;}
.field label{
  display:block; font-size:12.5px; font-weight:700; margin-bottom:7px; color:var(--text-mid);
}
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"]{
  width:100%; background:var(--panel-2); box-shadow:var(--shadow-in);
  border:1.5px solid transparent; border-radius:var(--radius-md); padding:13px 15px;
  font-size:16px; font-family:inherit; color:var(--text-hi); outline:none;
  transition:border-color .15s ease, background .15s ease;
}
.field input::placeholder{color:var(--text-mute);}
.field input:focus{border-color:var(--siva-orange);}
.field .hint{font-size:12px; color:var(--text-mute); margin-top:6px;}

.photo-upload{
  border:1.5px dashed var(--line); border-radius:var(--radius-md); padding:16px;
  display:flex; align-items:center; gap:14px; cursor:pointer;
  background:var(--panel-2); box-shadow:var(--shadow-in-sm);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.photo-upload:hover{border-color:var(--siva-orange);}
.photo-upload.has-photo{border-style:solid; border-color:var(--siva-green);}
.photo-upload .icon-circle{
  width:50px; height:50px; border-radius:50%; background:var(--panel); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:var(--siva-orange);
  box-shadow:var(--shadow-out-sm);
}
.photo-upload .icon-circle svg{width:22px; height:22px;}
.photo-upload .text strong{display:block; font-size:14px; color:var(--text-hi); font-weight:700;}
.photo-upload .text span{font-size:12px; color:var(--text-mute); font-weight:500;}
.photo-upload input[type="file"]{display:none;}
.photo-upload .preview{
  width:50px; height:50px; border-radius:12px; object-fit:cover; flex-shrink:0;
  box-shadow:var(--shadow-out-sm);
}

.section-label{
  font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--siva-orange-soft); margin:24px 0 12px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px; border:none; border-radius:var(--radius-md);
  font-family:inherit; font-weight:700; font-size:14.5px; cursor:pointer;
  transition:filter .15s ease, transform .1s ease, opacity .15s ease;
}
.btn-block{width:100%;}
.btn:active{transform:scale(.98);}
.btn:disabled{opacity:.55; cursor:not-allowed;}
.btn-primary{background:var(--grad-orange); color:#fff; box-shadow:0 6px 16px rgba(255,71,19,.3);}
.btn-primary:hover:not(:disabled){filter:brightness(1.08);}
.btn-outline{
  background:var(--panel-2); box-shadow:var(--shadow-out-sm); color:var(--text-hi);
  border:1px solid var(--line);
}
.btn-outline:hover:not(:disabled){color:var(--siva-orange);}
.btn-block-mt{margin-top:22px;}

.error-box{
  background:rgba(255,107,91,.14); color:var(--siva-red); border-radius:var(--radius-md); padding:12px 14px;
  font-size:13px; font-weight:600; margin-bottom:16px; display:none;
}
.error-box.show{display:block;}

/* ---------- Pantalla de validación KYC ---------- */
.kyc-screen{align-items:center; justify-content:center; text-align:center;}
.kyc-spinner{
  width:74px; height:74px; border-radius:50%;
  background:var(--panel-2); box-shadow:var(--shadow-in);
  border:6px solid transparent; border-top-color:var(--siva-orange); border-right-color:var(--siva-orange-soft);
  animation:spin 1s linear infinite; margin-bottom:26px;
}
@keyframes spin{to{transform:rotate(360deg);}}
.kyc-screen h1{font-size:20px;}
.kyc-screen .subtitle{max-width:280px; margin-left:auto; margin-right:auto;}
.kyc-steps{margin-top:26px; text-align:left; width:100%; max-width:280px;}
.kyc-step{
  display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-mute); font-weight:600;
  padding:8px 0;
}
.kyc-step .dot{width:8px; height:8px; border-radius:50%; background:var(--panel-2); box-shadow:var(--shadow-in-sm); flex-shrink:0;}
.kyc-step.done .dot{background:var(--siva-green); box-shadow:0 0 0 3px rgba(46,204,129,.2);}
.kyc-step.done{color:var(--text-hi); font-weight:700;}

/* ---------- Resultado KYC (rechazado / revisión manual) ---------- */
.result-icon{
  width:84px; height:84px; border-radius:50%; margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel-2); box-shadow:var(--shadow-out); color:var(--siva-orange-soft);
}
.result-icon svg{width:38px; height:38px;}
.result-icon.warn{color:var(--siva-yellow);}
.result-icon.error{color:var(--siva-red);}
.result-icon.ok{color:var(--siva-green);}

/* ---------- Pantalla "disponible" con mapa ---------- */
.map-screen{padding:0 !important; flex:1; position:relative;}
#map{
  width:100%; height:100%;
  min-height:100vh;
  min-height:calc(var(--vh, 1vh) * 100);
  min-height:100dvh;
  background:var(--panel);
  touch-action:none; /* deja que Leaflet controle pan/zoom sin conflicto con el navegador */
}
[data-theme="dark"] #map .leaflet-tile-pane{
  filter:brightness(.82) contrast(.92) saturate(.75) invert(1) hue-rotate(180deg);
}
.leaflet-control-attribution{
  background:var(--panel) !important; color:var(--text-mute) !important;
}
.leaflet-control-attribution a{color:var(--text-mid) !important;}
.leaflet-control-zoom{margin-top:calc(10px + env(safe-area-inset-top)) !important;}
.leaflet-control-zoom a{
  background:var(--panel-2) !important; color:var(--text-hi) !important; border-color:var(--line) !important;
  width:40px !important; height:40px !important; line-height:40px !important; font-size:20px !important;
}

.status-bar{
  position:absolute; top:16px; left:16px; right:16px; z-index:500;
  top:calc(16px + env(safe-area-inset-top));
  background:var(--panel); box-shadow:var(--shadow-out); border-radius:var(--radius-lg); padding:14px 16px;
  display:flex; align-items:center; gap:12px;
}
.status-dot{
  width:12px; height:12px; border-radius:50%; background:var(--siva-green);
  box-shadow:0 0 0 4px rgba(46,204,129,.2);
  animation:pulse 1.6s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(46,204,129,.2);} 50%{box-shadow:0 0 0 8px rgba(46,204,129,.05);}}
.status-bar .text{flex:1; min-width:0;}
.status-bar .text strong{display:block; font-size:14px; color:var(--text-hi); font-weight:700;}
.status-bar .text span{font-size:12px; color:var(--text-mute); font-weight:500;}

.onoff-switch{
  position:relative; flex-shrink:0;
  width:52px; height:30px; border-radius:20px; border:none; padding:0;
  background:var(--panel-2); box-shadow:var(--shadow-in-sm);
  cursor:pointer; transition:background .2s ease;
}
.onoff-knob{
  position:absolute; top:3px; left:3px;
  width:24px; height:24px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.35);
  transition:transform .2s ease, background .2s ease;
}
.onoff-switch.on{background:var(--grad-orange);}
.onoff-switch.on .onoff-knob{transform:translateX(22px);}
.onoff-switch.busy{background:var(--siva-orange-soft); opacity:.85; cursor:default;}
.onoff-switch.busy .onoff-knob{transform:translateX(22px); animation:pulse-knob 1.4s ease-in-out infinite;}
@keyframes pulse-knob{0%,100%{opacity:1;} 50%{opacity:.55;}}

.gps-banner{
  position:absolute; z-index:501;
  top:calc(16px + env(safe-area-inset-top) + 66px);
  left:16px; right:16px;
  background:#2a1414; border:1px solid rgba(224,64,64,.4);
  box-shadow:var(--shadow-out); border-radius:var(--radius-lg); padding:12px 14px;
  display:flex; align-items:center; gap:10px;
}
.gps-banner .icon{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:32px; height:32px; border-radius:50%; background:rgba(224,64,64,.18); color:#ff6b6b;
}
.gps-banner .icon svg{width:18px; height:18px;}
.gps-banner .text{flex:1; min-width:0;}
.gps-banner .text strong{display:block; font-size:13px; color:#fff; font-weight:700;}
.gps-banner .text span{font-size:11.5px; color:#e0a0a0; font-weight:500;}
.btn-sm{padding:7px 12px !important; font-size:12px !important; flex-shrink:0;}

.recenter-btn{
  position:absolute; z-index:499;
  right:16px; bottom:calc(96px + env(safe-area-inset-bottom));
  width:44px; height:44px; border-radius:50%; border:none;
  background:var(--panel); box-shadow:var(--shadow-out); color:var(--text-hi);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform .12s ease, color .15s ease;
}
.recenter-btn svg{width:20px; height:20px;}
.recenter-btn:active{transform:scale(0.92);}
.recenter-btn.active{color:var(--siva-orange);}

.biker-marker{
  width:64px; height:64px;
  display:flex; align-items:center; justify-content:center;
}

/* Icono de posición del biker en el mapa: gira como la aguja de un reloj,
   pero saltando de 15 en 15 minutos (12 -> 3 -> 6 -> 9 -> 12), quedándose
   quieto en cada posición y saltando de golpe a la siguiente, en sentido
   horario, en bucle. Ajustar `animation-duration` para más/menos pausa
   entre saltos (duración total / 4 = tiempo de pausa en cada posición). */
.leaflet-div-icon.biker-marker-leaflet-icon{
  background:transparent; border:none;
}
.biker-marker-img{
  display:block;
  height:60px; width:auto;
  transform-origin:50% 50%;
  filter:
    drop-shadow(1.5px 0 0 #fff)
    drop-shadow(-1.5px 0 0 #fff)
    drop-shadow(0 1.5px 0 #fff)
    drop-shadow(0 -1.5px 0 #fff);
}
/* Solo gira ("escanea la zona") cuando el biker está en línea/disponible.
   Fuera de línea o en un pedido, el ícono queda quieto. */
.biker-marker-img.spinning{
  animation: biker-marker-spin 6s steps(1, jump-end) infinite;
}
@keyframes biker-marker-spin{
  0%   { transform:rotate(0deg); }
  25%  { transform:rotate(90deg); }
  50%  { transform:rotate(180deg); }
  75%  { transform:rotate(270deg); }
  100% { transform:rotate(360deg); }
}

.waiting-banner{
  position:absolute; bottom:20px; left:16px; right:16px; z-index:500;
  bottom:calc(20px + env(safe-area-inset-bottom));
  background:var(--panel); box-shadow:var(--shadow-out); border-radius:var(--radius-lg); padding:16px;
  text-align:center;
}
.waiting-banner .icon{
  display:flex; align-items:center; justify-content:center; margin:0 auto 8px;
  width:38px; height:38px; border-radius:50%; background:var(--panel-2);
  box-shadow:var(--shadow-in-sm); color:var(--siva-orange-soft);
}
.waiting-banner .icon svg{width:18px; height:18px;}
.waiting-banner strong{display:block; font-size:14px; color:var(--text-hi); font-weight:700;}
.waiting-banner span{font-size:12px; color:var(--text-mute); font-weight:500;}

/* ---------- Utilidades ---------- */
.hidden{display:none !important;}
.center-text{text-align:center;}
.mt-8{margin-top:8px;}

.admin-toggle{
  display:block; width:100%; background:none; border:none; color:var(--text-mute);
  font-size:11.5px; font-weight:600; text-decoration:underline; cursor:pointer;
  margin-top:14px; padding:4px; text-align:center;
}
.admin-toggle:hover{color:var(--siva-orange-soft);}
.admin-login-form{margin-top:10px; display:flex; flex-direction:column; gap:8px;}
.admin-login-form input{
  background:var(--panel-2); box-shadow:var(--shadow-in); border:1.5px solid transparent; border-radius:var(--radius-md);
  padding:12px 14px; font-size:16px; font-family:inherit; color:var(--text-hi);
}
.admin-login-form input::placeholder{color:var(--text-mute);}
.admin-login-form input:focus{outline:none; border-color:var(--siva-orange);}
.password-field{position:relative;}
.password-field input{padding-right:46px;}
.pw-toggle{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:10px; border:none; background:transparent;
  display:flex; align-items:center; justify-content:center; color:var(--text-mute);
  transition:color .15s ease;
}
.pw-toggle:hover{color:var(--siva-orange);}
.pw-toggle svg{width:18px; height:18px;}
.pw-toggle .hidden{display:none;}

/* Pantalla de login del biker: tabs Iniciar sesion / Registro. */
.tabs{
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  background:var(--panel-2); box-shadow:var(--shadow-in); border-radius:16px;
  padding:5px; margin-bottom:22px;
}
.tab{
  background:transparent; border:none; padding:11px; font-size:13.5px;
  border-radius:12px; font-weight:700; color:var(--text-mid); transition:all .15s ease;
}
.tab.active{background:var(--grad-orange); color:#fff; box-shadow:0 4px 12px rgba(255,71,19,.3);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
.registro-card{
  background:var(--panel-2); border-radius:var(--radius-lg); box-shadow:var(--shadow-out-sm);
  padding:22px 20px; text-align:center;
}
.registro-icon{
  width:52px; height:52px; border-radius:16px; margin:0 auto 14px;
  background:rgba(46,204,129,.14); color:var(--siva-green);
  display:flex; align-items:center; justify-content:center;
}
.registro-icon svg{width:26px; height:26px;}
.registro-card .hint{font-size:12.5px; color:var(--text-mid); line-height:1.6; margin-bottom:16px;}

/* ---------- Modal de Oferta ---------- */
.offer-modal{
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  display:flex; align-items:flex-end; justify-content:center;
  animation:fadeInModal .2s ease-out;
}
.offer-content{
  background:var(--panel); width:100%; max-width:520px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0; padding:20px;
  padding-bottom:calc(20px + env(safe-area-inset-bottom));
  padding-left:calc(20px + env(safe-area-inset-left));
  padding-right:calc(20px + env(safe-area-inset-right));
  box-shadow:0 -20px 60px rgba(0,0,0,.5);
  animation:slideUp .3s cubic-bezier(.16,1,.3,1);
  max-height:88vh; max-height:88dvh; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.offer-header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line);
}
.offer-header strong{margin:0; font-size:17px; color:var(--text-hi); font-weight:800;}
.offer-timer{
  background:var(--grad-orange); color:#fff; padding:6px 14px;
  border-radius:20px; font-weight:800; font-size:14px;
  min-width:56px; text-align:center;
  box-shadow:0 4px 12px rgba(255,71,19,.28);
}
.offer-body{margin-bottom:16px;}
.offer-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-bottom:1px dashed var(--line); font-size:13.5px;
}
.offer-row:last-child{border-bottom:none;}
.offer-row span{
  color:var(--text-mute); font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
}
.offer-row span svg{width:14px; height:14px; flex-shrink:0; color:var(--siva-orange-soft);}
.offer-row strong{color:var(--text-hi); text-align:right; max-width:60%; font-weight:700;}
.offer-row-highlight{
  margin-top:4px; padding:10px 8px; border-radius:10px;
  background:rgba(46,204,113,0.12); border-bottom:none !important;
}
.offer-row-highlight span{color:var(--siva-green,#2ecc71); font-weight:600;}
.offer-row-highlight strong{color:var(--siva-green,#2ecc71); font-size:1.1em;}
.offer-actions{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.retiro-hint{
  font-size:12.5px; color:var(--text-mid); font-weight:600; line-height:1.5; margin-bottom:14px;
}
.retiro-input{
  width:100%; box-sizing:border-box; text-align:center; font-size:28px; font-weight:800;
  letter-spacing:10px; padding:14px 10px; border-radius:12px; border:1px solid var(--line);
  background:var(--panel-2); color:var(--text-hi); outline:none;
}
.retiro-input:focus{border-color:var(--siva-orange);}
.retiro-error{
  color:#FF5A5A; font-size:12px; font-weight:700; margin-top:10px; text-align:center;
}

/* ---------- Pedido Activo ---------- */
.active-order{
  position:absolute; bottom:20px; left:16px; right:16px; z-index:500;
  bottom:calc(20px + env(safe-area-inset-bottom));
  background:var(--panel); box-shadow:var(--shadow-out); border-radius:var(--radius-lg); padding:16px;
}
.active-order-header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--line);
}
.active-order-header strong{font-size:15px; color:var(--text-hi); font-weight:800;}

/* Numero de pedido: el biker se lo dice al comercio al retirar. Debe
   verse grande y claro para que no se confunda con otro biker en el local. */
.active-order-numero{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--grad-orange); color:#fff; border-radius:10px;
  padding:10px 14px; margin-bottom:12px;
}
.active-order-numero span{font-size:12px; font-weight:700; opacity:.9;}
.active-order-numero strong{font-size:20px; font-weight:900; letter-spacing:.03em;}
.badge{
  background:var(--grad-orange); color:#fff; padding:4px 11px;
  border-radius:10px; font-size:10.5px; font-weight:800;
  letter-spacing:.02em;
}
.active-order-actions{margin-top:12px; display:flex; flex-direction:column; gap:8px;}
.active-order-actions .btn{width:100%;}
.active-order-actions .btn svg{width:16px; height:16px; flex-shrink:0;}

.cobro-confirm{
  display:flex; flex-direction:column; gap:10px;
}
.cobro-monto{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:rgba(46,204,113,.12); color:#2ECC71; padding:12px 14px; border-radius:12px;
  font-size:13px; font-weight:700;
}
.cobro-monto strong{font-size:20px; font-weight:800;}
.cobro-check{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  font-size:12.5px; font-weight:600; color:var(--text-mid); line-height:1.4;
  padding:2px 2px;
}
.cobro-check input{width:18px; height:18px; flex-shrink:0; accent-color:var(--siva-orange); margin-top:1px;}

.nav-row{display:flex; gap:8px;}
.nav-row .btn-nav{width:100%; padding:12px; font-size:13.5px; text-decoration:none;}

/* ---------- Animaciones ---------- */
@keyframes fadeInModal{from{opacity:0;}to{opacity:1;}}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}

/* ---------- Status dot off ---------- */
.status-dot.off{background:var(--text-mute) !important; box-shadow:none !important; animation:none !important;}


/* ---------- Status dot / toggle "en_pedido" (busy, no togglable) ---------- */
.status-dot.busy{background:var(--siva-orange-soft) !important; box-shadow:0 0 0 4px rgba(255,107,61,.22) !important; animation:pulse 1.6s ease-in-out infinite;}
/* Login de sivabiker: header calcado del patron .brand de sivamarket. */
.login-wrap{width:100%; max-width:400px; margin:0 auto;}
.brand{text-align:center; margin-bottom:30px;}
.brand-logo-wrap{
  width:84px; height:84px; border-radius:24px; margin:0 auto 16px;
  background:var(--panel); box-shadow:var(--shadow-out);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.brand-logo{width:64px; height:64px; border-radius:16px; display:block;}
.brand h1{font-size:26px; font-weight:800; letter-spacing:.2px; color:var(--text-hi);}
.brand h1 span{color:var(--siva-orange);}

/* En login (screen-login) el header global se oculta: sivamarket
   tampoco lo muestra ahi, evita el logo duplicado con .brand. */
body.login-mode .topbar{display:none;}

#screen-login.active{
  display:flex; align-items:center; justify-content:center; padding:24px 20px 40px;
  position:relative;
}
.login-topbar{
  position:absolute; top:0; left:0; right:0; display:flex; justify-content:flex-end;
  padding:18px 20px;
}
#screen-login{position:relative;}

.btn svg{width:16px; height:16px; flex-shrink:0;}