/* ==========================================================================
   FleteLibre — hoja de estilos unica (mobile first)
   ========================================================================== */

:root {
  --fondo:        #f4f6fa;
  --superficie:   #ffffff;
  --superficie-2: #eef1f7;
  --borde:        #dfe3ec;
  --texto:        #131a26;
  --texto-suave:  #5c6679;
  --acento:       #f59e0b;   /* ambar: precio, puja, accion principal */
  --acento-oscuro:#b45309;
  --marino:       #0f172a;   /* cabecera y nav */
  --ok:           #15803d;
  --error:        #b91c1c;
  --alerta:       #b45309;
  --radio:        14px;
  --sombra:       0 1px 2px rgba(16, 24, 40, .06), 0 6px 20px rgba(16, 24, 40, .07);
  --alto-cabecera: 52px;
  --alto-nav:      64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo:        #0b1017;
    --superficie:   #151c27;
    --superficie-2: #1d2634;
    --borde:        #2a3444;
    --texto:        #eef2f8;
    --texto-suave:  #9aa5b8;
    --marino:       #060a11;
    --ok:           #4ade80;
    --error:        #f87171;
    --alerta:       #fbbf24;
    --sombra:       0 1px 2px rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; }

/* Las clases con display propio (.btn, .card, .check...) le ganarian al atributo
   hidden del navegador, y la app lo usa para mostrar y ocultar bloques. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(var(--alto-nav) + env(safe-area-inset-bottom));
}

h1, h2, h3 { margin: 0 0 .4rem; line-height: 1.2; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 .6rem; }
a  { color: inherit; }
code {
  background: var(--superficie-2); padding: .1em .35em;
  border-radius: 5px; font-size: .9em;
}

/* --- cabecera ------------------------------------------------------------- */
#cabecera {
  position: sticky; top: 0; z-index: 40;
  height: var(--alto-cabecera);
  display: flex; align-items: center;
  padding: 0 1rem;
  background: var(--marino); color: #fff;
}

.marca {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1.05rem; font-weight: 600; text-decoration: none; letter-spacing: .2px;
}
.marca svg { width: 24px; height: 24px; color: var(--acento); }
.marca b { color: var(--acento); font-weight: 700; }

/* --- contenedor ---------------------------------------------------------- */
#contenido {
  max-width: 620px; margin: 0 auto; padding: 1rem;
  animation: entrar .18s ease-out;
}

@keyframes entrar { from { opacity: 0; transform: translateY(4px); } }

.encabezado-pantalla {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .75rem; margin-bottom: .9rem;
}
.encabezado-pantalla p { color: var(--texto-suave); font-size: .9rem; margin: 0; }

/* --- navegacion inferior ------------------------------------------------- */
#nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: space-around;
  height: calc(var(--alto-nav) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--marino);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
#nav[hidden] { display: none; }

.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
  background: none; border: 0; cursor: pointer;
  color: rgba(255, 255, 255, .6); font-size: .7rem; font-family: inherit;
}
.nav-item.activo { color: var(--acento); }
.nav-icono svg { width: 22px; height: 22px; display: block; }

/* --- tarjetas ------------------------------------------------------------ */
.card {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: .9rem;
  margin-bottom: .75rem;
  box-shadow: var(--sombra);
}
.card-clickeable { cursor: pointer; transition: transform .12s, border-color .12s; }
.card-clickeable:active { transform: scale(.99); border-color: var(--acento); }

.card-titulo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem; margin-bottom: .35rem;
}
.card-titulo h3 { margin: 0; }

.card-datos {
  display: flex; flex-wrap: wrap; gap: .35rem .5rem;
  margin-top: .5rem; font-size: .82rem; color: var(--texto-suave);
}

.card-foto {
  width: 100%; height: 170px; object-fit: cover;
  border-radius: 10px; margin: .5rem 0; background: var(--superficie-2);
}
.foto-vehiculo {
  width: 76px; height: 76px; object-fit: cover; border-radius: 10px;
  background: var(--superficie-2); flex: 0 0 auto;
}
img.foto-vehiculo { cursor: zoom-in; }

.foto-vehiculo.sin-foto {
  display: grid; place-items: center; gap: 0;
  border: 1px dashed var(--borde); color: var(--texto-suave);
}
.foto-vehiculo.sin-foto span { font-size: 1.5rem; opacity: .5; }
.foto-vehiculo.sin-foto small { font-size: .6rem; }

