/* ============================================================
   locations-block.css — "Puntos de venta" (components/locations-
   block.js, views/ficha.js, 2026-08-31). Pedido textual de
   Fernando, usando la app: "una cuenta puede tener varios puntos
   de venta" + "agregando todas las direcciones... apretando en un
   más". Vive dentro de "El local" (`.el-local-full.pv-block` reusa
   esa clase de app.css para el hairline superior y el label `.k`
   en mayúsculas) — acá solo lo exclusivo de la lista/formulario.

   N4 (2026-08-31) sumó la enseñanza del geocoding: veredicto inline
   en la fila (estilo Variante A, `.pv-verdict-*`/`.pv-display-name`)
   y el Panel de Resultado que reemplaza al formulario cuando el
   guardado/reintento no da exacto (estilo Variante B, `.pv-panel-*`).
   Contrato de color: dot/ícono con el tono vivo, texto con la
   variante -text (AA) — docs/design/sistema-visual.md §2.
   ============================================================ */
.pv-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pv-hd .k { margin-bottom: 0; } /* comparte fila con el botón "+ Agregar", no apila debajo */

.pv-add-btn {
  display: inline-flex; align-items: center; gap: 4px; position: relative;
  border: none; background: none; cursor: pointer; padding: 3px 6px; margin: -3px -6px;
  border-radius: 6px; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--blue-text);
}
.pv-add-btn:hover { background: var(--surface-3); }
.pv-add-btn[aria-expanded="true"] { color: var(--text-3); }

.pv-list { display: flex; flex-direction: column; margin-top: 4px; }
/* Las acciones siguen al texto, NO se van al borde opuesto (2026-08-31, pedido de Fernando con la
   ficha delante: "que la información no se encuentre en el otro extremo con tanto espacio en
   blanco"). Era `justify-content: space-between` con `.pv-item-main { flex: 1 1 auto }`: el texto
   quedaba pegado a la izquierda y "Mapa · Maps · ✓ · ✏ · Borrar" contra el borde derecho, con todo
   el hueco en el medio. Medido en producción, el hueco es la NORMA y no la excepción: **279 de los
   359 puntos de venta (78%) tienen una dirección de 22 caracteres o menos** ("Guemes 20"), o sea
   que el layout se había dimensionado para la dirección larga, que es la minoría — §4.1 nº18, el
   mismo error de medir contra el caso equivocado.
   `flex-wrap` para que una dirección larga empuje las acciones al renglón de abajo en vez de
   apretarlas; `margin-left: auto` NO se usa a propósito, que es lo que las volvería a mandar al
   borde. */
.pv-item { padding: 8px 0; position: relative; display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: 4px 14px; }
.pv-item + .pv-item::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: .5px; background: var(--hairline);
}
/* `flex: 0 1 auto` y no `1 1 auto`: el texto ocupa lo que necesita y las acciones quedan a su
   lado. Con `1 1 auto` se estiraba a toda la fila y empujaba las acciones al borde — ver el
   comentario de `.pv-item`. `max-width: 100%` para que una dirección larguísima siga cortando
   dentro de la fila (no desborda: `overflow-wrap: anywhere` en `.pv-item-dir`). */
.pv-item-main { min-width: 0; max-width: 100%; flex: 0 1 auto; }
.pv-item-nombre { margin: 0 0 1px; font-size: 12.5px; font-weight: 600; color: var(--text-1); }
/* Dirección completa, SU PROPIO renglón a ancho completo — nunca ellipsis acá (§4.1 nº12, corolario
   de diseño: "en una lista vertical el nombre va en su propio renglón a ancho completo"). Una
   dirección larga tipo "Guemes 20, 2930 San Pedro, Argentina" tiene que leerse entera. */
.pv-item-dir { margin: 0; font-size: 13px; color: var(--text-1); line-height: 1.35; overflow-wrap: anywhere; }
.pv-item-ciudad { margin: 1px 0 0; font-size: 11.5px; color: var(--text-3); }
.pv-item-note { margin: 3px 0 0; font-size: 11px; color: var(--text-3); font-style: italic; }
.pv-item-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

