:root {
  --brand: #0E7C86;
  --brand-dark: #095E66;
  --brand-soft: #E3F4F5;
  --accent: #F2A33A;
  --bg: #F6F8F9;
  --card: #FFFFFF;
  --text: #17252A;
  --muted: #5F6F75;
  --line: #E1E7EA;
  --ok: #1E8E4E;
  --danger: #C23B3B;
  --radius: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
#app { max-width: 520px; margin: 0 auto; min-height: 100vh; padding-bottom: 90px; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 26px; font-weight: 800; }
h2 { font-size: 20px; font-weight: 800; }
h3 { font-size: 17px; font-weight: 700; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

/* Splash */
.splash { min-height: 100vh; display: grid; place-items: center; background: var(--brand); }
.logo-big { color: #fff; font-size: 42px; font-weight: 800; letter-spacing: -1px; }

/* Header */
.top {
  background: var(--brand); color: #fff;
  padding: calc(18px + env(safe-area-inset-top)) 16px 22px;
  border-radius: 0 0 24px 24px;
}
.top-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.logo { font-weight: 800; font-size: 22px; letter-spacing: -0.5px; }
.top .hello { margin-top: 14px; font-size: 15px; opacity: .9; }
.top h1 { color: #fff; margin-top: 2px; }
.link-btn { background: rgba(255,255,255,.16); color: #fff; border: 0; padding: 8px 12px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }

.wrap { padding: 16px; display: grid; gap: 14px; }

/* Cards */
.card { background: var(--card); border-radius: var(--radius); padding: 16px; border: 1px solid var(--line); }
.card.tap { cursor: pointer; transition: transform .08s; }
.card.tap:active { transform: scale(.985); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.stack { display: grid; gap: 8px; }
.price { font-size: 22px; font-weight: 800; color: var(--brand); white-space: nowrap; }
.price small { font-size: 13px; font-weight: 700; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--brand-soft); color: var(--brand-dark); font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.chip.warn { background: #FFF1DC; color: #8A5A12; }
.chip.ok { background: #E2F4E9; color: var(--ok); }
.chip.gray { background: #EEF1F2; color: var(--muted); }

/* Forms */
label { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
input, select, textarea {
  font: inherit; font-size: 16px; padding: 13px 14px; border-radius: 12px;
  border: 1.5px solid var(--line); background: #fff; color: var(--text); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); }
textarea { min-height: 80px; resize: vertical; }
.check { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.check input { width: 22px; height: 22px; accent-color: var(--brand); }

.btn {
  font: inherit; font-weight: 800; font-size: 16px; border: 0; border-radius: 14px;
  padding: 14px 18px; background: var(--brand); color: #fff; cursor: pointer; width: 100%;
}
.btn:disabled { opacity: .55; cursor: default; }
.btn.secondary { background: var(--brand-soft); color: var(--brand-dark); }
.btn.accent { background: var(--accent); color: #3A2400; }
.btn.danger { background: #FBE9E9; color: var(--danger); }
.btn.small { padding: 10px 14px; font-size: 15px; width: auto; }

/* Auth */
.auth-hero { background: var(--brand); color: #fff; padding: calc(48px + env(safe-area-inset-top)) 24px 40px; border-radius: 0 0 28px 28px; }
.auth-hero .logo-big { font-size: 38px; }
.auth-hero p { margin-top: 8px; opacity: .92; font-size: 16px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; background: #EAF0F1; border-radius: 14px; padding: 4px; }
.tabs button { font: inherit; font-weight: 800; border: 0; background: transparent; padding: 11px; border-radius: 11px; cursor: pointer; color: var(--muted); }
.tabs button.on { background: #fff; color: var(--brand-dark); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.role { border: 2px solid var(--line); border-radius: 14px; padding: 12px 6px; text-align: center; cursor: pointer; background: #fff; font: inherit; }
.role .ico { font-size: 26px; }
.role .t { font-weight: 800; font-size: 14px; margin-top: 4px; }
.role.on { border-color: var(--brand); background: var(--brand-soft); }

/* Bottom nav */
.nav {
  position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--line);
  display: flex; justify-content: center; padding-bottom: env(safe-area-inset-bottom);
}
.nav-inner { display: flex; width: 100%; max-width: 520px; }
.nav button { flex: 1; border: 0; background: none; font: inherit; padding: 10px 4px 12px; cursor: pointer; color: var(--muted); font-weight: 700; font-size: 13px; display: grid; gap: 2px; justify-items: center; }
.nav button .ico { font-size: 22px; }
.nav button.on { color: var(--brand); }

/* Status steps */
.steps { display: grid; gap: 0; margin-top: 4px; }
.step { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 14px; color: var(--muted); padding: 3px 0; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--line); margin: 3px 4px; }
.step.done { color: var(--text); }
.step.done .dot { background: var(--brand); }
.step.now { color: var(--text); font-weight: 800; }
.step.now .dot { background: var(--accent); box-shadow: 0 0 0 4px #FDEBD1; }

.money { display: grid; gap: 4px; font-size: 15px; background: var(--bg); border-radius: 12px; padding: 12px; }
.money .row b { font-weight: 800; }
.money .total { font-size: 17px; border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 2px; }

.empty { text-align: center; padding: 34px 16px; color: var(--muted); }
.empty .ico { font-size: 40px; }

.stars { display: flex; gap: 6px; }
.stars button { font-size: 30px; background: none; border: 0; cursor: pointer; padding: 0; filter: grayscale(1); opacity: .5; }
.stars button.on { filter: none; opacity: 1; }

.back { background: none; border: 0; font: inherit; font-weight: 800; color: #fff; cursor: pointer; padding: 0; font-size: 15px; }

.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(20px);
  background: #17252A; color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 700;
  opacity: 0; pointer-events: none; transition: all .2s; max-width: calc(100% - 32px); text-align: center; z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--danger); }

/* ---- Capa de confianza ---- */
.chip.alert { background: #FDE3E3; color: var(--danger); }
.alerta { background: #FFF4E0; border: 1px solid #F5D39A; color: #6B4A0E; border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.nota { background: var(--brand-soft); color: var(--brand-dark); border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.4; }
.card.destacar { border: 2px solid var(--accent); }
.verif { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 11px; vertical-align: 2px; }
.rep { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rep .bad { color: var(--danger); font-weight: 700; }
.link { background: none; border: 0; padding: 4px 0; font: inherit; font-weight: 800; color: var(--brand); cursor: pointer; text-align: left; font-size: 14px; }
.codigo { display: grid; gap: 2px; text-align: center; background: #17252A; color: #fff; border-radius: 14px; padding: 12px; }
.codigo span { font-size: 13px; opacity: .8; font-weight: 700; }
.codigo b { font-size: 34px; letter-spacing: 10px; font-weight: 800; }
.codigo small { font-size: 12px; opacity: .75; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.seg button { font: inherit; font-size: 13px; font-weight: 800; border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 4px; cursor: pointer; color: var(--muted); }
.seg button.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.aprob { border-top: 1px dashed var(--line); padding-top: 12px; }
.fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--bg); display: block; }
.hist { display: grid; gap: 8px; }
.hist .h { display: grid; gap: 2px; font-size: 14px; border-left: 3px solid var(--brand-soft); padding-left: 10px; }
.hist .t { font-size: 12px; color: var(--muted); }
input.big { font-size: 24px; letter-spacing: 8px; text-align: center; font-weight: 800; }
h3 + .card, .wrap > h3 { margin-top: 4px; }
.instalar-link { display: block; text-align: center; font-weight: 800; color: var(--brand); text-decoration: none; padding: 12px; background: #fff; border: 1.5px dashed var(--brand); border-radius: 14px; }
details.reporte summary { cursor: pointer; font-weight: 800; color: var(--danger); font-size: 14px; padding: 4px 0; }
details.reporte[open] summary { margin-bottom: 8px; }
/* ---- Monedero ---- */
.saldo-num { font-size: 38px; font-weight: 800; color: var(--brand-dark); letter-spacing: -1px; }
.neg { color: var(--danger); }
.pos { color: var(--ok); }
.saldo-num.neg { color: var(--danger); }
.movs { display: grid; gap: 0; padding: 4px 16px; }
.mov { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.mov:last-child { border-bottom: 0; }
.mov b { white-space: nowrap; }
details.ayuda summary { cursor: pointer; font-weight: 800; color: var(--brand-dark); }
details.ayuda[open] summary { margin-bottom: 8px; }
.clabe { font-family: ui-monospace, monospace; letter-spacing: 1px; user-select: all; }
/* ---- Chat, ayuda y calificaciones ---- */
.chat { display: grid; gap: 8px; max-height: 60vh; overflow-y: auto; padding: 4px 0; }
.burbuja { background: #fff; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 8px 12px; max-width: 85%; font-size: 15px; display: grid; gap: 2px; justify-self: start; white-space: pre-wrap; word-break: break-word; }
.burbuja.mia { background: var(--brand-soft); border-color: transparent; border-radius: 14px 14px 4px 14px; justify-self: end; }
.burbuja .autor { font-size: 12px; font-weight: 800; color: var(--brand-dark); }
.burbuja .hora { font-size: 11px; color: var(--muted); justify-self: end; }
.chat-form { display: flex; gap: 8px; position: sticky; bottom: 76px; background: var(--bg); padding: 6px 0; }
.chat-form input { flex: 1; }
.chat-form .btn { width: auto; }
.small-stars button { font-size: 22px; }
.calif { border-top: 1px dashed var(--line); padding-top: 10px; }
/* Verificación del local */
.foto-v { position: relative; }
.foto-v button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; cursor: pointer; }
details.card > summary { cursor: pointer; list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
details.card[open] > summary { margin-bottom: 8px; }
/* Mapas */
.mapa { height: 240px; border-radius: 14px; overflow: hidden; background: #e8eef0; position: relative; z-index: 0; }
.mapa.grande { height: 58vh; min-height: 300px; }
.pin { background: none; border: 0; }
.pin span { display: grid; place-items: center; width: 36px; height: 36px; font-size: 22px; background: #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.leaflet-container a { color: inherit; }
/* Botón de información plegable */
details.info { font-size: 13px; color: var(--muted); }
details.info summary { cursor: pointer; list-style: none; color: var(--brand-dark); font-weight: 700; display: inline-block; padding: 2px 0; }
details.info summary::-webkit-details-marker { display: none; }
details.info .info-txt { background: var(--brand-soft); color: var(--brand-dark); border-radius: 12px; padding: 10px 12px; margin-top: 6px; line-height: 1.4; }
/* Registro por pasos */
.pasos-reg { display: flex; gap: 6px; justify-content: center; }
.pasos-reg span { width: 28px; height: 6px; border-radius: 3px; background: var(--line); }
.pasos-reg span.on { background: var(--brand); }
.roles-grandes { grid-template-columns: 1fr !important; }
.roles-grandes .role { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px; }
.roles-grandes .role .ico { font-size: 28px; }
/* Tarjeta del repartidor para el cliente */
.repcard { display: flex; gap: 12px; align-items: center; background: var(--brand-soft); border-radius: 14px; padding: 10px 12px; }
.repcard img, .repcard .avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: 26px; background: #fff; flex: none; }
#neg-tabs { margin-bottom: 4px; }
/* Animaciones de estado */
@keyframes latido { 0%,100% { box-shadow: 0 0 0 4px #FDEBD1; } 50% { box-shadow: 0 0 0 8px rgba(253,235,209,.35); } }
.step.now .dot { animation: latido 1.8s ease-in-out infinite; }
@keyframes cambio { 0% { transform: scale(.98); box-shadow: 0 0 0 0 rgba(18,128,128,.5); } 40% { transform: scale(1.01); box-shadow: 0 0 0 10px rgba(18,128,128,.15); } 100% { transform: none; box-shadow: none; } }
.cambio { animation: cambio .9s ease-out; }
.cambio .chip { animation: pop .6s ease-out; }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: none; } }
.fiesta { position: relative; }
.fiesta::after { content: '🎉 ✨ 👕 ✨ 🎉'; position: absolute; left: 0; right: 0; top: -6px; text-align: center; font-size: 22px; animation: fiesta 2.4s ease-out forwards; pointer-events: none; }
@keyframes fiesta { 0% { opacity: 0; transform: translateY(20px) scale(.6); } 25% { opacity: 1; transform: translateY(-14px) scale(1.1); } 100% { opacity: 0; transform: translateY(-50px); } }
@media (prefers-reduced-motion: reduce) { .step.now .dot, .cambio, .cambio .chip, .fiesta::after { animation: none; } }
/* Pedido activo en el inicio */
.card.activo { border: 2px solid var(--brand); gap: 8px; display: grid; }
.barra { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.barra span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--accent)); border-radius: 4px; transition: width .8s ease; }
/* Asistente */
.burbuja.bot { white-space: normal; max-width: 95%; display: block; line-height: 1.45; }
.burbuja.bot .autor { display: block; }
.burbuja.bot .btn { margin: 4px 4px 0 0; display: inline-flex; width: auto; }
.burbuja hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
.chips-asis { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { font: inherit; font-size: 13px; font-weight: 700; border: 1.5px solid var(--brand); color: var(--brand-dark); background: #fff; border-radius: 999px; padding: 7px 11px; cursor: pointer; }
.chip-btn:active { background: var(--brand-soft); }
.code-inline { font-size: 20px; letter-spacing: 3px; background: #172126; color: #fff; border-radius: 8px; padding: 1px 8px; }
#asis-msgs { max-height: 50vh; }
.mapa-error { position: absolute; inset: auto 8px 8px 8px; z-index: 1000; background: #fff; border-radius: 10px; padding: 8px 10px; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
/* Pasos en una línea */
.mini-pasos { display: flex; align-items: center; gap: 0; margin: 2px 0; }
.mini-pasos i { flex: 1; height: 3px; background: var(--line); border-radius: 2px; }
.mini-pasos .mp { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; background: #EEF2F3; filter: grayscale(1); opacity: .55; flex: none; }
.mini-pasos .mp.done { background: var(--brand-soft); filter: none; opacity: 1; }
.mini-pasos .mp.now { background: #FDEBD1; filter: none; opacity: 1; box-shadow: 0 0 0 3px #FDEBD1; animation: latido 1.8s ease-in-out infinite; }
.mini-pasos .mp.done + i { background: var(--brand); }
details.mini summary { cursor: pointer; list-style: none; padding: 6px 0; }
details.mini summary::-webkit-details-marker { display: none; }
details.mini[open] summary { margin-bottom: 6px; }
/* Tablero del admin */
.tablero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { font: inherit; border: 2px solid var(--line); background: #fff; border-radius: 14px; padding: 10px 6px; display: grid; justify-items: center; gap: 2px; cursor: pointer; color: var(--muted); text-align: center; }
.tile .ico { font-size: 20px; }
.tile .n { font-size: 20px; color: var(--text); }
.tile .t { font-size: 12px; font-weight: 700; line-height: 1.2; }
.tile .s { font-size: 11px; }
.tile.urg { border-color: var(--accent); background: #FFF7EC; }
.tile.urg .n { color: #B45309; }
.tile.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
@media (prefers-reduced-motion: reduce) { .mini-pasos .mp.now { animation: none; } }
.chip-btn { text-decoration: none; display: inline-block; }

.aviso-push { background: #FFF7EC; border: 2px solid var(--accent); border-radius: 14px; padding: 12px; display: grid; gap: 10px; font-size: 14px; margin-bottom: 12px; }
/* v22 · repartidor en viaje */
.back { background: rgba(255,255,255,.22); border-radius: 999px; padding: 8px 16px; font-size: 16px; }
.back:active { background: rgba(255,255,255,.35); }
.zona-salir { margin-top: 18px; padding-top: 18px; border-top: 2px dashed var(--line); }
.btn.salir { background: #fff; color: #B42318; border: 2px solid #F3B7B0; }
.ganancias { background: linear-gradient(135deg, #0E7C86, #12A150); color: #fff; border: 0; position: relative; overflow: hidden; }
.ganancias .small { color: rgba(255,255,255,.9); }
.gan-num { font-size: 40px; font-weight: 900; letter-spacing: -1px; line-height: 1.1; }
.ganancias.subio { animation: pop .6s ease; }
.gan-mas { position: absolute; right: 16px; top: 14px; font-weight: 900; font-size: 20px; color: #FFE58A; animation: subir 2.2s ease forwards; }
@keyframes subir { 0% { opacity: 0; transform: translateY(14px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-24px); } }
.viaje.mejor { border: 2px solid #F59E0B; box-shadow: 0 6px 18px rgba(245,158,11,.18); }
.viaje.con-bono { border-color: #7C3AED; }
.price.grande { font-size: 26px; }
.insignia { font-size: 12px; font-weight: 800; border-radius: 999px; padding: 4px 10px; }
.insignia.fuego { background: #FFF1D6; color: #B45309; }
.insignia.bono { background: #EFE7FF; color: #6D28D9; }
.tips ul { margin: 8px 0 0; padding-left: 4px; list-style: none; display: grid; gap: 8px; }
.mision-card { border: 2px solid var(--brand); padding-top: 12px; }
.mision { display: grid; gap: 8px; }
.mision h2 { margin: 0; font-size: 22px; }
.mision-paso { font-size: 12px; font-weight: 800; color: var(--brand); text-transform: uppercase; letter-spacing: .4px; }
.mision-reloj { font-size: 13px; font-weight: 800; color: var(--muted); }
.mision-reloj.apurate { color: #B42318; animation: latido 1s infinite; }
.mapa-mision { height: 230px; border-radius: 14px; overflow: hidden; background: #E6EEF0; position: relative; }
.btn.navegar { display: block; text-align: center; text-decoration: none; font-size: 17px; }
.codigo.grande b { font-size: 40px; letter-spacing: 8px; }
.mision-mini { border: 2px solid var(--brand); }
.mision-mini-tit { font-size: 18px; }
.hecho { padding: 8px 0; border-bottom: 1px solid var(--line); }
.festejo { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: grid; place-items: center; z-index: 9999; animation: fadein .2s ease; }
.festejo-in { background: #fff; border-radius: 24px; padding: 26px 30px; text-align: center; display: grid; gap: 6px; min-width: 240px; animation: pop .5s ease; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.festejo-ico { font-size: 56px; }
.festejo-in b { font-size: 22px; }
.festejo-extra { font-size: 20px; font-weight: 900; color: #12A150; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
/* v24 · cliente y lavandería */
.baja { color: #12A150; font-weight: 700; font-size: 11px; }
.comentario { font-size: 13px; color: var(--muted); font-style: italic; line-height: 1.35; }
.comentario span { font-style: normal; font-size: 12px; color: #B8860B; }
.exito { background: #E8F7EE; border: 2px solid #12A150; color: #0B6B36; border-radius: 12px; padding: 10px 12px; font-size: 14px; animation: pop .5s ease; }
.anterior { opacity: .9; }
.anteriores summary, .hecho summary, .hecho-lav summary { cursor: pointer; list-style: none; }
.hecho-lav { padding: 12px 14px; }
.negocio { border: 2px solid var(--line); }
.estado-neg { font: inherit; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 6px 12px; border: 0; background: #EEF1F3; color: var(--muted); cursor: pointer; }
.estado-neg.on { background: #E8F7EE; color: #12A150; }
/* v25 · anuncios propios */
.anuncio { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; text-decoration: none; color: inherit; position: relative; }
.anuncio img, .anuncio-ico { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; display: grid; place-items: center; font-size: 24px; background: #F3F5F6; }
.anuncio-txt { display: grid; font-size: 13px; line-height: 1.25; min-width: 0; }
.anuncio-txt span { color: var(--muted); font-size: 12px; }
.anuncio-tag { position: absolute; top: 4px; right: 8px; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
/* v27 · ruta por calles */
.mision-ruta { font-weight: 800; color: var(--brand); min-height: 1em; }

/* v29 · Repartidor cerca + pedidos anteriores discretos */
.cerca { display: grid; gap: 6px; background: #FFF4D6; border: 2px solid #F5A524; border-radius: 16px; padding: 14px; color: #5A3B00; animation: cercaLatido 1.6s ease-in-out infinite; }
.cerca-tit { font-size: 19px; line-height: 1.25; color: #3D2800; }
.cerca-nota { font-size: 13px; background: rgba(255,255,255,.65); border-radius: 10px; padding: 8px 10px; }
.cerca .codigo { margin-top: 4px; }
@keyframes cercaLatido { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,165,36,.45); } 50% { box-shadow: 0 0 0 8px rgba(245,165,36,0); } }
@media (prefers-reduced-motion: reduce) { .cerca { animation: none; } }
.candado { margin: 0; }
.apagado { opacity: .6; font-size: 14px; padding: 6px 2px; margin-top: 6px; }
.apagado > summary { cursor: pointer; list-style: none; color: var(--muted); font-weight: 600; font-size: 13px; }
.apagado[open] { opacity: 1; }

/* v30 · Jornada del repartidor, cupo y pausa de lavandería */
.jornada.on { border: 2px solid #22A06B; }
.jornada.off { border: 2px dashed var(--line); }
.jornada.descanso { background: #EEF1F7; }
.jornada-barra span { background: #22A06B; }
.jornada-barra.poca span { background: #F5A524; }
.neg-menu { display: grid; gap: 8px; background: var(--bg); border-radius: 12px; padding: 10px; }
.ocupacion span { background: var(--brand); }
.ocupacion.llena span { background: #E5484D; }
.agotada { opacity: .55; }
.agotada .chip.gray { justify-self: start; }

/* v31 · Jornada discreta, espera con tiempo estimado */
.jornada-linea { padding: 2px 4px; color: var(--muted); }
.eta-esp { color: var(--brand-dark); }

/* v32 · Plan B, llegada, combinados */
.llegada { border-top: 1px dashed var(--line); padding-top: 10px; }
.planb summary { color: #B4530A; }
.insignia.combo { background: #E8F1FF; color: #1D4ED8; }
.btn[disabled] { opacity: .5; }

/* v34 · Navegación limpia: menos peso visual, una acción principal por tarjeta */
:root { --shadow: 0 1px 2px rgba(16,40,48,.06), 0 2px 10px rgba(16,40,48,.05); }
.top { background: var(--bg); color: var(--text); padding: calc(12px + env(safe-area-inset-top)) 16px 4px; border-radius: 0; position: sticky; top: 0; z-index: 20; }
.top .logo { color: var(--brand); font-size: 20px; }
.top h1 { color: var(--text); font-size: 24px; margin-top: 10px; letter-spacing: -.3px; }
.top .hello { margin-top: 2px; font-size: 14px; color: var(--muted); opacity: 1; }
.link-btn { background: #fff; color: var(--brand-dark); border: 1px solid var(--line); padding: 7px 12px; font-size: 13px; }
.back, .back:active { background: var(--brand); color: #fff; border-radius: 999px; padding: 9px 16px; font-size: 15px; box-shadow: 0 2px 8px rgba(14,124,134,.25); }
.wrap { gap: 12px; padding-top: 10px; }
.card { border: 0; box-shadow: var(--shadow); }
.card.activo, .mision-card, .mision-mini { border: 2px solid var(--brand); box-shadow: 0 4px 16px rgba(14,124,134,.12); }
h3 { font-size: 16px; }
.chip { font-size: 12px; padding: 3px 9px; }
/* Barra inferior */
.nav { border-top: 0; box-shadow: 0 -2px 12px rgba(16,40,48,.07); }
.nav button { font-size: 12px; padding: 8px 4px 10px; gap: 3px; }
.nav button .ico { font-size: 20px; width: 52px; height: 30px; display: grid; place-items: center; border-radius: 999px; filter: grayscale(1); opacity: .7; transition: background .15s; }
.nav button.on .ico { background: var(--brand-soft); filter: none; opacity: 1; }
.nav button.on { color: var(--brand-dark); font-weight: 800; }
/* Acciones secundarias: pequeñas y grises para que el botón principal destaque */
.acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.acciones button, .acciones a { font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); background: var(--bg); border: 0; border-radius: 999px; padding: 7px 11px; cursor: pointer; text-decoration: none; }
.acciones button:active { background: var(--brand-soft); color: var(--brand-dark); }
details.info summary { color: var(--muted); font-weight: 600; }
/* Títulos de sección */
.seccion { display: flex; justify-content: space-between; align-items: center; margin: 6px 2px -2px; }
.seccion b { font-size: 15px; color: var(--muted); font-weight: 800; }
/* Lista de lavanderías */
.lav-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--muted); }
.lav-meta b { color: var(--text); }
/* Plegables discretos */
details.plega > summary { cursor: pointer; list-style: none; font-weight: 700; color: var(--brand-dark); font-size: 14px; padding: 4px 0; }
details.plega > summary::-webkit-details-marker { display: none; }
details.plega > summary::after { content: ' ▾'; color: var(--muted); }
details.plega[open] > summary::after { content: ' ▴'; }
details.plega[open] > summary { margin-bottom: 10px; }
/* Lista tipo menú (Cuenta) */
.menu { display: grid; padding: 4px 0; }
.menu > button, .menu > a, .menu > details > summary { font: inherit; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; color: var(--text); font-weight: 700; font-size: 15px; text-decoration: none; list-style: none; }
.menu > *:last-child, .menu > details:last-child > summary { border-bottom: 0; }
.menu > button::after, .menu > a::after { content: '›'; color: var(--muted); font-size: 20px; }
.menu > details > summary::-webkit-details-marker { display: none; }
.menu > details[open] > summary { border-bottom: 0; }
.menu > details > .stack { padding: 0 16px 14px; }
.card.sinpad { padding: 0; overflow: hidden; }
/* Estado compacto del negocio */
.neg-linea { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.menu > button[disabled]::after { content: none; }
.link.peligro { color: var(--danger); text-align: center; font-weight: 700; padding: 8px 0; }
.acciones .peligro { color: var(--danger); }
[hidden] { display: none !important; }
.tabs button[data-nav] { font-size: 14px; }
.ganancias { padding: 14px 16px; }
.ganancias .gan-num { font-size: 30px; }
.ganancias .link-btn { background: rgba(255,255,255,.18); color: #fff; border: 0; }
.viaje .stack.small > div { line-height: 1.35; }
.btn.foto-pend { background: #fff; color: var(--brand-dark); border: 2px dashed var(--brand); padding: 12px 16px; font-size: 15px; }
.menu > details > summary::after { content: '▾'; color: var(--muted); margin-left: 6px; }
.menu > details[open] > summary::after { content: '▴'; }
.menu > details > summary > .small { margin-left: auto; }

/* v35 · Un tono de color por perfil */
:root { --brand-sombra: rgba(14,124,134,.2); }
body[data-rol="lavanderia"] { --brand: #6A4BC4; --brand-dark: #4E3696; --brand-soft: #EEEAFB; --brand-sombra: rgba(106,75,196,.2); }
body[data-rol="repartidor"] { --brand: #1F6FD1; --brand-dark: #164F9A; --brand-soft: #E5EFFC; --brand-sombra: rgba(31,111,209,.2); }
.back, .back:active { box-shadow: 0 2px 8px var(--brand-sombra); }
.card.activo, .mision-card, .mision-mini { box-shadow: 0 4px 16px var(--brand-sombra); }
.ganancias { background: linear-gradient(135deg, var(--brand), #12A150); }
.rol-tag { font-size: 12px; font-weight: 800; color: var(--brand-dark); background: var(--brand-soft); border-radius: 999px; padding: 3px 9px; vertical-align: 3px; margin-left: 4px; letter-spacing: 0; }
.top { background: linear-gradient(180deg, var(--brand-soft) 0%, var(--bg) 100%); }

/* v36 · Más contraste entre el fondo y las tarjetas blancas */
:root { --bg: #E9EEF1; --line: #D3DCE0; --muted: #4F5E64; --text: #111D21;
  --shadow: 0 1px 2px rgba(16,40,48,.10), 0 3px 12px rgba(16,40,48,.08); }
.card { border: 1px solid #DCE3E7; }
.card.activo, .mision-card, .mision-mini { border: 2px solid var(--brand); }
input, select, textarea { border-color: #C9D3D8; }
.nav { box-shadow: 0 -2px 14px rgba(16,40,48,.12); border-top: 1px solid #DCE3E7; }
.link-btn { border-color: #C9D3D8; }
.money { background: #F1F4F6; }
.acciones button, .acciones a { background: #EEF2F4; color: #3F4D53; }
.tabs { background: #D9E1E5; }

/* v37 · Fotos de las lavanderías */
.lav-card { padding: 0; overflow: hidden; display: block; }
.lav-foto { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--brand), #3FB7C1); overflow: hidden; }
.lav-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lav-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,.28) 100%); pointer-events: none; }
.lav-foto.sin-foto { display: grid; place-items: center; aspect-ratio: 16 / 7; }
.lav-foto.sin-foto::after { display: none; }
.lav-foto-ico { font-size: 54px; opacity: .9; }
.lav-precio { position: absolute; right: 12px; bottom: 12px; z-index: 1; background: #fff; color: var(--brand-dark); font-weight: 900; font-size: 20px; padding: 6px 12px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.lav-precio small { font-size: 12px; color: var(--muted); font-weight: 700; }
.lav-precio s { font-size: 13px; color: var(--muted); font-weight: 700; }
.lav-nfotos, .lav-baja, .lav-nodisp { position: absolute; z-index: 1; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 4px 10px; }
.lav-nfotos { left: 12px; bottom: 12px; background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(4px); }
.lav-baja { left: 12px; top: 12px; background: #12A150; color: #fff; }
.lav-nodisp { left: 12px; top: 12px; background: rgba(255,255,255,.95); color: #333; }
.lav-cuerpo { padding: 12px 16px 14px; display: grid; gap: 5px; }
.lav-cuerpo h3 { font-size: 18px; }
.lav-estrellas { font-weight: 900; font-size: 15px; white-space: nowrap; color: #A16207; }
.lav-estrellas small { color: var(--muted); font-weight: 700; font-size: 12px; }
.lav-nueva { font-size: 12px; font-weight: 800; color: var(--brand-dark); background: var(--brand-soft); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.agotada .lav-foto img { filter: grayscale(1); }
/* Ficha de la lavandería al pedir */
.lav-ficha { padding: 0; overflow: hidden; }
.galeria { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; aspect-ratio: 4 / 3; scrollbar-width: none; }
.galeria::-webkit-scrollbar { display: none; }
.galeria img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.galeria-puntos { display: flex; justify-content: center; gap: 6px; margin: -22px 0 8px; position: relative; z-index: 1; }
.galeria-puntos i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 2px rgba(0,0,0,.4); transition: all .2s; }
.galeria-puntos i.on { background: #fff; width: 18px; border-radius: 4px; }
.lav-datos { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; background: var(--bg); border-radius: 12px; padding: 10px 4px; }
.lav-datos div { display: grid; gap: 1px; }
.lav-datos div + div { border-left: 1px solid var(--line); }
.lav-datos b { font-size: 15px; font-weight: 900; }
.lav-datos span { font-size: 11px; color: var(--muted); font-weight: 700; }
/* Negocio · fotos */
.fotos-lav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.foto-lav { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--bg); }
.foto-lav img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-lav.portada { outline: 3px solid var(--brand); outline-offset: -3px; }
.foto-lav-x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; cursor: pointer; }
.foto-lav-port { position: absolute; left: 4px; bottom: 4px; font: inherit; font-size: 11px; font-weight: 800; border: 0; border-radius: 999px; padding: 3px 8px; background: rgba(255,255,255,.92); color: var(--brand-dark); cursor: pointer; }
.foto-lav.portada .foto-lav-port { background: var(--brand); color: #fff; }
.foto-lav-mas { aspect-ratio: 1; border: 2px dashed var(--brand); border-radius: 12px; background: var(--brand-soft); color: var(--brand-dark); font: inherit; font-size: 28px; font-weight: 800; cursor: pointer; display: grid; place-items: center; align-content: center; gap: 2px; }
.foto-lav-mas span { font-size: 12px; }
#neg-tabs { grid-template-columns: repeat(3, 1fr); }

/* v38 · Mapa grande en el inicio */
.mapa-inicio-box { position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid #DCE3E7; }
.mapa.mapa-inicio { height: 46vh; min-height: 280px; max-height: 460px; border-radius: 0; transition: height .2s ease; }
.mapa.mapa-inicio.grande { height: 72vh; max-height: none; }
.mapa-expandir { position: absolute; top: 10px; right: 10px; z-index: 500; font: inherit; font-size: 13px; font-weight: 800; border: 0; border-radius: 999px; padding: 8px 12px; background: #fff; color: var(--brand-dark); box-shadow: 0 2px 10px rgba(0,0,0,.2); cursor: pointer; }
.pin-lav { background: none; border: 0; }
.pin-lav span { position: relative; display: inline-block; transform: translateX(-50%); margin-left: 32px; background: var(--brand); color: #fff; font-weight: 900; font-size: 14px; padding: 6px 10px; border-radius: 999px; white-space: nowrap; box-shadow: 0 3px 10px rgba(0,0,0,.3); border: 2px solid #fff; transition: transform .15s; }
.pin-lav span::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--brand); border-bottom: 0; }
.pin-lav.on span { background: #111D21; transform: translateX(-50%) scale(1.15); }
.pin-lav.on span::after { border-top-color: #111D21; }
.pin-lav.gris span { background: #8A979C; }
.pin-lav.gris span::after { border-top-color: #8A979C; }
.mapa-sel { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 600; }
.mapa-sel-in { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 16px; padding: 8px; box-shadow: 0 6px 22px rgba(0,0,0,.25); cursor: pointer; animation: pop .3s ease; }
.mapa-sel-in img, .mapa-sel-ico { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; flex: none; display: grid; place-items: center; font-size: 30px; background: var(--brand-soft); }
.mapa-sel-txt { display: grid; gap: 2px; min-width: 0; flex: 1; font-size: 13px; color: var(--muted); }
.mapa-sel-txt b { font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapa-sel-precio { font-size: 17px; font-weight: 900; color: var(--brand-dark); }
.mapa-sel-precio small { font-size: 11px; color: var(--muted); }
.mapa-sel-ir { font-weight: 900; color: #fff; background: var(--brand); border-radius: 12px; padding: 10px 12px; font-size: 14px; flex: none; }
.mapa-sel-x { position: absolute; top: -10px; right: -4px; z-index: 1; width: 28px; height: 28px; border-radius: 50%; border: 0; background: #111D21; color: #fff; font-size: 12px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.lav-demo { position: absolute; left: 12px; top: 12px; z-index: 1; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 4px 10px; background: rgba(17,29,33,.75); color: #fff; }

/* v39 · Servicios, niveles y premium */
.filtros { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; margin: 0 -2px; }
.filtros::-webkit-scrollbar { display: none; }
.filtro { font: inherit; font-size: 13px; font-weight: 800; white-space: nowrap; border: 1.5px solid #C9D3D8; background: #fff; color: var(--muted); border-radius: 999px; padding: 7px 12px; cursor: pointer; }
.filtro.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.lav-servs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lav-iconos { display: inline-flex; gap: 3px; font-size: 16px; }
.sello { font-size: 12px; font-weight: 900; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.sello.completa { background: #EAF4FF; color: #1D4ED8; }
.sello.premium { background: linear-gradient(135deg, #1A1A1A, #3A2F12); color: #F3D774; letter-spacing: .3px; }
.sello.basica { background: #EEF1F3; color: var(--muted); }
/* Premium: borde dorado, cinta y precio dorado */
.lav-card.nivel-premium { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #B8860B, #F6E27A, #C9A227, #8C6A12) border-box; box-shadow: 0 6px 22px rgba(184,134,11,.25); }
.lav-card.nivel-premium .lav-cuerpo { background: linear-gradient(180deg, #FFFCF2, #fff); }
.lav-card.nivel-premium .lav-precio { background: linear-gradient(135deg, #1A1A1A, #3A2F12); color: #F3D774; }
.lav-card.nivel-premium .lav-precio small { color: #E8D9A0; }
.lav-cinta { position: absolute; right: 12px; top: 12px; z-index: 1; font-size: 12px; font-weight: 900; letter-spacing: .8px; color: #1A1A1A; background: linear-gradient(135deg, #F6E27A, #C9A227); border-radius: 999px; padding: 5px 12px; box-shadow: 0 3px 10px rgba(0,0,0,.3); }
.lav-card.nivel-completa { border-color: #BFD7FF; }
.pin-lav.oro span { background: linear-gradient(135deg, #1A1A1A, #3A2F12); color: #F3D774; border-color: #F3D774; }
.pin-lav.oro span::after { border-top-color: #2A2312; }
.oro-txt { color: #A07A10; }
/* Carta de servicios en la ficha */
.carta[open] { padding-bottom: 4px; }
.carta-cat { display: grid; gap: 4px; padding: 8px 0; border-top: 1px dashed var(--line); }
.carta-cat:first-of-type { border-top: 0; }
.carta-cat b small { font-weight: 700; }
/* Selector de servicios al pedir */
.opc-kg { display: grid; gap: 6px; }
.opc { font: inherit; display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 12px; cursor: pointer; color: var(--text); font-size: 14px; }
.opc.on { border-color: var(--brand); background: var(--brand-soft); }
.opc b { white-space: nowrap; }
.pieza { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.pieza > span:first-child { display: grid; }
.pieza small { color: var(--muted); font-size: 12px; }
.stepper { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.stepper button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--brand-soft); color: var(--brand-dark); font-size: 18px; font-weight: 900; cursor: pointer; }
.stepper b { min-width: 20px; text-align: center; }
.chip-btn.on { background: var(--brand); color: #fff; border-color: var(--brand); }
/* Peso estimado */
.peso-rapido { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.peso-rapido button { font: inherit; border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: 8px 2px; display: grid; gap: 1px; cursor: pointer; color: var(--text); }
.peso-rapido button b { font-size: 15px; }
.peso-rapido button span { font-size: 11px; color: var(--muted); }
.peso-rapido button.on { border-color: var(--brand); background: var(--brand-soft); }
#total-est { font-size: 20px; color: var(--brand-dark); }
/* Negocio · servicios */
.serv-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-weight: 600; }
.serv-cat .serv-row:first-of-type { border-top: 0; }
.serv-row input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--brand); flex: none; }
.serv-txt { display: grid; flex: 1; min-width: 0; font-size: 14px; }
.serv-txt small { color: var(--muted); font-weight: 600; font-size: 12px; }
.serv-precio { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; flex: none; }
.serv-precio input { width: 78px; padding: 8px; font-size: 15px; }
.nivel-barra span { background: linear-gradient(90deg, #8FB3FF, #C9A227); }
#neg-tabs { grid-template-columns: repeat(4, 1fr); }
#neg-tabs button { font-size: 12px; padding: 10px 2px; }

/* v39 · Elegir la puerta: pin fijo al centro y "Usar mi ubicación" como opción principal */
.ubi-btn { font-size: 17px; padding: 15px 18px; box-shadow: 0 4px 14px var(--brand-sombra); }
.ubi-btn.secondary { font-size: 15px; padding: 11px 14px; box-shadow: none; }
.mapa.mapa-pick { height: 260px; }
.pin-centro { position: absolute; left: 50%; top: 50%; z-index: 650; pointer-events: none; width: 0; height: 0; }
.pin-centro .pin-punto { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--brand); border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(14,124,134,.25), 0 1px 4px rgba(0,0,0,.4); }
.pin-centro .pin-palo { position: absolute; left: -2px; top: -26px; width: 4px; height: 22px; background: #111D21; border-radius: 2px; }
.pin-centro .pin-cabeza { position: absolute; left: -22px; top: -68px; width: 44px; height: 44px; display: grid; place-items: center; font-size: 24px; background: #fff; border: 3px solid var(--brand); border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,.3); transition: transform .15s ease; }
.pin-centro .pin-etq { position: absolute; left: 0; top: -100px; transform: translateX(-50%); white-space: nowrap; background: #111D21; color: #fff; font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; transition: opacity .15s; }
.pin-centro.moviendo .pin-cabeza { transform: translateY(-10px); }
.pin-centro.moviendo .pin-etq { opacity: 0; }
.pin-centro:not(.listo) .pin-etq { background: #8A979C; }
.pin-centro.listo .pin-punto { animation: latido 1.8s ease-in-out infinite; }

/* v39 · Señales vivas: buscando, cargando, listo */
.eta-esp { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.eta-esp::before { content: ''; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 0 var(--brand-sombra); animation: radar 1.6s ease-out infinite; }
@keyframes radar { 0% { box-shadow: 0 0 0 0 rgba(14,124,134,.45), 0 0 0 0 rgba(14,124,134,.25); } 70% { box-shadow: 0 0 0 10px rgba(14,124,134,0), 0 0 0 20px rgba(14,124,134,0); } 100% { box-shadow: 0 0 0 0 rgba(14,124,134,0); } }
.chip .vivo { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; animation: respira 1.8s ease-in-out infinite; }
@keyframes respira { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.card.activo { animation: brillo 3.2s ease-in-out infinite; }
@keyframes brillo { 0%, 100% { box-shadow: 0 4px 16px var(--brand-sombra); } 50% { box-shadow: 0 4px 26px var(--brand-sombra), 0 0 0 3px var(--brand-soft); } }
.btn.cargando { position: relative; pointer-events: none; }
.puntos { display: inline-flex; gap: 5px; vertical-align: middle; }
.puntos i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: salto 1s ease-in-out infinite; }
.puntos i:nth-child(2) { animation-delay: .15s; } .puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes salto { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-5px); opacity: 1; } }
.btn.hecho-ok { animation: hechoOk .7s ease; }
@keyframes hechoOk { 0% { transform: scale(1); } 30% { transform: scale(.96); } 60% { transform: scale(1.03); box-shadow: 0 0 0 6px rgba(18,161,80,.25); } 100% { transform: scale(1); } }
.btn:active, .opc:active, .filtro:active, .chip-btn:active, .peso-rapido button:active { transform: scale(.97); }
/* Repartidor: recorrido visual con la foto del negocio */
.ruta-vis { display: flex; align-items: center; gap: 6px; background: var(--bg); border-radius: 14px; padding: 8px 10px; }
.rv-pt { display: grid; justify-items: center; gap: 3px; width: 76px; flex: none; text-align: center; }
.rv-pt img, .rv-ico { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; display: grid; place-items: center; font-size: 22px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.rv-cli { border-radius: 50%; background: var(--brand); color: #fff; font-weight: 900; font-size: 20px; }
.rv-pt > span:last-child { font-size: 11px; font-weight: 800; line-height: 1.15; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-linea { flex: 1; position: relative; display: grid; place-items: center; }
.rv-linea i { position: absolute; left: 0; right: 0; top: 50%; height: 3px; background: repeating-linear-gradient(90deg, var(--brand) 0 8px, transparent 8px 14px); background-size: 28px 3px; animation: avanza 1.2s linear infinite; }
@keyframes avanza { to { background-position: 28px 0; } }
.rv-linea span { position: relative; background: #fff; border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 900; color: var(--brand-dark); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.viaje.nuevo-viaje { animation: entraViaje .7s cubic-bezier(.2,1.4,.4,1); }
@keyframes entraViaje { 0% { opacity: 0; transform: translateY(-14px) scale(.96); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .eta-esp::before, .chip .vivo, .card.activo, .puntos i, .rv-linea i, .viaje.nuevo-viaje, .btn.hecho-ok { animation: none; } }
/* v40 · Más sobrio: nivel por complejidad (sin dorado), datos en texto plano */
.lav-card.nivel-premium { border: 1px solid var(--line); background: var(--card); box-shadow: none; }
.lav-card.nivel-premium .lav-cuerpo { background: none; }
.lav-card.nivel-premium .lav-precio { background: #fff; color: var(--brand-dark); }
.lav-card.nivel-premium .lav-precio small { color: var(--muted); }
.lav-cinta, .oro-txt { display: none; }
.lav-servs { display: block; font-size: 13px; color: var(--muted); line-height: 1.45; }
.nivel { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 800; color: var(--text); margin-right: 6px; white-space: nowrap; }
.nivel i { width: 3px; border-radius: 1px; background: #CBD4D8; margin-right: 1px; }
.nivel i:nth-child(1) { height: 6px; } .nivel i:nth-child(2) { height: 9px; } .nivel i:nth-child(3) { height: 12px; margin-right: 6px; }
.nivel.n-basica i:nth-child(1), .nivel.n-completa i:nth-child(-n+2), .nivel.n-premium i { background: var(--text); }
.pin-lav.espec span { background: #111D21; }
.pin-lav.espec span::after { border-top-color: #111D21; }
.filtro { border-radius: 10px; font-weight: 700; }
.filtro.on { background: var(--text); border-color: var(--text); }
/* Tienda: cuadros por categoría + carrito */
.tienda-head { padding: 0; overflow: hidden; }
.tienda-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: 14px; color: var(--muted); }
.tienda-datos > span:not(:last-child)::after { content: '·'; margin: 0 7px; color: #AAB5BA; }
.tienda-datos b { color: var(--text); }
.cat-tabs { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); position: sticky; top: 56px; z-index: 5; background: var(--bg); margin: 0 -16px; padding: 0 16px; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tabs button { font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 0; color: var(--muted); cursor: pointer; }
.cat-tabs button.on { color: var(--text); border-bottom-color: var(--text); }
.cat-sec { scroll-margin-top: 110px; display: grid; gap: 10px; }
.cat-sec h3 { font-size: 16px; margin-top: 6px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile-srv { position: relative; font: inherit; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 4px; align-content: start; cursor: pointer; color: var(--text); min-height: 118px; transition: border-color .15s, box-shadow .15s; }
.tile-srv:active { transform: scale(.98); }
.tile-srv.on { border-color: var(--text); box-shadow: 0 0 0 1px var(--text) inset; }
.tile-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--bg); display: grid; place-items: center; font-size: 21px; }
.tile-ico.chica { width: 34px; height: 34px; font-size: 18px; flex: none; }
.tile-nom { font-size: 14px; font-weight: 700; line-height: 1.25; }
.tile-pre { font-size: 14px; font-weight: 800; margin-top: auto; }
.tile-pre small { font-weight: 600; color: var(--muted); font-size: 12px; }
.tile-mas { position: absolute; right: 10px; bottom: 10px; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px; background: var(--text); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.tile-srv:not(.on) .tile-mas { background: #fff; color: var(--text); border: 1px solid var(--line); font-size: 18px; }
.carrito-bar { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); padding: 0 14px 10px; z-index: 40; max-width: 640px; margin: 0 auto; }
.carrito-btn { display: flex; align-items: center; gap: 10px; background: var(--text); border-radius: 14px; padding: 15px 16px; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.carrito-btn > span:nth-child(2) { flex: 1; text-align: left; }
.carrito-n { background: rgba(255,255,255,.18); border-radius: 8px; min-width: 26px; height: 26px; display: grid; place-items: center; font-size: 14px; }
.sheet-fondo { position: fixed; inset: 0; background: rgba(10,20,24,.45); z-index: 80; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 81; background: #fff; border-radius: 20px 20px 0 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 12px; max-height: 88vh; overflow-y: auto; max-width: 640px; margin: 0 auto; transform: translateY(100%); transition: transform .22s ease; }
.sheet.abierto { transform: none; }
.sheet h2 { font-size: 19px; }
.sheet-asa { width: 40px; height: 4px; border-radius: 2px; background: #D5DCDF; margin: 0 auto 2px; }
.sheet-x { border: 0; background: var(--bg); width: 34px; height: 34px; border-radius: 50%; font-size: 15px; cursor: pointer; flex: none; }
.kg-opc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kg-opc button { font: inherit; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 12px; display: grid; gap: 1px; cursor: pointer; color: var(--text); }
.kg-opc button span { font-size: 12px; color: var(--muted); }
.kg-opc button i { font-style: normal; font-size: 13px; font-weight: 700; margin-top: 2px; }
.kg-opc button.on { border-color: var(--text); box-shadow: 0 0 0 1px var(--text) inset; }
.agregado { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding: 8px 0; }
.agregado span { flex: 1; }
.stepper { display: inline-flex; align-items: center; gap: 14px; }
.stepper button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 20px; cursor: pointer; }
.stepper b { min-width: 20px; text-align: center; font-size: 18px; }
.linea-ped { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.pago-explica { font-size: 14px; line-height: 1.45; color: var(--text); background: var(--bg); border-radius: 12px; padding: 10px 12px; }
.btn-grande { padding: 17px 18px; font-size: 17px; border-radius: 14px; }
/* Precio listo: un solo paso para aceptar y pagar */
.precio-listo { border-top: 1px solid var(--line); padding-top: 12px; gap: 10px; }
.pl-tit { font-size: 15px; }
.pl-total { display: flex; align-items: baseline; justify-content: space-between; }
.pl-total span { font-size: 15px; color: var(--muted); font-weight: 700; }
.pl-total b { font-size: 30px; font-weight: 900; letter-spacing: -.5px; }
.pl-seguro { text-align: center; }
/* v41 · Tienda estilo app de comida + menú libre de la lavandería */
.tienda-cover { margin: -10px -16px 0; position: relative; }
.tienda-cover .galeria, .tienda-cover .lav-foto { border-radius: 0; }
.tienda-cover .galeria img, .tienda-cover .lav-foto { height: 220px; }
.tienda-cover .lav-precio { display: none; }
.tienda-cover .galeria-puntos { position: absolute; left: 0; right: 0; bottom: 30px; }
.tienda-panel { position: relative; margin: -26px -16px 0; background: var(--card); border-radius: 22px 22px 0 0; padding: 16px 16px 6px; display: grid; gap: 12px; }
.tienda-id { display: flex; gap: 12px; align-items: center; }
.tienda-id h2 { font-size: 21px; line-height: 1.15; }
.tienda-logo { width: 58px; height: 58px; border-radius: 14px; flex: none; overflow: hidden; display: grid; place-items: center; background: var(--brand); color: #fff; font-size: 26px; font-weight: 900; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.tienda-logo img { width: 100%; height: 100%; object-fit: cover; }
.txt { color: var(--text); }
.tienda-info { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg); border-radius: 16px; padding: 14px 16px; }
.ti-der { display: grid; text-align: right; }
.tienda-h { font-size: 20px; font-weight: 900; margin: 10px 0 0; letter-spacing: -.2px; }
.carrusel { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; scroll-snap-type: x mandatory; }
.carrusel::-webkit-scrollbar { display: none; }
.srv-card { flex: none; width: 150px; display: grid; gap: 4px; scroll-snap-align: start; cursor: pointer; }
.srv-img { position: relative; width: 150px; height: 150px; border-radius: 16px; overflow: visible; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; }
.srv-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; }
.srv-ico { font-size: 54px; }
.srv-img.chica { width: 104px; height: 104px; flex: none; }
.srv-img.chica .srv-ico { font-size: 40px; }
.srv-img.mini { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.srv-img.mini img { border-radius: 9px; } .srv-img.mini .srv-ico { font-size: 20px; }
.srv-mas { position: absolute; right: 8px; bottom: 8px; min-width: 36px; height: 36px; padding: 0 10px; border-radius: 12px; border: 0; background: var(--brand); color: #fff; font: inherit; font-size: 22px; font-weight: 900; display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.2); }
.srv-mas.on { background: var(--text); font-size: 15px; }
.srv-mas:active { transform: scale(.92); }
.srv-nom { font-size: 15px; line-height: 1.2; }
.srv-pre { font-size: 16px; font-weight: 900; color: var(--brand-dark); }
.srv-pre small { font-weight: 700; color: var(--muted); font-size: 12px; }
.srv-lista { display: grid; background: var(--card); border-radius: 16px; border: 1px solid var(--line); }
.srv-fila { display: flex; gap: 12px; align-items: center; padding: 14px; cursor: pointer; }
.srv-fila + .srv-fila { border-top: 1px solid var(--line); }
.srv-txt { flex: 1; display: grid; gap: 3px; }
.srv-txt > span { font-size: 13px; color: var(--muted); line-height: 1.35; }
.sheet-foto { margin: -4px -18px 0; }
.sheet-foto img { width: 100%; height: 200px; object-fit: cover; }
.entrega-res { display: flex; align-items: center; gap: 10px; }
/* Panel de la lavandería */
.srv-adm { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.srv-adm.apagado { opacity: .5; }
.srv-adm-img { width: 46px; height: 46px; border-radius: 12px; background: var(--bg); display: grid; place-items: center; font-size: 22px; flex: none; overflow: hidden; cursor: pointer; }
.srv-adm-img img { width: 100%; height: 100%; object-fit: cover; }
.srv-adm-txt { flex: 1; display: grid; gap: 2px; min-width: 0; }
.srv-adm-txt small { color: var(--muted); }
.srv-foto-btn { width: 84px; height: 84px; border-radius: 14px; border: 1.5px dashed var(--line); background: var(--bg); flex: none; overflow: hidden; cursor: pointer; padding: 0; font: inherit; display: grid; place-items: center; }
.srv-foto-btn span { display: grid; gap: 2px; font-size: 22px; } .srv-foto-btn small { font-size: 11px; color: var(--muted); line-height: 1.2; }
.srv-foto-btn img { width: 100%; height: 100%; object-fit: cover; }
.ideas { display: flex; flex-wrap: wrap; gap: 6px; }
.ideas button { font: inherit; font-size: 13px; font-weight: 700; border: 1px dashed #B8C4C9; background: #fff; border-radius: 10px; padding: 7px 10px; cursor: pointer; color: var(--text); }
.tienda-cover .galeria, .tienda-cover .lav-foto { aspect-ratio: auto; height: 220px; }
.carrusel { scroll-padding-left: 16px; }
/* v42 · pin elegido bien visible */
.pin-lav span { transition: transform .15s; }
.pin-lav.on span { background: #111D21; transform: translateX(-50%) scale(1.25); box-shadow: 0 0 0 3px #fff, 0 4px 14px rgba(0,0,0,.35); }
.pin-lav.on span::after { border-top-color: #111D21; }
/* v43 · La misión: el siguiente toque se nota */
.btn.siguiente { position: relative; box-shadow: 0 0 0 0 var(--brand-sombra, rgba(14,124,134,.35)); animation: mision 1.8s ease-out infinite; font-weight: 900; }
.btn.siguiente:not(.carrito-btn):not(.cargando)::after { content: '→'; display: inline-block; margin-left: 8px; animation: flechita 1.8s ease-in-out infinite; }
@keyframes mision { 0% { box-shadow: 0 0 0 0 rgba(14,124,134,.45); } 70% { box-shadow: 0 0 0 10px rgba(14,124,134,0); } 100% { box-shadow: 0 0 0 0 rgba(14,124,134,0); } }
@keyframes flechita { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
body[data-rol="lavanderia"] .btn.siguiente { animation-name: misionLav; }
@keyframes misionLav { 0% { box-shadow: 0 0 0 0 rgba(106,75,196,.45); } 70% { box-shadow: 0 0 0 10px rgba(106,75,196,0); } 100% { box-shadow: 0 0 0 0 rgba(106,75,196,0); } }
body[data-rol="repartidor"] .btn.siguiente { animation-name: misionRep; }
@keyframes misionRep { 0% { box-shadow: 0 0 0 0 rgba(31,111,209,.45); } 70% { box-shadow: 0 0 0 10px rgba(31,111,209,0); } 100% { box-shadow: 0 0 0 0 rgba(31,111,209,0); } }
@media (prefers-reduced-motion: reduce) { .btn.siguiente, .btn.siguiente::after { animation: none; } .btn.siguiente { box-shadow: 0 0 0 3px var(--brand-soft); } }
/* v44 · Modo manejo del repartidor */
body.con-nav { overflow: hidden; }
.nav-modo { position: fixed; inset: 0; z-index: 200; background: #E9EEF1; display: flex; flex-direction: column; }
.nav-top { display: flex; align-items: center; gap: 14px; background: #10261F; background: #0F2A3D; color: #fff; padding: calc(12px + env(safe-area-inset-top)) 16px 14px; box-shadow: 0 4px 16px rgba(0,0,0,.3); z-index: 2; }
.nav-flecha-g { font-size: 46px; line-height: 1; width: 58px; text-align: center; font-weight: 900; }
.nav-inst { display: grid; gap: 2px; min-width: 0; }
.nav-inst b { font-size: 30px; font-weight: 900; letter-spacing: -.5px; }
.nav-inst span { font-size: 17px; font-weight: 700; line-height: 1.25; opacity: .95; }
.nav-luego { background: #1A3B52; color: #fff; font-weight: 800; font-size: 14px; padding: 6px 16px; z-index: 2; }
.nav-mapa { flex: 1; min-height: 0; }
.nav-centrar { position: absolute; right: 14px; bottom: 190px; z-index: 500; border: 0; background: #fff; color: #0F2A3D; font: inherit; font-weight: 900; padding: 10px 14px; border-radius: 999px; box-shadow: 0 3px 12px rgba(0,0,0,.25); }
.nav-abajo { background: #fff; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); display: grid; gap: 10px; box-shadow: 0 -4px 16px rgba(0,0,0,.15); z-index: 2; }
.nav-eta { font-size: 20px; font-weight: 900; color: #1F6FD1; }
.nav-dest { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-boton { margin-left: auto; flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 22px; cursor: pointer; }
.nav-botones { display: flex; gap: 8px; }
.nav-botones .btn { flex: 1; padding: 13px 8px; }
.nav-yo-pin { background: none; border: 0; }
.nav-yo { display: block; width: 34px; height: 34px; border-radius: 50%; background: #1F6FD1; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(31,111,209,.25), 0 2px 8px rgba(0,0,0,.35); position: relative; transition: transform .4s; }
.nav-yo::after { content: ''; position: absolute; left: 50%; top: -13px; margin-left: -8px; border: 8px solid transparent; border-bottom: 12px solid #1F6FD1; border-top: 0; }
.nav-modo.llegaste .nav-top { background: #12803F; }
.nav-modo .leaflet-control-zoom { margin-bottom: 12px !important; }
.nav-botones .btn { text-decoration: none; font-size: 15px; white-space: nowrap; display: grid; place-items: center; }
/* v46 · Pedido sencillo: 1 qué mandas, 2 los 2 viajes, 3 cuánto cuesta, 4 precio final y pago */
.paso-tit { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .6px; color: var(--brand-dark); }
.viaje-tit { font-weight: 800; }
.seg button small { display: block; font-weight: 700; font-size: 12px; opacity: .8; margin-top: 2px; }
.estimado-tag { display: inline-block; font-size: 11px; font-weight: 800; color: #8A5A00; background: #FFF1D6; border-radius: 6px; padding: 1px 6px; vertical-align: 1px; }
.mini-sel { width: auto; max-width: 52%; padding: 6px 8px; font-size: 13px; }
#cuentas .row span { flex: 1; }
/* v47 · Aditivos y cuidados de la carga */
.adit-desc { display: block; font-size: 12px; font-weight: 500; line-height: 1.3; margin-top: 1px; }
.agregado span { display: block; }
.cuidados { display: flex; flex-wrap: wrap; gap: 6px; }
.cuidados button { font: inherit; font-size: 13px; font-weight: 700; border: 1px solid var(--line); background: #fff; color: var(--text); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.cuidados button.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.cuidados button.on::before { content: '✓ '; }
/* v48 · Sin brincos: entrada suave de pantallas y hoja para agregar piezas */
.wrap.entra { animation: entraVista .22s ease-out; }
@keyframes entraVista { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wrap.entra { animation: none; } }
.hoja-sec { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 6px 0 2px; }
.hoja-fila { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.hoja-fila .stepper { gap: 8px; }
.hoja-fila .stepper button { width: 34px; height: 34px; font-size: 18px; }
/* v49 · Los mapas nunca se encima de ventanas: cada mapa queda en su propia capa; el modo manejo va hasta arriba */
.leaflet-container, .mapa-mision, .mapa-inicio-box { isolation: isolate; z-index: 0; }
.nav-modo { z-index: 3000; }
/* v50 · Flecha que gira en tiempo real hacia donde miras, con "linterna" de visión */
.nav-yo-giro { position: relative; display: block; width: 34px; height: 34px; transition: transform .18s linear; }
.nav-yo-giro .nav-yo { transform: none !important; transition: none; }
.nav-cono { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -110px 0 0 -55px; pointer-events: none;
  background: conic-gradient(from -28deg at 50% 100%, rgba(31,111,209,.38) 0deg 56deg, transparent 56deg); -webkit-mask: radial-gradient(circle at 50% 100%, #000 40%, transparent 100%); mask: radial-gradient(circle at 50% 100%, #000 40%, transparent 100%); }
/* v51 · Pago urgente con la ropa lista + cuándo te la llevamos */
.pago-urgente { border: 2px solid #E8A33A; background: #FFF7E8; border-radius: 14px; padding: 14px; gap: 8px; animation: urgePulso 2.2s ease-in-out infinite; }
.pago-urgente .pu-tit { font-size: 19px; }
.pago-urgente.mini { display: grid; gap: 4px; padding: 10px 12px; margin-top: 4px; }
.pago-urgente.mini .btn { justify-self: start; margin-top: 4px; }
@keyframes urgePulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,163,58,.35); } 50% { box-shadow: 0 0 0 7px rgba(232,163,58,0); } }
@media (prefers-reduced-motion: reduce) { .pago-urgente { animation: none; } }
.cuando { border-top: 1px dashed var(--line); padding-top: 10px; }
.cuando-opc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cuando-opc button { font: inherit; font-size: 13px; font-weight: 700; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 4px; cursor: pointer; color: var(--text); }
.cuando-opc button.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
/* v52: mapas dentro de la página — en celular se mueven con 2 dedos o tocándolos una vez */
.mapa-candado .mapa-aviso { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1200; background: rgba(15,42,61,.86); color: #fff; font-weight: 700; font-size: 14px; padding: 10px 14px; border-radius: 12px; text-align: center; pointer-events: none; max-width: 80%; }
.mapa-candado.activo { box-shadow: inset 0 0 0 3px #1F6FD1; }
/* v52: modo manejo con mapa que gira contigo e inclinado */
.nav-lienzo { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.nav-lienzo .nav-mapa { position: absolute; inset: 0; }
.nav-lienzo.girando { perspective: 900px; }
.nav-lienzo.girando .nav-mapa { inset: auto; transform-origin: 50% 50%; transition: transform .25s linear; will-change: transform; }
.nav-lienzo.girando .pin span { transform: rotate(var(--contra, 0deg)); }
.nav-brujula { position: absolute; top: 12px; right: 12px; z-index: 600; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.25); display: grid; place-items: center; font: inherit; }
.nav-brujula i { font-style: normal; color: #D93025; font-size: 16px; line-height: 1; transition: transform .25s linear; display: block; }
.nav-brujula span { font-size: 10px; font-weight: 900; color: #0F2A3D; margin-top: -14px; }
.nav-brujula.on { box-shadow: 0 0 0 3px #1F6FD1, 0 3px 12px rgba(0,0,0,.25); }
.nav-osm { position: absolute; left: 6px; bottom: 4px; z-index: 600; font-size: 10px; color: #333; background: rgba(255,255,255,.75); padding: 1px 5px; border-radius: 4px; }
/* v52: código del repartidor, grande y arriba en cada paso */
.codigo-pide { display: grid; gap: 6px; text-align: center; background: #FFF6E5; border: 2px solid #F0A43A; border-radius: 16px; padding: 12px; font-weight: 700; }
.codigo-pide .codigo-campo { font-size: 34px; letter-spacing: 12px; text-align: center; font-weight: 900; padding: 10px; }
.codigo-pide small { font-weight: 600; color: #7A5A1E; }
/* v53: inicio de la lavandería con sus fotos + vista como cliente */
.neg-fotos { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: left; position: relative; border-radius: 14px; overflow: hidden; cursor: pointer; }
.neg-fotos-in { display: grid; gap: 3px; height: 150px; }
.neg-fotos-in.n2 { grid-template-columns: 2fr 1fr; }
.neg-fotos-in.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.neg-fotos-in.n3 img:first-child { grid-row: 1 / 3; }
.neg-fotos-in img { width: 100%; height: 100%; object-fit: cover; display: block; }
.neg-fotos.vacia { background: var(--brand-soft); padding: 18px 14px 46px; }
.neg-sin { font-size: 14px; color: var(--brand-dark); font-weight: 700; }
.neg-ver-etq { position: absolute; left: 10px; bottom: 10px; background: rgba(15,42,61,.82); color: #fff; font-weight: 800; font-size: 13px; padding: 7px 12px; border-radius: 999px; }
.previa-banner { display: grid; gap: 6px; background: #FFF6E5; border: 2px solid #F0A43A; border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.previa-banner .btn { justify-self: start; }
/* v54: botón de plan B en espera (se puede tocar para ver cuánto falta) */
.btn.en-espera { opacity: .55; }
/* v55: inicio del repartidor tipo DiDi — mapa a pantalla completa, botones flotantes y hoja abajo */
.rep-fondo { position: fixed; inset: 0; z-index: 0; background: #E6EEF0; }
body.modo-mapa { background: #E6EEF0; }
body.modo-mapa .top, body.modo-mapa .nav { display: none !important; }
body.modo-mapa .wrap { padding: 0; min-height: 0; }
.rep-top { position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 12px; right: 12px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; }
.rep-top > * { pointer-events: auto; }
.rep-boton { position: relative; width: 50px; height: 50px; border-radius: 16px; border: 0; background: #fff; box-shadow: 0 3px 14px rgba(0,0,0,.18); font-size: 22px; font-weight: 900; color: #17252A; display: grid; place-items: center; }
.rep-punto { position: absolute; top: 9px; right: 9px; width: 10px; height: 10px; border-radius: 50%; background: #E5484D; }
.rep-gan { border: 0; background: #fff; border-radius: 18px; box-shadow: 0 3px 14px rgba(0,0,0,.18); padding: 8px 18px; display: flex; align-items: baseline; gap: 6px; font: inherit; color: #17252A; }
.rep-gan .gan-num { font-size: 24px; font-weight: 900; }
.rep-gan small { font-size: 12px; color: var(--muted); font-weight: 700; }
.rep-gan.subio { animation: urgePulso 1s 2; }
.rep-gan-det { position: fixed; top: calc(72px + env(safe-area-inset-top)); left: 12px; right: 12px; z-index: 30; background: #fff; border-radius: 20px; box-shadow: 0 8px 28px rgba(0,0,0,.2); padding: 16px; display: grid; gap: 12px; text-align: center; }
.rgd-num b { display: block; font-size: 32px; font-weight: 900; }
.rgd-num span, .rgd-fila span { font-size: 13px; color: var(--muted); }
.rgd-fila { display: grid; grid-template-columns: 1fr 1fr; }
.rgd-fila b { display: block; font-size: 20px; }
.hoja { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; background: #fff; border-radius: 24px 24px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.16); padding: 4px 16px calc(16px + env(safe-area-inset-bottom)); display: grid; gap: 12px; transition: max-height .25s ease; max-width: 640px; margin: 0 auto; }
.hoja.alta { max-height: 84vh; }
.hoja-asa { position: sticky; top: 0; z-index: 2; border: 0; background: #fff; padding: 10px 0 6px; display: grid; place-items: center; margin: 0 -16px; }
.hoja-asa i { width: 44px; height: 5px; border-radius: 3px; background: #CBD5DA; }
.btn-conectar { font-size: 22px; padding: 18px; border-radius: 18px; background: #1F6FD1; }
.hoja-sub { text-align: center; }
.hoja-busca { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hoja-busca b { font-size: 20px; }
.hoja-vacia { text-align: center; padding: 8px 0; }
.puntos { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.puntos i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: puntoSalta 1.2s infinite; }
.puntos i:nth-child(2) { animation-delay: .2s; } .puntos i:nth-child(3) { animation-delay: .4s; }
@keyframes puntoSalta { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.pin-viaje { background: none; border: 0; }
.pin-viaje span { display: inline-block; white-space: nowrap; background: #17252A; color: #fff; font-weight: 900; font-size: 14px; padding: 6px 10px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,.3); }
.rep-yo { width: 22px !important; height: 22px !important; }
.viaje.resalta { animation: resalta 1.4s; }
@keyframes resalta { 0%, 60% { box-shadow: 0 0 0 4px #F2A33A; } 100% { box-shadow: var(--shadow); } }
.rep-drawer { position: fixed; inset: 0; z-index: 60; }
.rd-fondo { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.rd-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(78vw, 320px); background: #fff; padding: calc(24px + env(safe-area-inset-top)) 18px 24px; display: grid; align-content: start; gap: 4px; box-shadow: 6px 0 24px rgba(0,0,0,.2); animation: rdEntra .2s ease-out; }
@keyframes rdEntra { from { transform: translateX(-100%); } }
.rd-perfil { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.rd-av { width: 54px; height: 54px; border-radius: 50%; background: #1F6FD1; color: #fff; display: grid; place-items: center; font-size: 24px; font-weight: 900; }
.rd-panel > button { display: flex; align-items: center; gap: 14px; border: 0; background: none; font: inherit; font-size: 19px; font-weight: 700; color: #17252A; padding: 14px 4px; text-align: left; }
.rd-panel > button span { width: 28px; text-align: center; }
.rd-badge { margin-left: auto; font-style: normal; background: #E5484D; color: #fff; border-radius: 999px; font-size: 13px; padding: 2px 9px; }
/* v56: Admin — ajustes editables y usuarios */
.aj-grupo summary, details.card > summary { cursor: pointer; }
.aj-fila { display: grid; grid-template-columns: 1fr 110px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.aj-fila:last-child { border-bottom: 0; }
.aj-in { text-align: right; font-weight: 800; }
.aj-switch { border: 0; border-radius: 999px; padding: 9px 10px; font: inherit; font-weight: 800; background: #E1E7EA; color: #5F6F75; }
.aj-switch.on { background: #1E8E4E; color: #fff; }
.aj-cambio { padding: 6px 0; border-bottom: 1px solid var(--line); }
/* v57: "Buscando repartidor" en dos líneas limpias */
.eta-esp { display: grid !important; grid-template-columns: 12px 1fr; column-gap: 10px; row-gap: 2px; align-items: center; text-align: left; }
.eta-esp::before { grid-row: 1 / 3; }
.eta-esp > b:first-child { font-size: 15px; }
.eta-esp > span { font-weight: 600; color: var(--text); }
/* v57: paso a paso del repartidor y números de la zona */
.pasos-viaje { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pasos-viaje li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #F1F5F7; color: #7A8A90; font-size: 14px; font-weight: 600; }
.pasos-viaje li.hecho { color: #1E8E4E; background: #EAF7EF; text-decoration: line-through; text-decoration-color: rgba(30,142,78,.35); }
.pasos-viaje li.ahora { background: #FFF3DC; color: #17252A; box-shadow: 0 0 0 2px #F2A33A; font-size: 15px; }
.pv-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-weight: 900; font-size: 13px; }
.pasos-viaje li.ahora .pv-n { background: #F2A33A; color: #fff; }
.pasos-viaje li.hecho .pv-n { background: #1E8E4E; color: #fff; }
.pv-ya { color: #C7741A; letter-spacing: .3px; }
.zona-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.zona-stats > div { background: #F1F5F7; border-radius: 12px; padding: 8px 4px; text-align: center; display: grid; }
.zona-stats b { font-size: 18px; }
.zona-stats span { font-size: 11px; color: var(--muted); font-weight: 700; }
.pv-t { display: grid; gap: 8px; flex: 1; }
.pasos-viaje .btn { padding: 10px 12px; font-size: 15px; justify-self: start; }
/* v58: varias bolsas a bordo, cada una con su código */
.bolsas-varias { display: grid; gap: 6px; background: #EEF4FF; border: 2px solid #1F6FD1; border-radius: 14px; padding: 12px; font-size: 14px; }
.bolsas-varias .row { background: #fff; border-radius: 10px; padding: 8px 10px; }
.bolsas-varias .code-inline { font-size: 20px; letter-spacing: 4px; }
.bn { font-weight: 900; }
.paga-otro input { flex: 1; min-width: 0; }
/* v60: lavandería — número de pedido grande y quién es el repartidor de cada bolsa */
.folio-tag { background: #17252A; color: #fff; font-weight: 900; font-size: 14px; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.quien-rep { display: grid; gap: 6px; background: #F4F0FF; border-radius: 14px; padding: 10px; }

/* ===== v61 · Propinas, deudas, reseñas verificadas, ¿quién paga? ===== */
.propina { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--mint-soft); border: 1px dashed var(--mint); }
.prop-ops { display: flex; gap: 6px; flex-wrap: wrap; }
.prop-ops button { flex: 1; min-width: 64px; font: inherit; font-weight: 800; font-size: 14px; padding: 9px 6px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--text); cursor: pointer; }
.prop-ops button.on { background: var(--mint-dark); border-color: var(--mint-dark); color: #fff; }
.propina-tag { display: inline-block; font-weight: 800; color: var(--mint-dark); background: var(--mint-soft); padding: 4px 10px; border-radius: 999px; font-size: 13px; }
.card.deuda { border: 2px solid var(--danger); background: #FFF6F6; }
.cal-item { display: grid; gap: 6px; }
.cal-com { display: flex; gap: 6px; }
.cal-com input { flex: 1; min-width: 0; }
.resenas-btn { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; font: inherit; font-size: 14px; text-align: left; background: var(--brand-soft); color: var(--brand-dark); border: 0; border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.resenas { display: grid; gap: 10px; }
.res-sello { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; background: var(--mint-soft); color: #0F4D3F; border-radius: 12px; padding: 10px 12px; }
.res-sello > b { font-weight: 900; color: var(--mint-dark); }
.res-dist { display: grid; gap: 4px; font-size: 13px; }
.res-dist .row { gap: 8px; }
.res-dist .row > span:first-child { width: 26px; }
.res-dist i { flex: 1; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.res-dist i b { display: block; height: 100%; background: var(--sun); border-radius: 99px; }
.res-item { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line); }
.res-item p { font-size: 15px; }
.res-est { color: var(--sun-dark); letter-spacing: 1px; }
.res-est span { color: var(--line); }
.res-real { color: var(--mint-dark); font-weight: 800; }
.quien-pag { margin-top: 8px; padding: 12px; border-radius: 14px; background: #F4F7F8; border: 1px solid var(--line); }
.cadena { display: grid; gap: 4px; font-size: 13px; }
.cadena > div { display: flex; gap: 8px; align-items: baseline; color: var(--muted); }
.cadena > div.ok { color: var(--text); }
.cadena > div > span { width: 14px; font-weight: 900; color: var(--mint-dark); }
.cadena small { margin-left: auto; color: var(--muted); }

/* ===== v61 · Identidad Washly: agua, burbujas y ola ===== */
:root {
  --mint: #3DD6B5; --mint-dark: #0FA383; --mint-soft: #E6FAF4;
  --sun: #FFC247; --sun-dark: #E59A00;
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20V9c40 0 60-8 100-8s60 8 100 8 60-8 100-8 60 8 100 8v11z' fill='%23F6F8F9'/%3E%3C/svg%3E");
}
/* Firma: la "burbuja W" junto al nombre */
.logo, .logo-big { display: inline-flex; align-items: center; gap: .3em; }
.logo::before, .logo-big::before {
  content: ''; width: .95em; height: .95em; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff 0 14%, transparent 15%),
              radial-gradient(circle at 70% 72%, rgba(255,255,255,.55) 0 9%, transparent 10%),
              linear-gradient(145deg, var(--mint), #fff 160%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.75), 0 2px 8px rgba(0,0,0,.12);
}
/* Encabezado: agua con burbujas y borde de ola */
.auth-hero {
  position: relative; border-radius: 0; padding-bottom: 34px;
  background:
    radial-gradient(circle at 88% 22%, rgba(255,255,255,.16) 0 22px, transparent 23px),
    radial-gradient(circle at 76% 62%, rgba(255,255,255,.10) 0 11px, transparent 12px),
    radial-gradient(circle at 96% 70%, rgba(255,255,255,.12) 0 6px, transparent 7px),
    radial-gradient(circle at 8% 90%, rgba(255,255,255,.08) 0 30px, transparent 31px),
    linear-gradient(160deg, #129AA5, var(--brand) 55%, var(--brand-dark));
}
.auth-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 16px; background: var(--wave) center / 100% 100% no-repeat; pointer-events: none; }
/* Splash: burbujas que suben */
.splash { position: relative; overflow: hidden; background: linear-gradient(170deg, #129AA5, var(--brand) 60%, var(--brand-dark)); }
.splash::before, .splash::after {
  content: ''; position: absolute; bottom: -60px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 60%);
  animation: burbujaSube 3.2s ease-in infinite;
}
.splash::before { left: 22%; width: 34px; height: 34px; }
.splash::after { left: 68%; width: 20px; height: 20px; animation-delay: 1.1s; }
@keyframes burbujaSube { 0% { transform: translateY(0) scale(.7); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-110vh) scale(1.1); opacity: 0; } }
/* Botón Washly: píldora con brillo de burbuja */
.btn { border-radius: 999px; position: relative; }
.btn:not(.secondary):not(.danger):not(.accent):not(.salir):not(.carrito-btn):not(.btn-conectar) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 82%, #fff), var(--brand));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 30%, transparent);
}
.btn.accent { background: linear-gradient(180deg, #FFD066, var(--sun)); color: #4A3000; box-shadow: 0 4px 14px rgba(229,154,0,.25); }
.btn:active { transform: translateY(1px) scale(.99); }
/* Carga: tres burbujas en vez de puntos */
.puntos i { background: transparent !important; border: 2px solid currentColor; width: 8px; height: 8px; }
/* Tarjetas: esquina de burbuja sutil en lo destacado */
.card.destacar { border-color: var(--mint); box-shadow: 0 0 0 4px var(--mint-soft); }
.card.destacar.deuda { border-color: var(--danger); box-shadow: none; }
.step.now .dot { background: var(--mint); box-shadow: 0 0 0 4px var(--mint-soft); }
.verif { background: var(--mint-dark); color: #fff; }
.chip.ok { background: var(--mint-soft); color: #0F4D3F; }
@media (prefers-reduced-motion: reduce) { .splash::before, .splash::after { animation: none; display: none; } }
.btn-conectar { background: linear-gradient(180deg, #2FC7A6, var(--mint-dark)); box-shadow: 0 6px 18px rgba(15,163,131,.3); }
/* v63 · La ola del inicio de sesión se mueve (dos olas a distinta velocidad) */
:root { --wave2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20V9c40 0 60-8 100-8s60 8 100 8 60-8 100-8 60 8 100 8v11z' fill='%23F6F8F9' fill-opacity='.45'/%3E%3C/svg%3E"); }
.auth-hero::after {
  height: 24px;
  background: var(--wave) 0 100% / 400px 16px repeat-x, var(--wave2) 0 100% / 560px 24px repeat-x;
  animation: olaMov 8s linear infinite;
}
@keyframes olaMov { from { background-position: 0 100%, 0 100%; } to { background-position: 400px 100%, -560px 100%; } }
@media (prefers-reduced-motion: reduce) { .auth-hero::after { animation: none; } }
/* v64 · Dirección llenada desde el mapa */
.dir-auto { display: block; background: var(--mint-soft); color: #0F4D3F; border-radius: 10px; padding: 8px 10px; }
textarea.dir-llena { box-shadow: 0 0 0 3px var(--mint); transition: box-shadow .4s; }
/* v67 · Guía de inicio y ayuda por pantalla */
.top-btns { display: flex; gap: 6px; align-items: center; }
.guia-btn { width: 38px; padding: 8px 0; text-align: center; }
.guia-btn.pulso { animation: guiaPulso 1.2s ease-in-out 4; box-shadow: 0 0 0 0 var(--mint); }
@keyframes guiaPulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(61,214,181,.7); } 50% { box-shadow: 0 0 0 8px rgba(61,214,181,0); } }
.guia-capa { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
.guia-fondo { position: absolute; inset: 0; background: rgba(9,40,44,.45); animation: guiaFade .2s ease; }
.guia-hoja { position: relative; width: 100%; max-width: 520px; background: #fff; border-radius: 24px 24px 0 0; padding: 22px 20px calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 10px; text-align: center; animation: guiaSube .25s ease; }
.guia-hoja h2 { font-size: 21px; }
.guia-hoja p { font-size: 16px; color: var(--muted); line-height: 1.4; }
.guia-ico { font-size: 46px; width: 84px; height: 84px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #fff 0 18%, transparent 19%), linear-gradient(145deg, var(--mint), #E6FAF4 160%); box-shadow: inset 0 0 0 3px rgba(255,255,255,.8); }
.guia-puntos { display: flex; gap: 6px; justify-content: center; }
.guia-puntos i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: all .2s; }
.guia-puntos i.on { width: 22px; border-radius: 99px; background: var(--brand); }
.guia-btns { display: flex; gap: 10px; align-items: center; justify-content: center; }
.guia-btns .btn { width: auto; flex: 1; max-width: 260px; }
.guia-tips { text-align: left; margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; }
@keyframes guiaSube { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes guiaFade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .guia-hoja, .guia-fondo, .guia-btn.pulso { animation: none; } }
/* v67 · Mapas estilo Washly + satélite + sin internet */
.capa-washly { filter: saturate(.78) hue-rotate(-8deg) contrast(.96) brightness(1.03); }
.mapa-sat { font: inherit; font-size: 13px; font-weight: 800; padding: 7px 11px; border-radius: 999px; border: 0; background: #fff; color: var(--brand-dark); box-shadow: 0 2px 10px rgba(0,0,0,.18); cursor: pointer; }
.mapa-sat[aria-pressed="true"] { background: var(--brand); color: #fff; }
.mapa-offline { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 500; background: rgba(23,37,42,.85); color: #fff; font-size: 13px; padding: 6px 10px; border-radius: 10px; text-align: center; pointer-events: none; }
.leaflet-control-attribution { font-size: 9px !important; background: rgba(255,255,255,.65) !important; padding: 0 4px !important; }
.top-btns .link-btn { white-space: nowrap; }
.guia-btn { font-size: 17px; font-weight: 900; }
.top .rol-tag { white-space: nowrap; }
@media (max-width: 380px) { .top .rol-tag { display: none; } }
/* v68 · Tono Washly del mapa (menta suave encima del mapa) */
.leaflet-container.mapa-washly::after { content: ''; position: absolute; inset: 0; background: rgba(61,214,181,.10); mix-blend-mode: multiply; pointer-events: none; z-index: 450; }
.mapa-atrib { position: absolute; left: 6px; bottom: 4px; z-index: 5; font-size: 9px; color: #445; background: rgba(255,255,255,.65); padding: 0 4px; border-radius: 3px; pointer-events: none; }
.capa-washly { filter: grayscale(.6) contrast(.92) brightness(1.06); }
/* v69 · Escena animada de la etapa del pedido (cliente) */
.escena { position: relative; height: 54px; border-radius: 14px; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: linear-gradient(180deg, #EFFCF8, #F7FFFD); border: 1px solid #D6F3EA; }
.escena .esc-txt { position: relative; z-index: 2; font-weight: 800; font-size: 14px; color: #17403A; }
.esc-burb { position: absolute; inset: 0; pointer-events: none; }
.esc-burb i { position: absolute; bottom: -14px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 25%, rgba(61,214,181,.25) 60%, rgba(61,214,181,.45)); border: 1px solid rgba(61,214,181,.55); animation: escSube 3.2s ease-in infinite; opacity: 0; }
.esc-burb i:nth-child(1) { left: 6%; animation-delay: 0s; }
.esc-burb i:nth-child(2) { left: 18%; width: 6px; height: 6px; animation-delay: .7s; }
.esc-burb i:nth-child(3) { left: 31%; width: 13px; height: 13px; animation-delay: 1.5s; }
.esc-burb i:nth-child(4) { left: 46%; animation-delay: .3s; }
.esc-burb i:nth-child(5) { left: 60%; width: 7px; height: 7px; animation-delay: 2.1s; }
.esc-burb i:nth-child(6) { left: 72%; width: 12px; height: 12px; animation-delay: 1.1s; }
.esc-burb i:nth-child(7) { left: 84%; width: 6px; height: 6px; animation-delay: 2.6s; }
.esc-burb i:nth-child(8) { left: 93%; animation-delay: 1.8s; }
@keyframes escSube { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(5px, -32px) scale(1); } 85% { opacity: .9; } 100% { transform: translate(-3px, -68px) scale(1.1); opacity: 0; } }
.esc-tambor { position: relative; z-index: 2; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 3px solid #9FE8D6; overflow: hidden; box-shadow: inset 0 0 0 3px #fff; }
.esc-agua { position: absolute; left: -50%; top: 45%; width: 200%; height: 200%; border-radius: 40%; background: rgba(61,214,181,.55); animation: escGira 2.4s linear infinite; }
.esc-ojo { position: absolute; inset: 7px; border-radius: 50%; border: 2px dashed rgba(23,64,58,.18); animation: escGira 1.6s linear infinite reverse; }
@keyframes escGira { to { transform: rotate(360deg); } }
.escena.moto .esc-camino { position: absolute; left: 0; right: 0; bottom: 9px; height: 3px; background: repeating-linear-gradient(90deg, #A7DCCF 0 14px, transparent 14px 26px); background-size: 26px 3px; animation: escCamino .6s linear infinite; }
@keyframes escCamino { to { background-position: 26px 0; } }
.esc-moto { position: relative; z-index: 2; font-size: 26px; line-height: 1; animation: escBrinca .5s ease-in-out infinite alternate; }
@keyframes escBrinca { to { transform: translateY(-2px) rotate(-2deg); } }
.esc-viento { position: absolute; left: 44px; top: 18px; display: grid; gap: 5px; }
.esc-viento i { display: block; height: 2px; width: 14px; border-radius: 2px; background: #BDEBDF; animation: escViento .8s linear infinite; }
.esc-viento i:nth-child(2) { width: 9px; animation-delay: .25s; }
.esc-viento i:nth-child(3) { width: 12px; animation-delay: .5s; }
@keyframes escViento { 0% { transform: translateX(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(16px); opacity: 0; } }
.escena.moto .esc-txt { margin-left: 22px; }
.esc-brillo { position: relative; z-index: 2; font-size: 24px; animation: escBrilla 1.4s ease-in-out infinite; }
@keyframes escBrilla { 50% { transform: scale(1.18) rotate(12deg); filter: brightness(1.2); } }
.escena.lista .esc-burb i { animation-duration: 4.5s; }
@media (prefers-reduced-motion: reduce) {
  .esc-burb i, .esc-agua, .esc-ojo, .esc-camino, .esc-moto, .esc-viento i, .esc-brillo { animation: none; }
  .esc-burb i { opacity: .6; bottom: 8px; }
}
/* v70 · Aviso de fase de pruebas */
.aviso-prueba { margin: 0 0 12px; padding: 9px 12px; border-radius: 12px; background: #FFF6DB; border: 1px dashed #E7B53C; color: #5B4300; font-size: 13px; line-height: 1.35; }
#prueba-auth { padding-top: 0; padding-bottom: 0; }
#prueba-auth .aviso-prueba { margin: 12px 0 0; }
/* v72 · Foto de fachada al cambiar de ubicación (admin) */
.ubi-foto { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; background: #EEF2F3; }

/* ===== v75 · Íconos Washly (cartoon a color, animados) ===== */
.wi3 { width: 1.35em; height: 1.35em; vertical-align: -.32em; flex: none; overflow: visible; display: inline-block; }
.wi3.md { width: 28px; height: 28px; }
.wi3.xl { width: 64px; height: 64px; }
.nav button .ico .wi3 { width: 28px; height: 28px; }
.mini-pasos .mp .wi3 { width: 22px; height: 22px; }
.mini-pasos .mp { font-size: 0; }
.guia-ico .wi3 { width: 58px; height: 58px; }
.festejo-ico .wi3 { width: 84px; height: 84px; }
.esc-moto .wi3 { width: 34px; height: 34px; }
.ico .wi3 { vertical-align: middle; }
.am { transform-box: fill-box; transform-origin: center; }
.am.mece, .am.toldo { transform-origin: 50% 0; }
/* Solo se mueven cuando tiene sentido: al tocar, pestaña recién abierta y etapa actual */
:is(.vivo, .toca) .am.gira { animation: waGira 1.6s linear infinite; }
:is(.vivo, .toca) .am.gira.rapido { animation-duration: .5s; }
:is(.vivo, .toca) .am.gira.lento { animation-duration: 3s; }
:is(.vivo, .toca) .am.mece { animation: waMece .9s ease-in-out infinite alternate; }
:is(.vivo, .toca) .am.bota { animation: waBota .45s ease-in-out infinite alternate; }
:is(.vivo, .toca) .am.vibra { animation: waVibra .16s linear infinite alternate; }
:is(.vivo, .toca) .am.sube { animation: waSube .6s ease-in-out infinite alternate; }
:is(.vivo, .toca) .am.asiente { animation: waAsiente .7s ease-in-out infinite alternate; }
:is(.vivo, .toca) .am.toldo { animation: waToldo .6s ease-in-out infinite alternate; }
:is(.vivo, .toca) .am.aguja { animation: waAguja .8s ease-in-out infinite alternate; }
:is(.vivo, .toca) .am.brilla { animation: waBrilla .7s ease-in-out infinite alternate; }
:is(.vivo, .toca) .am.rafaga { animation: waRafaga .35s linear infinite alternate; }
:is(.vivo, .toca) .am.pop { animation: waPop .6s ease-in-out infinite alternate; }
:is(.vivo, .toca) .am.punto { animation: waBota .45s ease-in-out infinite alternate; }
:is(.vivo, .toca) .am.flota { animation: waFlota 1.4s ease-in-out infinite alternate; }
:is(.vivo, .toca) .am.flash { animation: waFlash .3s steps(2) infinite alternate; }
:is(.vivo, .toca) .am.ondea { animation: waOndea .8s ease-in-out infinite alternate; }
:is(.vivo, .toca) .am.late { animation: waLate .55s ease-in-out infinite alternate; }
:is(.vivo, .toca) .am.gira-poco { animation: waGiraPoco .9s ease-in-out infinite alternate; }
:is(.vivo, .toca) .am.tiembla { animation: waTiembla .12s linear infinite alternate; }
:is(.vivo, .toca) .am.desliza { animation: waDesliza .7s ease-in-out infinite alternate; }
:is(.vivo, .toca) .am.vapor { animation: waVapor 1.1s ease-out infinite; }
:is(.vivo, .toca) .am.d2 { animation-delay: .15s; }
:is(.vivo, .toca) .am.d3 { animation-delay: .3s; }
:is(.vivo, .toca) .am.vapor.d2, :is(.vivo, .toca) .am.flota.d2 { animation-delay: .45s; }
@media (hover: hover) {
  :is(button, .btn, a):hover .am.gira { animation: waGira 1.6s linear infinite; }
  :is(button, .btn, a):hover .am:is(.mece, .bota, .sube, .pop, .late, .flota, .brilla, .aguja, .asiente, .desliza, .ondea, .gira-poco) { animation: waBota .45s ease-in-out infinite alternate; }
  :is(button, .btn, a):hover .am.mece { animation-name: waMece; }
  :is(button, .btn, a):hover .am.late, :is(button, .btn, a):hover .am.pop { animation-name: waLate; }
}
@keyframes waGira { to { transform: rotate(360deg); } }
@keyframes waMece { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes waBota { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes waVibra { from { transform: translateY(0); } to { transform: translateY(-.8px); } }
@keyframes waSube { from { transform: translateY(1px); } to { transform: translateY(-4px); } }
@keyframes waAsiente { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes waToldo { from { transform: scaleY(1); } to { transform: scaleY(.9); } }
@keyframes waAguja { from { transform: rotate(-45deg); } to { transform: rotate(35deg); } }
@keyframes waBrilla { from { transform: scale(.6); opacity: .5; } to { transform: scale(1.15); opacity: 1; } }
@keyframes waRafaga { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-3px); opacity: .35; } }
@keyframes waPop { from { transform: scale(.85); } to { transform: scale(1.1); } }
@keyframes waFlota { from { transform: translateY(1px); } to { transform: translateY(-2.5px); } }
@keyframes waFlash { from { opacity: 1; } to { opacity: .2; } }
@keyframes waOndea { from { transform: translateX(-1.5px); } to { transform: translateX(1.5px); } }
@keyframes waLate { from { transform: scale(1); } to { transform: scale(1.14); } }
@keyframes waGiraPoco { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@keyframes waTiembla { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes waDesliza { from { transform: translateX(-2px); } to { transform: translateX(2px); } }
@keyframes waVapor { from { transform: translateY(1px); opacity: 1; } to { transform: translateY(-4px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .am { animation: none !important; } }
.wi3:not(.md):not(.xl) { width: 1.5em; height: 1.5em; vertical-align: -.38em; margin-right: .1em; }
.wi3:not(.md):not(.xl) .wb { display: none; }
.nav button .ico .wi3 .wb { display: none; }
.nav button .ico .wi3 { width: 30px; height: 30px; }
.mini-pasos .mp .wi3 .wb { display: none; }

/* ===== v76 · Emojis con burbuja + dibujos estilo emoji ===== */
.emo { display: inline-block; line-height: 1; }
.toca .emo { animation: emPop .55s ease; }
.nav button .ico { width: 42px; height: 42px; border-radius: 50%; font-size: 21px; display: grid; place-items: center; position: relative; filter: grayscale(.6); opacity: .75;
  background: radial-gradient(circle at 32% 28%, #fff 0 14%, transparent 15%), linear-gradient(145deg, #eef9f6, #d3f3ea); box-shadow: inset 0 0 0 2px rgba(255,255,255,.85); }
.nav button.on .ico { filter: none; opacity: 1; transform: scale(1.06);
  background: radial-gradient(circle at 32% 28%, #fff 0 14%, transparent 15%), linear-gradient(145deg, #b8f2e4, #3DD6B5); box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), 0 3px 8px rgba(11,59,58,.18); }
.nav button.on .ico::after { content: ''; position: absolute; right: -1px; top: -1px; width: 10px; height: 10px; border-radius: 50%; background: #3DD6B5; border: 2px solid #fff; }
.em3 { width: 1.6em; height: 1.6em; vertical-align: middle; overflow: visible; display: inline-block; }
.em3.xl { width: 72px; height: 72px; }
.guia-ico .em3 { width: 64px; height: 64px; }
.festejo-ico .em3 { width: 92px; height: 92px; }
.mini-pasos .mp .em3 { width: 26px; height: 26px; }
.esc-moto .em3 { width: 42px; height: 42px; }
.empty .ico.con-dib, .guia-ico.con-dib { font-size: 0; }
.vivo .em3, .toca .em3 { animation: emFlota 2s ease-in-out infinite; }
.vivo .em3[data-i="lavadora"] { animation: emVibra .22s linear infinite alternate; }
.vivo .em3[data-i="scooter"] { animation: emBota .45s ease-in-out infinite alternate; }
.vivo .em3[data-i="bascula"], .vivo .em3[data-i="casa"] { animation: emLate 1.2s ease-in-out infinite; }
@keyframes emPop { 0% { transform: scale(1); } 35% { transform: scale(1.35) rotate(-8deg); } 70% { transform: scale(.92) rotate(4deg); } 100% { transform: scale(1); } }
@keyframes emFlota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes emVibra { from { transform: translate(-.6px, 0) rotate(-1deg); } to { transform: translate(.6px, -.5px) rotate(1deg); } }
@keyframes emBota { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes emLate { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
/* Lavandería sin fotos: dibujo + color propio */
.lav-foto.sin-foto { position: relative; overflow: hidden; }
.pv { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pv .em3 { filter: drop-shadow(0 6px 10px rgba(11,59,58,.2)); }
.pv-a { display: flex; align-items: flex-end; gap: 4px; position: relative; z-index: 1; }
.pv-a .em3 { width: 104px; height: 104px; }
.pv-a .em3.pv-chico { width: 62px; height: 62px; }
.pv-b .em3 { width: 150px; height: 150px; }
.pv-c { display: flex; align-items: center; gap: 6px; position: relative; z-index: 1; }
.pv-c b { font: 900 52px/1 'Nunito', system-ui, sans-serif; color: #fff; text-shadow: 0 3px 0 rgba(11,59,58,.25), 0 8px 18px rgba(11,59,58,.25); margin-right: 6px; }
.pv-c .em3 { width: 58px; height: 58px; }
.pv-burb i { position: absolute; bottom: -24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, rgba(255,255,255,.35) 60%, rgba(255,255,255,.12)); border: 1px solid rgba(255,255,255,.7); animation: pvSube 8s linear infinite; }
@keyframes pvSube { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-260px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .emo, .em3, .pv-burb i { animation: none !important; } }

/* ===== v77 · Menos animaciones: solo burbujas al tocar botones principales y el menú ===== */
.toca .emo, .toca .em3 { animation: none !important; }
#fx-capa { position: fixed; inset: 0; pointer-events: none; z-index: 10000; overflow: hidden; }
.fx-grupo { position: absolute; width: 0; height: 0; }
.fx-anillo { position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  border: 3px solid rgba(61,214,181,.95); background: radial-gradient(circle, rgba(184,242,228,.35), transparent 70%); box-shadow: 0 0 16px rgba(61,214,181,.55), inset 0 0 12px rgba(255,255,255,.7);
  animation: fxAnillo .55s cubic-bezier(.2,.7,.3,1) forwards; }
.fx-anillo.g { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
@keyframes fxAnillo { 0% { transform: scale(.15); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.fx-b { position: absolute; left: 0; top: 0; width: var(--t); height: var(--t); margin: calc(var(--t) / -2) 0 0 calc(var(--t) / -2); border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0 20%, rgba(255,255,255,.4) 32%, rgba(120,226,203,.55) 62%, rgba(31,160,140,.85) 100%);
  box-shadow: 0 0 0 1.5px rgba(61,214,181,.9), 0 3px 8px rgba(11,59,58,.22), 0 0 10px rgba(79,195,247,.35);
  opacity: 0; animation: fxBurbuja var(--d) cubic-bezier(.15,.8,.35,1) var(--r) forwards; }
@keyframes fxBurbuja {
  0% { transform: translate(0, 0) scale(.3); opacity: 0; }
  15% { opacity: 1; }
  70% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: .95; }
  85% { transform: translate(calc(var(--dx) * 1.05), calc(var(--dy) * 1.05 - 4px)) scale(1.25); opacity: .6; }
  100% { transform: translate(calc(var(--dx) * 1.08), calc(var(--dy) * 1.08 - 6px)) scale(1.6); opacity: 0; }
}
/* Pestaña recién elegida: la burbuja llega con rebote y brillo */
.nav button.llega .ico { animation: navLlega .6s cubic-bezier(.3,1.6,.5,1) both; }
.nav button.llega .ico::after { animation: navPunto .5s .25s cubic-bezier(.3,1.8,.5,1) both; }
.nav button.llega .ico::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.85) 50%, transparent 70%); background-size: 250% 100%; animation: navBrillo .7s .1s ease-out both; }
@keyframes navLlega { 0% { transform: scale(.7); } 100% { transform: scale(1.06); } }
@keyframes navPunto { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes navBrillo { 0% { background-position: 120% 0; opacity: 1; } 100% { background-position: -40% 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nav button.llega .ico, .nav button.llega .ico::after, .nav button.llega .ico::before { animation: none; } }

/* ===== v79 · Entrar con Google ===== */
.o-sep { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; font-weight: 700; margin: 2px 0 -2px; }
.o-sep::before, .o-sep::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px 16px; border-radius: 999px; border: 2px solid var(--line); background: #fff; color: #1f2937; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; transition: background .15s, box-shadow .15s; }
.btn-google svg { width: 20px; height: 20px; flex: none; }
.btn-google:active { background: #f3f6f8; }
.btn-google.cargando { opacity: .6; }

/* ===== v79 · Modo nocturno discreto (html.oscuro; automático según el celular o fijo en Cuenta) ===== */
html.oscuro { color-scheme: dark; }
html.oscuro, html.oscuro body { --bg: #0F1A1D; --card: #172629; --text: #DCE7EA; --muted: #93A7AC; --line: #2A3D42; --brand-soft: #143A3D; --brand-dark: #7DD3D0; }
html.oscuro body[data-rol="lavanderia"] { --brand-soft: #2A2445; --brand-dark: #BBAAF5; }
html.oscuro body[data-rol="repartidor"] { --brand-soft: #172F4C; --brand-dark: #95BEF5; }
html.oscuro body { background: var(--bg); }
html.oscuro .leaflet-tile-pane, html.oscuro .lav-foto img, html.oscuro .galeria img { filter: brightness(.86) saturate(.92); }
html.oscuro .splash { background: linear-gradient(170deg, #0F5F66, #0B4A50); }
html.oscuro { --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20V9c40 0 60-8 100-8s60 8 100 8 60-8 100-8 60 8 100 8v11z' fill='%230F1A1D'/%3E%3C/svg%3E"); --wave2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20V9c40 0 60-8 100-8s60 8 100 8 60-8 100-8 60 8 100 8v11z' fill='%230F1A1D' fill-opacity='.45'/%3E%3C/svg%3E"); }
html.oscuro .card, html.oscuro .nav, html.oscuro .guia-hoja { box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 6px 18px rgba(0,0,0,.28); }
html.oscuro input::placeholder, html.oscuro textarea::placeholder { color: #6E8388; }
html.oscuro .em3 { filter: brightness(.94); }
html.oscuro .pv { filter: brightness(.78) saturate(.9); }
html.oscuro .nav button .ico { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.35) 0 14%, transparent 15%), linear-gradient(145deg, #1D3337, #183034); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.08); }
html.oscuro .nav button.on .ico { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.6) 0 14%, transparent 15%), linear-gradient(145deg, #2C8F80, #1F6F64); }
html.oscuro .nav button.on .ico::after { border-color: #172629; }
html.oscuro .aviso-prueba { background: #2B2615; border-color: #5A4E26; color: #E9DCAA; }
html.oscuro .fx-anillo { border-color: rgba(61,214,181,.7); }
html.oscuro #toast, html.oscuro .toast { background: #23383C; color: #E9F1F2; }
/* reglas generadas: fondos claros → oscuros, textos oscuros → claros */
html.oscuro .price { color: var(--brand-dark); }
html.oscuro .chip.warn { background: #3F2F18; color: #EEC78B; }
html.oscuro .chip.ok { background: #233429; }
html.oscuro .chip.gray { background: #292D2E; }
html.oscuro input, html.oscuro select, html.oscuro textarea { background: #172629; }
html.oscuro .btn.danger { background: #391E1E; }
html.oscuro .tabs { background: #272E2F; }
html.oscuro .tabs button.on { background: #172629; }
html.oscuro .role { background: #172629; }
html.oscuro .nav { background: #172629; }
html.oscuro .chip.alert { background: #3C1A1A; }
html.oscuro .alerta { background: #3F3118; border: 1px solid #6C542D; color: #EECB8B; }
html.oscuro .link { color: var(--brand-dark); }
html.oscuro .seg button { background: #172629; }
html.oscuro .instalar-link { color: var(--brand-dark); background: #172629; }
html.oscuro .burbuja { background: #172629; }
html.oscuro .mapa { background: #272D2F; }
html.oscuro .pin span { background: #172629; }
html.oscuro .repcard img, html.oscuro .repcard .avatar { background: #172629; }
html.oscuro .chip-btn { background: #172629; }
html.oscuro .mapa-error { background: #172629; }
html.oscuro .mini-pasos .mp { background: #282D2F; }
html.oscuro .mini-pasos .mp.now { background: #3D2F19; }
html.oscuro .tile { background: #172629; }
html.oscuro .tile.urg { background: #3F2E18; }
html.oscuro .tile.urg .n { color: #EEB68B; }
html.oscuro .aviso-push { background: #3F2E18; }
html.oscuro .btn.salir { background: #172629; color: #EE928B; border: 2px solid #693630; }
html.oscuro .viaje.mejor { border: 2px solid #705629; }
html.oscuro .insignia.fuego { background: #3F3218; color: #EEB68B; }
html.oscuro .insignia.bono { background: #25183F; color: #B28EEB; }
html.oscuro .mision-paso { color: var(--brand-dark); }
html.oscuro .mision-reloj.apurate { color: #EE928B; }
html.oscuro .mapa-mision { background: #262E30; }
html.oscuro .festejo-in { background: #172629; }
html.oscuro .exito { background: #223529; color: #8BEEB8; }
html.oscuro .estado-neg { background: #282C2F; }
html.oscuro .estado-neg.on { background: #223529; }
html.oscuro .anuncio { background: #172629; }
html.oscuro .anuncio img, html.oscuro .anuncio-ico { background: #292C2E; }
html.oscuro .mision-ruta { color: var(--brand-dark); }
html.oscuro .cerca { background: #3F3418; border: 2px solid #6F552A; color: #EECC8B; }
html.oscuro .cerca-tit { color: #EECC8B; }
html.oscuro .jornada.descanso { background: #242932; }
html.oscuro .planb summary { color: #EEB68B; }
html.oscuro .insignia.combo { background: #18273F; color: #8BA5EE; }
html.oscuro .top .logo { color: var(--brand-dark); }
html.oscuro .link-btn { background: #172629; }
html.oscuro .btn.foto-pend { background: #172629; }
html.oscuro .card { border: 1px solid #454E54; }
html.oscuro input, html.oscuro select, html.oscuro textarea { border-color: #464F53; }
html.oscuro .nav { border-top: 1px solid #454E54; }
html.oscuro .link-btn { border-color: #464F53; }
html.oscuro .money { background: #272C30; }
html.oscuro .acciones button, html.oscuro .acciones a { background: #272D30; color: #9FB2B7; }
html.oscuro .tabs { background: #282D2F; }
html.oscuro .lav-precio { background: #172629; }
html.oscuro .lav-nodisp { color: #DCE7EA; }
html.oscuro .lav-estrellas { color: #EEC68B; }
html.oscuro .galeria-puntos i.on { background: #172629; }
html.oscuro .mapa-inicio-box { border: 1px solid #454E54; }
html.oscuro .mapa-expandir { background: #172629; }
html.oscuro .pin-lav span { border: 2px solid #2A3D42; }
html.oscuro .mapa-sel-in { background: #172629; }
html.oscuro .filtro { border: 1.5px solid #464F53; background: #172629; }
html.oscuro .sello.completa { background: #182A3F; color: #8BA5EE; }
html.oscuro .sello.basica { background: #282C2F; }
html.oscuro .lav-card.nivel-premium { background: linear-gradient(#172629, #172629) padding-box, linear-gradient(135deg, #B8860B, #3C371A, #C9A227, #8C6A12) border-box; }
html.oscuro .lav-card.nivel-premium .lav-cuerpo { background: linear-gradient(180deg, #3F3618, #172629); }
html.oscuro .lav-card.nivel-completa { border-color: #264373; }
html.oscuro .pin-lav.oro span { border-color: #6D5E2C; }
html.oscuro .opc { background: #172629; }
html.oscuro .peso-rapido button { background: #172629; }
html.oscuro .pin-centro .pin-punto { border: 3px solid #2A3D42; }
html.oscuro .pin-centro .pin-cabeza { background: #172629; }
html.oscuro .rv-pt img, html.oscuro .rv-ico { background: #172629; }
html.oscuro .rv-linea span { background: #172629; }
html.oscuro .lav-card.nivel-premium .lav-precio { background: #172629; }
html.oscuro .nivel i { background: #292C2E; }
html.oscuro .tile-srv:not(.on) .tile-mas { background: #172629; }
html.oscuro .sheet { background: #172629; }
html.oscuro .sheet-asa { background: #292C2E; }
html.oscuro .kg-opc button { background: #172629; }
html.oscuro .stepper button { background: #172629; }
html.oscuro .ideas button { border: 1px dashed #2A3D42; background: #172629; }
html.oscuro .nav-modo { background: #272C30; }
html.oscuro .nav-centrar { background: #172629; color: #95C4E5; }
html.oscuro .nav-abajo { background: #172629; }
html.oscuro .nav-eta { color: #8CB8EE; }
html.oscuro .nav-boton { background: #172629; }
html.oscuro .nav-yo { border: 3px solid #2A3D42; }
html.oscuro .estimado-tag { color: #EECC8B; background: #3F3218; }
html.oscuro .cuidados button { background: #172629; }
html.oscuro .pago-urgente { border: 2px solid #6B532E; background: #3F3118; }
html.oscuro .cuando-opc button { background: #172629; }
html.oscuro .nav-brujula { background: #172629; }
html.oscuro .nav-brujula i { color: #EC938E; }
html.oscuro .nav-brujula span { color: #95C4E5; }
html.oscuro .nav-osm { color: #DCE7EA; }
html.oscuro .codigo-pide { background: #3F3118; border: 2px solid #6D522C; }
html.oscuro .codigo-pide small { color: #E5C995; }
html.oscuro .previa-banner { background: #3F3118; border: 2px solid #6D522C; }
html.oscuro .rep-fondo { background: #262E30; }
html.oscuro body.modo-mapa { background: #262E30; }
html.oscuro .rep-boton { background: #172629; color: #A9C6D0; }
html.oscuro .rep-gan { background: #172629; color: #A9C6D0; }
html.oscuro .rep-gan-det { background: #172629; }
html.oscuro .hoja { background: #172629; }
html.oscuro .hoja-asa { background: #172629; }
html.oscuro .hoja-asa i { background: #282C2F; }
html.oscuro .rd-panel { background: #172629; }
html.oscuro .rd-panel > button { color: #A9C6D0; }
html.oscuro .aj-switch { background: #282C2F; color: #9FB2B7; }
html.oscuro .pasos-viaje li { background: #262D31; }
html.oscuro .pasos-viaje li.hecho { color: #92E8B7; background: #233429; }
html.oscuro .pasos-viaje li.ahora { background: #3F3118; color: #A9C6D0; }
html.oscuro .pv-n { background: #172629; }
html.oscuro .zona-stats > div { background: #262D31; }
html.oscuro .bolsas-varias { background: #18263F; }
html.oscuro .bolsas-varias .row { background: #172629; }
html.oscuro .quien-rep { background: #22183F; }
html.oscuro .prop-ops button { background: #172629; }
html.oscuro .card.deuda { background: #3F1818; }
html.oscuro .res-sello { color: #90E9D5; }
html.oscuro .quien-pag { background: #272E30; }
html.oscuro .btn:not(.secondary):not(.danger):not(.accent):not(.salir):not(.carrito-btn):not(.btn-conectar) { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 82%, #172629), var(--brand)); }
html.oscuro .chip.ok { color: #90E9D5; }
html.oscuro .dir-auto { color: #90E9D5; }
html.oscuro .guia-hoja { background: #172629; }
html.oscuro .mapa-sat { background: #172629; }
html.oscuro .mapa-atrib { color: #9FB2B7; }
html.oscuro .escena { background: linear-gradient(180deg, #1E3930, #183F35); border: 1px solid #386154; }
html.oscuro .escena .esc-txt { color: #9DDCD3; }
html.oscuro .esc-tambor { background: #172629; border: 3px solid #356458; }
html.oscuro .escena.moto .esc-camino { background: repeating-linear-gradient(90deg, #233430 0 14px, transparent 14px 26px); }
html.oscuro .esc-viento i { background: #213630; }
html.oscuro .aviso-prueba { background: #3F3518; border: 1px dashed #6A592F; color: #EED48B; }
html.oscuro .ubi-foto { background: #282D2F; }
html.oscuro .btn-google { background: #172629; color: #AABACF; }
html.oscuro .btn-google:active { background: #262C30; }
html.oscuro .nav button .ico { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.35) 0 14%, transparent 15%), linear-gradient(145deg, #1D3337, #183034); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.08); }
html.oscuro .nav button.on .ico { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.6) 0 14%, transparent 15%), linear-gradient(145deg, #2C8F80, #1F6F64); }
html.oscuro .nav button.on .ico::after { border-color: #172629; }
html.oscuro .aviso-prueba { background: #2B2615; border-color: #5A4E26; color: #E9DCAA; }
html.oscuro #toast, html.oscuro .toast { background: #23383C; color: #E9F1F2; }

/* ===== v82 · Lavanderías en el mapa del repartidor (discretas) ===== */
.pin-lav-rep { background: none; border: 0; }
.pin-lav-rep span { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 15px; background: rgba(255,255,255,.92); box-shadow: 0 0 0 2px rgba(61,214,181,.55), 0 2px 6px rgba(0,0,0,.18); opacity: .88; }
.pin-lav-rep span.pausa { filter: grayscale(1); opacity: .5; }
.pin-lav-rep i { position: absolute; top: -5px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #3DD6B5; color: #0B3B3A; font: 900 10px/16px 'Nunito', system-ui, sans-serif; font-style: normal; text-align: center; box-shadow: 0 0 0 2px #fff; }
.lav-rep-popup .leaflet-popup-content-wrapper { border-radius: 14px; }
.lav-rep-popup .leaflet-popup-content { margin: 10px 12px; }
.lav-rep-pop { display: grid; gap: 3px; font: 600 13px/1.3 'Nunito', system-ui, sans-serif; color: #17252A; min-width: 170px; }
.lav-rep-pop b { font-size: 14px; }
.lav-rep-pop span { color: #4F5E64; }
.lav-rep-pop a { margin-top: 4px; font-weight: 800; color: #1F6FD1; text-decoration: none; }
html.oscuro .pin-lav-rep span { background: rgba(23,38,41,.92); }
html.oscuro .pin-lav-rep i { box-shadow: 0 0 0 2px #172629; }
html.oscuro .lav-rep-popup .leaflet-popup-content-wrapper, html.oscuro .lav-rep-popup .leaflet-popup-tip { background: #172629; }
html.oscuro .lav-rep-pop { color: #DCE7EA; }
html.oscuro .lav-rep-pop span { color: #93A7AC; }
html.oscuro .lav-rep-pop a { color: #95BEF5; }

/* ===== v83 · Billeteras del repartidor (hoy + saldo) con botón para ocultarlas ===== */
.rep-bill { position: relative; display: flex; align-items: center; gap: 2px; min-width: 0; flex: 0 1 260px; background: #fff; border-radius: 18px; box-shadow: 0 3px 14px rgba(0,0,0,.18); padding: 4px 4px 4px 4px; }
.rep-bill .rb-c { flex: 1 1 0; min-width: 0; border: 0; background: none; font: inherit; color: #17252A; display: grid; justify-items: center; gap: 1px; padding: 3px 6px; line-height: 1.05; cursor: pointer; border-radius: 14px; }
.rep-bill .rb-c:active { background: rgba(14,124,134,.08); }
.rep-bill .rb-c small { font-size: 10.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.rep-bill .rb-c .gan-num, .rep-bill .rb-c .din { font-size: 19px; font-weight: 900; letter-spacing: -.3px; white-space: nowrap; }
.rep-bill .rb-c .neg { color: var(--danger); }
.rep-bill.subio { animation: urgePulso 1s 2; }
.rep-bill .gan-mas { right: 50px; top: -6px; font-size: 16px; color: var(--mint-dark); }
.rb-sep { width: 1px; align-self: stretch; margin: 7px 0; background: var(--line); flex: none; }
.rb-ojo { flex: none; width: 36px; height: 36px; border: 0; border-radius: 12px; background: var(--brand-soft); font-size: 17px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.saldo .rb-ojo { width: 34px; height: 30px; font-size: 15px; }
/* Dinero oculto: se ven puntitos en lugar de la cantidad */
html.din-oculto .din { position: relative; display: inline-block; color: transparent !important; }
html.din-oculto .din::after { content: '••••'; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; color: var(--text); letter-spacing: 1px; }
html.din-oculto .gan-mas { display: none; }
html.oscuro .rep-bill { background: #172629; }
html.oscuro .rep-bill .rb-c { color: #DCE7EA; }
html.oscuro .rep-bill .rb-c .neg { color: #F08A8A; }
/* Código promocional en el carrito */
.promo-abrir { justify-self: start; margin-top: 2px; }
.promo-form { display: flex; gap: 8px; }
.promo-form input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .5px; font-weight: 800; }
.promo-ok { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 12px; border: 1px dashed var(--mint); background: var(--mint-soft); font-size: 14px; }
.promo-linea span, .promo-linea b { color: var(--mint-dark); font-weight: 800; }
html.oscuro .promo-linea span, html.oscuro .promo-linea b { color: #7FE3C8; }

/* ===== v83 · Modo nocturno: mapas oscuros y cuadros que se veían blancos ===== */
html.oscuro, html.oscuro body { --mint-soft: #15362F; }
html.oscuro .dir-auto { color: #A6EBDA; }
html.oscuro .res-sello, html.oscuro .chip.ok { color: #9BE8D2; }
html.oscuro .propina-tag { color: #7FE3C8; }
html.oscuro .cerca-nota { background: rgba(23,38,41,.75); }
html.oscuro .lav-nodisp { background: rgba(23,38,41,.95); color: #DCE7EA; }
html.oscuro .foto-lav-port { background: rgba(23,38,41,.92); color: #DCE7EA; }
html.oscuro .nav-osm, html.oscuro .mapa-atrib, html.oscuro .leaflet-control-attribution { background: rgba(15,26,29,.72) !important; color: #93A7AC; }
html.oscuro .leaflet-control-attribution a { color: #93A7AC; }
/* Calles en tono noche: se invierte el mapa y se regresa el color (agua azul, parques verdes) */
html.oscuro .leaflet-container { background: #1A2629; }
html.oscuro .leaflet-tile-pane { filter: none; }
html.oscuro .capa-washly { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.86) saturate(.5); }
html.oscuro .leaflet-container.mapa-washly::after { background: rgba(61,214,181,.05); mix-blend-mode: screen; }
html.oscuro .leaflet-bar { border-color: rgba(0,0,0,.45); }
html.oscuro .leaflet-bar a, html.oscuro .leaflet-bar a:hover { background: #172629; color: #DCE7EA; border-bottom-color: #2A3D42; }
html.oscuro .leaflet-popup-content-wrapper, html.oscuro .leaflet-popup-tip { background: #172629; color: #DCE7EA; }
html.oscuro .pin-viaje span { background: #0E3F44; box-shadow: 0 0 0 2px rgba(125,211,208,.5), 0 3px 10px rgba(0,0,0,.45); }
html.oscuro .pin span { box-shadow: 0 0 0 2px rgba(125,211,208,.35), 0 2px 6px rgba(0,0,0,.5); }
html.oscuro .pin-centro .pin-etq { background: #E9F1F2; color: #10282B; }
html.oscuro .pin-centro .pin-palo { background: #DCE7EA; }
html.oscuro .pin-centro .pin-punto { border-color: #DCE7EA; }
html.oscuro .mapa-candado .mapa-aviso { background: rgba(10,22,25,.9); }

/* ===== v84 · Código promocional a la hora de pagar ===== */
.promo-pago { display: block; }
.precio-listo .promo-ok, .pago-urgente .promo-ok, .stack > .promo-ok { font-size: 13.5px; }
html.oscuro .link.peligro { color: #F08A8A; }

/* ===== v85 · Modo nocturno por horario: cambio animado de día a noche ===== */
html.vt-tema::view-transition-old(root), html.vt-tema::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.vt-tema::view-transition-new(root) { animation: temaRevela 1.1s cubic-bezier(.65,0,.25,1) both; }
@keyframes temaRevela { from { clip-path: circle(0 at 50% 40px); } to { clip-path: circle(150vmax at 50% 40px); } }
html.tema-suave, html.tema-suave *, html.tema-suave *::before, html.tema-suave *::after { transition: background-color 1s ease, color 1s ease, border-color 1s ease, box-shadow 1s ease !important; }
.cielo-cambio { position: fixed; top: calc(14px + env(safe-area-inset-top)); left: 50%; z-index: 9999; view-transition-name: cielo-cambio; display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; border-radius: 999px; font: 800 15px/1 'Nunito', system-ui, sans-serif; color: #fff; pointer-events: none; white-space: nowrap; box-shadow: 0 8px 26px rgba(10,30,50,.28); transform: translate(-50%, -16px) scale(.9); opacity: 0; animation: ccEntra .45s cubic-bezier(.2,.9,.3,1.3) forwards; }
.cielo-cambio.a-noche { animation: ccEntra .45s cubic-bezier(.2,.9,.3,1.3) forwards, ccFondoNoche 1.6s .35s ease forwards; background: #2E86C1; }
.cielo-cambio.a-dia { animation: ccEntra .45s cubic-bezier(.2,.9,.3,1.3) forwards, ccFondoDia 1.6s .35s ease forwards; background: #16294A; }
.cielo-cambio.fuera { opacity: 1; animation: ccSale .55s ease forwards !important; }
@keyframes ccEntra { to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes ccSale { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -14px) scale(.94); } }
@keyframes ccFondoNoche { to { background: #16294A; } }
@keyframes ccFondoDia { to { background: #2E86C1; } }
.cc-ventana { position: relative; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none; background: linear-gradient(#8FD3FF, #FFD9A0); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.a-noche .cc-ventana { animation: ventanaNoche 1.6s .35s ease forwards; }
.a-dia .cc-ventana { background: linear-gradient(#0E1B33, #2A3F6B); animation: ventanaDia 1.6s .35s ease forwards; }
@keyframes ventanaNoche { to { background: linear-gradient(#0E1B33, #2A3F6B); } }
@keyframes ventanaDia { to { background: linear-gradient(#8FD3FF, #FFD9A0); } }
.cc-sol, .cc-luna { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; }
.cc-sol { background: radial-gradient(circle at 40% 38%, #FFF6C8, #FFC93C 60%, #F5A21B); box-shadow: 0 0 10px 3px rgba(255,201,60,.65); }
.cc-luna { background: radial-gradient(circle at 35% 35%, #FFFFFF, #E4EAF5 65%, #C9D3E6); box-shadow: 0 0 9px 2px rgba(220,230,255,.45); }
.cc-luna::after { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(160,175,205,.55); left: 9px; top: 4px; box-shadow: -4px 7px 0 -1px rgba(160,175,205,.45); }
.a-noche .cc-sol { animation: astroBaja 1.3s .35s cubic-bezier(.55,0,.35,1) forwards; }
.a-noche .cc-luna { transform: translateY(30px); animation: astroSube 1.3s .75s cubic-bezier(.3,.8,.3,1) forwards; }
.a-dia .cc-luna { animation: astroBaja 1.3s .35s cubic-bezier(.55,0,.35,1) forwards; }
.a-dia .cc-sol { transform: translateY(30px); animation: astroSube 1.3s .75s cubic-bezier(.3,.8,.3,1) forwards; }
@keyframes astroBaja { to { transform: translateY(30px); } }
@keyframes astroSube { from { transform: translateY(30px); } to { transform: translateY(0); } }
.cc-estrellas { position: absolute; inset: 0; opacity: 0; background: radial-gradient(1.4px 1.4px at 8px 10px, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 28px 8px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 18px 26px, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 31px 22px, #fff 50%, transparent 51%); }
.a-noche .cc-estrellas { animation: estrellas 1s 1.1s ease forwards; }
.a-dia .cc-estrellas { opacity: 1; animation: estrellas 0.6s .35s ease reverse forwards; }
@keyframes estrellas { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cielo-cambio { display: none; } }