/* Visor de la foto a pantalla completa */
.visor { padding: .5rem; }
.visor-caja { position: relative; max-width: min(94vw, 640px); width: 100%; }
.visor-caja img {
  width: 100%; max-height: 78vh; object-fit: contain;
  border-radius: 12px; background: #000; display: block;
}
.visor-pie {
  margin: .5rem 0 0; text-align: center; color: #fff; font-size: .9rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.visor-pie[hidden] { display: none; }

/* El marco envuelve solo la imagen y sus controles. El pie queda afuera para
   que el centro vertical de las flechas sea el de la foto y no el del conjunto
   foto + texto. */
.visor-marco { position: relative; line-height: 0; }

/* Flechas de la galeria. Van SOBRE la foto y no debajo: en el telefono, un
   control debajo de la imagen queda a dos centimetros del borde inferior y se
   toca sin querer al agarrar el aparato. */
.visor-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.8rem; line-height: 1; padding-bottom: 4px;
  color: #fff; background: rgba(8, 12, 20, .55);
  border: 1px solid rgba(255, 255, 255, .25);
  cursor: pointer; font-family: inherit;
  transition: background .12s;
}
.visor-flecha:hover { background: rgba(8, 12, 20, .8); }
.visor-flecha:active { transform: translateY(-50%) scale(.94); }
.visor-izq { left: .5rem; }
.visor-der { right: .5rem; }

/* "2 de 5". Sin esto no se sabe cuantas faltan y uno sigue tocando de gusto. */
.visor-contador {
  position: absolute; top: .6rem; left: 50%; transform: translateX(-50%);
  padding: .2rem .6rem; border-radius: 999px;
  background: rgba(8, 12, 20, .6); color: #fff;
  font-size: .78rem; font-weight: 600;
  /* El marco tiene line-height 0 para que la imagen no arrastre espacio
     debajo; hay que devolverselo al texto o la pildora sale de 6px de alto. */
  line-height: 1.5;
}

/* La camara para la foto del documento reusa el visor: el video ocupa el lugar
   de la imagen y limita su alto para que los botones no queden fuera de la
   pantalla en un telefono. */
.visor-caja video { max-height: 62vh; object-fit: cover; }

.ruta { display: grid; gap: .3rem; margin: .5rem 0; font-size: .9rem; }
.ruta-linea { display: flex; align-items: flex-start; gap: .5rem; }
.ruta-punto {
  width: 9px; height: 9px; border-radius: 50%; margin-top: .45rem; flex: 0 0 auto;
  background: var(--acento);
}
.ruta-punto.destino { background: var(--texto-suave); }
.ruta-texto { color: var(--texto); }
.ruta-etiqueta {
  display: block; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .5px; color: var(--texto-suave);
}

/* --- chips / insignias --------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: .25rem;
  background: var(--superficie-2); color: var(--texto-suave);
  border-radius: 999px; padding: .15rem .55rem;
  font-size: .75rem; font-weight: 500; white-space: nowrap;
}
.chip-acento { background: color-mix(in srgb, var(--acento) 18%, transparent); color: var(--acento-oscuro); }
.chip-ok     { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.chip-error  { background: color-mix(in srgb, var(--error) 14%, transparent); color: var(--error); }
.chip-alerta { background: color-mix(in srgb, var(--alerta) 16%, transparent); color: var(--alerta); }

@media (prefers-color-scheme: dark) {
  .chip-acento { color: var(--acento); }
}

/* --- precios y cuenta regresiva ----------------------------------------- */
.precio {
  font-size: 1.35rem; font-weight: 700; color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.precio-chico { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.precio-etiqueta {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-suave);
}

.reloj {
  display: inline-flex; align-items: center; gap: .35rem;
  font-variant-numeric: tabular-nums; font-weight: 700;
  background: color-mix(in srgb, var(--acento) 16%, transparent);
  color: var(--acento-oscuro);
  border-radius: 999px; padding: .2rem .6rem; font-size: .9rem;
}
.reloj.urgente { animation: latir 1s infinite; background: color-mix(in srgb, var(--error) 14%, transparent); color: var(--error); }
.reloj.cerrado { background: var(--superficie-2); color: var(--texto-suave); animation: none; }

@media (prefers-color-scheme: dark) { .reloj { color: var(--acento); } }

@keyframes latir { 50% { opacity: .55; } }

.panel-puja {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 12%, var(--superficie)), var(--superficie));
  border: 1px solid color-mix(in srgb, var(--acento) 35%, var(--borde));
  border-radius: var(--radio); padding: 1rem; margin-bottom: .9rem;
}
.panel-puja-fila {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}

/* --- botones ------------------------------------------------------------- */
.btn {
  font: inherit; font-weight: 600;
  border-radius: 11px; border: 1px solid transparent;
  padding: .7rem 1.05rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  transition: filter .12s, transform .12s;
  /* En el panel hay botones que son <a> de verdad -llamar, WhatsApp, correo-
     porque tienen que abrir una app del telefono. Sin esto salen subrayados. */
  text-decoration: none;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: default; }

