/* --- Banner Verificación Email --- */
.verification-banner {
    background-color: var(--accent-warning); /* Fondo amarillo */
    color: var(--uber-black); /* Texto oscuro */
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    position: absolute; /* Posición sobre el mapa, debajo del header */
    top: var(--header-height); /* Ajustar según altura real del header */
    left: 0;
    right: 0;
    z-index: 9; /* Debajo del header (10) pero encima del mapa */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* Ajuste por safe area si el header no lo cubre totalmente */
    /* top: calc(var(--header-height) + env(safe-area-inset-top)); */
    transition: transform 0.3s ease-out;
    transform: translateY(-100%); /* Oculto por defecto fuera de vista */
}
 /* Ajustar si el header es variable en altura (más complejo) */
 /* O asumir altura fija como --header-height */


.verification-banner p {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    display: flex; /* Para alinear icono, texto y botón */
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.verification-banner i {
    font-size: 1.1em; /* Icono un poco más grande */
}

/* Estilo botón Reenviar dentro del banner */
.verification-banner .btn-link {
    color: var(--uber-black);
    text-decoration: underline;
    font-weight: var(--font-weight-bold);
    padding: 0; /* Sin padding extra */
    font-size: inherit; /* Mismo tamaño que el texto */
    background: none;
    border: none;
    cursor: pointer;
    margin-left: var(--space-sm); /* Espacio antes del botón */
}
.verification-banner .btn-link:hover {
    color: var(--uber-dark-grey);
}
 .verification-banner .btn-link:disabled {
      text-decoration: none;
      color: var(--uber-medium-grey);
      cursor: not-allowed;
  }


/* Clase para mostrar el banner (aplicada con JS) */
.verification-banner.visible {
    transform: translateY(0%);
}





/* frontend/css/map.css (o style.css) - AÑADIR ESTILOS AL FINAL */

/* ================================================ */
/* === ESTILOS BARRA SUPERIOR MAPA (UBER / APPLE) === */
/* ================================================ */

.map-dynamic-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: var(--z-sticky); 
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    padding-top: calc(var(--space-2) + env(safe-area-inset-top));
    pointer-events: none; /* Permite tocar el mapa en los espacios vacíos */
}

/* Reactivamos los clics solo en los botones y la isla */
.map-dynamic-header > * {
    pointer-events: auto;
}

.map-header-right-controls {
    display: flex;
    gap: 10px;
}

/* Botones Izquierda/Derecha (Glassmorphism) */
.map-header-btn {
    background-color: rgba(255, 255, 255, 0.9); /* Blanco casi sólido */
    backdrop-filter: blur(10px); /* Efecto vidrio */
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,0.05); /* Borde súper sutil */
    color: #000000;
    font-size: 1.1rem; 
    cursor: pointer;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Sombra elegante */
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s;
}

.map-header-btn:active {
    transform: scale(0.85);
    background-color: #f0f0f0;
}

/* Isla Dinámica Central (Centrado Absoluto Perfecto) */
.map-dynamic-island {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Esto asegura que NUNCA se mueva del centro */
    
    display: flex;
    align-items: center;
    gap: var(--space-2);
    
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 50px; 
    padding: 4px 16px 4px 4px; /* Padding asimétrico para el avatar */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    max-width: 50%; 
}

