/* ============================================================
   OLI FRESH ICE — hoja de estilos del sistema
   Colores tomados del logo: azul #0541FF sobre blanco.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

:root {
  /* Marca */
  --azul:    #0541FF;
  --azul-2:  #001EFA;
  --hielo:   #00C2FF;
  --cian:    #7BE8FF;
  /* Acentos didacticos */
  --verde:   #00C07A;
  --ambar:   #FF9F0A;
  --rojo:    #FF3B5C;
  --morado:  #7B5CFF;
  --rosa:    #FF4FA3;
  /* Neutros */
  --tinta:   #0B1533;
  --tinta-2: #47548A;
  --tinta-3: #8A94BE;
  --papel:   #EEF4FF;
  --blanco:  #FFFFFF;
  --linea:   #DCE6FF;

  --sombra:   0 4px 16px rgba(11, 21, 51, .08);
  --sombra-2: 0 10px 34px rgba(5, 65, 255, .18);
  --r:  16px;
  --r2: 24px;
  --tipo-titulo: 'Fredoka', 'Segoe UI', system-ui, sans-serif;
  --tipo-texto:  'Nunito', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--tipo-texto);
  font-size: 16px;
  color: var(--tinta);
  background: var(--papel);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, .titulo { font-family: var(--tipo-titulo); font-weight: 600; letter-spacing: -.01em; }

a { color: var(--azul); }