.btn-primario  { background: var(--acento); color: #1a1204; }
.btn-primario:hover:not(:disabled) { filter: brightness(1.06); }
.btn-secundario { background: var(--marino); color: #fff; }
.btn-fantasma  { background: transparent; border-color: var(--borde); color: var(--texto); }
.btn-peligro   { background: transparent; border-color: var(--error); color: var(--error); }
.btn-chico     { padding: .45rem .7rem; font-size: .85rem; border-radius: 9px; }
.btn-ancho     { width: 100%; }

.acciones { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.acciones .btn { flex: 1 1 auto; }

/* --- formularios --------------------------------------------------------- */
.campo { display: block; margin-bottom: .85rem; }
.campo-etiqueta {
  display: block; font-size: .82rem; font-weight: 600;
  margin-bottom: .3rem; color: var(--texto);
}
.campo-ayuda { display: block; font-size: .75rem; color: var(--texto-suave); margin-top: .25rem; }

/* Lo que se escribió no está permitido */
.campo-ayuda.prohibido {
  color: var(--error); font-weight: 600; font-size: .8rem;
  background: color-mix(in srgb, var(--error) 10%, transparent);
  border-radius: 8px; padding: .4rem .55rem; margin-top: .35rem;
}
.input-mal {
  border-color: var(--error) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 18%, transparent) !important;
}

/* Aclaracion importante: no se pierde entre el resto del texto gris */
.campo-ayuda.fuerte {
  font-size: .82rem; font-weight: 600; color: var(--texto);
  background: color-mix(in srgb, var(--acento) 12%, transparent);
  border-left: 3px solid var(--acento);
  border-radius: 0 8px 8px 0;
  padding: .45rem .6rem; margin-top: .4rem;
}
.campo-ayuda.fuerte small {
  display: block; font-weight: 400; color: var(--texto-suave); margin-top: .15rem;
}

.input {
  width: 100%; font: inherit; color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 11px;
  padding: .65rem .75rem;
}
.input:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent);
}

/* Campo de contraseña con el ojito al costado */
.fila-clave { display: flex; gap: .4rem; }
.fila-clave .input { flex: 1 1 auto; min-width: 0; }

.fila { display: flex; gap: .5rem; }
.fila > * { flex: 1; min-width: 0; }

.grilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }

.check {
  display: flex; align-items: flex-start; gap: .6rem;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 11px; padding: .7rem .8rem; margin-bottom: .85rem; cursor: pointer;
}
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--acento); flex: 0 0 auto; }
.check-texto { font-size: .9rem; }
.check-texto small { display: block; color: var(--texto-suave); font-size: .78rem; }

.opciones { display: grid; gap: .5rem; margin-bottom: .85rem; }
.opcion {
  display: flex; gap: .6rem; align-items: flex-start;
  border: 1px solid var(--borde); background: var(--superficie);
  border-radius: 11px; padding: .8rem; cursor: pointer;
}
.opcion.elegida { border-color: var(--acento); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acento) 25%, transparent); }
.opcion input { accent-color: var(--acento); width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.opcion b { display: block; font-size: .95rem; }
.opcion small { color: var(--texto-suave); font-size: .8rem; }

.seccion-titulo {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--texto-suave);
  margin: 1.4rem 0 .6rem;
}

/* --- chips seleccionables (día, franja horaria, modo) -------------------- */
.chip-sel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; font: inherit; cursor: pointer; text-align: center;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 12px;
  padding: .55rem .7rem; min-height: 54px;
  transition: border-color .12s, background .12s, transform .12s;
}
.chip-sel:active { transform: scale(.97); }
.chip-sel b { font-size: .9rem; font-weight: 600; line-height: 1.15; }
.chip-sel small { font-size: .72rem; color: var(--texto-suave); line-height: 1.15; }
.chip-sel.elegido {
  border-color: var(--acento);
  background: color-mix(in srgb, var(--acento) 14%, var(--superficie));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--acento) 25%, transparent);
}
.chip-sel.elegido small { color: var(--texto); }

/* Franja u hora que ya pasó: se ve, pero no se puede elegir */
.chip-sel:disabled, .chip-sel.vencido {
  opacity: .4; cursor: not-allowed;
  background: var(--superficie-2); border-color: var(--borde); box-shadow: none;
  text-decoration: line-through;
}
.chip-sel:disabled:active, .chip-sel.vencido:active { transform: none; }

/* Fila con desplazamiento lateral: los días no se apilan ni se aprietan */
.chips-fila {
  display: flex; gap: .45rem; overflow-x: auto;
  padding: .15rem .15rem .5rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.chips-fila::-webkit-scrollbar { height: 5px; }
.chips-fila::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 3px; }
.chip-dia { flex: 0 0 auto; min-width: 68px; scroll-snap-align: start; }

.chips-grilla {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: .45rem; margin-bottom: .6rem;
}
.chips-modo { margin-bottom: .7rem; }
.chip-ancho { grid-column: span 2; }

.custom-horas { margin-bottom: .6rem; }
.custom-horas .campo { margin-bottom: 0; }

.momento { margin-bottom: .9rem; }
.momento-resumen {
  margin: .2rem 0 0; font-size: .82rem; font-weight: 600; color: var(--texto);
  background: var(--superficie-2); border-radius: 9px; padding: .45rem .6rem;
}

