/* ==========================================================================
   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 */
  /* Los dos colores del logo, sacados del archivo de marca/. El naranja es casi
     el mismo que --acento, pero se usa el exacto: el nombre va pegado al furgón
     y cualquier diferencia se notaría. */
  --marca-naranja: #f5921d;
  --celeste:       #8be0f8;
  --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; }
/* Sin esto, Safari del iPhone agranda el texto por su cuenta al girar a horizontal. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

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;
}

/* El furgón es imagen; el nombre, texto. Los width/height del HTML son los del
   archivo, para que el navegador reserve el lugar y la cabecera no pegue un
   salto al terminar de cargar la imagen. */
.marca {
  display: flex; align-items: center; gap: .45rem; text-decoration: none;
}
.marca img { height: 28px; width: auto; display: block; }
.marca span {
  font-family: Poppins, system-ui, sans-serif;
  font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; line-height: 1;
}
.marca i { color: var(--celeste); font-style: normal; }
.marca b { color: var(--marca-naranja); font-weight: inherit; }

/* --- 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: rgba(245, 158, 11, 0.18); background: color-mix(in srgb, var(--acento) 18%, transparent); color: var(--acento-oscuro); }
.chip-ok     { background: rgba(21, 128, 61, 0.16); background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.chip-error  { background: rgba(185, 28, 28, 0.14); background: color-mix(in srgb, var(--error) 14%, transparent); color: var(--error); }
.chip-alerta { background: rgba(180, 83, 9, 0.16); 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: rgba(245, 158, 11, 0.16); 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: rgba(185, 28, 28, 0.14); 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, rgba(245, 158, 11, 0.12), var(--superficie)); background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 12%, var(--superficie)), var(--superficie));
  border: 1px solid rgba(245, 158, 11, 0.35); 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: rgba(185, 28, 28, 0.10); 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 rgba(185, 28, 28, 0.18) !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: rgba(245, 158, 11, 0.12); 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 rgba(245, 158, 11, 0.22); 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; }

/* Los requisitos de la contraseña, que se van tildando mientras escribe.
   En dos columnas cuando entran: cinco renglones sueltos ocupan media pantalla
   de celular y empujan el botón fuera de la vista. */
.reglas-clave {
  list-style: none; margin: .5rem 0 .9rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: .1rem .6rem; font-size: .78rem; color: var(--texto-suave);
}
.reglas-clave li { display: flex; align-items: center; gap: .35rem; }
.reglas-clave li.ok { color: var(--ok); }
.regla-marca { width: 1em; text-align: center; font-weight: 700; }

.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 rgba(245, 158, 11, 0.25); 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;
}

/* --- tarjetas plegables de Mi cuenta del fletero (2026-10-08) ------------
   tarjetasPlegables() en perfil.js. El título es el botón; cerrada, la
   tarjeta muestra solo el título (y un punto naranja si adentro hay un aviso). */
.card.plegable > .seccion-titulo {
  display: flex; align-items: center; gap: .5rem;
  margin: 0; padding: .35rem 0; min-height: 2.2rem;
  font-size: .85rem; color: var(--texto);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.card.plegable:not(.plegada) > .seccion-titulo { margin-bottom: .6rem; }
.card.plegable > .seccion-titulo::after {
  content: ''; margin-left: auto; flex: 0 0 auto;
  width: .5rem; height: .5rem;
  border-right: 2px solid var(--texto-suave); border-bottom: 2px solid var(--texto-suave);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s;
}
.card.plegable:not(.plegada) > .seccion-titulo::after { transform: rotate(-135deg) translate(-2px, -2px); }
.card.plegable > .seccion-titulo:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; }
.card.plegable { padding-top: .45rem; }
.card.plegada { padding-bottom: .45rem; }
.card.plegada > :not(.seccion-titulo) { display: none !important; }
.card.plegada:has(.pendientes) > .seccion-titulo::before {
  content: ''; order: 2; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--alerta); margin-left: auto; flex: 0 0 auto;
}
.card.plegada:has(.pendientes) > .seccion-titulo::after { margin-left: .4rem; order: 3; }
.btn-plegar-todas { flex: 0 0 auto; padding: .4rem .8rem; font-size: .85rem; white-space: nowrap; }

/* --- 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: rgba(245, 158, 11, 0.14); background: color-mix(in srgb, var(--acento) 14%, var(--superficie));
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25); 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; }

/* --- domicilios guardados (desplegable arriba del mapa, domicilios.js) ---- */
.domicilios-guardados {
  margin-bottom: .45rem; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--superficie);
}
.domicilios-guardados > summary {
  cursor: pointer; padding: .55rem .7rem; font-size: .88rem; font-weight: 600;
  list-style: none;
}
.domicilios-guardados > summary::-webkit-details-marker { display: none; }
.domicilios-guardados > summary::after {
  content: '▾'; float: right; color: var(--texto-suave);
}
.domicilios-guardados[open] > summary::after { content: '▴'; }
.domicilios-lista { display: grid; gap: .35rem; padding: 0 .5rem .5rem; }
.domicilio-fila { display: flex; gap: .35rem; align-items: stretch; }
.domicilio-elegir {
  flex: 1 1 auto; min-width: 0; display: grid; gap: .1rem; text-align: left;
  cursor: pointer; padding: .45rem .6rem; border: 1px solid var(--borde);
  border-radius: 10px; background: var(--superficie); font: inherit; color: inherit;
}
.domicilio-elegir:hover { background: var(--fondo); border-color: var(--acento); }
.domicilio-elegir b { font-size: .88rem; overflow-wrap: anywhere; }
.domicilio-elegir small { font-size: .76rem; color: var(--texto-suave); line-height: 1.25; }
.domicilio-fila .btn-icono { height: auto; }

