/* Creado por Carlos Eduardo Morales Segura - Derechos reservados */
:root {
  --negro: #141414;
  --oro: #c5a059;
  --oro-osc: #80622a;   /* texto dorado: 4,5:1 o más sobre fondo, tarjeta y chips */
  --fondo: #f5f3ef;
  --tarjeta: #ffffff;
  --texto: #1d1d1d;
  --suave: #6b665e;
  --linea: #e3ded4;
  --verde: #276b43;
  --verde-f: #e5f3ea;
  --ambar: #945800;
  --ambar-f: #fff1d9;
  --rojo: #b3261e;
  --rojo-f: #fbe6e4;
  --gris-f: #ecebe8;
  --radio: 12px;
  --nav-alto: 64px;
  --sombra: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
  font-family: "Roboto Condensed", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--texto);
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fondo);
  min-height: 100vh;
  padding-bottom: calc(var(--nav-alto) + env(safe-area-inset-bottom));
  font-size: 1rem;
  line-height: 1.4;
  overscroll-behavior-y: contain;   /* sin el "deslizar para recargar" del navegador: la app tiene el suyo */
}
body.sin-nav { padding-bottom: env(safe-area-inset-bottom); }
h1, h2, h3, .barra-titulo, .logo { font-family: Oswald, "Arial Narrow", sans-serif; font-weight: 500; letter-spacing: .02em; }
h1 { font-size: 1.5rem; margin: 0 0 4px; }
h2 { font-size: 1.15rem; margin: 0 0 10px; text-transform: uppercase; color: var(--negro); }
h3 { font-size: 1rem; margin: 0 0 6px; }
a { color: var(--oro-osc); }
[hidden] { display: none !important; }

