/* ubicacion-picker: el selector de dirección (`UbicacionPicker.razor`, prefijo `ubp-`).
   No editar a mano duplicando en el .razor.

   Vivía en un <style> dentro del componente. Salió de ahí el 2026-09-17 por las dos razones de
   CLAUDE.md —un <style> en un .razor no tiene scope y el banco no puede reproducir el componente
   para compararlo— y porque ahí dentro se había fosilizado la paleta de tema oscuro: 59 colores
   fijos, entre ellos un `#1a1a2e` de fondo de mapa que en tema CLARO dejaba el hueco negro-azulado.
   El bloque llevaba meses sin que nada lo vigilara: SustratoVisualTests sólo barre archivos .css.

   Mover a `<head>` no cambió la cascada porque TODOS los selectores llevan el prefijo `.ubp__`:
   no había un solo empate con otra hoja que se estuviera ganando por orden de aparición.

   Tres familias de color, y la distinción importa:
   · `--ic-*` / `--lc-*` para lo que se lee contra la superficie del panel: voltea con data-theme.
   · `--map-*` para lo que va ENCIMA de las teselas (chip, botón de encuadre, velo): fijo, porque
     el mapa es claro en los dos temas.
   · nada fijo fuera de esos dos sitios. Lo vigila SustratoVisualTests. */

.ubp {
    width: 100%;
    text-align: left;
    direction: ltr;
}

/* ── Panel de contenido ── */
.ubp__panel {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    text-align: left;
}

/* Este texto pasó de ser una nota dentro de un panel escondido a ser la única
   instrucción de la sección, así que se le pide lo mismo que a las etiquetas de campo:
   15px (--ic-text-md, el piso legible senior del proyecto) y token de tema —a 12.8px y
   #94A3B8 fijo no llegaba ni al tamaño ni al contraste AA sobre blanco—. */
.ubp__hint {
    font-size: var(--ic-text-md);
    line-height: 1.35;
    color: var(--ic-muted);
    margin: 0 0 8px 0;
}

.ubp__error {
    font-size: 0.78rem;
    color: var(--lc-err);
    margin: 4px 0;
}

.ubp__error--required {
    border: 1px solid var(--lc-err);
    border-radius: 8px;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--lc-err) 10%, transparent);
    font-weight: 600;
}

/* ── Acciones rápidas (Cómo llegar / Copiar / Ver en Maps) ── */
.ubp__quick-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

/* La tinta es --lc-accent y no --ic-primary: el índigo de marca se calibró para rellenos, y como
   TEXTO sobre un tinte tenue le faltan ~0.8 puntos de contraste (está medido en lista-cards.css).
   El borde sí puede ser --ic-primary: no lleva texto. */
.ubp__quick-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 6px;
    border: 1.5px solid var(--ic-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ic-text) 6%, transparent);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--lc-accent);
    cursor: pointer;
    line-height: 1.1;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s;
}

.ubp__quick-btn:hover {
    border-color: var(--ic-primary);
    background: var(--ic-primary-dim);
}

.ubp__quick-ico {
    font-size: 1rem !important;
}

/* ── Sugerencias (forzar izquierda en móvil; botones suelen heredar centrado) ── */
.ubp__suggestions {
    border: 1px solid var(--ic-border);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 4px;
    width: 100%;
    max-width: 100%;
    text-align: left;
    direction: ltr;
    align-self: stretch;
    position: relative;
    z-index: 5;
}

.ubp__suggestion {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    margin: 0;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--ic-text) 8%, transparent);
    background: color-mix(in srgb, var(--ic-text) 4%, transparent);
    cursor: pointer;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.12s;
    pointer-events: auto;
}

.ubp__suggestion .mud-icon-root {
    margin-inline: 0;
}

.ubp__suggestion:last-child {
    border-bottom: none;
}

.ubp__suggestion:active,
.ubp__suggestion:hover {
    background: color-mix(in srgb, var(--ic-text) 8%, transparent);
}

.ubp__suggestion-icon {
    font-size: 1rem !important;
    color: var(--ic-icon-muted);
    margin-top: 2px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-shrink: 0;
    align-self: flex-start;
}