/* --- mapas --------------------------------------------------------------- */
.mapa {
  width: 100%; border-radius: 11px; overflow: hidden;
  border: 1px solid var(--borde); background: var(--superficie-2);
  z-index: 0;
}
.selector-punto { margin-bottom: .85rem; }
.selector-fila { display: flex; gap: .4rem; margin-bottom: .45rem; }
.selector-fila .input { flex: 1 1 auto; min-width: 0; }
.btn-icono {
  flex: 0 0 auto; width: 44px; padding: 0; font-size: 1.05rem; line-height: 1;
}
.leaflet-container { font: inherit; }

/* --- vista previa de foto ------------------------------------------------ */
.foto-previa {
  position: relative; margin-bottom: .85rem;
}
.foto-previa img {
  width: 100%; height: 190px; object-fit: cover;
  border-radius: 11px; border: 1px solid var(--borde);
}
.foto-quitar {
  position: absolute; top: .5rem; right: .5rem;
  background: rgba(0, 0, 0, .65); color: #fff; border: 0;
  border-radius: 999px; width: 30px; height: 30px; cursor: pointer; font-size: 1rem;
}

.subir-foto {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  border: 1.5px dashed var(--borde); border-radius: 11px;
  padding: 1.1rem; color: var(--texto-suave); cursor: pointer;
  margin-bottom: .85rem; background: var(--superficie); text-align: center;
  font-size: .9rem;
}
.subir-foto input { display: none; }

/* --- fotos del vehículo -------------------------------------------------- */
.fotos-vehiculo { margin-bottom: .9rem; }

.fotos-grilla {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: .5rem; margin-bottom: .8rem;
}

.foto-slot {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: 11px; overflow: hidden;
  background: var(--superficie-2);
  border: 1.5px dashed var(--borde);
}
.foto-slot.con-foto { border-style: solid; border-color: var(--acento); }
.foto-slot img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }

.foto-slot-vacio {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15rem; cursor: pointer; color: var(--texto-suave); text-align: center; padding: .3rem;
}
.foto-slot-vacio input { display: none; }
.foto-slot-icono { font-size: 1.5rem; }
/* El dibujo del ángulo: la camioneta vista del lado que hay que fotografiar */
.foto-slot-dibujo { display: block; line-height: 0; color: var(--texto-suave); }
.foto-slot-dibujo svg { width: 3.6rem; height: auto; }
.foto-slot.foto-slot-obligatorio .foto-slot-dibujo { color: var(--error); }
.foto-slot-nombre { font-size: .78rem; font-weight: 600; color: var(--texto); }
.foto-slot-mas { font-size: .7rem; color: var(--acento-oscuro); font-weight: 600; }

.foto-slot-nombre.sobre-foto {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .75));
  color: #fff; padding: .5rem .4rem .3rem; font-size: .72rem; text-align: center;
}

.fotos-extras { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .4rem; }
.foto-extra {
  position: relative; flex: 0 0 auto;
  width: 78px; height: 78px; border-radius: 10px; overflow: hidden;
  background: var(--superficie-2); border: 1px solid var(--borde);
}
.foto-extra img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.foto-extra-mas {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-style: dashed; cursor: pointer; color: var(--texto-suave); gap: 0;
}
.foto-extra-mas input { display: none; }
.foto-extra-mas span { font-size: 1.3rem; line-height: 1; }
.foto-extra-mas small { font-size: .62rem; }

/* Las fotos del pedido son mas grandes que las miniaturas del vehiculo -son lo
   que mira el fletero para cotizar, y en 78px no se distingue un bulto- y se
   acomodan en varias filas en vez de scrollear de costado: con cinco, verlas
   todas de una es justamente el punto. */
.fotos-pedido { flex-wrap: wrap; overflow-x: visible; }
.fotos-pedido .foto-extra { width: 100px; height: 100px; }

/* La portada. Se marca porque es la unica que se ve en la lista de pedidos: si
   no se distinguiera, nadie sabria que la primera decide. */
.foto-extra.es-portada { border-color: var(--acento); border-width: 2px; }