/* --- 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;
  background: var(--superficie); text-align: center;
  font-size: .9rem;
}
.subir-foto input { display: none; }

.subir-foto-fila {
  display: flex; gap: .6rem; margin-bottom: .85rem;
}
.subir-foto-fila .subir-foto { flex: 1; padding: 1.1rem .5rem; }

/* --- 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; }
/* Slot vacío con los dos orígenes de la foto adentro (cámara y galería, ver
   origenesDeFoto en ui.js): no se lo fuerza a 4:3 para que no se corten. */
.foto-slot-con-origen { aspect-ratio: auto; min-height: 9.5rem; }
.foto-slot-con-origen .foto-slot-vacio { position: static; min-height: 9.5rem; cursor: default; padding: .6rem .4rem; }
.foto-slot-origen { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: .35rem; }
.foto-slot-origen label {
  cursor: pointer; font-size: .78rem; font-weight: 600; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 9px;
  padding: .4rem .6rem; white-space: nowrap;
}
.foto-slot-origen label:active { transform: scale(.97); }
.foto-slot-origen input { display: none; }

.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: rgba(180, 83, 9, 0.14); 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 rgba(245, 158, 11, 0.25); 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: rgba(180, 83, 9, 0.12); background: color-mix(in srgb, var(--alerta) 12%, var(--superficie));
  border: 1px solid rgba(180, 83, 9, 0.40); 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: rgba(245, 158, 11, 0.16); 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 rgba(245, 158, 11, 0.25); 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 rgba(21, 128, 61, 0.22); 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: rgba(245, 158, 11, 0.22); 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; }
/* El campo de texto va solo en su renglón, a lo ancho: en la misma línea que la
   cámara, la galería y Enviar quedaba muy angosto en el celular. Abajo, las
   fotos a la izquierda y Enviar a la derecha. */
.chat-envio { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.chat-envio .input { flex: 1 1 100%; }
.chat-envio > .btn:last-of-type { margin-left: auto; }

/* --- 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: rgba(185, 28, 28, 0.07); 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 rgba(245, 158, 11, 0.18); 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;
}
/* Cuánto le queda al código (migración 63: cambia cada 4 minutos) */
.codigo-vida {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem;
  font-size: .82rem; color: var(--texto-suave); font-variant-numeric: tabular-nums;
}
.codigo-barra { flex: 1; height: 6px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.codigo-barra-relleno { height: 100%; width: 100%; background: var(--acento); transition: width 1s linear; }
/* El fletero lo está pidiendo */
.codigo-pedido {
  font-weight: 700; font-size: .9rem; color: var(--acento-oscuro);
  background: rgba(245, 158, 11, 0.14); background: color-mix(in srgb, var(--acento) 14%, transparent);
  border-radius: 10px; padding: .55rem .7rem; margin-bottom: .4rem;
  animation: latir 1.6s ease-in-out 3;
}

/* --- 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); }
/* La transferencia hecha al fletero (migración 68): en verde */
.pendientes-ok {
  background: rgba(21, 128, 61, 0.10); background: color-mix(in srgb, var(--ok) 12%, var(--superficie));
  border: 1px solid rgba(21, 128, 61, 0.40); border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--borde));
  border-left: 3px solid var(--ok);
}
.pendientes-ok h3 { color: var(--ok); }
.pendientes-ok .novedad span { color: var(--texto); }
.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);
  /* Un cartel largo (el del código de fin con las opciones de cobro) no puede
     quedar cortado en un celular chico: se desplaza adentro. */
  max-height: calc(100vh - 2rem); overflow-y: auto;
}
.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; }
/* El botón propio de Google (googleBoton.js): lo dibuja Google, centrado */
.google-boton { display: flex; justify-content: center; min-height: 44px; }

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

/* Tarjeta que explica para que se pide la ubicacion, antes del cartel del
   navegador. Va adentro del selector de punto, arriba del mapa. */
.pedir-ubicacion { margin-bottom: .5rem; }
.pedir-ubicacion p { margin: 0 0 .35rem; font-weight: 600; }
.pedir-ubicacion .campo-ayuda { font-weight: 400; margin-bottom: .75rem; }
.pedir-ubicacion .btn + .btn { margin-top: .4rem; }
.elegir-ciudad { margin-bottom: .5rem; }
.elegir-ciudad .selector-fila { margin-bottom: .35rem; }
.linea-ciudad { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }

/* Fotos dentro del chat: ocupan el ancho de la burbuja, sin deformarse. */
.chat-foto {
  display: block;
  max-width: 100%;
  border-radius: .5rem;
  margin-bottom: .35rem;
  cursor: zoom-in;
  background: var(--borde);
  min-height: 2.5rem;
}

