/* ============================================================
   FASE 3 · VISITAS — estilos del módulo de campo.
   Celular primero: botones grandes, una columna, todo tocable
   con el pulgar. Usa los mismos tokens de app.css.
   ============================================================ */

/* Velo de fondo de los modales (lo usaban ya los modales de diseño y
   coordinación sin estar definido: aquí queda para todos). */
.modal-fondo{position:fixed;inset:0;background:rgba(15,18,22,.5);z-index:80;
  animation:aparece .2s var(--ease);backdrop-filter:blur(2px)}

/* Botón de peligro (descartar, parar grabación) */
.boton.peligro{background:var(--crit);border-color:var(--crit);color:#fff}

/* ---------- cabecera de la lista ---------- */
.vis-acciones{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.vis-btn-grande{padding:16px 18px;font-size:1.02rem;font-weight:600;border-radius:var(--r-md)}
.vis-cola{margin-bottom:14px}

/* ---------- tarjetas de visita ---------- */
.vis-lista{display:flex;flex-direction:column;gap:10px}
.vis-tarjeta{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;
  transition:border-color var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.vis-tarjeta:hover{border-color:var(--laser-borde);box-shadow:var(--e2)}
.vis-tarjeta.vis-fria{border-left:3px solid var(--crit)}
.vis-mini{width:64px;height:52px;border-radius:var(--r-xs);object-fit:cover;flex:none;background:var(--humo)}
.vis-mini-vacia{display:flex;align-items:center;justify-content:center;color:var(--texto-3)}
.vis-tarjeta-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.vis-tarjeta-info small{color:var(--texto-2);font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vis-tarjeta-info .vis-meta{color:var(--texto-3);font-size:.78rem}
.vis-tarjeta .fin{display:flex;flex-direction:column;gap:4px;align-items:flex-end;flex:none}

/* ---------- asistente ---------- */
.vis-migas{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.vis-paso-txt{color:var(--texto-2);font-size:.9rem;font-weight:600}
.vis-productos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.vis-prod{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 14px;
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-md);cursor:pointer;
  font:inherit;color:inherit;text-align:left;box-shadow:var(--e1);
  transition:border-color var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.vis-prod:hover{border-color:var(--laser-borde);box-shadow:var(--e2)}
.vis-prod.sel{border-color:var(--laser);background:var(--laser-suave)}
.vis-prod svg{color:var(--laser)}
.vis-prod small{color:var(--texto-3);font-size:.78rem}

/* ---------- galería de fotos ---------- */
.vis-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.vis-foto{position:relative;aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;
  background:var(--humo);cursor:pointer;border:1px solid var(--linea)}
.vis-img-caja{position:relative;width:100%;height:100%}
.vis-img-caja img{width:100%;height:100%;object-fit:cover;display:block}
.vis-flechas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.vis-foto-flechas{position:absolute;left:6px;bottom:6px;background:rgba(15,18,22,.72);color:#fff;
  font-size:.72rem;font-weight:600;padding:2px 7px;border-radius:var(--r-pill)}
.vis-foto .quitar{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;
  border:none;background:rgba(15,18,22,.65);color:#fff;font-size:1rem;line-height:1;cursor:pointer;z-index:2}
.vis-foto-mas{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:2px dashed var(--linea-2);background:var(--carta-2);color:var(--texto-2);
  font-size:1.5rem;font-weight:600}
.vis-foto-mas span{font-size:.82rem}
.vis-ayuda{color:var(--texto-3);font-size:.84rem;margin:8px 0 0}
.vis-ayuda-campo{display:block;color:var(--texto-3);font-size:.78rem;margin:-2px 0 6px}
.vis-imp{color:var(--warn)}

/* ---------- notas de voz ---------- */
.vis-voz{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.vis-voz>.boton{align-self:flex-start;padding:12px 18px}
.vis-grabando{animation:visPulso 1.2s ease-in-out infinite}
@keyframes visPulso{0%,100%{box-shadow:0 0 0 0 rgba(195,58,43,.45)}50%{box-shadow:0 0 0 10px rgba(195,58,43,0)}}
.vis-audio{display:flex;align-items:center;gap:8px}
.vis-audio audio{flex:1;max-width:420px;height:40px}
.vis-audio .quitar{width:28px;height:28px;border-radius:50%;border:1px solid var(--linea);
  background:var(--carta);color:var(--texto-2);cursor:pointer;font-size:1rem;line-height:1}

/* ---------- chips del checklist ---------- */
.vis-chips{display:flex;flex-wrap:wrap;gap:8px}
.vis-chip{padding:10px 14px;border-radius:var(--r-pill);border:1px solid var(--linea-2);
  background:var(--carta);font:inherit;font-size:.9rem;color:var(--texto);cursor:pointer;
  transition:border-color var(--t2) var(--ease),background var(--t2) var(--ease)}
.vis-chip:hover{border-color:var(--laser-borde)}
.vis-chip.sel{background:var(--laser);border-color:var(--laser);color:#fff;font-weight:600}
.vis-campo-si .vis-chips .vis-chip{min-width:72px;text-align:center}

/* ---------- detalle ---------- */
.vis-det-cab{display:flex;align-items:flex-start;gap:12px;justify-content:space-between}
.vis-det-cab small{display:block;color:var(--texto-2);font-size:.84rem;margin-top:2px}
.vis-det-cab .fin{display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.vis-det-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* ---------- editor de medidas sobre la foto ---------- */
.vis-anotar-fondo{position:fixed;inset:0;background:#0F1216;z-index:120;
  display:flex;flex-direction:column}
.vis-anotar-barra{display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:10px 12px;color:#fff}
.vis-anotar-barra span{font-size:.86rem;color:#C8CDD3;text-align:center;flex:1}
.vis-anotar-lienzo{position:relative;flex:1;min-height:0;margin:0 10px;
  display:flex;align-items:center;justify-content:center;cursor:crosshair}
.vis-anotar-lienzo img{max-width:100%;max-height:100%;display:block;user-select:none;-webkit-user-drag:none}
.vis-anotar-lienzo svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.vis-anotar-texto{display:flex;gap:8px;padding:12px;background:#191D23}
.vis-anotar-texto input{flex:1;padding:12px 14px;border-radius:var(--r-sm);border:1px solid #2A2F37;
  background:#0F1216;color:#fff;font:inherit;font-size:1rem}
.vis-anotar-pie{display:flex;justify-content:center;padding:10px}
.vis-anotar-pie .boton{color:#C8CDD3}

/* ---------- celular: una columna y botones a lo ancho ---------- */
@media (max-width:640px){
  .vis-productos{grid-template-columns:1fr 1fr}
  .vis-galeria{grid-template-columns:repeat(3,1fr)}
  .vis-det-acciones .boton{flex:1 1 46%}
  .vis-audio audio{max-width:none}
}