/* ---------------------------------------------- Utilidades */
.fila   { display: flex; align-items: center; gap: 12px; }
.fila-sep { justify-content: space-between; }
.fila-fin { justify-content: flex-end; }
.envuelve { flex-wrap: wrap; }
.col    { display: flex; flex-direction: column; gap: 12px; }
.crece  { flex: 1; min-width: 0; }
.centro { text-align: center; }
.oculto { display: none !important; }
.pequeno { font-size: 13px; color: var(--tinta-2); }
.mini    { font-size: 11.5px; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.recorta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------- Encabezado */
.barra {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(115deg, var(--azul-2), var(--azul) 45%, var(--hielo) 130%);
  color: #fff; padding: 10px 18px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: var(--sombra-2);
}
.barra .logo { height: 44px; width: 44px; flex: none;
  background: #fff; border-radius: 12px; padding: 3px; display: grid; place-items: center; }
.barra .logo svg, .barra .logo img { width: 100%; height: 100%; }
.barra h1 { font-size: 19px; line-height: 1.05; }
.barra .sub { font-size: 12px; opacity: .85; font-weight: 700; }

.chip-usuario {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 14px;
}
.chip-usuario .av {
  width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--azul);
  display: grid; place-items: center; font-weight: 800; font-family: var(--tipo-titulo);
}

/* ---------------------------------------------- Navegacion por pestanas */
.navegacion {
  display: flex; gap: 8px; padding: 12px 18px 0; overflow-x: auto;
  background: var(--papel); position: sticky; top: 66px; z-index: 55;
  scrollbar-width: none;
}
.navegacion::-webkit-scrollbar { display: none; }
.navegacion button {
  font-family: var(--tipo-titulo); font-size: 15px; font-weight: 600;
  border: 2px solid transparent; background: #fff; color: var(--tinta-2);
  padding: 10px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; gap: 8px; box-shadow: var(--sombra);
  transition: transform .12s, background .18s, color .18s, border-color .18s;
}
.navegacion button:hover { transform: translateY(-2px); color: var(--azul); }
.navegacion button.activo {
  background: linear-gradient(120deg, var(--azul), var(--hielo)); color: #fff;
  border-color: transparent; box-shadow: var(--sombra-2);
}
.navegacion button .glob { font-size: 18px; }
.navegacion button .aviso {
  background: var(--rojo); color: #fff; border-radius: 999px; font-size: 11px;
  padding: 1px 7px; font-weight: 800; font-family: var(--tipo-texto);
}

/* ---------------------------------------------- Contenedores */
.lienzo { padding: 18px; max-width: 1500px; margin: 0 auto; }
.panel { display: none; animation: entra .25s ease both; }
.panel.activo { display: block; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }

.tarjeta {
  background: #fff; border-radius: var(--r2); padding: 20px;
  box-shadow: var(--sombra); border: 1px solid var(--linea);
}
.tarjeta + .tarjeta { margin-top: 16px; }
.tarjeta > h2 { font-size: 20px; display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.tarjeta > h2 + .pequeno { margin-bottom: 16px; }

.rejilla { display: grid; gap: 16px; }
.rejilla.g2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla.g3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.rejilla.g4 { grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); }

/* ---------------------------------------------- Guia didactica */
.guia {
  display: flex; gap: 12px; align-items: flex-start;
  background: linear-gradient(120deg, #EAF2FF, #E4FBFF);
  border: 2px dashed var(--hielo); border-radius: var(--r);
  padding: 14px 16px; margin-bottom: 16px; font-size: 14.5px; line-height: 1.5;
}
.guia .glob { font-size: 26px; line-height: 1; flex: none; }
.guia b { color: var(--azul); }
.guia.aviso  { background: linear-gradient(120deg,#FFF6E5,#FFF0D6); border-color: var(--ambar); }
.guia.alerta { background: linear-gradient(120deg,#FFECEF,#FFE3E8); border-color: var(--rojo); }
.guia.exito  { background: linear-gradient(120deg,#E4FBF3,#DBF8EC); border-color: var(--verde); }

.pasos { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.paso {
  display: flex; align-items: center; gap: 8px; background: #fff;
  border: 1px solid var(--linea); border-radius: 999px; padding: 6px 14px 6px 6px;
  font-size: 13.5px; font-weight: 700;
}
.paso i {
  width: 24px; height: 24px; border-radius: 50%; background: var(--azul); color: #fff;
  display: grid; place-items: center; font-style: normal; font-size: 13px; font-family: var(--tipo-titulo);
}

/* ---------------------------------------------- Indicadores */
.indicador {
  position: relative; overflow: hidden;
  background: #fff; border-radius: var(--r2); padding: 18px 18px 16px;
  border: 1px solid var(--linea); box-shadow: var(--sombra);
  transition: transform .15s;
}
.indicador:hover { transform: translateY(-3px); }
.indicador::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 6px;
  background: var(--c, var(--azul));
}
.indicador .glob { font-size: 26px; }
.indicador .valor {
  font-family: var(--tipo-titulo); font-size: 38px; font-weight: 600; line-height: 1;
  color: var(--c, var(--azul)); margin: 6px 0 2px; font-variant-numeric: tabular-nums;
}
.indicador .rotulo { font-size: 13.5px; font-weight: 800; color: var(--tinta-2); }
.indicador .nota { font-size: 12px; color: var(--tinta-3); margin-top: 4px; }

/* ---------------------------------------------- Botones */
.btn {
  font-family: var(--tipo-titulo); font-size: 15px; font-weight: 600;
  border: none; border-radius: 999px; padding: 11px 20px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(120deg, var(--azul), #2E6BFF); color: #fff;
  box-shadow: 0 4px 14px rgba(5,65,255,.28);
  transition: transform .12s, box-shadow .18s, filter .18s;
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(5,65,255,.36); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.grande { font-size: 18px; padding: 15px 30px; border-radius: 18px; width: 100%; }
.btn.chico  { font-size: 13.5px; padding: 7px 14px; }
.btn.suave  { background: var(--papel); color: var(--azul); box-shadow: none; border: 2px solid var(--linea); }
.btn.suave:hover { border-color: var(--azul); box-shadow: none; }
.btn.verde  { background: linear-gradient(120deg, var(--verde), #34E5A6); box-shadow: 0 4px 14px rgba(0,192,122,.3); }
.btn.ambar  { background: linear-gradient(120deg, var(--ambar), #FFC24D); box-shadow: 0 4px 14px rgba(255,159,10,.3); }
.btn.rojo   { background: linear-gradient(120deg, var(--rojo), #FF7A90); box-shadow: 0 4px 14px rgba(255,59,92,.3); }
.btn.morado { background: linear-gradient(120deg, var(--morado), #A78BFF); box-shadow: 0 4px 14px rgba(123,92,255,.3); }
.btn.hielo  { background: linear-gradient(120deg, var(--hielo), var(--cian)); color: #04255E; }

.icono-btn {
  border: none; background: var(--papel); color: var(--tinta-2); cursor: pointer;
  width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center;
  font-size: 17px; transition: background .15s, transform .12s;
}
.icono-btn:hover { background: var(--linea); transform: translateY(-2px); color: var(--azul); }

/* ---------------------------------------------- Formularios */
label.campo { display: block; }
label.campo > span {
  display: block; font-size: 12.5px; font-weight: 800; color: var(--tinta-2);
  margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em;
}
input, select, textarea {
  width: 100%; font-family: var(--tipo-texto); font-size: 15.5px; font-weight: 600;
  color: var(--tinta); background: var(--papel);
  border: 2px solid var(--linea); border-radius: 13px; padding: 11px 14px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--azul); background: #fff;
  box-shadow: 0 0 0 4px rgba(5,65,255,.12);
}
input::placeholder, textarea::placeholder { color: var(--tinta-3); font-weight: 500; }
textarea { min-height: 78px; resize: vertical; }
select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-2) 50%), linear-gradient(135deg, var(--tinta-2) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
input[type=color] { padding: 4px; height: 46px; cursor: pointer; }
.busca { position: relative; }
.busca input { padding-left: 42px; }
.busca::before { content: '🔎'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 16px; }

/* ---------------------------------------------- Etiquetas de estado */
.etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 800;
  background: var(--papel); color: var(--tinta-2); white-space: nowrap;
}
.e-pendiente  { background: #FFF1DC; color: #A25C00; }
.e-asignado   { background: #E6EEFF; color: var(--azul); }
.e-en_empaque { background: #F0E9FF; color: #5A38DB; }
.e-en_camino  { background: #DEF6FF; color: #005E8A; }
.e-entregado  { background: #DBF7EC; color: #007A4D; }
.e-anulado    { background: #FFE3E8; color: #B3122F; }
.e-libre      { background: #DBF7EC; color: #007A4D; }
.e-entrega    { background: #DBF7EC; color: #007A4D; }
.e-pagado     { background: linear-gradient(120deg,#DBF7EC,#D7F3FF); color: #00694A; }
.e-frecuente  { background: linear-gradient(120deg,#E6EEFF,#DEF6FF); color: var(--azul); }
.e-eventual   { background: #F3F5FB; color: var(--tinta-2); }

.punto { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.late  { animation: latido 1.4s ease-in-out infinite; }
@keyframes latido { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }

/* ---------------------------------------------- Listas y tarjetas de datos */
.lista { display: flex; flex-direction: column; gap: 12px; }

.item {
  background: #fff; border: 1px solid var(--linea); border-left: 6px solid var(--c, var(--azul));
  border-radius: var(--r); padding: 14px 16px;
  display: flex; gap: 14px; align-items: center;
  transition: transform .12s, box-shadow .18s;
}
.item:hover { transform: translateX(3px); box-shadow: var(--sombra); }
.item .glob-grande {
  width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center;
  font-size: 22px; background: var(--papel);
}
.item .titulo-item { font-family: var(--tipo-titulo); font-size: 16.5px; font-weight: 600; }

.vacio { text-align: center; padding: 44px 20px; color: var(--tinta-3); }
.vacio .glob { font-size: 52px; display: block; margin-bottom: 10px; opacity: .55; }
.vacio b { display: block; font-family: var(--tipo-titulo); font-size: 18px; color: var(--tinta-2); margin-bottom: 4px; }

/* Barra de carga del motorizado */
.carga { height: 12px; border-radius: 999px; background: var(--papel); overflow: hidden; border: 1px solid var(--linea); }
.carga > i { display: block; height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.carga-ok    { background: linear-gradient(90deg, var(--verde), #4DE8B4); }
.carga-medio { background: linear-gradient(90deg, var(--ambar), #FFD37A); }
.carga-alto  { background: linear-gradient(90deg, var(--rojo), #FF8FA3); }

/* ---------------------------------------------- Tablas */
.tabla-envoltura { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--linea); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: #fff; }
th {
  text-align: left; padding: 12px 14px; font-size: 11.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2);
  background: var(--papel); white-space: nowrap;
}
td { padding: 12px 14px; border-top: 1px solid var(--linea); vertical-align: middle; }
tbody tr:hover { background: #F8FAFF; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------- Ventana modal */
.velo {
  position: fixed; inset: 0; background: rgba(11,21,51,.55); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; padding: 16px; z-index: 200;
}
.velo.abierto { display: flex; animation: entra .2s ease both; }
.ventana {
  background: #fff; border-radius: var(--r2); width: min(720px, 100%);
  max-height: 92vh; overflow: auto; box-shadow: 0 24px 60px rgba(11,21,51,.35);
  animation: sube .25s cubic-bezier(.2,.9,.3,1) both;
}
.ventana.ancha { width: min(1080px, 100%); }
@keyframes sube { from { transform: translateY(28px) scale(.97); opacity: 0; } }
.ventana > header {
  position: sticky; top: 0; z-index: 2;
  background: linear-gradient(120deg, var(--azul), var(--hielo)); color: #fff;
  padding: 16px 20px; display: flex; align-items: center; gap: 12px;
}
.ventana > header h3 { font-size: 19px; flex: 1; }
.ventana > header .cerrar {
  background: rgba(255,255,255,.2); border: none; color: #fff; width: 34px; height: 34px;
  border-radius: 10px; font-size: 20px; cursor: pointer; line-height: 1;
}
.ventana > .cuerpo { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.ventana > footer {
  position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--linea);
  padding: 14px 20px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
}

/* ---------------------------------------------- Avisos flotantes */
#avisos { position: fixed; right: 16px; bottom: 16px; z-index: 500; display: flex; flex-direction: column; gap: 10px; }
.aviso-flotante {
  background: #fff; border-left: 6px solid var(--azul); border-radius: 14px;
  padding: 13px 18px; box-shadow: 0 12px 34px rgba(11,21,51,.22);
  font-weight: 700; font-size: 14.5px; max-width: 380px;
  display: flex; gap: 10px; align-items: flex-start;
  animation: deslizar .3s cubic-bezier(.2,.9,.3,1) both;
}
.aviso-flotante.saliendo { animation: sale .3s ease both; }
.aviso-flotante.exito { border-color: var(--verde); }
.aviso-flotante.error { border-color: var(--rojo); }
.aviso-flotante.info  { border-color: var(--hielo); }
@keyframes deslizar { from { transform: translateX(120%); opacity: 0; } }
@keyframes sale     { to   { transform: translateX(120%); opacity: 0; } }

/* ---------------------------------------------- Mapa */
#mapa, .mapa { height: 65vh; min-height: 420px; border-radius: var(--r2); border: 1px solid var(--linea); z-index: 1; }
.mapa-chico { height: 280px; border-radius: var(--r); }
.marca-moto {
  display: grid; place-items: center; font-size: 20px; width: 42px; height: 42px;
  border-radius: 50% 50% 50% 6px; transform: rotate(-45deg);
  border: 3px solid #fff; box-shadow: 0 4px 12px rgba(11,21,51,.35);
}
.marca-moto > span { transform: rotate(45deg); }
.marca-cliente {
  display: grid; place-items: center; font-size: 16px; width: 34px; height: 34px;
  border-radius: 50%; border: 3px solid #fff; background: var(--azul); color: #fff;
  box-shadow: 0 3px 10px rgba(11,21,51,.3);
}
.leyenda-mapa {
  display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
  font-size: 13px; font-weight: 700; color: var(--tinta-2);
}
.leyenda-mapa i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: -2px; }

/* ---------------------------------------------- Impresion del recibo */
.recibo {
  font-family: 'Courier New', monospace; background: #fff; color: #000;
  width: 300px; margin: 0 auto; padding: 14px; font-size: 12.5px; line-height: 1.45;
}
.recibo hr { border: none; border-top: 1px dashed #000; margin: 8px 0; }
.recibo .centro-r { text-align: center; }
.recibo .grande-r { font-size: 17px; font-weight: bold; }
.recibo table { font-size: 12px; background: none; }
.recibo td, .recibo th { border: none; padding: 1px 0; font-size: 12px; background: none; }

@media print {
  body * { visibility: hidden; }
  .recibo, .recibo * { visibility: visible; }
  .recibo { position: absolute; inset: 0; margin: 0; width: 100%; }
}

/* ---------------------------------------------- Adaptacion a celular */
@media (max-width: 720px) {
  .lienzo { padding: 12px; }
  .barra { padding: 9px 12px; gap: 10px; }
  .barra h1 { font-size: 16px; }
  .barra .sub { display: none; }
  /* En el celular el chip se reduce a las iniciales, para que quepa el titulo */
  .barra .logo { height: 38px; width: 38px; }
  .chip-usuario { padding: 4px; border-radius: 50%; }
  .chip-usuario > span:not(.av) { display: none; }
  #conexion { display: none; }
  .navegacion { top: 62px; padding: 10px 12px 0; }
  .navegacion button { font-size: 14px; padding: 9px 13px; }
  .tarjeta { padding: 15px; border-radius: var(--r); }
  .indicador .valor { font-size: 31px; }
  .ventana { border-radius: 20px; }
  #avisos { left: 12px; right: 12px; bottom: 12px; }
  .aviso-flotante { max-width: none; }
}

/* ============================================================
   NOVEDADES v1.1
   ============================================================ */

/* ---------------- Barra de alertas de atencion (30 y 15 minutos) --------- */
.barra-alertas {
  position: sticky; top: 0; z-index: 60;
  display: flex; flex-direction: column; gap: 8px;
  margin: -6px 0 16px;
}
.alerta-atencion {
  display: flex; align-items: center; gap: 12px;
  border-radius: var(--r); padding: 12px 16px; color: #fff;
  box-shadow: var(--sombra-2); border: 2px solid rgba(255,255,255,.35);
}
.alerta-atencion .reloj {
  font-family: var(--tipo-titulo); font-size: 24px; line-height: 1;
  background: rgba(255,255,255,.22); border-radius: 12px; padding: 7px 12px; text-align: center; flex: none;
}
.alerta-atencion .reloj small { display: block; font-size: 9.5px; letter-spacing: .09em; font-weight: 800; }
.alerta-atencion.naranja { background: linear-gradient(120deg,#FF9F0A,#FFC24D); }
.alerta-atencion.rojo    { background: linear-gradient(120deg,#FF3B5C,#FF7A90); animation: latir 1.5s ease-in-out infinite; }
.alerta-atencion.vencido { background: linear-gradient(120deg,#B3122F,#FF3B5C); }
@keyframes latir { 0%,100% { transform: scale(1); } 50% { transform: scale(1.012); } }

/* ---------------- Semaforo de abastecimiento --------------------------- */
.semaforo { display: flex; gap: 8px; flex-wrap: wrap; }
.semaforo .foco {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 2px solid var(--linea); border-radius: 14px;
  padding: 9px 13px; font-weight: 800; font-size: 14px;
}
.semaforo .foco b { font-family: var(--tipo-titulo); font-size: 20px; }
.semaforo .foco.activo { border-color: currentColor; box-shadow: 0 4px 14px rgba(11,21,51,.10); }

.regla-ciclo { height: 12px; border-radius: 12px; background: var(--papel); overflow: hidden; display: flex; }
.regla-ciclo i { display: block; height: 100%; }

/* ---------------- Venta en ruta: siempre en rojo ----------------------- */
.btn.venta, .barra-baja button.venta.activo {
  background: linear-gradient(120deg,#FF3B5C,#FF7A90) !important; color: #fff !important;
}
.barra-baja button.venta { color: var(--rojo); }
.panel-venta { border: 2px solid var(--rojo); border-radius: var(--r2); overflow: hidden; }
.panel-venta > .cabeza {
  background: linear-gradient(120deg,#FF3B5C,#FF7A90); color: #fff; padding: 15px 18px;
}
.fila-venta {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--linea); border-radius: 16px; padding: 11px 13px; background: #fff;
}
.fila-venta .stock { font-family: var(--tipo-titulo); font-size: 21px; color: var(--rojo); }

/* ---------------- Documentos del motorizado ---------------------------- */
.rejilla-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.doc {
  border: 2px dashed var(--linea); border-radius: 16px; padding: 12px; text-align: center;
  background: #fff; cursor: pointer; transition: border-color .16s, background .16s;
}
.doc:hover { border-color: var(--azul); background: #F7FAFF; }
.doc.cargado { border-style: solid; border-color: var(--verde); }
.doc img { width: 100%; height: 96px; object-fit: cover; border-radius: 11px; margin-bottom: 7px; }
.doc .vacio-doc { height: 96px; display: grid; place-items: center; font-size: 34px; opacity: .45; }

/* ---------------- Album de fotos del local ----------------------------- */
.album { display: flex; gap: 9px; flex-wrap: wrap; }
.album figure { position: relative; width: 104px; }
.album img { width: 104px; height: 104px; object-fit: cover; border-radius: 14px; display: block; cursor: zoom-in; }
.album button {
  position: absolute; top: -6px; right: -6px; border: none; cursor: pointer;
  width: 24px; height: 24px; border-radius: 50%; background: var(--rojo); color: #fff; font-size: 13px;
}

/* ---------------- Ventana que obliga a completar algo antes de seguir --- */
.velo.bloqueante { backdrop-filter: blur(4px); }
.velo.bloqueante .ventana { border: 3px solid var(--ambar); }

/* ---------------- Aviso de GPS en el celular --------------------------- */
.aviso-gps {
  background: linear-gradient(125deg,#B3122F,#FF3B5C); color: #fff;
  border-radius: var(--r2); padding: 16px 18px; margin-bottom: 14px;
}
.aviso-gps .btn { margin-top: 11px; width: 100%; }
.pastilla-gps {
  display: inline-flex; align-items: center; gap: 7px; border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; font-weight: 800;
}
.pastilla-gps.ok  { background: #DBF7EC; color: #00734A; }
.pastilla-gps.mal { background: #FFE1E7; color: #B3122F; }

/* ---------------- Listas de precio ------------------------------------- */
.precios-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.precios-tres .campo span { font-size: 11.5px; }
@media (max-width: 560px) { .precios-tres { grid-template-columns: 1fr; } }

.selector-lista { display: flex; gap: 8px; flex-wrap: wrap; }
.selector-lista label {
  flex: 1; min-width: 128px; cursor: pointer; border: 2px solid var(--linea); border-radius: 14px;
  padding: 10px 12px; text-align: center; background: #fff; font-weight: 800; font-size: 13.5px;
  transition: border-color .15s, background .15s;
}
.selector-lista label:has(input:checked) { border-color: var(--azul); background: #EDF3FF; }
.selector-lista input { display: none; }
.selector-lista .precio-lista { display: block; font-family: var(--tipo-titulo); font-size: 19px; margin-top: 3px; }

/* ---------------- Reparto entre varios vehiculos ----------------------- */
.fila-reparto { display: grid; grid-template-columns: 1.6fr repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; align-items: center; }
.fila-reparto .resto { font-weight: 800; font-size: 13px; }
.fila-reparto .resto.mal { color: var(--rojo); }
.fila-reparto .resto.bien { color: var(--verde); }

/* La venta en ruta se distingue siempre en rojo, tambien en la navegacion. */
.navegacion button.venta { color: var(--rojo); }
.navegacion button.venta.activo {
  background: linear-gradient(120deg,#FF3B5C,#FF7A90); color: #fff;
  box-shadow: 0 6px 18px rgba(255,59,92,.32);
}