/* ---------- barra superior ---------- */
.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--negro); color: #fff;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
}
.barra-marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo { height: 13px; width: auto; display: block; flex: none; }
.barra-titulo { font-size: .95rem; color: var(--oro); padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .25); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.estado-sync {
  border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff;
  border-radius: 999px; padding: 4px 10px; font: inherit; font-size: .8rem;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.estado-sync::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #6fcf97; }
.estado-sync.pend::before { background: var(--oro); }
.estado-sync.off::before { background: #999; }
.estado-sync.err::before { background: #ff6b6b; }

/* ---------- contenido ---------- */
.vista { max-width: 720px; margin: 0 auto; padding: 16px; outline: none; }
.cargando { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 48px 0; color: var(--suave); }
.giro {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--linea); border-top-color: var(--oro-osc);
  animation: girar .8s linear infinite; display: inline-block; flex: none;
}
@keyframes girar { to { transform: rotate(360deg); } }

.tarjeta {
  background: var(--tarjeta); border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 16px; margin-bottom: 14px;
}
.tarjeta.destacada { border-left: 4px solid var(--oro); }
.sub { color: var(--suave); font-size: .9rem; }
.fila { display: flex; align-items: center; gap: 10px; }
.fila.entre { justify-content: space-between; }
.fila.envolver { flex-wrap: wrap; }
.pila > * + * { margin-top: 10px; }
.vacio { text-align: center; color: var(--suave); padding: 32px 12px; }
.separador { height: 1px; background: var(--linea); margin: 14px 0; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 18px; border-radius: 10px; border: 1px solid transparent;
  font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  background: var(--negro); color: #fff; -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn.oro { background: var(--oro); color: var(--negro); }
.btn.sec { background: var(--tarjeta); color: var(--negro); border-color: var(--linea); }
.btn.peligro { background: var(--tarjeta); color: var(--rojo); border-color: #efc5c1; }
.btn.chico { min-height: 42px; padding: 6px 12px; font-size: .9rem; }
.btn.bloque { width: 100%; }
.btn.grande { min-height: 58px; font-size: 1.1rem; }
.btn-texto { background: none; border: 0; color: var(--oro-osc); font: inherit; font-weight: 700; padding: 8px; cursor: pointer; min-height: 44px; }

/* ---------- formularios ---------- */
label.campo { display: block; margin-bottom: 12px; }
label.campo > span { display: block; font-size: .85rem; color: var(--suave); margin-bottom: 4px; font-weight: 500; }
input[type=text], input[type=password], input[type=search], input[type=number], input[type=date], input[type=time], select, textarea {
  width: 100%; font: inherit; font-size: 16px; /* 16px evita el zoom de iOS */
  padding: 11px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--tarjeta); color: var(--texto);
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--oro); outline-offset: 0; border-color: var(--oro); }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.check input { width: 22px; height: 22px; accent-color: var(--oro-osc); flex: none; }
.filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filtros label.campo { margin-bottom: 0; }

/* ---------- etiquetas ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 999px;
  padding: 3px 10px; font-size: .8rem; font-weight: 700; background: var(--gris-f); color: var(--suave); white-space: nowrap;
}
.chip.ok { background: var(--verde-f); color: var(--verde); }
.chip.alerta { background: var(--ambar-f); color: var(--ambar); }
.chip.mal { background: var(--rojo-f); color: var(--rojo); }
.chip.oro { background: #f4ead6; color: var(--oro-osc); }

/* ---------- lista de visitas / tiendas ---------- */
.lista { list-style: none; margin: 0; padding: 0; }
.item {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit; text-decoration: none;
  background: var(--tarjeta); border: 0; border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
}
.item:active { background: #faf8f4; }
.item-tit { font-weight: 700; font-size: 1.05rem; }
.item .fila { margin-top: 4px; }
.buscador { position: sticky; top: 58px; z-index: 5; padding: 6px 0 10px; background: var(--fondo); }

/* ---------- tareas ---------- */
.tareas .check { border-bottom: 1px solid var(--linea); padding: 4px 0; }
.tareas .check:last-child { border-bottom: 0; }
.tareas .cat { font-size: .75rem; text-transform: uppercase; color: var(--suave); margin: 12px 0 2px; letter-spacing: .05em; }
.grupo { border: 1px solid var(--linea); border-radius: 10px; margin-bottom: 8px; background: var(--tarjeta); }
.grupo summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 48px; padding: 8px 14px; cursor: pointer; list-style: none; font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
.grupo summary::-webkit-details-marker { display: none; }
.grupo summary::after { content: "▾"; color: var(--suave); transition: transform .15s; margin-left: 4px; }
.grupo[open] summary::after { transform: rotate(180deg); }
.grupo summary > span:first-child { flex: 1; }
.grupo .cuenta { font-size: .8rem; font-weight: 700; color: var(--suave); background: var(--gris-f); border-radius: 999px; padding: 2px 9px; }
.grupo[open] summary { border-bottom: 1px solid var(--linea); }
.grupo .check { padding: 4px 14px; }
.tarjeta > .cat, details > .cat { font-size: .75rem; text-transform: uppercase; color: var(--suave); margin: 12px 0 2px; letter-spacing: .05em; }
.tarjeta > h2 + .cat { margin-top: 0; }
.tarea-ver { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--linea); }
.tarea-ver:last-child { border-bottom: 0; }
.tarea-ver .marca { font-weight: 700; width: 18px; flex: none; }
.tarea-ver.hecha .marca { color: var(--verde); }
.tarea-ver.pend { color: var(--suave); }
.tarea-ver.pend .marca { color: var(--rojo); }

/* ---------- fotos ---------- */
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.foto {
  position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--gris-f);
  border: 0; padding: 0; cursor: pointer;
}
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto .quitar {
  position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%;
  border: 0; background: rgba(0, 0, 0, .65); color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
}
.foto .pend {
  position: absolute; left: 4px; bottom: 4px; background: rgba(0, 0, 0, .65); color: #fff;
  font-size: .7rem; padding: 2px 6px; border-radius: 6px;
}
.foto-nueva {
  aspect-ratio: 1; border-radius: 10px; border: 2px dashed var(--linea); background: var(--tarjeta);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: inherit; font-size: .85rem; color: var(--suave); cursor: pointer;
}
.foto-nueva b { font-size: 1.6rem; line-height: 1; color: var(--oro-osc); }
.etapa-tit { font-size: .85rem; font-weight: 700; margin: 12px 0 6px; text-transform: uppercase; color: var(--suave); }
.etapa-tit:first-child { margin-top: 0; }

/* ---------- firma ---------- */
.firma-caja { position: relative; border: 1px solid var(--linea); border-radius: 10px; background: #fff; touch-action: none; }
.firma-caja canvas { display: block; width: 100%; height: 200px; border-radius: 10px; }
.firma-caja .linea-firma { position: absolute; left: 16px; right: 16px; bottom: 44px; border-bottom: 1px dashed #c9c2b4; pointer-events: none; }
.firma-caja .pista { position: absolute; left: 16px; bottom: 18px; font-size: .8rem; color: #7d766a; pointer-events: none; }
.firma-img { max-width: 100%; max-height: 140px; background: #fff; border: 1px solid var(--linea); border-radius: 8px; }

/* ---------- datos clave ---------- */
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dato { background: var(--fondo); border-radius: 10px; padding: 10px 12px; }
.dato b { display: block; font-size: 1.15rem; font-family: Oswald, sans-serif; font-weight: 500; }
.dato span { font-size: .8rem; color: var(--suave); }
.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; margin-bottom: 14px; }
.resumen .dato { background: var(--tarjeta); box-shadow: var(--sombra); }

/* ---------- estrellas ---------- */
.estrellas { display: flex; gap: 4px; }
.estrellas button { background: none; border: 0; font-size: 2.1rem; line-height: 1; color: #d8d2c6; cursor: pointer; padding: 2px; }
.estrellas button.on { color: var(--oro); }
.estrellas-ver { color: var(--oro); letter-spacing: 1px; }
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opcion {
  border: 2px solid var(--linea); border-radius: 10px; padding: 12px; background: var(--tarjeta); font: inherit; font-weight: 700; cursor: pointer;
}
.opcion.on.ok { border-color: var(--verde); background: var(--verde-f); color: var(--verde); }
.opcion.on.mal { border-color: var(--ambar); background: var(--ambar-f); color: var(--ambar); }

/* ---------- navegación inferior ---------- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; background: var(--tarjeta); border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: var(--nav-alto); text-decoration: none; color: var(--suave); font-size: .78rem; font-weight: 700;
}
.nav a svg { width: 24px; height: 24px; }
.nav a.activo { color: var(--negro); }
.nav a.activo svg { color: var(--oro-osc); }

/* ---------- aviso y modal ---------- */
.aviso {
  position: fixed; left: 16px; right: 16px; bottom: calc(var(--nav-alto) + 16px + env(safe-area-inset-bottom)); z-index: 40;
  max-width: 520px; margin: 0 auto; background: var(--negro); color: #fff; border-radius: 10px; padding: 12px 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25); opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.aviso.ver { opacity: 1; transform: none; }
.aviso.error { background: var(--rojo); }
.modal-fondo {
  position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .5);
  display: flex; align-items: flex-end; justify-content: center;
}
.modal {
  background: var(--fondo); width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
  border-radius: 16px 16px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
}
.modal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.modal-cab h2 { margin: 0; }
.cerrar-x { background: none; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--suave); padding: 4px 8px; min-width: 44px; min-height: 44px; }
.visor { position: fixed; inset: 0; z-index: 50; background: #000; display: flex; align-items: center; justify-content: center; }
.visor img { max-width: 100%; max-height: 100%; object-fit: contain; }
.visor .cerrar-x { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 10px; color: #fff; }
.visor .pie { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; color: #ddd; font-size: .9rem; }

/* ---------- ingreso ---------- */
.ingreso { max-width: 380px; margin: 8vh auto 0; }
.ingreso .logo-grande { text-align: center; background: var(--negro); border-radius: 16px; padding: 30px 24px 22px; margin-bottom: 18px; }
.ingreso .logo-grande img { width: 100%; max-width: 280px; height: auto; display: block; margin: 0 auto; }
.ingreso .logo-grande small { display: block; color: var(--oro); font-family: Oswald, sans-serif; font-size: .9rem; letter-spacing: .25em; text-transform: uppercase; margin-top: 14px; }

/* ---------- inventario ---------- */
.placa-tag {
  display: inline-block; font-family: Oswald, "Arial Narrow", sans-serif; font-size: 1.05rem; letter-spacing: .06em;
  background: var(--negro); color: #fff; border-radius: 6px; padding: 3px 10px; margin: 0 0 10px;
}
.acciones-eq { display: flex; flex-wrap: wrap; gap: 8px; }
.movs { list-style: none; margin: 12px 0 0; padding: 0; }
.movs li { padding: 10px 0; border-top: 1px solid var(--linea); }
.movs li:first-child { border-top: 0; }
.movs a { color: var(--texto); text-decoration: none; }
.inv { list-style: none; padding: 0; margin: 0; }
.inv-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; margin-bottom: 8px; }
.inv-fila.hecho { opacity: .75; }
.inv-botones { display: flex; gap: 6px; flex: none; }
.inv-botones .btn { min-width: 44px; }
.foto-serie { display: block; max-width: 100%; max-height: 160px; margin-top: 8px; border-radius: 8px; border: 1px solid var(--linea); }
.foto-serie-btn { display: block; width: 100%; aspect-ratio: auto; height: 160px; margin-top: 12px; }
.foto-serie-btn img { object-fit: contain; background: #fff; }

.placa-prev { background: var(--gris-f); border-radius: 10px; padding: 12px; margin-bottom: 14px; }
/* Etiqueta en mm (igual que al imprimir); en pantalla se agranda para verla */
.placa-imp { position: relative; overflow: hidden; }
.etq { position: absolute; left: 0; top: 0; }
.etq-cont { position: absolute; }
.etq-cont svg { display: block; width: 100%; height: 100%; }
.prev-etq { display: flex; justify-content: center; padding: 16px 0; overflow: hidden; }
.prev-etq .placa-imp { background: #fff; outline: 1px dashed #9a958b; zoom: 1.6; }
.prev-etq .etq-cont { outline: 1px solid rgba(197, 160, 89, .6); }
.guia { margin: 0; padding-left: 20px; }
.guia li { margin-bottom: 8px; }
.placa-prev svg { display: block; width: 100%; height: auto; background: #fff; border-radius: 6px; box-shadow: var(--sombra); }

/* ---------- escáner ---------- */
.escaner { position: fixed; inset: 0; z-index: 60; background: #000; display: flex; flex-direction: column; }
.escaner-cab { display: flex; align-items: center; justify-content: space-between; color: #fff; padding: calc(8px + env(safe-area-inset-top)) 12px 8px 16px; }
.escaner-cab .cerrar-x { color: #fff; }
.escaner-video { position: relative; flex: 1; overflow: hidden; }
.escaner-video video { width: 100%; height: 100%; object-fit: cover; }
.escaner-marco {
  position: absolute; left: 50%; top: 45%; width: min(70vw, 280px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 3px solid var(--oro); border-radius: 16px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45);
}
.escaner-msg { position: absolute; left: 16px; right: 16px; bottom: 18px; text-align: center; color: #fff; font-weight: 700; text-shadow: 0 1px 3px #000; }
.escaner-manual { display: flex; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #111; }
.escaner-manual input { flex: 1; }

/* ---------- impresión de placas ---------- */
#impresion { display: none; }
@media print {
  body.imprimiendo > *:not(#impresion) { display: none !important; }
  body.imprimiendo { padding: 0; background: #fff; }
  body.imprimiendo #impresion { display: block; }
  .placa-imp { overflow: hidden; page-break-after: always; break-after: page; }
  .placa-imp:last-child { page-break-after: auto; break-after: auto; }
  .placa-imp svg { display: block; width: 100%; height: 100%; }
}

@media (min-width: 720px) {
  .vista { padding: 24px; }
  .modal-fondo { align-items: center; }
  .modal { border-radius: 16px; }
}

/* ---------- selector Todos / Por tienda ---------- */
.segmento { display: flex; background: var(--gris-f); border-radius: 10px; padding: 3px; margin-bottom: 14px; }
.segmento a { flex: 1; text-align: center; padding: 9px; border-radius: 8px; text-decoration: none; color: var(--suave); font-weight: 700; }
.segmento a.activo { background: var(--tarjeta); color: var(--negro); box-shadow: var(--sombra); }

.pie-version { text-align: center; line-height: 1.6; color: var(--suave); font-size: .85rem; max-width: 720px; margin: 0 auto; padding: 8px 16px 20px; }
/* En pantallas de impresión de placas no debe salir */
body.imprimiendo .pie-version { display: none; }

input[readonly] { background: var(--gris-f); color: var(--suave); }

/* ---------- cuentas de tienda ---------- */
.cuadricula { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cuadricula .tarjeta { margin: 0; }
.cuenta-tienda h3 { font-size: 1.1rem; margin-bottom: 4px; }
.filtros-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip-filtro { border: 1px solid var(--linea); background: var(--tarjeta); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .85rem; font-weight: 700; color: var(--suave); cursor: pointer; }
.chip-filtro.activo { background: var(--negro); border-color: var(--negro); color: #fff; }

/* ---------- nueva visita: 4 botones de tienda por fila ---------- */
#tiendas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#tiendas li { display: contents; }
#tiendas .item { width: 100%; margin: 0; padding: 8px 4px; min-height: 52px; display: flex; align-items: center; justify-content: center; text-align: center; }
#tiendas .item .fila { margin: 0; gap: 3px; flex-direction: column; justify-content: center; }
#tiendas .item-tit { font-size: .82rem; line-height: 1.15; overflow-wrap: anywhere; }
#tiendas .item .chip { font-size: .65rem; padding: 1px 6px; }
#tiendas .vacio { grid-column: 1 / -1; }

/* Celulares angostos: un poco menos de logo y de espacios para que quepan
   títulos largos como "Configuración" junto a la etiqueta de envío */
@media (max-width: 420px) {
  .barra { gap: 6px; padding-left: 12px; padding-right: 12px; }
  .barra-marca { gap: 8px; }
  .logo { height: 11px; }
  .barra-titulo { padding-left: 8px; letter-spacing: 0; }
  .estado-sync { padding: 4px 8px; }
}

/* inicio: resumen, última visita por tienda y calificaciones recientes */
.resumen-inicio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.resumen-inicio .dato b { font-size: 1.05rem; white-space: nowrap; }
.lista-ultimas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
.lista-ultimas .item { padding: 8px 10px; }
.lista-ultimas .item .fila { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 0; }
.lista-ultimas .item-tit { overflow-wrap: anywhere; }
.comentario-inicio { font-style: italic; margin: 4px 0 2px; overflow-wrap: anywhere; }
.h2-dato { font-family: 'Roboto Condensed', sans-serif; font-size: .8rem; font-weight: 500; color: var(--suave); text-transform: none; letter-spacing: 0; margin-left: 4px; }
.h3-inicio { font-size: .9rem; margin: 10px 0 6px; color: var(--suave); }
.aviso-inicio { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 500; border-left: 4px solid var(--ambar); }
.aviso-inicio.mal { border-left-color: var(--rojo); }
.aviso-inicio .flecha { color: var(--suave); font-size: 1.3rem; }
#diasAnteriores h2 { margin-top: 14px; }
.resumen-inicio.de-a-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* inicio: accesos directos */
.accesos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));   /* dos por fila: más grandes para el dedo y caben los nombres largos */ gap: 8px; margin: -6px 0 18px; }
.acceso { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 6px;
  background: var(--tarjeta); border: 0; border-radius: 12px; box-shadow: var(--sombra); color: var(--texto, inherit);
  font: inherit; font-size: .82rem; font-weight: 700; line-height: 1.15; text-align: center; text-decoration: none; cursor: pointer; }
.acceso svg { width: 26px; height: 26px; color: var(--oro-osc); }
.acceso:active { transform: scale(.97); }
.acceso { position: relative; }
.acceso-cuenta { position: absolute; top: 6px; right: 8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--rojo); color: #fff; font-size: .72rem; line-height: 20px; }
#vista > .h3-inicio:first-child { margin-top: 0; }
.acceso-cuenta.neutro { background: var(--negro); }

/* solicitudes de visita: seguimiento */
.linea-sol { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--linea); }
.linea-sol li { position: relative; padding: 0 0 12px 6px; color: var(--suave); }
.linea-sol li::before { content: ''; position: absolute; left: -26px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--linea); }
.linea-sol li.hecho { color: var(--texto); }
.linea-sol li.hecho::before { background: var(--oro); }
.linea-sol li:last-child { padding-bottom: 0; }

/* mapa de visitas */
.mapa-visitas { height: 62vh; min-height: 320px; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); margin-bottom: 14px; background: var(--tarjeta); }
.mapa-visitas .cargando { padding-top: 40px; }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 4px 0 8px; vertical-align: middle; }
.punto:first-child { margin-left: 0; }

/* agenda: calendario del mes */
.calendario { padding: 12px; }
.cal-nav { font-size: 1.6rem; line-height: 1; padding: 0 10px; }
.cal-grilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-sem { margin: 8px 0 4px; text-align: center; font-size: .75rem; font-weight: 700; color: var(--suave); }
.cal-dia { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; min-height: 44px; padding: 5px 0 3px;
  border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: .9rem; color: inherit; cursor: pointer; }
.cal-dia.fuera { color: var(--suave); opacity: .45; }
.cal-dia.hoy span:first-child { font-weight: 700; color: var(--oro-osc); }
.cal-dia.elegido { background: var(--negro); color: #fff; }
.cal-dia.elegido.hoy span:first-child { color: var(--oro); }
.cal-puntos { display: flex; gap: 2px; min-height: 6px; }
.cal-puntos i { width: 6px; height: 6px; border-radius: 50%; background: var(--oro); }
.cal-puntos i.ok { background: var(--verde); }
.cal-puntos i.mal { background: var(--rojo); }

/* notas rápidas de tienda */
.con-nota { color: var(--oro-osc); font-size: .9em; }
.nota-aviso { border-left: 4px solid var(--oro); background: #fbf6ec; }
.nota-aviso .sub { margin: 4px 0 6px; }
.notas-lista { list-style: none; margin: 0; padding: 0; }
.notas-lista li + li { border-top: 1px solid var(--linea); }

/* inicio: títulos de sección de los accesos y ayuda de los números */
.accesos-tit { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); margin: 0 0 6px; }
.accesos-tit + .accesos { margin-top: 0; margin-bottom: 14px; }
.accesos-ayuda { margin: -10px 0 14px; font-size: .75rem; text-align: center; }
.acceso { -webkit-touch-callout: none; user-select: none; }

/* tamaño de letra (Cuenta) */
html.letra-grande { font-size: 112.5%; }
html.letra-muy-grande { font-size: 125%; }

/* sin señal: franja arriba y botones que necesitan conexión en gris */
.sin-senal { position: sticky; top: 0; z-index: 25; background: var(--ambar); color: #fff; font-size: .82rem; font-weight: 700;
  text-align: center; padding: 6px 12px; }
body.sin-red :is(#pedirVisita, #programar, #solAsignar, #solTomar, #solAtender, #solCancelar, #verDias, #activarAvisos,
  #probarAvisos, #invActivar, #enviarYa, #sincronizar, #notaGuardar, a[href="#/mapa"], a[href="#/solicitudes"], a[href="#/ultimas"],
  a[href="#/calificaciones"], a[href="#/en-tienda"]) { opacity: .45; filter: grayscale(1); }

/* deslizar para actualizar */
.refrescar { position: fixed; top: 56px; left: 50%; z-index: 40; transform: translate(-50%, 0); display: flex; align-items: center; gap: 8px;
  background: var(--tarjeta); color: var(--texto); box-shadow: var(--sombra); border-radius: 999px; padding: 8px 14px; font-size: .85rem;
  opacity: 0; pointer-events: none; transition: opacity .15s; }
.refrescar.ver { opacity: 1; }
.refrescar .giro { display: none; }
.refrescar.listo, .refrescar.cargando-ya { color: var(--oro-osc); }
.refrescar.cargando-ya .giro { display: inline-block; width: 14px; height: 14px; }

/* modo oscuro: sigue al celular. La barra ya es negra; la firma, las placas
   y las fotos quedan sobre blanco para que se vean como en papel. */
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #121212;
    --tarjeta: #1e1e1e;
    --texto: #ece8e0;
    --suave: #a9a397;
    --linea: #34312c;
    --oro-osc: #d6b26a;
    --verde: #6fcf97;
    --verde-f: #1d3326;
    --ambar: #e0a03a;
    --ambar-f: #3a2c14;
    --rojo: #ff8a80;
    --rojo-f: #3d1d1b;
    --gris-f: #2a2826;
    --sombra: 0 1px 3px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
  h2 { color: var(--texto); }
  .btn { background: #2c2a27; }
  .btn.oro { background: var(--oro); color: #141414; }
  .btn.sec, .btn.peligro, .chip-filtro, input, select, textarea, .grupo, .nav, .segmento a.activo, .foto-nueva, .opcion { background: var(--tarjeta); color: var(--texto); }
  .btn.peligro { color: var(--rojo); border-color: #5a2a27; }
  .chip.oro { background: #3a3020; color: var(--oro); }
  .item:active { background: #262422; }
  .nota-aviso { background: #2a2418; }
  .cal-dia.elegido { background: var(--oro); color: #141414; }
  .cal-dia.elegido.hoy span:first-child { color: #141414; }
  .chip-filtro.activo { background: var(--oro); border-color: var(--oro); color: #141414; }
  .acceso-cuenta { background: #d93a30; }
  .acceso-cuenta.neutro { background: #4a463f; }
  .nav a.activo { color: var(--texto); }
  .chip.mal { color: #ffb4ab; }
  .sin-senal { color: #141414; }
  .estrellas button { color: #4a463f; }
  .modal { background: var(--tarjeta); color: var(--texto); }
}

/* inicio: buscador general */
.busqueda { position: relative; margin: 4px 0 12px; }
.busqueda-res { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 15; background: var(--tarjeta); border-radius: var(--radio);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18); max-height: 60vh; overflow: auto; padding: 4px 0; }
.busqueda-grupo { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); padding: 8px 14px 2px; }
.busqueda-item { display: block; padding: 8px 14px; text-decoration: none; color: var(--texto); }
.busqueda-item:active, .busqueda-item:hover { background: var(--gris-f); }
.busqueda-item b { display: block; font-weight: 700; }
.busqueda-item b:empty { display: none; }
.busqueda-item span { font-size: .82rem; color: var(--oro-osc); }
.busqueda-vacio { padding: 10px 14px; color: var(--suave); }

/* plantillas de visita */
.pl-tareas { max-height: 45vh; overflow: auto; }

/* configuración: bitácora, errores y novedades */
.bit-item { padding: 10px 14px; }
.pila { white-space: pre-wrap; word-break: break-all; font-size: .72rem; background: var(--gris-f); padding: 8px; border-radius: 8px; max-height: 240px; overflow: auto; }
.novedades { margin: 0 0 16px; padding-left: 20px; }
.novedades li { margin-bottom: 6px; }

/* inicio: lupa junto al saludo (abre el buscador) */
.saludo { align-items: flex-start; gap: 8px; }
.lupa { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--tarjeta);
  box-shadow: var(--sombra); color: var(--oro-osc); cursor: pointer; }
.lupa svg { width: 22px; height: 22px; }
.lupa.activa { background: var(--negro); color: var(--oro); }

/* consumibles */
.consumible { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linea); }
.consumible > span { min-width: 0; }
.consumible .sub { display: block; }
.consumible input { width: 84px; flex: none; text-align: center; }
.consumible.bajo input { border-color: var(--rojo); color: var(--rojo); }
.consumible-ver { padding: 6px 0; border-top: 1px solid var(--linea); }
.consumible-ver.bajo b { color: var(--rojo); }

/* guía de primer ingreso */
.guia-texto { font-size: 1.05rem; line-height: 1.5; margin: 4px 0 18px; min-height: 96px; }
.guia-puntos { display: flex; justify-content: center; gap: 6px; margin-bottom: 14px; }
.guia-puntos i { width: 8px; height: 8px; border-radius: 50%; background: var(--linea); }
.guia-puntos i.activo { background: var(--oro); width: 20px; border-radius: 4px; }

/* foto en la solicitud de visita */
.sol-foto { display: block; max-width: 100%; max-height: 240px; border-radius: 10px; margin-top: 10px; }
.sol-foto-btn { padding: 0; border: 0; background: none; cursor: pointer; }

/* inicio de la tienda: última y próxima visita */
.resumen-tienda { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.resumen-tienda:empty { display: none; }
.resumen-tienda-item { display: flex; flex-direction: column; gap: 3px; padding: 12px; margin-bottom: 10px; text-decoration: none; color: inherit; }
.resumen-tienda-item b { font-size: 1rem; }
.resumen-tienda-item .chip { align-self: flex-start; margin-top: 4px; }

.pref-avisos .check { padding: 6px 0; }

/* ayuda */
.ayuda details { border-top: 1px solid var(--linea); padding: 10px 0; }
.ayuda details:first-child { border-top: 0; padding-top: 0; }
.ayuda summary { font-weight: 700; cursor: pointer; }
.ayuda p { margin: 8px 0 0; color: var(--suave); }

/* integridad del código */
.lista-archivos { margin: 0 0 8px; padding-left: 18px; font-family: ui-monospace, Consolas, monospace; font-size: .8rem; word-break: break-all; }
.lista-archivos.mal li { color: var(--rojo); }
.lista-archivos.alerta li { color: var(--ambar); }

/* para revisar: botón "Marcar revisada" */
.revisar-item { margin-bottom: 10px; }
.revisar-item .item { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.revisada-btn { width: 100%; border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }
.revisada-info { border-left: 4px solid var(--verde); }
.revisada-info .btn-texto { display: block; margin-top: 6px; padding: 0; }

/* cómo llegar (mapa) */
.popup-llegar { display: flex; gap: 6px; margin-top: 6px; }
.popup-btn { font-size: .8rem; padding: 3px 8px; border: 1px solid var(--linea); border-radius: 999px; text-decoration: none; white-space: nowrap; }

/* resumen plegable */
.resumen-tit { all: unset; cursor: pointer; display: inline-flex; align-items: baseline; gap: 6px; font: inherit; text-transform: inherit; color: inherit; }
.resumen-flecha { font-size: .9em; color: var(--suave); }

/* gráfico del resumen: una serie, barras del oro oscuro (contraste ≥ 3:1 con la tarjeta, en claro y oscuro) */
.grafico-seg { margin: 4px 0 8px; }
.grafico-v { padding: 12px 12px 8px; }
.gv-barras { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; height: 150px; align-items: end; }
.gv-col { all: unset; box-sizing: border-box; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; cursor: pointer; padding: 0 4px; border-radius: 8px; }
.gv-col:focus-visible { outline: 2px solid var(--oro-osc); }
.gv-col.elegida { background: var(--gris-f); }
.gv-barra { display: block; width: 70%; max-width: 30px; background: var(--oro-osc); border-radius: 4px 4px 0 0; }
.gv-col.hoy .gv-barra { background: var(--texto); }
.gv-valor { font-size: .78rem; font-weight: 700; min-height: 1em; color: var(--texto); }
.gv-dia { font-size: .72rem; color: var(--suave); text-transform: capitalize; border-top: 1px solid var(--linea); width: 100%; text-align: center; padding-top: 3px; }
.gv-detalle { margin: 8px 0 0; text-align: center; }
.grafico-h { padding: 12px; }
.gh-fila { display: grid; grid-template-columns: minmax(70px, 34%) 1fr 26px; align-items: center; gap: 8px; padding: 4px 0; }
.gh-nombre { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-fila b { text-align: right; font-size: .85rem; }
.gh-pista { display: block; height: 10px; background: var(--gris-f); border-radius: 0 4px 4px 0; }
.gh-pista i { display: block; height: 100%; background: var(--oro-osc); border-radius: 0 4px 4px 0; }

/* ranking de técnicos */
.ranking { list-style: none; margin: 0; padding: 0; }
.ranking .tarjeta { padding: 12px 14px; }
.rk-pos { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gris-f); font-size: .8rem; margin-right: 8px; }
.ranking li:first-child .rk-pos { background: var(--oro); color: #141414; }
.rk-n { font-size: .9rem; white-space: nowrap; }
.rk-pista { margin: 8px 0; }
.rk-datos { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; color: var(--suave); }
.rk-datos b { color: var(--texto); }
.rk-alerta { color: var(--rojo); }
.btn-texto:disabled, .cal-nav:disabled { opacity: .3; cursor: default; }

/* instalar / acerca de la app */
.pasos { margin: 12px 0 0; padding-left: 20px; }
.pasos li { margin-bottom: 6px; }
.qr-app { display: grid; place-items: center; min-height: 180px; margin: 6px auto 4px; }
.qr-app svg { width: 190px; height: 190px; background: #fff; border-radius: 8px; }
.qr-url { text-align: center; font-size: .78rem; color: var(--suave); word-break: break-all; margin: 0 0 12px; }
.ingreso #tarjetaInstalar .tarjeta { margin-top: 14px; }

/* celulares autorizados */
.celular-espera { text-align: center; margin-top: 20px; }
.codigo-celular { font-family: ui-monospace, Consolas, monospace; font-size: 1.8rem; font-weight: 700; letter-spacing: .08em; margin: 0 0 12px; }
.codigo-chico { font-family: ui-monospace, Consolas, monospace; font-weight: 700; font-size: .85rem; }
.lista .celular { padding: 12px 14px; }

/* huella y bloqueo */
.huella-icono { width: 64px; height: 64px; margin: 4px auto 10px; color: var(--oro); }
.huella-icono svg { width: 100%; height: 100%; }
.huella-fila { padding: 8px 0; gap: 10px; border-bottom: 1px solid var(--linea); }
.huella-fila:last-child { border-bottom: 0; }
.bloqueo { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; background: var(--negro); color: #fff; }
.bloqueo-caja { width: 100%; max-width: 360px; text-align: center; }
.bloqueo-caja .btn-texto { display: block; margin: 16px auto 0; }
.bloqueo-logo { max-width: 180px; margin: 0 auto 18px; display: block; }

/* Configuración en tarjetas, como el Inicio */
.config-accesos { margin-top: 4px; }
.config-accesos .acceso span { text-align: center; line-height: 1.2; }

/* títulos largos de la barra (p. ej. "Integridad del código"): letra más chica en el celular */
@media (max-width: 420px) { .barra-titulo.largo { font-size: .74rem; } }

/* Encabezado de cada pantalla de Configuración (nombre + descripción) */
.config-cab { max-width: 720px; margin: 0 auto; padding: 16px 16px 0; }
.config-cab .tarjeta { margin: 0; }
.config-cab:not([hidden]) + .vista { padding-top: 12px; }
@media (min-width: 720px) { .config-cab { padding: 24px 24px 0; } }

/* PIN de 6 dígitos */
.pin-campo { letter-spacing: .5em; text-align: center; font-size: 1.3rem; }
.bloqueo-pin { margin-top: 12px; text-align: left; }
.bloqueo-pin .campo span { color: #fff; }

/* Ingreso: elegir huella, PIN o contraseña */
.ingreso-hola { margin: 0 0 10px; text-align: center; }
.ingreso-metodos { margin-bottom: 14px; }
.ingreso .huella-icono { margin-top: 8px; }

/* Accesibilidad: foco visible con teclado y menos movimiento si el celular lo pide */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--oro-osc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Lista de arranque del administrador (Inicio) */
.arranque { border-left: 4px solid var(--oro); }
.arranque-lista { list-style: none; margin: 10px 0 4px; padding: 0; }
.arranque-lista li a { display: flex; gap: 10px; align-items: center; padding: 8px 0; color: var(--texto); text-decoration: none; border-bottom: 1px solid var(--linea); min-height: 44px; }
.arranque-lista li:last-child a { border-bottom: 0; }
.arranque-lista .marca { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--linea); display: grid; place-items: center; font-size: .8rem; font-weight: 700; }
.arranque-lista li.hecho .marca { background: var(--verde); border-color: var(--verde); color: #fff; }
.arranque-lista li.hecho span:last-child { color: var(--suave); text-decoration: line-through; }

/* Hojas para entregar: lista de cuentas */
.hojas-lista { max-height: 45vh; overflow: auto; margin: 4px 0 0 8px; }