/* ---- Veredicto de geocodificación EN LA FILA (N4, 2026-08-31) — estilo Variante A: convive
   inline con los datos del local, nunca un panel propio (ese es el post-guardado, más abajo).
   Doble capa de color: el DOT usa el tono vivo (gráfico), el TEXTO usa la variante -text (AA) —
   §2 del contrato visual. Un veredicto EXACTO no llega acá (`verdictInfo` devuelve `null`). ---- */
.pv-verdict-status { margin: 5px 0 0; display: flex; align-items: flex-start; gap: 6px; font-size: 11.5px; font-weight: 600; line-height: 1.4; }
.pv-verdict-status.orange { color: var(--orange-text); }
.pv-verdict-status.red { color: var(--red-text); }
.pv-verdict-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.pv-verdict-dot.orange { background: var(--orange); }
.pv-verdict-dot.red { background: var(--red); }

/* "El sistema entendió: …" — línea de apoyo, nunca repetida dos veces en la misma fila (en
   'descartado' va embebida en `.pv-verdict-status` en vez de acá — ver `verdictInfo`). */
.pv-display-name { margin: 3px 0 0 12px; font-size: 11px; color: var(--text-3); line-height: 1.5; }
.pv-display-name em { font-style: normal; font-weight: 600; color: var(--text-2); }
/* 'sin_localidad' es LA PALANCA: la línea se vuelve un botón clickeable que abre el editor con el
   foco puesto en Ciudad — mismo criterio que "el hueco se muestra Y se puede resolver" (§4). Caja
   destacada en vez de texto plano (naranja soft, nunca solo el color — el texto también dice
   "Cargá la localidad"). */
.pv-display-name-btn {
  display: block; width: 100%; text-align: left; margin: 5px 0 0; padding: 6px 9px;
  background: var(--orange-soft); border: 1px solid var(--orange-border); border-radius: 8px;
  font: inherit; font-size: 11.5px; font-weight: 600; color: var(--orange-text); cursor: pointer;
  position: relative;
}
.pv-display-name-btn em { font-weight: 700; }
.pv-display-name-btn:hover { background: rgba(255,149,0,.16); }

/* Sugerencia SUAVE de "la ciudad puede estar mal escrita en el catálogo" — nunca un veredicto,
   siempre neutra (ni verde ni roja: un canal, un significado — acá el canal es informativo). */
.pv-aviso-ciudad { margin: 3px 0 0; font-size: 11px; color: var(--text-3); font-style: italic; }

.pv-retry-btn {
  display: inline-flex; align-items: center; gap: 4px; position: relative;
  border: none; background: none; cursor: pointer; padding: 4px 6px; margin: 0;
  border-radius: 6px; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-2);
  white-space: nowrap;
}
.pv-retry-btn:hover { background: var(--surface-3); }
.pv-retry-btn:disabled { color: var(--text-4); cursor: not-allowed; }

/* Confirmación inline liviana cuando el resultado dio EXACTO (Variante A) — nunca un toast plano:
   la fila misma es el veredicto. Se autodestruye sola (JS, `flashConfirm`), nunca queda pegada. */
.pv-flash { background: var(--green-soft); transition: background .3s var(--ease); border-radius: 8px; }
.pv-confirm-flash {
  margin: 0 0 5px; padding: 5px 8px; border-radius: 7px; background: var(--green-soft);
  border: 1px solid var(--green-border); color: var(--green-text); font-size: 11.5px;
  font-weight: 600; line-height: 1.4; opacity: 1; transition: opacity .3s var(--ease);
}
.pv-confirm-flash em { font-style: normal; font-weight: 700; }
.pv-confirm-flash.fading { opacity: 0; }