.map-island-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.map-island-text {
    font-size: 0.85rem;
    color: #000; 
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Estado Buscando (Azul) */
.map-dynamic-island.context-searching {
    background-color: rgba(0, 119, 255, 0.95);
    color: white;
}
.map-dynamic-island.context-searching .map-island-text { color: white; }

#map { padding-top: calc(70px + env(safe-area-inset-top)); }

/* ======================================================= */
/* --- BOTÓN FLOTANTE INFERIOR (GPS) --- */
/* ======================================================= */
#map-screen .fab-container {
    position: absolute;
    right: 16px; 
    bottom: calc(var(--bottom-nav-height) + 20px + env(safe-area-inset-bottom)); 
    display: flex;
    flex-direction: column;
    z-index: 60;
}
.fab {
    width: 48px; height: 48px;
    border-radius: 50%;
    background-color: #ffffff;
    color: #000000;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.fab:active { transform: scale(0.9); }


/* ======================================================= */
/* === ANIMACIÓN INTELIGENTE: FILTROS VS UBICACIÓN === */
/* ======================================================= */

/* 
   Magia Pura: Si el navegador detecta que el modal de filtros (#map-filters-modal) 
   tiene la clase .active, automáticamente empuja hacia abajo la tarjeta de ubicación.
   Como la tarjeta ya tiene 'transition', se animará suavemente.
*/
body:has(#map-filters-modal.active) #blup-fix-location-modal {
    transform: translateX(-50%) translateY(150%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* Aire y elegancia para el modal de Filtros */
#map-filters-modal .modal-header {
    padding-top: 25px !important; /* Más espacio arriba para la barrita gris */
    padding-bottom: 15px !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important; /* Línea súper sutil */
}

#map-filters-modal .modal-header h2 {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #000 !important;
}

/* La 'X' centrada y bonita */
#map-filters-modal .modal-close-btn {
    top: 25px !important;
    right: 20px !important;
    background-color: #f0f0f0 !important;
    border: none !important;
}

/* frontend/css/style.css (AÑADIR AL FINAL - Estilos Modal Fija Ubicación) */

/* ================================================ */
/* === ESTILOS MODO SELECCIÓN UBICACIÓN MAPA === */
/* ================================================ */

#map-center-marker { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); z-index: 5; pointer-events: none; color: var(--color-error); font-size: 2.8rem; text-shadow: 1px 1px 3px rgba(0,0,0,0.6); display: none; }
#map-screen.location-select-mode #map-center-marker { display: block !important; }
/* Botón confirmar sobre mapa ELIMINADO */
/* #map-confirm-location-btn { ... } */
#map-screen.location-select-mode .fab-container { display: none !important; }

/* ======================================================== */
/* === ESTILOS MODAL UBICACIÓN BLUP (Paso 1 Flujo) === */
/* ======================================================== */
#blup-location-modal .modal-content { padding:18px 24px; border-top: var(--border-width) solid var(--color-border-divider);
 background: #fff; }
/*.location-display-inline { display: flex; align-items: center; justify-content: space-between; background-color: var(--color-bg-element); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-6); border: 1px solid var(--color-border-interactive); min-height: 50px; }*/
.location-display-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* background-color: var(--color-bg-element); */
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-1);
    margin-bottom: var(--space-1);
    /* border: 1px solid var(--color-border-interactive); */
    min-height: 50px;
}

/*.location-text { color: var(--color-text-secondary); 
    font-size: var(--font-size-sm); flex-grow: 1; margin-right: var(--space-3); overflow: hidden; text-overflow:
     ellipsis; white-space: nowrap; display: flex; align-items: center; } */

