/* ============================================================================
   Facilu Flow — Posicion MAP (#!/Posicion).
   ----------------------------------------------------------------------------
   Capa de PRESENTACION. No toca comportamiento: todos los ng-model/ng-click/
   ng-repeat/funciones de PosicionCtrl.js siguen siendo las mismas; esta hoja
   solo cambia como se ve la lista de conductores (de tabla dispersa a lista
   de tarjetas) y el reparto de espacio con el mapa (que pasa a ser el
   protagonista de la pantalla, en vez de compartir 50/50 con una tabla que
   solo tenia 5 columnas con datos).

   Ver .claude/MAPA_IMPLEMENTACION.md antes de tocar el div #map o el patron
   de instanciacion unica del mapa: esta hoja NO cambia nada de eso, solo
   reorganiza el HTML alrededor de #map.
   ========================================================================= */

.fg-posicion .box-body { padding: 14px 15px 12px; }

/* ══ 1. PANEL IZQUIERDO: BUSQUEDA + LISTA ═══════════════════════════════════ */

.fg-posicion .fg-barra { display: flex; flex-direction: column; gap: 7px; }

.fg-posicion .fg-barra-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.fg-posicion .fg-f-buscar { flex: 1 1 auto; }
.fg-posicion .fg-f-select { flex: 1 1 100px; min-width: 100px; }
.fg-posicion .fg-barra-fila .btn { flex: 0 0 auto; }

/* El `.input-group` de Bootstrap 3 usa `display:table` + `float:left` en el
   `.form-control`: funciona mientras el propio input-group tenga un ancho
   "auto" que se ajuste a su contenido. En cuanto se le fuerza width:100%
   (necesario aqui para que ocupe todo el panel en la version apilada), la
   combinacion table+float se rompe y la etiqueta (`.input-group-addon`) cae
   a una fila aparte en vez de quedar al lado del campo. Se reemplaza por
   flexbox propio, que no depende de ese ancho "auto" para funcionar.  */
.fg-posicion .fg-f-buscar.input-group,
.fg-posicion .fg-f-select.input-group {
    display: flex;
    align-items: stretch;
}

.fg-posicion .fg-f-buscar.input-group .input-group-addon,
.fg-posicion .fg-f-select.input-group .input-group-addon {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    /* Bootstrap pone `width:1%` en `.input-group-addon` (pensado para su
       layout de tabla); con flex-basis:auto (el `0 0 auto` de arriba) la
       spec usa ese `width` como base en vez del contenido, truncando el
       texto de la etiqueta a un puñado de pixeles. Se neutraliza aqui. */
    width: auto;
    white-space: nowrap;
    float: none;
}

.fg-posicion .fg-f-buscar.input-group .form-control,
.fg-posicion .fg-f-select.input-group .form-control {
    float: none;
    flex: 1 1 auto;
    width: auto;
    /* facilu-listados.css trae `.fg-listado .fg-f-select .form-control {
       max-width:170px }` para el patron de select angosto de otras pantallas;
       aqui el select debe ocupar todo el ancho restante del input-group. */
    max-width: none;
}

/* Cada control de busqueda en su propia fila, con el boton "Buscar" al final:
   evita que Ciudad/Vehiculo/Buscar se aprieten cuando el panel se angosta
   (columna de 4/12 del grid, o pantallas pequeñas). */
.fg-posicion .fg-barra-fila-columna {
    flex-direction: column;
    align-items: stretch;
}

/* El main-axis de `.fg-barra-fila` cambia de horizontal a vertical en la
   variante apilada: el `flex-basis` de 100px de `.fg-f-select` (pensado como
   ancho minimo en la fila horizontal) pasaba a leerse como alto minimo aqui,
   inflando cada campo a 100px de alto con relleno vacio debajo. */
.fg-posicion .fg-barra-fila-columna .fg-f-buscar,
.fg-posicion .fg-barra-fila-columna .fg-f-select {
    flex: 0 0 auto;
}

.fg-posicion .fg-barra-fila-columna .btn { width: 100%; }

/* Resumen: total conectados + cuenta regresiva del refresco automatico.
   Antes vivian separados (uno como boton en la barra de filtros, el otro
   como barra de progreso rota en el pie); ahora se leen juntos de un vistazo. */
.fg-posicion .fg-posicion-resumen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background-color: var(--fg-soft);
}

.fg-posicion .fg-posicion-conectados {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fg-ink);
}

.fg-posicion .fg-posicion-conectados .fa { color: var(--fg-p); }
.fg-posicion .fg-posicion-conectados b { color: var(--fg-pd); }

.fg-posicion .fg-posicion-refresco {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--fg-muted);
    white-space: nowrap;
}

.fg-posicion .fg-posicion-refresco .fa { font-size: 10.5px; }

@keyframes fg-posicion-spin { to { transform: rotate(360deg); } }
.fg-posicion .fg-posicion-refresco .fa-spin { animation: fg-posicion-spin 0.8s linear infinite; }

@media (prefers-reduced-motion: reduce) {
    .fg-posicion .fg-posicion-refresco .fa-spin { animation: none; }
}

/* Lista de conductores: tarjetas en vez de filas de tabla dispersas.
   Scroll propio para que una lista larga no empuje el pie de pagina fuera
   de la vista ni desalinee la altura contra el mapa. */