/* El tilde de verificación va primero entre las acciones (ver locations-block.js): `.vc` nace con
   `margin-left: 4px` porque en la ficha y en la tabla siempre sigue a un valor — acá ABRE el grupo,
   así que ese margen izquierdo no corresponde y el aire va del otro lado, separándolo de los links
   "Mapa"/"Maps" para que no se lea como un cuarto botón. */
.pv-item-actions .vc { margin-left: 0; margin-right: 6px; }

.pv-gmaps-link {
  display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600;
  color: var(--blue-text); text-decoration: none; padding: 4px 6px; border-radius: 6px; white-space: nowrap;
}
.pv-gmaps-link:hover { background: var(--surface-3); text-decoration: underline; }

/* ⚠️ 2026-09-04 (contrato B3): "Borrar" ya NO aparece en la fila de reposo (pedido textual de
   Fernando: "Todo lo que dice borrar es innecesario, podria aparecer la opcion de borrar cuando
   tocas en editar") — este botón hoy vive SOLO dentro de `.pv-form-actions` (modo edición, ver
   components/locations-block.js), reusando el mismo look que antes tenía en reposo. */
.pv-del-btn {
  position: relative; border: none; background: none; cursor: pointer;
  padding: 4px 6px; margin: 0; border-radius: 6px; font: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--red-text); white-space: nowrap;
}
.pv-del-btn:hover { background: var(--red-soft); }
.pv-del-btn:disabled { opacity: .55; cursor: not-allowed; }

.pv-empty { margin: 4px 0 2px; font-size: 12.5px; color: var(--text-3); font-style: italic; }

.pv-confirm { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; width: 100%; }
.pv-confirm-txt { font-size: var(--fs-sm); color: var(--text-2); flex: 1 1 200px; min-width: 160px; }

/* ---- Formulario (alta/edición) — mismo lenguaje que `.fe-editbox`/`.fe-input` de field-edit.js
   (§4.1 nº13, no se inventa un segundo lenguaje de edición), en columna en vez de en línea: acá son
   4 campos (nombre/dirección/ciudad/CP) que no entran en una sola fila sin recortarse. ---- */
.pv-compose { margin-top: 6px; padding-top: 8px; border-top: .5px dashed var(--hairline); }
.pv-form { display: flex; flex-direction: column; gap: 6px; }
.pv-form-row { display: flex; }
.pv-form-row .fe-input { flex: 1 1 auto; width: 100%; }
.pv-form-row-2 { gap: 6px; }
.pv-form-row .fe-input.pv-form-cp { flex: 0 0 90px; width: 90px; }
.pv-form-actions { display: flex; justify-content: flex-end; gap: 6px; }
.pv-error { display: block; font-size: 11px; color: var(--red-text); }

/* Guía de escritura colapsable (N4, 2026-08-31, estilo mockup B) — cierra por defecto, no le suma
   ruido permanente al formulario; el `<summary>` con flecha propia reemplaza el marcador nativo,
   mismo patrón que `.season > summary` en app.css. */
.pv-how { margin-top: 2px; }
.pv-how summary {
  font-size: 11.5px; font-weight: 600; color: var(--blue-text); cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 5px; padding: 3px 0;
}
.pv-how summary::-webkit-details-marker { display: none; }
.pv-how summary::before { content: "▶"; font-size: 8px; transition: transform var(--t-fast) var(--ease); }
.pv-how[open] summary::before { transform: rotate(90deg); }
.pv-how-body {
  background: var(--surface-3); border-radius: var(--r-sm); padding: 8px 10px; margin-top: 5px;
  font-size: 11.5px; color: var(--text-2); line-height: 1.6;
}
.pv-how-body ul { margin: 0; padding-left: 15px; }
.pv-how-body li { margin-bottom: 2px; }
.pv-how-body strong { font-weight: 700; color: var(--text-1); }

/* ====================================================
   PANEL DE RESULTADO (N4, 2026-08-31) — estilo Variante B: reemplaza al formulario, en el MISMO
   lugar, cuando el guardado o el reintento NO dio un resultado exacto. Doble capa de color: el
   ícono/dot usa el tono vivo, título/caja de acción usan la variante -text (AA) — §2 del contrato.
   ==================================================== */