.ubp__suggestion-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1 1 0;
    min-width: 0;
    text-align: left;
    gap: 2px;
}

.ubp__suggestion-main {
    display: block;
    width: 100%;
    font-size: 0.85rem;
    font-weight: 500;
    color: inherit;
    line-height: 1.2;
    text-align: left;
}

.ubp__suggestion-sub {
    display: block;
    width: 100%;
    font-size: 0.76rem;
    color: var(--ic-muted);
    line-height: 1.2;
    text-align: left;
}

/* ── Mapa interactivo ── */
/* El fondo es el papel BAJO el mapa: lo que se ve mientras carga —Google, el iframe del API o
   el Leaflet de respaldo, los tres claros— y por los huecos al arrastrar. Era un azul noche
   fijo (#1a1a2e), así que en tema claro el hueco salía negro-azulado y en oscuro tampoco casaba
   con las teselas. Sale del mismo token que el papel del mapa de flota, que está declarado una
   sola vez a propósito: la base del mapa es clara en los DOS temas. */
.ubp__map {
    width: 100%;
    height: 260px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--ic-border);
    background: var(--map-teselas-bg);
    position: relative;
    z-index: 0;
}

/* ── Mapa de referencia de la tarjeta confirmada (sólo lectura) ──
   Más bajo que el picker: aquí sólo se comprueba que el pin cayó donde debía.
   pointer-events:none es el candado real: apaga el mapa entero incluso con el
   proveedor de iframe, cuyo contenido lo sirve el API y no se configura desde aquí. */
.ubp__ro {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 8px;
}

/* Selector doblado a propósito: el .ubp__map de la media query de abajo lo pisaría
   por orden de aparición si tuvieran la misma especificidad.
   150px alcanzaban para una miniatura; para recorrer el mapa y ver un trayecto, no. */
.ubp__map.ubp__map--ro {
    height: 190px;
    user-select: none;
    -webkit-user-select: none;
}

/* El candado de pointer-events se acota, no se borra: en el contenedor de Leaflet los
   gestos ya se gobiernan por bandera JS (opciones.gestos/pinFijo), pero el proveedor
   de iframe sirve su contenido desde el API y no se configura desde aquí — ahí sigue
   siendo el único candado que sirve. */
iframe.ubp__map.ubp__map--ro { pointer-events: none; }

/* Envoltorio para colgar el chip y el botón encima del mapa: Leaflet es dueño de su
   propio DOM, así que no se le meten hijos. */
.ubp__ro-mapa { position: relative; }

/* z-index 400 no es arbitrario: los paneles de Leaflet llegan a 700 y sus controles a
   800, así que esto queda sobre las teselas y bajo los botones de zoom, que ahora
   existen y tienen que seguir siendo pulsables. */
/* Arriba a la DERECHA: el control de zoom de Leaflet vive arriba a la izquierda y el
   chip le caía encima. */
.ubp__trayecto-chip {
    position: absolute; right: 8px; top: 8px; z-index: 400;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 999px;
    /* Tinta de mapa, no de panel: las teselas son claras en los dos temas, así que un fondo que
       siguiera al tema desaparecería sobre ellas en uno de los dos. Los --map-chip-* están
       declarados una sola vez en app.css, justo por eso. */
    background: var(--map-chip-bg);
    color: var(--map-chip-ink);
    border: 1px solid var(--map-chip-border);
    box-shadow: 0 2px 8px var(--map-chip-shadow);
    font-size: 0.75rem; font-weight: 700; white-space: nowrap;
    max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis;
}
.ubp__trayecto-chip .mud-icon-root { font-size: 0.875rem !important; }
.ubp__trayecto-chip a { color: var(--map-chip-link); text-decoration: underline; }

