/**
 * GeoMinder — estilos de la app.
 * Extraído del <style> inline de la v0.3.2 (geominder.php) — mismas
 * variables de tema oscuro que el resto de plugins Xolker.
 */
.geominder-app {
    --bg-base: #13131f;
    --surface: #1e1e2e;
    --surface-secondary: #27273a;
    --border: #3a3a55;
    --accent-main: #7c6ff7;
    --accent-secondary: #9b59b6;
    --text-main: #dcdcf0;
    --text-secondary: #8888aa;
    --success: #4caf50;
    --danger: #ff6584;
    --warning: #f59e0b;

    background-color: var(--surface);
    color: var(--text-main);
    font-family: 'Segoe UI', system-ui, sans-serif;
    border-radius: 20px;
    padding: 25px;
    max-width: 800px;
    margin: 20px auto;
    border: 1px solid var(--border);
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
}

.geominder-app .geominder-login-notice {
    text-align: center;
    padding: 20px 10px;
    color: var(--text-secondary);
}
.geominder-app .geominder-login-notice a {
    display: inline-block;
    margin-top: 14px;
    padding: 10px 22px;
    background: linear-gradient(90deg, var(--accent-main), var(--accent-secondary));
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
}

/* Avisos persistentes de recordatorios disparados (06/08/2026, pedido
   explícito) — se quedan visibles hasta que el usuario pulsa "Descartar",
   con independencia de si el usuario sigue dentro o fuera del radio.
   Oculto por defecto (display:none), geominder-app.js lo muestra cuando
   hay al menos un recordatorio en estado 'triggered'. */
#gm-triggered-alerts { display: none; margin-bottom: 16px; }
.gm-triggered-alert-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: rgba(245, 158, 11, .12);
    border: 1px solid rgba(245, 158, 11, .4);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 8px;
    color: var(--text-main);
    font-size: 14px;
}
.gm-triggered-alert-dismiss { background: none; border: none; color: var(--warning); cursor: pointer; font-size: 20px; line-height: 1; flex-shrink: 0; }

/* Buscador de direcciones (06/08/2026, pedido explícito) — geocodifica con
   Nominatim y centra el mapa ahí. Mismos colores de input/botón ya usados
   en el resto del formulario de la app. */
.gm-address-search { display: flex; gap: 8px; margin-bottom: 12px; }
.gm-address-search input { flex: 1; box-sizing: border-box; background: var(--surface-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; color: var(--text-main); font-size: 13px; }
.gm-address-search button { background: linear-gradient(90deg, var(--accent-main), var(--accent-secondary)); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }

#gm-map { height: 300px; width: 100%; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 12px; background: #000; }

/* Marcador arrastrable (06/08/2026, pedido explícito) — "gota" de pin
   dibujada con CSS (L.divIcon, sin imagen aparte), en el morado de acento
   de la app para distinguirse claramente tanto del punto azul de la
   posición GPS en vivo (círculo) como de los marcadores por defecto
   (azules) de los recordatorios ya guardados en el mapa. */
.gm-placement-marker-icon {
    width: 22px;
    height: 22px;
    border-radius: 50% 50% 50% 0;
    background: linear-gradient(135deg, var(--accent-main), var(--accent-secondary));
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.45);
    transform: rotate(-45deg);
    cursor: grab;
}

/* Modo "Explorar zona" (06/08/2026, pedido explícito) — botón para
   desactivar el seguimiento automático de la ubicación y navegar el mapa
   libremente. Estado activo (.gm-exploring) resaltado en el color de
   acento para que sea evidente que el mapa ya NO se recentra solo. */
.gm-map-toolbar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
#gm-explore-toggle { background: none; border: 1px solid var(--border); color: var(--text-main); border-radius: 6px; padding: 5px 12px; font-size: 11px; cursor: pointer; }
#gm-explore-toggle.gm-exploring { border-color: var(--accent-main); color: var(--accent-main); }

/* Popup de Leaflet al pulsar un marcador de recordatorio en el mapa
   (06/08/2026, pedido explícito, "Explorar zona") — el fondo del popup lo
   pone Leaflet (blanco por defecto), así que el texto necesita un color
   oscuro propio para ser legible, distinto del resto de la app (que es
   sobre fondo oscuro). */
.gm-marker-popup { color: #1d2327; font-size: 13px; line-height: 1.4; }
.gm-marker-popup-date { color: #767a80; font-size: 11px; margin-top: 4px; }

#gm-status { color: var(--text-secondary); font-size: 12px; min-height: 18px; margin: 0 0 12px; transition: color 0.3s; }

/* Formulario de recordatorio (06/08/2026, pedido explícito) — sustituye
   por completo el flujo de voz + fallback de texto (que solo aparecía si
   la voz fallaba). Único punto de entrada, siempre visible. */
.gm-reminder-form { margin-top: 4px; }
.gm-reminder-form textarea { width: 100%; box-sizing: border-box; background: var(--surface-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 10px; color: var(--text-main); font-size: 14px; min-height: 70px; }
.gm-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 10px 0; align-items: flex-end; }
.gm-settings-grid label { font-size: 12px; color: var(--text-secondary); display: block; margin-bottom: 5px; }
.gm-settings-grid input { width: 100%; box-sizing: border-box; background: var(--surface-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 8px; color: var(--text-main); }
#gm-save-btn { background: var(--success); color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; width: 100%; }
#gm-save-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Aviso de detección de proximidad (fase 4) — estado del "vigilante" de
   ubicación continua, y prompt de permiso de notificaciones. */
.gm-geofence-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--surface-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 12px;
    color: var(--text-secondary);
}
.gm-geofence-bar .gm-geofence-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-secondary); flex-shrink: 0; }
.gm-geofence-bar.gm-watching .gm-geofence-dot { background: var(--success); box-shadow: 0 0 6px var(--success); }
.gm-geofence-bar button { background: none; border: 1px solid var(--border); color: var(--text-main); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 11px; }

.gm-reminders-list h3 { border-top: 1px solid var(--border); padding-top: 20px; margin-top: 20px; }
.gm-reminder-item { background: var(--surface-secondary); padding: 15px; border-radius: 12px; margin-bottom: 10px; border-left: 4px solid var(--accent-main); display: flex; justify-content: space-between; align-items: center; }
.gm-reminder-item.gm-status-triggered { border-left-color: var(--warning); }
.gm-reminder-item.gm-status-dismissed { border-left-color: var(--text-secondary); opacity: .6; }
.gm-reminder-item p { margin: 0 0 5px; font-size: 15px; }
.gm-reminder-item small { color: var(--text-secondary); font-size: 11px; }
.gm-delete-btn { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 18px; }