.pv-panel { padding-top: 4px; }
.pv-panel-head { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 4px 10px; }
.pv-panel-icon {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; margin-bottom: 7px;
}
.pv-panel-icon.green { background: var(--green-soft); color: var(--green); }
.pv-panel-icon.orange { background: var(--orange-soft); color: var(--orange); }
.pv-panel-icon.red { background: var(--red-soft); color: var(--red); }
.pv-panel-title { margin: 0 0 2px; font-size: var(--fs-body-lg); font-weight: 700; }
.pv-panel-title.green { color: var(--green-text); }
.pv-panel-title.orange { color: var(--orange-text); }
.pv-panel-title.red { color: var(--red-text); }
.pv-panel-sub { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }

.pv-panel-dn {
  margin: 0 0 8px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 8px 10px;
}
.pv-panel-dn-label { margin: 0 0 3px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.pv-panel-dn-value { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--text-1); line-height: 1.4; }

.pv-panel-accion { margin: 0 0 8px; border-radius: var(--r-sm); padding: 8px 10px; font-size: 12.5px; line-height: 1.5; }
.pv-panel-accion.orange { background: var(--orange-soft); border: 1px solid var(--orange-border); color: var(--orange-text); }
.pv-panel-accion.red { background: var(--red-soft); border: 1px solid var(--red-border); color: var(--red-text); }
.pv-panel-accion.destacada { font-weight: 700; }

.pv-panel-aviso { margin: 0 0 8px; font-size: 11.5px; color: var(--text-3); font-style: italic; }

.pv-panel-actions { display: flex; gap: 8px; }
.pv-panel-btn { flex: 1; }

/* Blanco táctil ≥44px para "+ Agregar", "Borrar", "Reintentar" y la nota-botón de 'sin_localidad'
   (2026-08-31) — mismo criterio que field-edit.js: Fernando pidió el gesto del "+" para
   completarlo con el celular en la mano. Pseudo-elemento centrado, nunca padding real (correría el
   resto de la fila / de la caja). El lápiz de "Editar" reusa `.fe-pencil-btn` de app.css, que ya
   trae este mismo tratamiento; los botones del panel (`.pv-panel-btn`) usan `.btn`, que ya es
   44px de alto REAL — no necesitan el pseudo-elemento. */
@media (pointer: coarse) {
  /* `.pv-gmaps-link` entra acá por medición, no por simetría: en la pasada visual del 2026-08-31
     los links "Mapa"/"Maps" de cada local daban 57×25px reales y `min-width/height` en 0 — o sea
     que el pseudo-elemento estaba escrito para el "+" y el "Borrar" y a estos dos nadie los había
     mirado. Son los controles que MÁS se tocan desde la calle (abrir el mapa parado frente al
     local), así que quedarse en 25px de alto era el peor lugar donde tener el defecto. */
  .pv-add-btn, .pv-del-btn, .pv-gmaps-link, .pv-retry-btn, .pv-display-name-btn { position: relative; }
  .pv-add-btn::after, .pv-del-btn::after, .pv-gmaps-link::after, .pv-retry-btn::after, .pv-display-name-btn::after {
    content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; height: 100%; min-width: 44px; min-height: 44px;
  }
}

/* La fila "Mapa" de "El local" se retiró el 2026-08-31 por duplicar este mismo bloque (ver el
   comentario en views/ficha.js, donde estaba `elLocalMapaFull`), y con ella se van sus tres
   reglas: `.el-local-mapa-links`, `.el-local-full .v.el-local-gmaps` y `.el-local-mapa-hint`.
   Se borran en vez de dejarlas "por las dudas": CSS que ya no pinta nada es exactamente lo que
   hizo creer, en otra pasada de este proyecto, que una pantalla estaba construida cuando no
   existía ni una fila. */