.foto-portada {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .15rem .2rem; text-align: center;
  font-size: .58rem; font-weight: 700; letter-spacing: .3px;
  background: rgba(8, 12, 20, .72); color: #fff;
  border: 0; font-family: inherit;
}
button.foto-portada-btn { cursor: pointer; opacity: .85; }
button.foto-portada-btn:hover { opacity: 1; background: var(--acento); color: #1a1204; }
.foto-extra.es-portada .foto-portada { background: var(--acento); color: #1a1204; }

/* Galería de la oferta: los ángulos del vehículo, uno al lado del otro */
.galeria { display: flex; gap: .35rem; overflow-x: auto; margin-top: .5rem; padding-bottom: .3rem; }
.galeria img {
  flex: 0 0 auto; width: 84px; height: 64px; object-fit: cover;
  border-radius: 8px; cursor: zoom-in; background: var(--superficie-2);
  border: 1px solid var(--borde);
}

/* --- ficha de datos de la oferta ---------------------------------------- */
.ficha { display: grid; gap: .15rem; margin-top: .5rem; font-size: .84rem; }
.ficha-linea { display: flex; gap: .4rem; }
.ficha-clave { color: var(--texto-suave); min-width: 82px; }
.ficha-valor { color: var(--texto); font-weight: 500; }
.ficha-valor.flojo { color: var(--texto-suave); font-weight: 400; font-style: italic; }

/* --- aviso de horario propuesto ----------------------------------------- */
.condicionada {
  display: flex; gap: .5rem; align-items: flex-start;
  background: color-mix(in srgb, var(--alerta) 14%, transparent);
  border-left: 3px solid var(--alerta);
  border-radius: 0 9px 9px 0; padding: .5rem .6rem; margin-top: .5rem;
  font-size: .84rem;
}
.condicionada b { display: block; color: var(--alerta); }

/* --- barra de pasos del registro ---------------------------------------- */
.pasos-barra {
  display: flex; gap: .2rem; margin-bottom: .9rem;
  overflow-x: auto; padding-bottom: .2rem;
}
.paso-punto {
  flex: 1; min-width: 58px;
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  font-size: .66rem; color: var(--texto-suave); text-align: center;
  position: relative;
}
/* Línea que une los pasos */
.paso-punto:not(:last-child)::after {
  content: ''; position: absolute; top: 11px; left: 60%; right: -40%;
  height: 2px; background: var(--borde);
}
.paso-punto.hecho:not(:last-child)::after { background: var(--ok); }

.paso-numero {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: .72rem; font-weight: 700;
  background: var(--superficie-2); border: 1px solid var(--borde);
  color: var(--texto-suave); position: relative; z-index: 1;
}
.paso-punto.hecho .paso-numero { background: var(--ok); border-color: var(--ok); color: #fff; }
.paso-punto.ahora .paso-numero {
  background: var(--acento); border-color: var(--acento); color: #1a1204;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 25%, transparent);
}
.paso-punto.ahora { color: var(--texto); font-weight: 600; }
.paso-nombre { line-height: 1.1; }

/* --- recordatorio de perfil incompleto ---------------------------------- */
.pendientes {
  background: color-mix(in srgb, var(--alerta) 12%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--alerta) 40%, var(--borde));
  border-radius: var(--radio); padding: .8rem .9rem; margin-bottom: .8rem;
}
.pendientes h3 { font-size: .95rem; margin: 0 0 .3rem; }
.pendientes ul { margin: .3rem 0 .6rem; padding-left: 1.1rem; font-size: .85rem; }
.pendientes li { margin-bottom: .15rem; }

/* --- estrellas y reseñas ------------------------------------------------- */
.estrellas { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; }
.estrellas-dibujo { color: var(--acento); letter-spacing: 1px; }
.estrellas-numero { color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.estrellas.sin-datos { color: var(--texto-suave); font-style: italic; }

.estrellas-elegir { display: flex; gap: .25rem; margin: .3rem 0 .8rem; }
.estrella {
  background: none; border: 0; cursor: pointer; padding: .1rem;
  font-size: 2.1rem; line-height: 1; color: var(--borde);
  transition: transform .1s, color .1s;
}
.estrella:active { transform: scale(.9); }
.estrella.prendida { color: var(--acento); }

.etiquetas { margin-bottom: .8rem; }
.etiquetas-fila { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.etiqueta {
  font: inherit; font-size: .82rem; cursor: pointer;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 999px; padding: .35rem .7rem;
  transition: border-color .12s, background .12s;
}
.etiqueta.elegida {
  border-color: var(--acento);
  background: color-mix(in srgb, var(--acento) 16%, var(--superficie));
  font-weight: 600;
}
.etiquetas-fila.solo-lectura .etiqueta { cursor: default; font-size: .76rem; padding: .2rem .55rem; }

.resena-form { margin-bottom: .3rem; }
.resena-form textarea { margin-bottom: .6rem; }

.resena {
  border-top: 1px solid var(--borde); padding: .7rem 0;
}
.resena:first-child { border-top: 0; padding-top: 0; }
.resena-cabeza { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.resena-autor { font-weight: 600; font-size: .88rem; }
.resena-cuando { font-size: .72rem; color: var(--texto-suave); margin-left: auto; }
.resena-texto { margin: .4rem 0 0; font-size: .88rem; color: var(--texto-suave); }

.resena-oculta {
  background: var(--superficie-2); border-radius: 10px;
  padding: .6rem .7rem; font-size: .84rem; color: var(--texto-suave);
}

/* --- línea de tiempo del viaje ------------------------------------------- */
.pasos { display: grid; gap: .1rem; margin-bottom: .8rem; }

.paso {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .1rem; font-size: .9rem; color: var(--texto-suave);
  position: relative;
}
/* Hilo que une los pasos */
.paso:not(:last-child)::after {
  content: ''; position: absolute; left: 13px; top: 30px; bottom: -4px;
  width: 2px; background: var(--borde);
}
.paso.hecho::after { background: var(--ok); }

.paso-icono {
  width: 28px; height: 28px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%; font-size: .85rem;
  background: var(--superficie-2); border: 1px solid var(--borde);
  position: relative; z-index: 1;
}
.paso.hecho .paso-icono {
  background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 700;
}
.paso.ahora .paso-icono {
  background: var(--acento); border-color: var(--acento);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 25%, transparent);
}
.paso.ahora { color: var(--texto); font-weight: 600; }
.paso.hecho { color: var(--texto); }
.paso-texto { flex: 1; }
.paso-cuando { font-size: .72rem; color: var(--texto-suave); font-weight: 400; }

/* --- candado de pago ----------------------------------------------------- */
.candado {
  text-align: center; padding: 1.1rem 1rem;
  background: var(--superficie-2); border: 1px dashed var(--borde);
  border-radius: var(--radio); margin-bottom: .8rem;
}
.candado-icono { font-size: 1.8rem; }
.candado h3 { margin: .3rem 0; }
.candado p { color: var(--texto-suave); font-size: .88rem; }

/* --- ofertas ------------------------------------------------------------- */
.oferta {
  display: flex; gap: .7rem; align-items: flex-start;
  border: 1px solid var(--borde); border-radius: 12px;
  padding: .75rem; margin-bottom: .6rem; background: var(--superficie);
}
.oferta.ganadora { border-color: var(--ok); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 22%, transparent); }
.oferta.mas-baja { border-color: var(--acento); }
.oferta-cuerpo { flex: 1; min-width: 0; }
.oferta-fila { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.oferta-datos { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.oferta-nota { font-size: .85rem; color: var(--texto-suave); margin-top: .35rem; }
.oferta.nueva { animation: destacar 1.4s ease-out; }

@keyframes destacar {
  from { background: color-mix(in srgb, var(--acento) 22%, var(--superficie)); }
}

/* --- variantes de una oferta (por cantidad de ayudantes) ---------------- */
.variantes { display: grid; gap: .4rem; margin-top: .5rem; }

.variante {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: .6rem;
  background: var(--superficie-2); border-radius: 10px; padding: .5rem .6rem;
}
.variante .btn { padding: .45rem .8rem; font-size: .85rem; }
.variante b { font-size: .88rem; }

/* Fila para cargar el precio de cada variante */
.variante-carga {
  display: grid; grid-template-columns: 1fr 1.1fr auto;
  align-items: center; gap: .5rem;
  background: var(--superficie-2); border-radius: 10px; padding: .5rem .6rem;
}
.variante-carga b { font-size: .88rem; display: block; }
.variante-carga .input { padding: .5rem .6rem; }
.variante-carga small { font-size: .72rem; }

/* En el celular las tres columnas no entran: el contador quedaba con los dos
   botones de 3rem y un campo de 50px donde no se veía el precio. Se apilan: la
   etiqueta arriba, el precio a lo ancho abajo, y los botones al lado. */
@media (max-width: 620px) {
  .variante-carga { grid-template-columns: 1fr; gap: .4rem; }
  .variante-carga .contador { width: 100%; }
  .variante-carga .variante-acciones { justify-content: flex-start; }
}


/* El nombre del fletero abre su perfil: tiene que verse tocable */
.enlace-perfil {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 700;
  color: var(--acento-oscuro); cursor: pointer; text-align: left;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

@media (prefers-color-scheme: dark) { .enlace-perfil { color: var(--acento); } }

/* --- chat ---------------------------------------------------------------- */
.chat { display: flex; flex-direction: column; gap: .4rem; max-height: 46vh; overflow-y: auto; padding: .25rem; }
.burbuja {
  max-width: 78%; padding: .5rem .7rem; border-radius: 13px;
  font-size: .92rem; word-wrap: break-word;
}
.burbuja.mia { align-self: flex-end; background: var(--acento); color: #1a1204; border-bottom-right-radius: 4px; }
.burbuja.suya { align-self: flex-start; background: var(--superficie-2); border-bottom-left-radius: 4px; }
.burbuja time { display: block; font-size: .66rem; opacity: .7; margin-top: .15rem; }
.chat-envio { display: flex; gap: .4rem; margin-top: .6rem; }
.chat-envio .input { flex: 1; }

/* --- estados ------------------------------------------------------------- */
.cargando { display: grid; place-items: center; gap: .6rem; padding: 3rem 1rem; color: var(--texto-suave); }
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--borde); border-top-color: var(--acento);
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.vacio {
  text-align: center; padding: 2.5rem 1rem; color: var(--texto-suave);
  background: var(--superficie); border: 1px dashed var(--borde);
  border-radius: var(--radio);
}
.vacio h3 { color: var(--texto); }
.vacio .btn { margin-top: .75rem; }

/* Foto obligatoria sin cargar: el recuadro se distingue del resto. Si se viera
   igual que los opcionales, nadie lee que abajo dice "obligatoria". */
.foto-slot.foto-slot-obligatorio {
  border-color: var(--error);
  background: color-mix(in srgb, var(--error) 7%, transparent);
}
.foto-slot.foto-slot-obligatorio .foto-slot-mas { color: var(--error); font-weight: 700; }

/* El "otro piso" a mano, al lado de los botones del 1 al 4. Se ve como un chip
   mas para que la fila se lea como una sola cosa. */
.chip-otro { cursor: default; padding: .35rem .4rem; }
.chip-otro input {
  width: 100%; font: inherit; font-weight: 700; text-align: center;
  border: 0; background: transparent; color: inherit; padding: 0;
}
.chip-otro input:focus { outline: none; }
.chip-otro input::-webkit-outer-spin-button,
.chip-otro input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- editor para tapar datos en una foto --------------------------------- */
.censura-marco {
  background: #000; border-radius: 10px; overflow: auto;
  max-height: 56vh; margin: .5rem 0;
}
.censura-lienzo {
  display: block; max-width: 100%; margin: 0 auto;
  cursor: crosshair;
  /* Sin esto, arrastrar sobre el lienzo desplaza la pagina en el telefono y no
     se puede dibujar el recuadro. */
  touch-action: none;
}

/* Una foto que el admin ya edito, en el panel */
.foto-censurada { border-color: var(--alerta) !important; }

/* --- barra de guardar ---------------------------------------------------- */
/* Un solo boton para toda la pantalla de Mi cuenta. Aparece sola cuando hay
   algo sin guardar y se va cuando no: una barra fija que dice "Guardar" aunque
   no haya nada que guardar es ruido, y ademas tapa contenido para nada. */
.barra-guardar {
  position: fixed; left: 0; right: 0; z-index: 45;
  bottom: calc(var(--alto-nav) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .9rem;
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  box-shadow: 0 -8px 20px rgba(8, 12, 20, .10);
  animation: subir .2s ease-out;
}
.barra-guardar[hidden] { display: none; }
.barra-guardar-texto {
  flex: 1 1 auto; min-width: 0;
  font-size: .82rem; line-height: 1.25; color: var(--texto-suave);
}
.barra-guardar .btn { flex: 0 0 auto; }
/* En pantallas chicas el texto se come el boton si no se lo limita */
@media (max-width: 380px) {
  .barra-guardar-texto { font-size: .76rem; }
}

/* --- avisos flotantes ---------------------------------------------------- */
#avisos {
  position: fixed; left: .75rem; right: .75rem; z-index: 60;
  bottom: calc(var(--alto-nav) + env(safe-area-inset-bottom) + .75rem);
  display: grid; gap: .4rem; pointer-events: none;
}
.aviso {
  background: var(--marino); color: #fff;
  padding: .7rem .9rem; border-radius: 11px; font-size: .9rem;
  box-shadow: var(--sombra); animation: subir .2s ease-out;
}
.aviso-error { background: var(--error); color: #fff; }
.aviso-ok    { background: var(--ok); color: #fff; }
.aviso.saliendo { opacity: 0; transition: opacity .3s; }

@keyframes subir { from { transform: translateY(10px); opacity: 0; } }

.variante-acciones { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }

/* --- contador con flechas ------------------------------------------------ */
.contador { display: flex; align-items: stretch; gap: .4rem; }
/* min-width con un valor de verdad, no 0. Con 0 el campo se aplastaba a 27px
   entre los dos botones y el precio no se leía: en el celular se veía una sola
   letra del placeholder. Es un piso, no un ancho: sigue creciendo si hay lugar. */
.contador .input { flex: 1 1 auto; min-width: 5.5rem; text-align: center; }
.contador-btn {
  flex: 0 0 auto; width: 3rem; font-size: 1.35rem; line-height: 1;
  padding: 0; font-weight: 700;
}
.contador-btn:disabled { opacity: .35; }
.contador-sufijo {
  display: flex; align-items: center; color: var(--texto-suave); font-size: .9rem;
}

/* --- la tarjeta que hay que atender ------------------------------------- */
/* Cuando una pantalla tiene seis tarjetas y una sola requiere una acción, hay
   que poder encontrarla sin leerlas todas. Se usa en "Corregir el pedido" para
   el bloque de la fecha cuando el pedido venció. */
.card-destacada {
  border: 2px solid var(--acento);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 18%, transparent);
}

/* --- candidatos de una busqueda de direccion ----------------------------- */
/* Se muestran cuando la busqueda devuelve mas de un lugar con ese nombre, que
   en Argentina pasa seguido: la misma calle existe en veinte ciudades. */
.opciones-lugar { display: grid; gap: .35rem; margin-top: .4rem; }
.opcion-lugar {
  display: grid; gap: .1rem; text-align: left; cursor: pointer;
  padding: .5rem .6rem; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--superficie); font: inherit; color: inherit;
  position: relative;
}
.opcion-lugar:hover { background: var(--fondo); border-color: var(--acento); }
.opcion-lugar b { font-size: .9rem; }
.opcion-lugar small {
  font-size: .78rem; color: var(--texto-suave); line-height: 1.25;
  padding-right: 4.5rem;
}
.opcion-km {
  position: absolute; top: .5rem; right: .6rem;
  font-size: .72rem; color: var(--texto-suave); white-space: nowrap;
}

/* --- codigo de entrega --------------------------------------------------- */
/* Grande y separado: es lo que el cliente le va a leer al fletero en la puerta
   de la casa, con las manos ocupadas. */
.codigo-entrega {
  font-size: 2.6rem; font-weight: 800; letter-spacing: .5rem; text-align: center;
  padding: .8rem 0; margin: .3rem 0 .5rem;
  background: var(--fondo); border: 2px dashed var(--acento); border-radius: var(--radio);
  font-variant-numeric: tabular-nums;
}

/* --- agenda del fletero -------------------------------------------------- */
.agenda-dia { margin-top: .7rem; }
.agenda-fecha {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem;
  text-transform: capitalize; font-size: .92rem;
}
.agenda-item {
  display: flex; gap: .55rem; align-items: flex-start; cursor: pointer;
  padding: .45rem .55rem; border-radius: 10px; border: 1px solid var(--borde);
  margin-bottom: .35rem;
}
.agenda-item.firme { border-left: 3px solid var(--acento); }
.agenda-item:hover { background: var(--fondo); }
.agenda-icono { font-size: 1.1rem; line-height: 1.2; flex: 0 0 auto; }
.agenda-item b { display: block; font-size: .9rem; }
.agenda-item span { display: block; font-size: .82rem; color: var(--texto-suave); }
.agenda-item small { display: block; font-size: .76rem; color: var(--texto-suave); }

/* --- novedades ----------------------------------------------------------- */
.novedad {
  display: flex; gap: .55rem; align-items: flex-start;
  padding: .5rem 0; border-top: 1px solid var(--borde);
}
.novedad:first-child { border-top: 0; }
.novedad-icono { font-size: 1.1rem; line-height: 1.2; flex: 0 0 auto; }
.novedad b { display: block; font-size: .9rem; }
.novedad span { display: block; font-size: .85rem; color: var(--texto-suave); }
.novedad small { display: block; font-size: .75rem; color: var(--texto-suave); margin-top: .15rem; }
.novedad-clickeable { cursor: pointer; }
.novedad-clickeable:hover b { text-decoration: underline; }
/* Los chats: el título del pedido arriba, como referencia, y "Responder" a mano */
.pendientes-chat { border-left: 3px solid var(--acento); }
.novedad-chat > div { flex: 1 1 auto; min-width: 0; }
.novedad-chat span { overflow-wrap: anywhere; }
.novedad small.novedad-pedido {
  margin: 0 0 .1rem; text-transform: uppercase; letter-spacing: .03em;
  font-weight: 600; color: var(--acento);
}
/* Con ".novedad" adelante: la regla general ".novedad span" lo pintaba de gris
   y lo mostraba como bloque, y quedaba escondido. */
.novedad span.novedad-ir {
  display: inline-block; flex: 0 0 auto; align-self: center;
  padding: .45rem .8rem; border-radius: 999px;
  background: var(--acento); color: #fff;
  font-size: .85rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.novedad-chat:hover span.novedad-ir { filter: brightness(1.08); }

/* --- modal --------------------------------------------------------------- */
.modal-fondo {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(8, 12, 20, .55);
  display: grid; place-items: center; padding: 1rem;
}
.modal {
  background: var(--superficie); border-radius: var(--radio);
  padding: 1.1rem; max-width: 380px; width: 100%; box-shadow: var(--sombra);
}
.modal p { color: var(--texto-suave); font-size: .9rem; }
.modal-acciones { display: flex; gap: .5rem; margin-top: 1rem; }
/* El modal de calificar lleva estrellas, etiquetas y un comentario: con 380px
   las etiquetas se apilan de a una y queda un scroll larguísimo. */
.modal-ancho { max-width: 520px; max-height: 88vh; overflow-y: auto; }
.modal-acciones .btn { flex: 1; }

/* --- login --------------------------------------------------------------- */
.login { padding-top: 1.5rem; text-align: center; }
.login h1 { font-size: 1.6rem; }
.login p.bajada { color: var(--texto-suave); margin-bottom: 1.5rem; }
.login .card { text-align: left; }
.separador {
  display: flex; align-items: center; gap: .6rem;
  color: var(--texto-suave); font-size: .8rem; margin: 1rem 0;
}
.separador::before, .separador::after {
  content: ''; flex: 1; height: 1px; background: var(--borde);
}
.btn-google {
  width: 100%; background: #fff; color: #1f2937; border: 1px solid #dadce0;
  font-weight: 600;
}
.btn-google svg { width: 18px; height: 18px; }

.pasos { text-align: left; color: var(--texto-suave); font-size: .85rem; padding-left: 1.1rem; }
.pasos li { margin-bottom: .3rem; }