:root{
  --marron:#7a4a1e;
  --marron-osc:#5c3614;
  --crema:#fbf3e6;
  --crema2:#f3e6cf;
  --texto:#2e2114;
  --verde:#2e7d32;
  --verde-cl:#e3f3e4;
  --gris:#8a7b66;
  --rojo:#b3401f;
  --sombra:0 2px 10px rgba(92,54,20,.15);
  --radio:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--crema);
  color:var(--texto);
  padding-bottom:env(safe-area-inset-bottom);
}
.oculto{display:none !important}

/* ---- App bar ---- */
.appbar{
  position:sticky;top:0;z-index:1000;
  background:var(--marron);color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;
  box-shadow:var(--sombra);
}
.appbar-title{display:flex;align-items:center;gap:10px}
.appbar .logo{font-size:28px}
.appbar h1{font-size:17px;margin:0;line-height:1.1}
.appbar p{margin:2px 0 0;font-size:12px;opacity:.85}
.appbar-actions{display:flex;gap:6px}
.icon-btn{
  background:rgba(255,255,255,.15);border:0;color:#fff;
  width:40px;height:40px;border-radius:12px;font-size:18px;cursor:pointer;
}
.icon-btn:active{background:rgba(255,255,255,.3)}

/* ---- Barra inicio / ETA ---- */
.barra-inicio{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;background:var(--crema2);
  border-bottom:1px solid rgba(122,74,30,.15);
}
.btn-primario{
  background:var(--verde);color:#fff;border:0;border-radius:12px;
  padding:10px 16px;font-size:15px;font-weight:600;cursor:pointer;
}
.btn-primario:active{filter:brightness(.92)}
.info-eta{font-size:13px;color:var(--marron-osc);font-weight:600}
.info-eta b{color:var(--rojo)}

/* ---- Tarjeta ---- */
.vista{padding:12px}
.tarjeta{
  background:#fff;border-radius:var(--radio);box-shadow:var(--sombra);
  overflow:hidden;
}
.t-cab{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:14px 16px 10px;background:var(--crema2);
}
.t-num{
  font-size:13px;color:var(--gris);font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;
}
.t-tramo{
  display:inline-block;margin-top:4px;font-size:12px;font-weight:700;
  background:var(--marron);color:#fff;padding:3px 9px;border-radius:20px;
}
.t-eta{text-align:right;font-size:12px;color:var(--marron-osc)}
.t-eta .hora{font-size:20px;font-weight:800;color:var(--rojo);display:block}
.t-nombre{font-size:22px;font-weight:800;margin:12px 16px 6px;color:var(--marron-osc)}