.location-text {
    color: var(--color-text-secondary);
    font-size: 16px;
    flex-grow: 1;
    margin-right: var(--space-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
}     


.location-text.has-location { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.location-text i { margin-right: var(--space-2); flex-shrink: 0; }
.location-text .fa-spinner { color: var(--color-accent-primary); } .location-text .fa-map-marker-alt { color: var(--color-text-secondary); } .location-text .fa-exclamation-triangle { color: var(--color-warning); }

.location-change-btn {
    /* background: none; */
    border: none;
    color: #000000;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    padding: 8px 13px !important;
    text-decoration: none !important;
    border-radius: 23px;
    font-weight: 600 !important;
    flex-shrink: 0;
    cursor: pointer;
    background: #e8e8e8;
    font-size: 15px !important;
}

.location-change-btn:hover { color: var(--color-accent-primary-hover); text-decoration: underline; }
#blup-use-detected-btn {
    width: 100%;
    background: #000;
    padding: 15px 8px;
    color: #fff;
    font-size: 18px;
    border-radius: 9px;
    margin-top: var(--space-4);
}
/* ======================================================== */
/* === NUEVO: ESTILOS MODAL FIJAR UBICACIÓN (Flotante - CORREGIDO) === */
/* ======================================================== */

.modal.fix-location-modal {
    /* Posición fija sobre el mapa */
    position: fixed; /* Usar fixed para que no dependa del scroll del body */
    
    left: 50%;
    width: calc(110% - var(--space-6) * 2); /* Ancho con márgenes */
    max-width: 500px; /* Ancho máximo */
    z-index: var(--z-modal); /* Encima del mapa, debajo de otros modales */

    /* Apariencia */
    background-color: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    border-radius: 16px 16px 0px 0px;
    box-shadow: var(--shadow-lg);
    padding: var(--space-5); /* Padding interno */

    /* Estado inicial (oculto abajo) y transición */
    transform: translateX(-50%) translateY(150%); /* Empezar más abajo */
    visibility: hidden;
    opacity: 0; /* Empezar invisible */
    transition: transform var(--transition-duration-normal) cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity var(--transition-duration-fast) ease-in-out, /* Fade in rápido */
                visibility 0s linear var(--transition-duration-normal);
    display: flex; /* Asegurar que sea flex para el contenido */
    flex-direction: column; /* Alinear contenido verticalmente */
}

/* Estado activo (visible) */
.modal.fix-location-modal.active {
    transform: translateX(-50%) translateY(0); /* Sube a su posición final */
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

/* Quitar header y su borde (ya no aplica si usamos el estilo base) */
.modal.fix-location-modal .modal-header { display: none; }
.modal.fix-location-modal .modal-content { border-top: none; padding: 0; background-color: #fff; } /* Sin padding extra el content */

/* Contenido interno del modal flotante */
.modal.fix-location-modal h3 {
    font-size: var(--font-size-md); text-align: center; margin-bottom: var(--space-2);
    color: var(--color-text-primary);
}
.modal.fix-location-modal p {
    font-size: var(--font-size-sm); color: var(--color-text-secondary);
    text-align: center; margin-bottom: var(--space-4);
}
.modal.fix-location-modal .location-display-inline {
    margin-bottom: var(--space-4); padding: var(--space-2) var(--space-3); justify-content: center;
    background-color: var(--color-bg-element); /* Fondo distinto para coords */
    border: none; /* Sin borde extra */
}
.modal.fix-location-modal #fix-location-coords-text {
    font-family: monospace; font-size: var(--font-size-sm); color: var(--color-text-primary);
    background: none; padding: 0; border-radius: 0; text-align: center;
}
.modal.fix-location-modal #fix-location-confirm-btn {
    width: 100%; /* Botón ancho completo */
}

/* --- FIN ESTILOS MODAL FIJAR UBICACIÓN --- */



/* frontend/css/style.css (AÑADIR AL FINAL - Estilos Búsqueda Ubicación) */

/* frontend/css/style.css (REEMPLAZAR ESTA SECCIÓN - CORRECCIÓN BUSQUEDA) */

/* ======================================================== */
/* === ESTILOS MODAL FIJAR UBICACIÓN (Con Búsqueda v2) === */
/* ======================================================== */

/* Estilo base modal flotante (sin cambios) */

.modal.fix-location-modal.active { transform: translateX(-50%) translateY(0); visibility: visible; opacity: 1; transition-delay: 0s; }
.modal.fix-location-modal .modal-header { display: none; }
.modal.fix-location-modal .modal-content { border-top: none; padding: var(--space-4); padding-top: var(--space-5); } /* Ajustar padding */

/* Botón Cerrar (opcional, si se añadió) */
.modal.fix-location-modal .overlay-close-btn { /* Ajustar selector si cambió */
    position: absolute; top: 1.8rem !important; right: var(--space-2); width: 32px; height: 32px; font-size: 1.4rem; line-height: 1; color: var(--color-text-tertiary); background-color: var(--color-bg-element); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color var(--transition-duration-fast), color var(--transition-duration-fast); z-index: 10; border: none; cursor: pointer;
}
.modal.fix-location-modal .overlay-close-btn:hover { background-color: var(--color-bg-element-hover); color: var(--color-text-primary); }

/* Título e Instrucción (sin cambios) */
.modal.fix-location-modal h3 { font-size: var(--font-size-md); text-align: center; margin-bottom: var(--space-2); color: var(--color-text-primary); }
.modal.fix-location-modal p { font-size: var(--font-size-sm); color: var(--color-text-secondary); text-align:center; margin-bottom: var(--space-4); }

/* --- Grupo Búsqueda - CORREGIDO --- */
.search-location-group {
    position: relative; /* Para lista resultados */
    margin-bottom: var(--space-4);
}

/* Contenedor Input Group */
.search-location-group .input-group {
    display: flex;
    align-items: center;
    /* Fondo ligeramente más claro que la base, pero oscuro */
    background-color: var(--color-bg-element); /* #333 */
    border: 1px solid #ced4da; /* Borde inicial del mismo color */
    /* Redondeado Apple/Uber */
    border-radius: var(--radius-md); /* 8px o 10px */
    padding: 0 var(--space-3); /* Padding horizontal */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-location-group .input-group:focus-within {
    border-color: var(--color-text-secondary); /* Borde gris claro al enfocar */
    background-color: var(--color-bg-element-hover); /* Fondo ligeramente más claro */
    box-shadow: none; /* Sin glow azul, más sutil */
}

/* Icono Lupa */
.search-location-group .input-group label { /* El <label> que envuelve al <i> */
    padding: 0; margin: 0; /* Resetear */
    margin-right: var(--space-2); /* Espacio después del icono */
    color: var(--color-text-tertiary); /* Gris muy tenue */
    font-size: 1.1rem; /* Tamaño icono */
    display: flex;
    align-items: center;
    line-height: 1;
}
.search-location-group .input-group label i { /* El icono <i> en sí */
     line-height: 1; /* Asegurar alineación */
}

/* Input de Búsqueda */
#fix-location-search-input {
    flex-grow: 1;
    /* Padding vertical consistente con altura botones/inputs */
    padding: var(--space-3) 0;
    font-size: var(--font-size-base); /* Tamaño de texto estándar */
    border: none;
    background: none;
    outline: none;
    color: var(--color-text-primary); /* Texto principal blanco/casi blanco */
    width: 100%;
    /* Quitar espacio extra para botón limpiar con padding */
    padding-right: var(--space-1); /* Espacio generoso para el botón 'x' */
}

#fix-location-search-input::placeholder {
    color: var(--color-text-tertiary); /* Placeholder gris tenue */
    transition: color 0.2s ease;
}
.search-location-group .input-group:focus-within #fix-location-search-input::placeholder {
    color: var(--color-text-secondary); /* Placeholder un poco más visible al enfocar */
}