.fg-posicion .fg-posicion-lista {
    max-height: 500px;
    overflow-y: auto;
    margin-top: 10px;
    border: 1px solid var(--fg-line);
    border-radius: 8px;
}

.fg-posicion .fg-posicion-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--fg-line);
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.fg-posicion .fg-posicion-fila:last-child { border-bottom: 0; }
.fg-posicion .fg-posicion-fila:hover { background-color: var(--fg-soft); }

.fg-posicion .fg-posicion-fila.fg-posicion-fila-activa {
    background-color: var(--fg-soft);
    border-left-color: var(--fg-p);
}

.fg-posicion .fg-posicion-fila.fg-posicion-fila-alerta { border-left-color: var(--fg-danger-btn); }
.fg-posicion .fg-posicion-fila.fg-posicion-fila-ok { border-left-color: var(--fg-success-btn); }
.fg-posicion .fg-posicion-fila.fg-posicion-fila-sinsenal { border-left-color: #CBD5E1; }

.fg-posicion .fg-posicion-icono {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--fg-soft);
    color: var(--fg-p);
    font-size: 14px;
}

.fg-posicion .fg-posicion-fila-alerta .fg-posicion-icono { background-color: #FEE2E2; color: var(--fg-danger-btn); }
.fg-posicion .fg-posicion-fila-ok .fg-posicion-icono { background-color: #D1FAE5; color: var(--fg-success-btn); }
.fg-posicion .fg-posicion-fila-sinsenal .fg-posicion-icono { background-color: var(--fg-soft); color: #94A3B8; }

.fg-posicion .fg-posicion-info { flex: 1 1 auto; min-width: 0; }

.fg-posicion .fg-posicion-nombre {
    font-size: 13px;
    font-weight: 700;
    color: var(--fg-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fg-posicion .fg-posicion-nombre .fa-star { margin-right: 4px; font-size: 10.5px; color: var(--fg-warning); }
.fg-posicion .fg-posicion-nombre small { font-weight: 500; color: var(--fg-muted); }

.fg-posicion .fg-posicion-meta {
    font-size: 11px;
    color: var(--fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fg-posicion .fg-posicion-fila .fg-estado { flex: 0 0 auto; }

.fg-posicion .fg-posicion-fila .fg-posicion-btn-info {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    line-height: 24px;
    text-align: center;
}

/* ══ 2. PIE: "VER TODOS" + PAGINACION ════════════════════════════════════════ */

.fg-posicion .fg-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 4px 4px;
}

.fg-posicion .fg-pie .pagination { margin: 0; }

/* ══ 3. PANEL DERECHO: MAPA ══════════════════════════════════════════════════ */

.fg-posicion-mapa .box-header.with-border { padding: 10px 15px; }

.fg-posicion-mapa #map {
    height: 560px;
    border-radius: 6px;
}

/* Lienzo + leyenda: el contenedor solo aporta position:relative para anclar
   la leyenda encima del mapa; #map en si no cambia de tamaño ni se re-crea. */
.fg-posicion-mapa-lienzo { position: relative; }

.fg-posicion-leyenda {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 7px 10px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--fg-ink);
}

.fg-posicion-leyenda-item { display: flex; align-items: center; gap: 6px; white-space: nowrap; }

.fg-posicion-leyenda-punto {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
}

.fg-posicion-leyenda-activo { background-color: #34A853; }
.fg-posicion-leyenda-inactivo { background-color: #EA4335; }
.fg-posicion-leyenda-sinsenal { background-color: #FBBC04; }

/* Lista de marcadores bajo el mapa ("Todos"): antes era una lista vertical
   de enlaces en texto plano; ahora son chips que se acomodan en fila,
   consistente con el resto del sistema (`.fg-chip`). */
.fg-posicion-mapa .fg-posicion-marcadores {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.fg-posicion-mapa .fg-posicion-marcadores #country_container {
    display: inline-block;
    margin: 0;
    padding: 3px 11px;
    width: auto;
    border-radius: 999px;
    background-color: var(--fg-soft);
    color: var(--fg-ink);
    font-size: 11.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.fg-posicion-mapa .fg-posicion-marcadores #country_container:hover {
    background-color: var(--fg-p);
    color: #fff;
    box-shadow: none;
    border: 0;
}

.fg-posicion-mapa .fg-posicion-marcadores #names { cursor: pointer; }

@media (max-width: 991px) {
    .fg-posicion-mapa #map { height: 380px; }
}

/* La fila "Buscar + Ciudad" se queda en linea (flex-wrap:wrap no alcanza a
   dispararse porque el input de busqueda puede seguir encogiendose) hasta
   que la pantalla se angosta demasiado y el select de Ciudad queda apretado.
   Se fuerza a apilar, igual que ya hace la fila de Vehiculo/Buscar. */
@media (max-width: 576px) {
    .fg-posicion .fg-barra-fila:not(.fg-barra-fila-columna) {
        flex-direction: column;
        align-items: stretch;
    }

    .fg-posicion .fg-barra-fila:not(.fg-barra-fila-columna) .fg-f-buscar,
    .fg-posicion .fg-barra-fila:not(.fg-barra-fila-columna) .fg-f-select {
        flex: 0 0 auto;
    }
}