/* panes */
.t-panes{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 4px}
.pan-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--verde-cl);color:var(--verde);
  border:1.5px solid #bfe0c0;border-radius:30px;
  padding:7px 13px;font-size:15px;font-weight:700;
}
.pan-badge .cant{
  background:var(--verde);color:#fff;border-radius:20px;
  min-width:22px;height:22px;display:inline-flex;align-items:center;
  justify-content:center;font-size:13px;padding:0 5px;
}
.pan-badge.especial{background:#fff4e0;color:#9a5a00;border-color:#f0d59a}

/* instrucciones */
.t-instr{
  margin:8px 16px 14px;padding:12px 14px;
  background:#fff8ec;border-left:4px solid var(--marron);
  border-radius:8px;font-size:15px;line-height:1.45;
}
.t-instr.vacio{color:var(--gris);font-style:italic;border-color:#ddd;background:#f7f7f7}

/* foto */
.t-foto{width:100%;display:block;max-height:46vh;object-fit:cover;background:#eee}
.t-foto-wrap{position:relative}
.t-foto-nofoto{
  padding:30px;text-align:center;color:var(--gris);background:#f3f3f3;font-size:14px;
}

/* mapa */
.t-mapa{height:200px;width:100%}

/* acciones de la tarjeta */
.t-acciones{display:flex;gap:8px;padding:12px 16px 16px}
.btn-navegar{
  flex:1;background:var(--marron);color:#fff;border:0;border-radius:12px;
  padding:13px;font-size:16px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
}
.btn-navegar:active{filter:brightness(.92)}

/* estado entregado */
.tarjeta.entregada .t-cab{background:var(--verde-cl)}
.tarjeta.entregada .t-nombre::after{content:" ✓";color:var(--verde)}
.badge-hecho{
  display:inline-block;background:var(--verde);color:#fff;font-size:12px;
  font-weight:700;padding:3px 10px;border-radius:20px;margin-left:8px;
}

/* nav inferior paso a paso */
.nav-paso{
  position:sticky;bottom:0;display:flex;gap:8px;padding:10px 12px;
  padding-bottom:calc(env(safe-area-inset-bottom) + 10px);
  background:var(--crema);border-top:1px solid rgba(122,74,30,.15);margin:0 -12px;
}
.btn-nav{
  background:#fff;border:1.5px solid var(--marron);color:var(--marron);
  border-radius:12px;padding:12px 10px;font-size:14px;font-weight:700;cursor:pointer;flex:1;
}
.btn-nav:disabled{opacity:.35}
.btn-entregar{
  background:var(--verde);color:#fff;border:0;border-radius:12px;
  padding:12px;font-size:15px;font-weight:800;cursor:pointer;flex:1.3;
}
.btn-entregar.deshacer{background:#fff;color:var(--verde);border:1.5px solid var(--verde)}

/* lista */
.lista-tramo{margin:18px 0 8px;font-size:14px;font-weight:800;color:var(--marron-osc);
  display:flex;align-items:center;gap:8px}
.lista-tramo .horario{font-size:11px;font-weight:700;background:var(--marron);color:#fff;
  padding:2px 8px;border-radius:20px}
.lista-item{
  display:flex;align-items:center;gap:12px;background:#fff;border-radius:12px;
  padding:11px 13px;margin-bottom:8px;box-shadow:var(--sombra);cursor:pointer;
}
.lista-item:active{background:var(--crema2)}
.lista-item.entregada{opacity:.55}
.lista-item.entregada .li-nombre{text-decoration:line-through}
.li-num{
  background:var(--crema2);color:var(--marron-osc);font-weight:800;
  min-width:34px;height:34px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:15px;flex-shrink:0;
}
.lista-item.entregada .li-num{background:var(--verde);color:#fff}
.li-cuerpo{flex:1;min-width:0}
.li-nombre{font-weight:700;font-size:15px}
.li-panes{font-size:12px;color:var(--gris);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}

/* mapa total */
.mapa-total{height:calc(100vh - 130px);width:100%;border-radius:var(--radio);
  box-shadow:var(--sombra)}
.marcador-num{
  background:var(--marron);color:#fff;border:2px solid #fff;border-radius:50%;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.marcador-num.hecho{background:var(--verde)}

.cargando{text-align:center;padding:40px;color:var(--gris)}

/* ---- resumen del día (dinero) ---- */
.resumen-dia{display:flex;background:var(--marron-osc);color:#fff}
.rd-item{flex:1;text-align:center;padding:8px 4px;border-right:1px solid rgba(255,255,255,.12)}
.rd-item:last-child{border-right:0}
.rd-item span{display:block;font-size:11px;opacity:.8;text-transform:uppercase;letter-spacing:.4px}
.rd-item b{font-size:17px;font-weight:800}
.rd-ok b{color:#9be7a0}
.rd-pend b{color:#ffcf8f}

/* ---- precio / toggles en la tarjeta ---- */
.t-precio{margin:0 16px 8px;font-size:15px;color:var(--marron-osc)}
.t-precio b{font-size:18px}
.pan-vacio{color:var(--gris);font-style:italic;font-size:14px}
.t-toggles{display:flex;gap:8px;padding:0 16px 16px}
.btn-toggle{
  flex:1;padding:13px;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;
  border:1.5px solid var(--verde);background:#fff;color:var(--verde);
}
.btn-toggle.on{background:var(--verde);color:#fff}
.btn-toggle.cobro{border-color:#b8860b;color:#8a5a00}
.btn-toggle.cobro.on{background:#caa12a;color:#fff;border-color:#caa12a}
.badge-cobro{display:inline-block;background:#caa12a;color:#fff;font-size:12px;font-weight:700;
  padding:3px 10px;border-radius:20px;margin-left:6px}
.tarjeta.cobrada .t-cab{background:#f7eccb}
.btn-navegar.disabled{opacity:.4;pointer-events:none}
.li-estado{font-size:18px}