/* --- cobros del fletero (2026-09-27) --------------------------------------- */
button.opcion { width: 100%; text-align: left; font: inherit; color: var(--texto); }
button.opcion .chip { margin-top: .35rem; }
.lista-cobro { margin: .3rem 0 .2rem; padding-left: 1.2rem; }
.lista-cobro li { margin: .35rem 0; }
.lista-cobro .lista-cobro { margin: .4rem 0; }
.resumen-cobros { display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem; margin-bottom: .7rem; }
.resumen-cobro { border-radius: 11px; padding: .55rem .65rem; background: var(--superficie-2); }
.resumen-cobro small { display: block; font-size: .72rem; color: var(--texto-suave); }
.resumen-cobro b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.resumen-ok b { color: var(--ok); }
.resumen-acento b { color: var(--acento-oscuro); }
.resumen-error b { color: var(--error); }
.resumen-alerta b { color: var(--alerta); }
.chips-filtro { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.chip-sel.chip-filtro { min-height: 0; padding: .4rem .7rem; border-radius: 999px; }
.movimiento {
  display: flex; gap: .6rem; align-items: center; justify-content: space-between;
  width: 100%; text-align: left; font: inherit; color: var(--texto); cursor: pointer;
  background: none; border: 0; border-top: 1px solid var(--borde); padding: .65rem 0;
}
.movimiento-texto { min-width: 0; }
.movimiento-texto b { display: block; font-size: .92rem; }
.movimiento-texto small { display: block; font-size: .74rem; color: var(--texto-suave); }
.movimiento-monto { text-align: right; flex: 0 0 auto; display: grid; justify-items: end; gap: .2rem; }
.movimiento-monto b { font-variant-numeric: tabular-nums; }
.evolucion-total { margin: .2rem 0 .6rem; }
.evolucion-total small { display: block; font-size: .75rem; color: var(--texto-suave); }
.evolucion-total b { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
/* Gráfico de barras sin librería: una columna flexible por período */
.grafico-barras { display: flex; align-items: stretch; gap: 3px; height: 170px; }
.barra { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.barra-valor { font-size: .55rem; color: var(--texto-suave); height: 1rem; white-space: nowrap; }
.barra-columna { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.barra-relleno { width: 100%; border-radius: 4px 4px 0 0; background: var(--acento); opacity: .55; }
.barra-relleno.actual { opacity: 1; }
.barra-etiqueta { font-size: .58rem; color: var(--texto-suave); margin-top: .2rem; white-space: nowrap; }
.cobro-viaje { margin: .3rem 0 .6rem; }
.cobro-viaje .opciones { margin-bottom: .3rem; }
.cobro-viaje .opcion { padding: .6rem .7rem; }

/* --- agenda en calendario (migración 69) --------------------------------- */
/* Un color por estado. Se define una vez como variable y lo usan la pastilla
   del mes, el bloque de la semana, la tarjeta del día y la leyenda. */
.cal-abierto    { --c: var(--acento); }
.cal-ofertado   { --c: var(--acento); }
.cal-a_pagar    { --c: var(--alerta); }
.cal-confirmado { --c: var(--ok); }
.cal-en_curso   { --c: #2563eb; }
.cal-hecho      { --c: var(--texto-suave); }
.cal-nodisp     { --c: #7c8597; }
.cal-cancelado  { --c: var(--error); }
.cal-pastilla.cal-cancelado, .cal-evento.cal-cancelado, .cal-item.cal-cancelado { opacity: .6; text-decoration: line-through; }

.cal-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem; margin-bottom: .6rem; }
.cal-nav { display: flex; align-items: center; gap: .25rem; min-width: 0; }
.cal-nav .btn { padding: .4rem .8rem; }
.cal-flecha { font: inherit; font-size: 1.4rem; line-height: 1; width: 34px; height: 34px;
  border: 0; border-radius: 50%; background: transparent; color: var(--texto); cursor: pointer; }
.cal-flecha:hover { background: var(--superficie-2); }
.cal-titulo { margin: 0 0 0 .25rem; font-size: 1.05rem; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.cal-titulo::first-letter { text-transform: uppercase; }
.cal-vistas { display: inline-flex; border: 1px solid var(--borde); border-radius: 999px; overflow: hidden; }
.cal-vista { font: inherit; font-size: .85rem; padding: .35rem .8rem; border: 0; background: transparent;
  color: var(--texto); cursor: pointer; }
.cal-vista + .cal-vista { border-left: 1px solid var(--borde); }
.cal-vista.elegida { background: var(--acento); color: #1a1205; font-weight: 600; }

/* Mes */
.cal-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; }
.cal-cabeza { font-size: .68rem; text-transform: uppercase; letter-spacing: .4px; text-align: center;
  color: var(--texto-suave); padding: .35rem 0; border-bottom: 1px solid var(--borde); }
.cal-celda { min-height: 74px; padding: 3px; border-right: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde); cursor: pointer; display: flex; flex-direction: column;
  gap: 2px; min-width: 0; }
.cal-celda:nth-child(7n) { border-right: 0; }
.cal-celda.fuera { background: var(--superficie-2); }
.cal-celda.fuera .cal-num { color: var(--texto-suave); }
.cal-celda.elegida { box-shadow: inset 0 0 0 2px var(--acento); }
.cal-celda.libre-no { background: repeating-linear-gradient(135deg, transparent 0 6px,
  color-mix(in srgb, var(--texto-suave) 14%, transparent) 6px 8px); }
.cal-num { font-size: .8rem; font-weight: 600; align-self: center; width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: 50%; }
.cal-celda.hoy .cal-num { background: #2563eb; color: #fff; }
.cal-pastilla { font: inherit; font-size: .68rem; line-height: 1.25; text-align: left; cursor: pointer;
  border: 0; border-radius: 5px; padding: 1px 4px; color: var(--texto);
  background: color-mix(in srgb, var(--c) 20%, transparent); border-left: 3px solid var(--c);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-pastilla.cal-ofertado { background: transparent; border: 1px dashed var(--c); border-left-width: 3px; }
.cal-pastilla.cal-hecho { opacity: .7; }
.cal-mas { font-size: .65rem; color: var(--texto-suave); padding-left: 3px; }
.cal-marca-nodisp { font-size: .6rem; color: var(--texto-suave); text-align: center;
  background: var(--superficie-2); border-radius: 4px; padding: 0 2px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }

/* Lista del día tocado, y las tarjetas de viaje */
.cal-detalle { margin-top: .8rem; }
.cal-detalle h3 { margin: 0; }
.cal-detalle h3::first-letter { text-transform: uppercase; }
.cal-ver-dia { padding: .35rem .7rem; font-size: .8rem; }
.cal-item { display: flex; gap: .7rem; align-items: center; padding: .6rem .6rem .6rem .7rem;
  margin-top: .55rem; border-radius: 11px; cursor: pointer; background: var(--superficie-2);
  border-left: 4px solid var(--c); }
.cal-item:active { transform: scale(.99); }
.cal-item-hora { display: flex; flex-direction: column; align-items: center; min-width: 42px; }
.cal-item-hora b { font-size: .95rem; }
.cal-item-hora small { font-size: .72rem; color: var(--texto-suave); }
.cal-item-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.cal-item-cuerpo > span { font-size: .8rem; color: var(--texto-suave); }
.cal-item-cuerpo .card-datos { margin-top: .2rem; }
.cal-item-ir { font-size: 1.3rem; color: var(--texto-suave); }
.cal-item.cal-nodisp { background: repeating-linear-gradient(135deg, var(--superficie-2) 0 8px,
  color-mix(in srgb, var(--texto-suave) 12%, var(--superficie-2)) 8px 10px); }
.cal-chip-abierto, .cal-chip-ofertado, .cal-chip-a_pagar, .cal-chip-confirmado,
.cal-chip-en_curso, .cal-chip-hecho {
  background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); }
.cal-chip-abierto    { --c: var(--acento-oscuro); }
.cal-chip-ofertado   { --c: var(--acento-oscuro); }
.cal-chip-a_pagar    { --c: var(--alerta); }
.cal-chip-confirmado { --c: var(--ok); }
.cal-chip-en_curso   { --c: #2563eb; }
.cal-chip-hecho      { --c: var(--texto-suave); }
.cal-chip-cancelado  { --c: var(--error); background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); }

/* Semana y día: columnas con las horas */
.cal-horas { display: grid; grid-template-columns: 38px repeat(var(--columnas), minmax(0, 1fr));
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; }
.cal-horas-esquina { border-bottom: 1px solid var(--borde); }
.cal-horas-dia { font: inherit; border: 0; border-bottom: 1px solid var(--borde);
  border-left: 1px solid var(--borde); background: transparent; color: var(--texto);
  display: flex; flex-direction: column; align-items: center; padding: .3rem 0; cursor: pointer; min-width: 0; }
.cal-horas.un-dia .cal-horas-dia { cursor: default; }
.cal-horas-dia small { font-size: .65rem; text-transform: uppercase; color: var(--texto-suave); }
.cal-horas-dia b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.cal-horas-dia.hoy b { background: #2563eb; color: #fff; }
.cal-horas-reglas { position: relative; }
.cal-horas-reglas span { position: absolute; right: 4px; font-size: .62rem; color: var(--texto-suave); }
.cal-horas-col { position: relative; border-left: 1px solid var(--borde);
  background-image: linear-gradient(to bottom, var(--borde) 1px, transparent 1px);
  background-size: 100% 44px; }
.cal-evento { position: absolute; font: inherit; text-align: left; cursor: pointer; overflow: hidden;
  border: 0; border-radius: 6px; padding: 2px 4px; color: var(--texto);
  background: color-mix(in srgb, var(--c) 24%, var(--superficie)); border-left: 3px solid var(--c);
  display: flex; flex-direction: column; gap: 1px; }
.cal-evento.cal-ofertado { background: var(--superficie); border: 1px dashed var(--c); border-left-width: 3px; }
.cal-evento b { font-size: .68rem; line-height: 1.2; }
.cal-evento span, .cal-evento small { font-size: .72rem; color: var(--texto-suave); }
.cal-horas.un-dia .cal-evento b { font-size: .85rem; }
.cal-bloque-nodisp { position: absolute; left: 0; right: 0; cursor: pointer; overflow: hidden;
  background: repeating-linear-gradient(135deg, transparent 0 6px,
    color-mix(in srgb, var(--texto-suave) 22%, transparent) 6px 8px); }
.cal-bloque-nodisp span { font-size: .62rem; color: var(--texto-suave); padding: 2px 3px; display: block; }

.cal-leyenda { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin: .6rem 0 .2rem;
  font-size: .72rem; color: var(--texto-suave); }
.cal-leyenda span { display: inline-flex; align-items: center; gap: .3rem; }
.cal-leyenda i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.cal-leyenda i.cal-ofertado { background: transparent; border: 1px dashed var(--c); }
.cal-leyenda i.cal-nodisp { background: repeating-linear-gradient(135deg, transparent 0 2px, var(--c) 2px 3px); }

/* Cuándo no está el fletero */
.cal-nodisp-lista { margin-top: .6rem; display: flex; flex-direction: column; gap: .4rem; }
.cal-nodisp-fila { display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem;
  background: var(--superficie-2); border-radius: 10px; }
.cal-nodisp-fila > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cal-nodisp-fila b { font-size: .88rem; }
.cal-nodisp-fila small { font-size: .75rem; color: var(--texto-suave); }
.cal-borrar { padding: .3rem .6rem; font-size: .78rem; }
.cal-modal { max-width: 440px; max-height: 88vh; overflow-y: auto; }
.cal-modal .chips-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cal-dias-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem;
  margin-top: .3rem; }
.cal-dias-semana .chip-sel { padding: .45rem 0; justify-content: center; }

@media (max-width: 420px) {
  .cal-celda { min-height: 62px; padding: 2px; }
  .cal-pastilla { font-size: .6rem; padding: 1px 2px; }
  .cal-pastilla b { display: none; }
  .cal-titulo { font-size: .95rem; }
}

/* Ficha del viaje para el admin (migración 70) */
.ficha-viaje-admin h3 { margin: 0 0 .4rem; }
.ficha-seccion { margin-top: .9rem; }
.ficha-viaje-admin .ficha-linea { justify-content: space-between; gap: .8rem; font-size: .85rem;
  padding: .2rem 0; border-bottom: 1px dashed var(--borde); }
.ficha-viaje-admin .ficha-linea span { color: var(--texto-suave); }
.ficha-viaje-admin .ficha-linea b { text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.ficha-todo { margin-top: 1rem; font-size: .8rem; }
.ficha-todo summary { cursor: pointer; color: var(--texto-suave); }

/* --- estadísticas del panel (app-08) ---------------------------------------- */
.estad-motivo { margin: .45rem 0; }
.estad-motivo-texto { display: flex; justify-content: space-between; gap: .6rem; font-size: .85rem; }
.estad-motivo-texto b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.estad-barra { height: 7px; border-radius: 999px; background: var(--superficie-2); margin-top: .2rem; overflow: hidden; }
.estad-barra span { display: block; height: 100%; border-radius: 999px; background: var(--acento); }
.estad-tabla-envoltura { overflow-x: auto; margin-bottom: .6rem; -webkit-overflow-scrolling: touch; }
.estad-tabla { width: 100%; border-collapse: collapse; font-size: .8rem; }
.estad-tabla th { text-align: left; font-weight: 600; color: var(--texto-suave); white-space: nowrap;
  padding: .35rem .45rem; border-bottom: 1px solid var(--borde); }
.estad-tabla td { padding: .4rem .45rem; border-bottom: 1px solid var(--borde);
  font-variant-numeric: tabular-nums; vertical-align: top; }
.estad-tabla td:first-child { min-width: 7rem; }
.estad-tabla tr.clickeable { cursor: pointer; }
.estad-tabla tr.clickeable:hover td { background: var(--superficie-2); }
/* El chat de un viaje, en la ficha del panel */
.chat-admin { display: grid; gap: .35rem; margin-top: .4rem; }
.chat-admin-msj { border-radius: 10px; padding: .45rem .6rem; background: var(--superficie-2); font-size: .84rem; max-width: 92%; }
.chat-admin-msj.del-fletero { justify-self: end; background: color-mix(in srgb, var(--acento) 16%, var(--superficie)); }
.chat-admin-msj small { display: block; font-size: .7rem; color: var(--texto-suave); margin-bottom: .15rem; }
.chat-admin-msj p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-admin-msj img { display: block; max-width: 180px; border-radius: 8px; margin-top: .3rem; cursor: zoom-in; }

/* --- licencia y póliza del fletero (app-10) ---------------------------------- */
.pdf-previa {
  display: flex; align-items: center; gap: .6rem; padding: .9rem 2.6rem .9rem .9rem;
  border: 1px solid var(--borde); border-radius: 11px; background: var(--superficie-2);
  font-size: .88rem; overflow-wrap: anywhere;
}
.pdf-previa span { font-size: 1.6rem; }
.doc-vence { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; }
.doc-vence .campo { flex: 1 1 10rem; margin: 0; }
.doc-vence .chip { margin-bottom: .55rem; }
.estado-fletero h3 { margin-bottom: .3rem; }

/* --- chat antes de ofertar (app-12) ----------------------------------------- */
.chat-bloque { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--borde); }
.chat-bloque .chat { max-height: 320px; }

/* --- hasta cuántos ayudantes (2026-10-03) ------------------------------------- */
/* "Hasta" arriba y "ayudantes" abajo del contador: en una sola fila, el
   contador (dos botones de 3rem + el campo de 5,5rem) pasaba el ancho que tenía
   y el "+" tapaba "ayudantes" en el celular. */
.ayudantes-cuantos {
  display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
  margin: .7rem 0 .2rem; font-weight: 600;
}
.ayudantes-cuantos .contador { width: 100%; max-width: 14rem; }

/* --- los enlaces legales al pie (app-18) ------------------------------------ */
/* Términos, Privacidad, Botón de baja y Botón de arrepentimiento: la ley pide
   los dos botones a la vista. */
.pie-legal {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1rem;
  margin: 1.4rem 0 .6rem; font-size: .8rem;
}
.pie-legal a { color: var(--texto-suave); text-decoration: underline; }
.check-texto a { color: inherit; text-decoration: underline; }

/* --- la cámara, opaca (pedido de Edu, 2026-10-04) --------------------------- */
/* Con el fondo semitransparente se veía la pantalla de atrás y el "Cancelar"
   se perdía entre los textos. Fondo sólido, y el "Cancelar" con un gris
   azulado suave para que se distinga sin competir con "Sacar la foto". */
.modal-fondo.camara-fondo { background: #0b1220; }
.btn.btn-camara-cancelar { background: #334155; border-color: #475569; color: #f1f5f9; }
.btn.btn-camara-cancelar:hover { background: #3b4a61; }

/* --- "Hay una versión nueva" (app.js, vigilarVersion) ------------------------ */
.aviso-version {
  position: fixed; z-index: 65; left: 1rem; right: 1rem;
  bottom: calc(var(--alto-nav) + env(safe-area-inset-bottom) + .75rem);
  max-width: 520px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .7rem .9rem; border-radius: var(--radio);
  background: var(--superficie); box-shadow: var(--sombra); border: 1px solid var(--borde, #e2e8f0);
  font-size: .92rem; font-weight: 600;
}
.aviso-version .btn { flex: 0 0 auto; }

/* --- "Pide factura" (pedido de Edu, 2026-10-05) ----------------------------- */
/* Azul, para que no se confunda con los chips naranjas del pedido. */
:root { --factura: #1d4ed8; --factura-fondo: #dbeafe; --factura-borde: #93c5fd; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --factura: #93c5fd; --factura-fondo: #172554; --factura-borde: #1e40af; }
}
:root[data-theme="dark"] { --factura: #93c5fd; --factura-fondo: #172554; --factura-borde: #1e40af; }
.chip.chip-factura {
  background: var(--factura-fondo); color: var(--factura);
  border: 1px solid var(--factura-borde); font-weight: 700;
}
.aviso-factura {
  display: flex; gap: .7rem; align-items: flex-start;
  margin: 0 0 .9rem; padding: .8rem .9rem; border-radius: var(--radio);
  background: var(--factura-fondo); border: 2px solid var(--factura-borde); color: var(--factura);
}
.aviso-factura > span { font-size: 1.5rem; line-height: 1; }
.aviso-factura b { display: block; font-size: 1rem; }
.aviso-factura small { display: block; margin-top: .15rem; font-size: .85rem; opacity: .9; }
.aviso-factura .check { margin-top: .5rem; color: var(--texto); }

/* --- Un cobro de la suscripción que Mercado Pago no pudo hacer (app-33) ------- */
.aviso-pago {
  margin: .6rem 0 .9rem; padding: .8rem .9rem; border-radius: var(--radio);
  border: 2px solid var(--alerta); color: var(--texto);
  background: color-mix(in srgb, var(--alerta) 12%, transparent);
}
.aviso-pago b { display: block; color: var(--alerta); }
.aviso-pago p { margin: .3rem 0 0; font-size: .92rem; }
.aviso-pago .acciones { margin-top: .7rem; }

/* El control anti-robots del login (Turnstile): casi siempre no se ve */
.anti-robots:not(:empty) { margin: .4rem 0 .6rem; }

/* --- El acceso de cada punta en la ficha del pedido (2026-10-05) -------------- */
/* Puede ser largo ("Depto B, 3° piso, sin ascensor..."): que corte la línea en
   vez de salirse de la tarjeta en el celular. */
.chip.chip-acceso { white-space: normal; text-align: left; }
.chip.chip-acceso.chip-alerta { font-weight: 700; }
.ficha-valor.resaltado { color: var(--alerta); font-weight: 700; }

/* Un chip con una frase entera: que corte la línea en vez de salirse de la tarjeta */
.chip.chip-largo { white-space: normal; text-align: left; }

/* --- Panel de administración a lo ancho + gráficos (2026-10-06) --------------- */
/* En el celular no cambia nada. Desde 900 px (compu o notebook) el panel pasa de
   620 px a casi todo el ancho, con las cajitas de números en más columnas y las
   solapas en una sola fila que se corta en renglones en vez de correrse. El resto
   de la app sigue angosta a propósito: es lo que ve el cliente y el fletero. */
@media (min-width: 900px) {
  #contenido.contenido-ancho { max-width: 1240px; padding: 1.25rem 1.75rem; }
  .contenido-ancho .chips-fila { flex-wrap: wrap; overflow-x: visible; }
  .contenido-ancho .resumen-cobros { grid-template-columns: repeat(4, 1fr); }
  .contenido-ancho .estad-tabla { font-size: .86rem; }
}
@media (min-width: 1400px) {
  .contenido-ancho .resumen-cobros { grid-template-columns: repeat(6, 1fr); }
}

/* Colores de las series: los cuatro primeros de la paleta de dataviz, en orden fijo
   (azul, naranja, turquesa, amarillo), con su variante para el modo oscuro. */
.grafico, .graficos {
  --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #eda100;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .grafico, :root:not([data-theme="light"]) .graficos {
    --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500;
  }
}
:root[data-theme="dark"] .grafico, :root[data-theme="dark"] .graficos {
  --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500;
}

.graficos-grilla { display: grid; grid-template-columns: 1fr; gap: .8rem; margin-bottom: .8rem; }
@media (min-width: 900px) { .graficos-grilla { grid-template-columns: 1fr 1fr; } }
.grafico { margin-bottom: 0; min-width: 0; }
.grafico-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .6rem; }
.grafico-cabecera h3 { margin: 0; font-size: 1rem; }
.grafico-controles { display: flex; flex-wrap: wrap; gap: .4rem; }
.grafico-segmentado { display: inline-flex; border: 1px solid var(--borde); border-radius: 9px; overflow: hidden; }
.grafico-seg {
  font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
  padding: .28rem .6rem; color: var(--texto-suave); background: transparent; border: 0;
}
.grafico-tabla-boton { border: 1px solid var(--borde); border-radius: 9px; }
.grafico-seg.elegido { background: var(--superficie-2); color: var(--texto); }
.grafico-seg:hover { color: var(--texto); }
.grafico-leyenda { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin: .5rem 0 .2rem; font-size: .82rem; color: var(--texto-suave); }
.grafico-ref { display: inline-flex; align-items: center; gap: .35rem; }
.grafico-ref b { color: var(--texto); font-variant-numeric: tabular-nums; }
.grafico-clave { display: inline-block; width: 14px; height: 3px; border-radius: 2px; flex: 0 0 auto; }
.grafico-cuerpo { position: relative; min-height: 60px; }
.grafico-svg { position: relative; }
.grafico-svg svg { display: block; max-width: 100%; touch-action: pan-y; }
.grafico-svg svg:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
.g-grilla { stroke: var(--borde); stroke-width: 1; }
.g-base { stroke: var(--texto-suave); stroke-opacity: .45; }
.g-eje { fill: var(--texto-suave); font-size: 11px; }
.g-linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-cruz { stroke: var(--texto-suave); stroke-width: 1; stroke-dasharray: 3 3; }
.g-punto { stroke: var(--superficie); stroke-width: 2; }
.g-captura { fill: transparent; cursor: crosshair; }
.grafico-tip {
  position: absolute; z-index: 3; pointer-events: none; min-width: 9rem;
  padding: .45rem .6rem; border-radius: 10px; font-size: .8rem;
  background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra);
}
.grafico-tip-fecha { font-weight: 600; margin-bottom: .2rem; }
.grafico-tip-fila { display: flex; align-items: center; gap: .4rem; }
.grafico-tip-fila b { font-variant-numeric: tabular-nums; }
.grafico-tip-fila span { color: var(--texto-suave); }
.grafico-ayuda { margin: .35rem 0 0; }
.grafico-vacio { text-align: center; padding: 2rem 0; margin: 0; }
.grafico-tabla { max-height: 260px; overflow-y: auto; }

/* --- Embudo y mapa de demanda del panel (2026-10-06) ------------------------- */
/* Pasos del embudo: un solo azul, de claro a oscuro (ordinal, validado en dataviz) */
.embudo {
  --paso-1: #86b6ef; --paso-2: #5598e7; --paso-3: #256abf; --paso-4: #104281;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .embudo { --paso-1: #6da7ec; --paso-2: #3987e5; --paso-3: #256abf; --paso-4: #1c5cab; }
}
:root[data-theme="dark"] .embudo { --paso-1: #6da7ec; --paso-2: #3987e5; --paso-3: #256abf; --paso-4: #1c5cab; }
.embudo-fila { margin-bottom: .6rem; }
.embudo-texto { display: flex; justify-content: space-between; gap: .5rem; font-size: .9rem; }
.embudo-texto b { font-variant-numeric: tabular-nums; }
.embudo-barra { height: 14px; border-radius: 4px; background: var(--superficie-2); margin: .2rem 0; overflow: hidden; }
.embudo-barra span { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.embudo-paso-1 { background: var(--paso-1); } .embudo-paso-2 { background: var(--paso-2); }
.embudo-paso-3 { background: var(--paso-3); } .embudo-paso-4 { background: var(--paso-4); }
.embudo-fila small { color: var(--texto-suave); font-size: .76rem; }

.mapa-demanda-grilla { display: grid; grid-template-columns: 1fr; gap: .8rem; }
@media (min-width: 900px) { .mapa-demanda-grilla { grid-template-columns: 2fr 1fr; } }
.mapa-demanda { border-radius: var(--radio); border: 1px solid var(--borde); min-width: 0; }
.mapa-demanda-lista h3 { margin: 0 0 .4rem; font-size: 1rem; }
.mapa-demanda-fila {
  display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: .5rem .65rem; margin-bottom: .4rem; border-radius: 10px; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borde);
}
.mapa-demanda-fila:hover { border-color: var(--acento); }
.mapa-demanda-fila span { display: block; font-size: .8rem; color: var(--texto-suave); }
.mapa-leyenda { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: .6rem 0 .2rem; font-size: .8rem; color: var(--texto-suave); }
.mapa-leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.mapa-punto { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--superficie); box-shadow: 0 0 0 1px var(--borde); }
.mapa-zona { width: 16px; height: 16px; border-radius: 50%; background: rgba(100, 116, 139, .18); border: 1px solid rgba(100, 116, 139, .5); }

/* --- Localidades habilitadas (app-43, 2026-10-11) ----------------------------- */
/* El aviso para quien todavía no tiene servicio en su zona */
.fuera-de-zona { text-align: center; padding: 1.6rem 1.1rem; }
.fuera-de-zona h2 { margin: .4rem 0 .6rem; font-size: 1.25rem; }
.fuera-de-zona p { margin: 0 0 .6rem; }
.fuera-de-zona .campo-ayuda { font-size: .82rem; }
.fuera-de-zona-icono { font-size: 2.6rem; line-height: 1; }
/* El panel: una pastilla por localidad (las que cubre cada fletero, app-53) */
.localidades-lista { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 .2rem; }
.localidad-chip {
  display: inline-flex; align-items: center; gap: .15rem;
  background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 999px;
  padding: .2rem .2rem .2rem .7rem; font-size: .85rem; color: var(--texto);
}
/* El interruptor de las localidades (app-44): prendido en verde, apagado en ámbar */
.localidades-estado {
  border: 1px solid var(--ok); border-radius: 10px; padding: .6rem .75rem; margin: .4rem 0 .2rem;
  background: rgba(21, 128, 61, .07); background: color-mix(in srgb, var(--ok) 7%, transparent);
}
.localidades-estado.localidades-apagado {
  border-color: var(--alerta);
  background: rgba(180, 83, 9, .08); background: color-mix(in srgb, var(--alerta) 8%, transparent);
}
.localidades-estado b { display: block; }
.localidades-estado small { display: block; color: var(--texto-suave); font-size: .8rem; margin-top: .2rem; }
.localidades-estado .acciones { margin-top: .5rem; }
/* "Para avisar por correo" en Registros por localidad */
.para-avisar-fila {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  padding: .45rem 0; border-top: 1px solid var(--borde);
}
/* Provincia y localidad de todo el país (app-53, 2026-10-20): la lista se
   recorre o se filtra escribiendo; una localidad por renglón, con su partido */
.selector-localidad { display: grid; gap: .1rem; }
.lista-localidades {
  max-height: 17rem; overflow-y: auto; overscroll-behavior: contain; margin-top: .4rem;
  border: 1px solid var(--borde); border-radius: 11px; background: var(--superficie);
}
.lista-localidades button {
  display: block; width: 100%; text-align: left; font: inherit; color: var(--texto); cursor: pointer;
  background: transparent; border: 0; border-bottom: 1px solid var(--borde); padding: .6rem .75rem;
}
.lista-localidades button:last-child { border-bottom: 0; }
.lista-localidades button:hover,
.lista-localidades button:focus-visible { background: var(--superficie-2); outline: none; }
.lista-localidades button small { color: var(--texto-suave); font-size: .78rem; margin-left: .4rem; }
.lista-localidades-nota { margin: 0; padding: .6rem .75rem; font-size: .8rem; color: var(--texto-suave); }
.localidad-elegida {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  border: 1px solid var(--ok); border-radius: 11px; padding: .55rem .75rem; margin-top: .5rem;
  background: rgba(21, 128, 61, .07); background: color-mix(in srgb, var(--ok) 7%, transparent);
}
.localidad-elegida small { display: block; color: var(--texto-suave); font-size: .78rem; }
/* Panel: los fleteros que habilitan localidades para clientes */
.cobertura-fletero { padding: .55rem 0; border-top: 1px solid var(--borde); }
.cobertura-fletero small { display: block; color: var(--texto-suave); font-size: .8rem; }
.cobertura-fletero .localidades-lista { margin: .45rem 0 0; }
.cobertura-fletero .localidad-chip { padding: .15rem .65rem; font-size: .8rem; }

/* --- Descargá la app (instalar.js, 2026-10-17) ------------------------------ */
.instalar-pasos { margin: .4rem 0 0; padding-left: 1.3rem; display: grid; gap: .45rem; font-size: .92rem; }
.instalar-pasos b { color: var(--texto); }
.instalar-boton { font-size: 1.05rem; padding-top: .9rem; padding-bottom: .9rem; margin-top: .4rem; }
.instalar-listo {
  display: grid; gap: .2rem; margin-top: .5rem; padding: .6rem .75rem; border-radius: 10px;
  border: 1px solid var(--ok); font-size: .9rem;
  background: rgba(21, 128, 61, .08); background: color-mix(in srgb, var(--ok) 8%, transparent);
}
.instalar-listo b { color: var(--ok); }
.instalar-otros summary { cursor: pointer; font-weight: 600; }
.instalar-otro { margin-top: .9rem; }
.instalar-otro h3 { font-size: .95rem; margin: 0; }
.instalar-acceso { display: flex; align-items: center; gap: .7rem; text-align: left; }
.instalar-acceso > div { flex: 1 1 auto; min-width: 0; display: grid; gap: .1rem; font-size: .85rem; }
.instalar-acceso > div span { color: var(--texto-suave); }
.instalar-acceso .btn { flex: 0 0 auto; }
.instalar-icono { font-size: 1.6rem; line-height: 1; }

/* Mi cuenta → "Personas que bloqueaste" (app-58) */
.fila-bloqueado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .4rem 0;
  border-top: 1px solid var(--borde, #e2e8f0);
}
.fila-bloqueado:first-child { border-top: 0; }