/* 24px y no 8: abajo a la derecha va la atribución de OSM, que no se puede tapar. */
.ubp__trayecto-fit {
    position: absolute; right: 8px; bottom: 24px; z-index: 400;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    min-height: 32px; padding: 0 10px; border-radius: 999px;
    background: var(--map-chip-bg); color: var(--map-chip-ink);
    border: 1px solid var(--map-chip-border);
    font-family: inherit; font-size: 0.6875rem; font-weight: 700;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ubp__trayecto-fit .mud-icon-root { font-size: 0.875rem !important; }

/* «Toca para mover el mapa»: en el celular el mapa nace quieto para que deslizar el
   dedo sobre él siga desplazando el formulario, que es lo que el pulgar espera. */
.ubp__mapa-velo {
    position: absolute; inset: 0; z-index: 500;
    display: flex; align-items: center; justify-content: center;
    background: var(--map-scrim);
    color: var(--map-chip-ink); font-size: 0.75rem; font-weight: 700;
    border-radius: 8px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ubp__mapa-velo span {
    background: var(--map-chip-bg);
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--map-chip-border);
}

/* --ic-muted y no --ic-icon-muted: esto es TEXTO de 12px, no un icono, así que el umbral es 4.5
   y no 3.0. Medido en el banco: --ic-icon-muted (#64748B en claro) daba 4.40 sobre --ic-bg y 4.21
   sobre --ic-surface-2. El que sí se queda con el token de icono es .ubp__suggestion-icon, que es
   un icono de verdad y a 3.0 pasa con holgura. */
.ubp__ro-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ic-muted);
    padding-left: 2px;
}

.ubp__ro-ico {
    font-size: 0.8125rem !important;
}

/* Aproximada: ámbar, no gris. No es una nota al pie, es «esto no está confirmado».
   Ámbar y no rojo a propósito: el rojo en esta app significa renta cancelada o error,
   y esto no es ninguna de las dos.

   El ámbar es --lc-warn y ya no --rq-override-bar: ese token se declara sólo bajo
   `.renta-form, .rq-dialog, .cg-shell` (renta-form.css), así que el picker lo tenía definido
   dentro del diálogo de renta y NO en /configuracion/perfil-negocio ni en el diálogo de
   direcciones de contacto — ahí pintaba el fallback #B45309, el mismo en los dos temas. */
.ubp__ro-hint--aprox {
    color: var(--lc-warn);
    font-weight: 600;
}

.ubp__ro-spin { margin-right: 2px; }

/* El icono de la tarjeta cambia con el estado: check verde solo cuando de verdad
   está verificada. Antes era siempre un check, dijera lo que dijera Google. */
.ubp__confirmed--aproximada .ubp__confirmed-icon { color: var(--lc-warn) !important; }
.ubp__confirmed--sinubicar .ubp__confirmed-icon { color: var(--lc-warn) !important; }
.ubp__confirmed--aproximada,
.ubp__confirmed--sinubicar {
    border-color: color-mix(in srgb, var(--lc-warn) 40%, transparent);
}

@media (min-width: 600px) {
    .ubp__map.ubp__map--ro {
        height: 230px;
    }
}

.ubp__map-coords {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.73rem;
    font-family: monospace;
    color: var(--ic-muted);
    margin-top: 6px;
    padding: 4px 8px;
    background: color-mix(in srgb, var(--ic-text) 6%, transparent);
    border-radius: 6px;
}

.ubp__map-address {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.82rem;
    color: inherit;
    margin-top: 6px;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--ic-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--ic-primary) 20%, transparent);
    border-radius: 8px;
    line-height: 1.35;
}

.ubp__manual-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.ubp__action-btn {
    flex: 1;
}

@media (min-width: 600px) {
    .ubp__map {
        height: 300px;
    }
}

/* ── Panel de validación (Fase 2) ──
   Los cuatro avisos salen de los --lc-*, que están calibrados a AA en los dos temas con el par
   completo (texto sobre su propio tinte). Los tintes usan el gemelo -rgb, que en oscuro es la
   variante saturada a propósito: aclararlo borraría el contraste en vez de darlo. */
.ubp__badge {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px solid;
}

.ubp__badge--success {
    background: rgba(var(--lc-ok-rgb), 0.08);
    border-color: rgba(var(--lc-ok-rgb), 0.35);
}