/* Botón Limpiar Búsqueda ('x') */
#fix-location-clear-search.clear-search-btn {
    position: absolute;
    right: var(--space-2); /* Más cerca del borde */
    top: 50%;
    transform: translateY(-50%); /* Centrado vertical perfecto */
    width: 24px; /* Botón pequeño */
    height: 24px;
    background-color: var(--color-border-interactive); /* Círculo gris */
    border: none;
    border-radius: 50%;
    color: var(--color-bg-surface); /* 'x' oscura */
    font-size: 0.8rem; /* Tamaño 'x' */
    font-weight: bold;
    cursor: pointer;
    display: none; /* JS lo muestra */
    align-items: center;
    justify-content: center;
    line-height: 1; /* Evitar problemas de línea */
    transition: background-color 0.15s ease, color 0.15s ease;
}
#fix-location-clear-search.clear-search-btn:hover {
    background-color: var(--color-text-tertiary); /* Gris más claro al hover */
    color: var(--color-bg-base); /* 'x' más oscura */
}
/* --- Fin Grupo Búsqueda --- */

#review-summary-details p { margin-bottom: var(--space-3); font-size: var(--font-size-sm); display: flex; justify-content: space-between; }
#review-summary-details p strong { color: var(--color-text-secondary); font-weight: normal; margin-right: var(--space-2); }
#review-summary-details p span { color: var(--color-text-primary); font-weight: var(--font-weight-medium); text-align: right; }
#review-summary-details p span.price { color: var(--color-success); } /* Color precio */

