:root{
  --brand:#187EB3;
  --brand-dark:#125C82;
  --brand-light:#E7F2F9;
  --oro:#C89B2C;
  --oro-claro:#FBF2DD;
  --sinpe:#1D7A4C;
  --sinpe-claro:#E4F3EA;
  --texto:#25292E;
  --texto-mute:#6B7280;
  --fondo:#F1EFE8;
  --card:#FFFFFF;
  --peligro:#B3261E;
}

body{
  background:var(--fondo);
  color:var(--texto);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
}

/* ---------- Login ---------- */
.pantalla-login{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.caja-login{
  width:100%;
  max-width:360px;
  background:var(--card);
  border-radius:18px;
  padding:32px 28px;
  box-shadow:0 4px 24px rgba(0,0,0,.06);
  text-align:center;
}
.logo-login{width:88px;height:88px;margin-bottom:12px;}
.titulo-login{font-size:20px;font-weight:700;margin-bottom:20px;color:var(--brand-dark);}
.campo-label{
  display:block;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--texto-mute);
  margin-bottom:6px;
  text-align:left;
}
.btn-entrar{
  width:100%;
  height:52px;
  border:none;
  border-radius:12px;
  background:var(--brand);
  color:#fff;
  font-size:17px;
  font-weight:700;
}
.btn-entrar:active{transform:scale(.98);}

/* ---------- App m¨®vil (vendedor) ---------- */
.telefono{
  max-width:480px;
  margin:0 auto;
  background:var(--card);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.topbar{
  background:var(--brand);
  color:#fff;
  padding:16px 20px;
  padding-top:calc(16px + env(safe-area-inset-top));
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.topbar .titulo-top{font-weight:700;font-size:17px;margin:0;}
.topbar .usuario-top{font-size:13px;opacity:.9;margin:0;}
.topbar a, .topbar button.enlace-top{
  color:#fff;
  background:none;
  border:none;
  font-size:22px;
  text-decoration:none;
}
.contenido-app{padding:20px;flex:1;}

.btn-monto{
  height:110px;
  font-size:26px;
  font-weight:700;
  border-radius:16px;
  border:none;
  color:#fff;
  background:var(--brand);
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}
.btn-monto:active{transform:scale(.97);}
.btn-otro{
  height:70px;
  border-radius:16px;
  border:2px dashed #C9C5B8;
  background:#fff;
  color:var(--texto-mute);
  font-size:17px;
  font-weight:600;
  width:100%;
}

.btn-pago{
  height:96px;
  border-radius:16px;
  border:none;
  color:#fff;
  font-size:20px;
  font-weight:700;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.btn-pago.efectivo{background:var(--oro);}
.btn-pago.sinpe{background:var(--sinpe);}
.btn-pago.continuar{background:var(--brand);}

.monto-grande{
  font-size:48px;
  font-weight:700;
  text-align:center;
  color:var(--brand-dark);
}

.check-exito{
  width:90px;height:90px;border-radius:50%;
  background:var(--brand-light);color:var(--brand);
  display:flex;align-items:center;justify-content:center;
  font-size:46px;margin:0 auto 16px;
}

.btn-volver, .btn-accion-ancho{
  height:58px;border-radius:14px;border:none;
  background:var(--brand-dark);color:#fff;font-size:17px;font-weight:600;width:100%;
}

.card-resumen{
  background:var(--brand-light);
  border-radius:16px;
  padding:18px;
  margin-bottom:14px;
}
.card-resumen.sinpe{background:var(--sinpe-claro);}
.card-resumen .valor{font-size:26px;font-weight:700;color:var(--brand-dark);}
.card-resumen.sinpe .valor{color:#0F4A2E;}
.card-resumen .etiqueta{font-size:13px;color:var(--texto-mute);}

.btn-cerrar-caja{
  height:60px;border-radius:14px;border:none;
  background:var(--peligro);color:#fff;font-size:17px;font-weight:700;width:100%;
}

.nav-inferior{
  display:flex;
  border-top:1px solid #eee;
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -4px 12px rgba(0,0,0,.06);
  background:#fff;
  position:sticky;
  bottom:0;
}
.nav-inferior a{
  flex:1;
  border:none;
  background:#fff;
  padding:10px 0 8px;
  font-size:13px;
  font-weight:600;
  color:var(--texto-mute);
  text-align:center;
  text-decoration:none;
}
.nav-inferior a i{
  display:block;
  font-size:26px;
  margin:0 auto 3px;
  width:44px;
  height:32px;
  line-height:32px;
  border-radius:14px;
}
.nav-inferior a.activo{
  color:var(--brand-dark);
}
.nav-inferior a.activo i{
  background:var(--brand-light);
  color:var(--brand);
}

/* teclado num¨¦rico de "otro monto" */
.tecla{
  height:64px;border-radius:12px;border:1px solid #E5E2D8;background:#fff;
  font-size:24px;font-weight:600;width:100%;color:var(--texto);
}
.tecla:active{background:var(--brand-light);}

/* ---------- Panel admin ---------- */
.panel-admin{max-width:1100px;margin:0 auto;padding:24px;}
.marca{color:var(--brand-dark);font-weight:700;}
.navbar-admin{
  background:var(--brand);
}
.navbar-admin .nav-link{color:rgba(255,255,255,.85)!important;}
.navbar-admin .nav-link.active{color:#fff!important;font-weight:600;}
.navbar-admin .navbar-brand{color:#fff;font-weight:700;}

.modal-fondo{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(37,41,46,.45);
  z-index:1000;
  align-items:center;
  justify-content:center;
  padding:1rem;
}
.modal-fondo.activo{display:flex;}
.modal-caja{
  background:var(--card);
  border-radius:14px;
  padding:1.5rem;
  width:100%;
  max-width:480px;
  max-height:90vh;
  overflow-y:auto;
}
.modal-caja .modal-titulo{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;
  font-weight:600;
}
.modal-caja .modal-cerrar{
  background:none;border:none;color:var(--texto-mute);font-size:20px;cursor:pointer;
}
.btn-nuevo{
  background:var(--brand);color:#fff;border:none;border-radius:8px;padding:8px 16px;
  font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;
}
.fila-lista{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;border:1px solid #EEEBE0;border-radius:10px;margin-bottom:8px;background:#fff;
}
.fila-titulo{font-weight:600;font-size:15px;margin:0;}
.fila-detalle{font-size:13px;color:var(--texto-mute);margin:0;}
.fila-acciones button{margin-left:6px;}
.badge-estado{font-size:11px;padding:3px 8px;border-radius:20px;font-weight:600;}
.badge-estado-activo{background:var(--sinpe-claro);color:#0F4A2E;}
.badge-estado-inactivo{background:#F3F1EA;color:var(--texto-mute);}

.metrica{
  background:var(--brand-light);border-radius:12px;padding:16px;
}
.metrica .valor{font-size:24px;font-weight:700;color:var(--brand-dark);}
.metrica .etiqueta{font-size:13px;color:var(--texto-mute);}
.metrica.sinpe{background:var(--sinpe-claro);}
.metrica.sinpe .valor{color:#0F4A2E;}
.metrica.oro{background:var(--oro-claro);}
.metrica.oro .valor{color:#7A5E17;}