.ubp__badge--warning {
    background: rgba(var(--lc-warn-rgb), 0.10);
    border-color: rgba(var(--lc-warn-rgb), 0.40);
}

.ubp__badge--error {
    background: rgba(var(--lc-err-rgb), 0.10);
    border-color: rgba(var(--lc-err-rgb), 0.40);
}

.ubp__badge--info {
    background: rgba(var(--lc-info-rgb), 0.10);
    border-color: rgba(var(--lc-info-rgb), 0.40);
}

.ubp__badge--success .ubp__badge-icon { color: var(--lc-ok); }
.ubp__badge--warning .ubp__badge-icon { color: var(--lc-warn); }
.ubp__badge--error   .ubp__badge-icon { color: var(--lc-err); }
.ubp__badge--info    .ubp__badge-icon { color: var(--lc-info); }

.ubp__badge-icon {
    font-size: 1.4rem !important;
    flex-shrink: 0;
    margin-top: 2px;
}

.ubp__badge-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ubp__badge-title {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--ic-text);
}

.ubp__badge-place {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ic-text);
}

.ubp__badge-dir {
    font-size: 0.78rem;
    color: var(--ic-muted);
    word-break: break-word;
    line-height: 1.3;
}

.ubp__badge-msg {
    font-size: 0.76rem;
    color: var(--ic-muted);
    line-height: 1.35;
    margin-top: 2px;
}

.ubp__confirm-check {
    margin-top: 8px;
    padding: 6px 0;
}

/* ── Confirmado ── */
.ubp__confirmed {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(var(--lc-ok-rgb), 0.07);
    border: 1.5px solid rgba(var(--lc-ok-rgb), 0.3);
    border-radius: 10px;
    padding: 10px 12px;
}

.ubp__confirmed-icon {
    color: var(--lc-ok);
    font-size: 1.3rem !important;
    flex-shrink: 0;
    margin-top: 2px;
}

.ubp__confirmed-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ubp__confirmed-dir {
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--ic-text);
    word-break: break-word;
    line-height: 1.3;
}

.ubp__confirmed-coords {
    font-size: 0.72rem;
    color: var(--ic-muted);
    font-family: monospace;
}

.ubp__confirmed-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ic-muted);
    padding: 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.12s, background 0.12s;
}

.ubp__confirmed-clear:hover {
    color: var(--lc-accent);
    background: color-mix(in srgb, var(--ic-text) 6%, transparent);
}

/* ── Modo edición: la dirección actual sigue viva mientras se busca el reemplazo ── */
.ubp__editing {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: color-mix(in srgb, var(--ic-primary) 8%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--ic-primary) 22%, transparent);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
}

.ubp__editing-ico {
    color: var(--lc-accent);
    font-size: 1.15rem !important;
    flex-shrink: 0;
    margin-top: 2px;
}

.ubp__editing-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ubp__editing-label {
    font-size: 0.72rem;
    color: var(--ic-muted);
}

.ubp__editing-dir {
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--ic-text);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ubp__editing-cancel {
    flex-shrink: 0;
    align-self: center;
}

/* 48 y no 44: es el piso táctil del proyecto (--ic-touch-min) y aquí venía de antes de que se
   fijara. «Quitar dirección» es destructivo y es el único control de esta fila. */
.ubp__remove-link {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: var(--ic-touch-min);
    margin-top: 6px;
    padding: 0 4px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--ic-muted);
    transition: color 0.12s, background 0.12s;
}

.ubp__remove-link:hover {
    color: var(--lc-err);
    background: color-mix(in srgb, var(--lc-err) 10%, transparent);
}

.ubp__remove-ico {
    font-size: 1.05rem !important;
}

.ubp__search-field {
    width: 100%;
}

/* El GPS es la alternativa, no un igual: contorneado y despegado de la caja de búsqueda.
   El margen NO puede ir en el botón (MudBlazor le pone el suyo), así que va en el separador. */
.ubp__gps-sep {
    height: 1px;
    margin: 14px 0 12px;
    background: var(--ic-border);
}