/* Switch Subasta (sin cambios) */
/*.switch-group { display: flex; align-items: center; justify-content: space-between; background-color: var(--color-bg-element); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border-interactive); margin-top: var(--space-6); margin-bottom: var(--space-4); cursor: pointer; }
.switch-group { display: flex; align-items: center; justify-content: space-between; background-color: var(--color-bg-element); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border-interactive); margin-top: var(--space-6); margin-bottom: var(--space-4); cursor: pointer; }
.switch-label { flex-grow: 1; margin-right: var(--space-4); cursor: pointer; }
.switch-label span { display: block; font-weight: var(--font-weight-medium); color: var(--color-text-primary); margin-bottom: var(--space-1); font-size: var(--font-size-sm); }
.switch-label small { display: block; font-size: var(--font-size-xs); color: var(--color-text-secondary); line-height: var(--line-height-tight); }
.switch-container { position: relative; display: inline-block; width: 51px; height: 31px; flex-shrink: 0; }
.switch-input { opacity: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; cursor: pointer; margin: 0; }
.switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--color-border-interactive); border: 1px solid var(--color-border-interactive); transition: background-color var(--transition-duration-fast) ease-in-out, border-color var(--transition-duration-fast) ease-in-out; border-radius: var(--radius-full); z-index: 0; }
.switch-slider::before { position: absolute; content: ""; height: 27px; width: 27px; left: 1px; bottom: 1px; background-color: white; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 0 1px rgba(0,0,0,0.1); transition: transform var(--transition-duration-normal) cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 1; }
.switch-input:checked + .switch-slider { background-color: var(--color-accent-primary); border-color: var(--color-accent-primary); }
.switch-input:checked + .switch-slider::before { transform: translateX(20px); }
.switch-input:focus-visible + .switch-slider { box-shadow: 0 0 0 2px var(--color-bg-surface), 0 0 0 4px var(--color-accent-primary-glow); }
*/


/* Lista de Resultados (sin cambios) */
.search-results-list { list-style: none; padding: 0; margin: 0; position: absolute; top: calc(100% + var(--space-1)); left: 0; right: 0; background-color: var(--color-bg-surface); box-shadow: var(--shadow-md); z-index: 10; max-height: 180px; overflow-y: auto; display: none; }
.search-results-list.visible { display: block; }
.search-results-list::-webkit-scrollbar { width: 5px; } .search-results-list::-webkit-scrollbar-track { background: transparent; } .search-results-list::-webkit-scrollbar-thumb { background-color: var(--color-border-interactive); border-radius: 3px; }
.search-results-list li { padding: var(--space-3) var(--space-4); cursor: pointer; border-bottom: 1px solid var(--color-border-divider); font-size: var(--font-size-sm); color: var(--color-text-secondary); transition: background-color var(--transition-duration-fast); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-results-list li:last-child { border-bottom: none; } .search-results-list li:hover { background-color: var(--color-bg-surface-hover); color: var(--color-text-primary); }
.search-results-list li strong { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.search-results-list .no-results { padding: var(--space-3) var(--space-4); color: var(--color-text-tertiary); font-style: italic; cursor: default; }

/* Display Dirección/Coords en Tiempo Real (sin cambios) */
.location-display-realtime { background-color: var(--color-bg-element); border-radius: var(--radius-md); padding: var(--space-3); margin-top: var(--space-4); margin-bottom: var(--space-4); text-align: center; border: 1px solid var(--color-border-interactive); min-height: 40px; display: flex; align-items: center; justify-content: center; }
.location-display-realtime .location-text { font-family: monospace; font-size: var(--font-size-xs); color: var(--color-text-primary); }
.location-display-realtime .location-text i { color: var(--color-accent-primary); margin-right: var(--space-1); }
.location-display-realtime .location-text .fa-exclamation-triangle { color: var(--color-warning); }

/* Botón Confirmar (sin cambios) */
#fix-location-confirm-btn { width: 100%; margin-top: var(--space-4);}

/* --- FIN ESTILOS BÚSQUEDA UBICACIÓN --- */


/* frontend/css/style.css (o map.css) - REEMPLAZAR ESTILO MINIMAPA REVISIÓN */

/* Ubicación Confirmada - Minimapa Estático */
#blup-review-modal .form-group label { /* Estilo label Ubicación */
     font-weight: var(--font-weight-medium);
     color: var(--color-text-primary); /* Hacer label más visible */
     margin-bottom: var(--space-3);
}

#blup-review-map {
    /* Tamaño Fijo y Máximo */
    width: 100%;      /* Ocupar ancho disponible del contenedor */
    max-width: 450px; /* Ancho máximo fijo */
    height: 250px;    /* Mantener altura o ajustarla si prefieres */
    /* Centrar el mapa si el contenedor es más ancho */
    margin-left: auto;
    margin-right: auto;
    /* Estilo Visual */
    border: 1px solid var(--color-border-subtle); /* Borde sutil */
    border-radius: var(--radius-xl); /* <<< BORDES REDONDEADOS (16px) */
    background-color: var(--color-bg-element); /* Fondo mientras carga */
    margin-top: var(--space-2);
    overflow: hidden; /* Importante para que el borde redondeado funcione */
    cursor: default !important; /* Asegurar que no parezca interactivo */
     /* *** NUEVO: Ocultar inicialmente con opacidad *** */
    opacity: 0;
    visibility: hidden; /* Asegurar que no sea interactivo mientras está oculto */
    transition: opacity 0.3s ease-in-out; /* Transición suave para aparecer */
    /* *********************************************** */
}
/* *** NUEVO: Clase para mostrar el mapa *** */
#blup-review-map.map-loaded {
    opacity: 1;
    visibility: visible;
}
/* ************************************* */
#blup-review-map .maplibregl-canvas-container.maplibregl-interactive {
    cursor: default !important; /* Quitar cursor de interacción del mapa interno */
}
#blup-review-map .maplibregl-ctrl-attrib-inner {
    display: none !important; /* Ocultar atribución en minimapa */
}


/* Texto de dirección debajo del mapa */
#blup-review-address {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    display: block;
    text-align: center;
    margin-top: var(--space-3); /* Más espacio */
    padding: 0 var(--space-2); /* Evitar que pegue a bordes en móvil */
}

/* --- FIN ESTILOS MINIMAPA REVISIÓN --- */



/* frontend/css/style.css o components.css (AÑADIR ESTO) */

/* Estilos para el texto de ubicación dividido */
#blup-current-location-text {
    /* Asegurar flex y alineación */
    display: flex;
    align-items: flex-start; /* Alinear icono arriba */
    gap: var(--space-2);
    text-align: left; /* Alinear texto a la izquierda */
    /* Hereda otros estilos de .location-text */
}
#blup-current-location-text i {
    margin-top: 2px; /* Ajuste fino vertical del icono */
}

.location-main {
    display: block; /* Una línea por sí sola */
    font-weight: var(--font-weight-semibold); /* Más grueso */
    color: var(--color-text-primary); /* Color principal */
    line-height: var(--line-height-snug);
    /* Resto de estilos heredados o por defecto */
}

.location-secondary {
    display: block; /* Una línea por sí sola */
    font-size: 14px; /* Más pequeño */
    color: var(--color-text-secondary); /* Gris secundario */
    line-height: var(--line-height-tight);
    margin-top: 2px; /* Pequeño espacio arriba */
}


/* --- CORRECCIÓN CRÍTICA VIBRACIÓN MAPA --- */
/* Evita que el motor del mapa pelee con transiciones CSS globales */
#map, #map canvas, .maplibregl-map {
    transition: none !important;
    animation: none !important;
    transform-style: flat !important;
}

/* Asegura que el contenedor tenga prioridad de renderizado */
#map-screen > main {
    position: relative;
    z-index: 1;
    contain: layout paint; /* Optimización para navegadores modernos */
}


/* ========================================= */
/* === SMART NAV CARD (Estilo Uber) === */
/* ========================================= */

.smart-nav-card {
    position: absolute;
    bottom: 20px; /* Flotando sobre el fondo */
    left: 20px;
    right: 20px;
    background-color: #ffffff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 50; /* Encima del mapa */
    display: flex;
    flex-direction: column;
    gap: 15px;
    animation: slideUpCard 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Selector de Modos (Pestañas visuales) */
.nav-mode-selector {
    display: flex;
    justify-content: space-between;
    background-color: #f3f3f3;
    border-radius: 12px;
    padding: 4px;
}

.nav-mode-btn {
    flex: 1;
    border: none;
    background: none;
    padding: 8px 0;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #757575;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.nav-mode-btn i { font-size: 1.1rem; margin-bottom: 2px; }
.nav-mode-btn span { font-weight: 600; font-size: 0.75rem; }

.nav-mode-btn.active {
    background-color: #000000;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Info Principal */
.nav-main-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.nav-time-big {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

#nav-eta-big {
    font-size: 2rem;
    font-weight: 800;
    color: #000;
    line-height: 1;
}

#nav-distance-small {
    font-size: 1rem;
    color: #666;
    font-weight: 500;
}

.nav-arrival-time {
    text-align: right;
    font-size: 0.9rem;
    color: #333;
}

/* Aviso Inteligente (El cerebro) */
.nav-smart-advice {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #e8f5e9; /* Verde suave por defecto */
    color: #2e7d32;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

.nav-smart-advice.urgent {
    background-color: #ffebee; /* Rojo suave */
    color: #c62828;
}

.nav-smart-advice i { font-size: 1.1rem; }

@keyframes slideUpCard {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Ajuste para móviles muy pequeños */
@media (max-width: 360px) {
    .smart-nav-card { left: 10px; right: 10px; bottom: 10px; }
    #nav-eta-big { font-size: 1.6rem; }
}


/* ========================================= */
/* === MARCADOR DESTINO 3D (CORREGIDO) === */
/* ========================================= */

.destination-3d-container {
    width: 40px;  /* Más compacto */
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centrado para mejor control */
    pointer-events: none;
    /* Ajuste fino para clavar la punta */
    margin-top: none; 
}

/* El Rombo (Beacon) */
.destination-diamond {
    width: 24px;
    height: 24px;
    background-color: #ffffff;
    border: 6px solid #000000;
    /* Rotación para rombo */
    transform: rotate(45deg);
    /* Sombra interna */
    box-shadow: inset 0 0 0 2px white, inset 0 0 5px rgba(0,0,0,0.2);
    z-index: 2;
    margin-bottom: 10px; /* Separación de la sombra del suelo */
    /* Animación Flotar */
    animation: diamondFloat 2s ease-in-out infinite;
}

/* Punto central negro (Ojo) */
.destination-diamond::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 6px; height: 6px;
    background-color: #000;
    border-radius: 50%;
}

/* La Sombra en el suelo */
.destination-shadow {
    width: 24px;
    height: 8px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    filter: blur(3px);
    z-index: 1;
    /* Animación Sombra */
    animation: shadowPulse 2s ease-in-out infinite;
}

/* Animaciones sincronizadas */
@keyframes diamondFloat {
    0%, 100% { transform: rotate(45deg) translateY(0); }
    50% { transform: rotate(45deg) translateY(-8px); } /* Sube y baja */
}

@keyframes shadowPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(0.6); opacity: 0.2; } /* Se achica cuando el rombo sube */
}

/* FORZAR VISIBILIDAD CUANDO ESTAMOS ELIGIENDO UBICACIÓN PARA CHAT */
/* Esto sobreescribe la regla que ocultaba cosas cuando el chat estaba abierto */
body #blup-fix-location-modal.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 3000 !important; /* Encima del chat */
}

/* Ajuste para el botón de volver en el mapa cuando es para chat */
#map-back-btn i.fa-comment-dots {
    color: var(--color-accent-primary); /* Azulito para indicar chat */
    font-size: 1.2rem;
}