/* ============================================================================
   Facilu Flow — borradores de Nuevo Servicio sobre Servicios Activos
   ----------------------------------------------------------------------------
   Etapa 4 del plan multiservicio. Cajon lateral, pestañas, dock de minimizados
   y boton flotante. Consume los tokens de facilu-theme.css.

   Criterio de diseno:
     · Cajon superpuesto y SIN velo modal. La gracia de crear desde aqui es
       poder seguir leyendo y usando la grilla mientras tanto; un modal haria
       justo lo contrario.
     · Se anima con 'right', NUNCA con 'transform'. Un ancestro transformado se
       convierte en bloque contenedor de sus descendientes 'position: fixed', y
       los modales de Bootstrap que abre el formulario quedarian atrapados
       dentro del cajon.
   ========================================================================= */

/* ══ 1. BOTON FLOTANTE ═════════════════════════════════════════════════════ */

.fg-fab {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 1020;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--fg-p);
    color: #fff;
    font-size: 21px;
    line-height: 54px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(108, 58, 237, 0.42);
    transition: background-color .15s ease, box-shadow .15s ease;
}

.fg-fab:hover:not([disabled]) {
    background-color: var(--fg-pd);
    box-shadow: 0 8px 26px rgba(79, 39, 179, 0.5);
}

.fg-fab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--fg-ring), 0 6px 20px rgba(108, 58, 237, 0.42);
}

.fg-fab[disabled] {
    background-color: #B9A5EC;
    box-shadow: none;
    cursor: not-allowed;
}

/* Cuando el cajon esta desplegado, el boton se aparta para no quedar encima */
.fg-fab.fg-fab-apartado { right: calc(600px + 26px); }

/* ══ 2. CAJON ══════════════════════════════════════════════════════════════ */

.fg-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    /* Por encima del velo de Bootstrap (.modal-backdrop, 1040) y por debajo de
       los modales que abre la propia grilla (1050).

       Con position:fixed y un z-index propio, el cajon crea un CONTEXTO DE
       APILAMIENTO: todo lo que cuelga de el se ordena ahi dentro y ya no puede
       competir con lo que hay fuera. Con 1030 la modal de usuarios del
       formulario quedaba atrapada en ese 1030, mientras su velo -que Bootstrap
       cuelga de <body>, fuera del cajon- se pintaba a 1040 por encima: la modal
       salia agrisada y no aceptaba ni un clic.

       No se puede arreglar subiendo el z-index de la modal, porque dentro del
       contexto del cajon ese valor solo compite con sus hermanos. Hay que subir
       el contexto entero. */
    z-index: 1045;
    display: flex;
    flex-direction: column;
    width: 600px;
    max-width: 100vw;
    background-color: #fff;
    border-left: 1px solid var(--fg-line);
    box-shadow: -8px 0 32px rgba(26, 8, 69, 0.16);
}

.fg-drawer-cabecera {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--fg-line);
    background-color: var(--fg-soft);
}

.fg-drawer-titulo {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.fg-drawer-acciones { margin-left: auto; display: flex; gap: 4px; }

/* ── Pestañas ─────────────────────────────────────────────────────────────── */

.fg-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px 0;
    border-bottom: 1px solid var(--fg-line);
    overflow-x: auto;
}

.fg-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px 7px 12px;
    border: 1px solid var(--fg-line);
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    background-color: #F8FAFC;
    color: var(--fg-muted);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    top: 1px;
}

.fg-tab:hover { background-color: var(--fg-soft); color: var(--fg-ink); }

/* Anillo de foco visible solo por teclado, igual que hace el tema con los
   botones: quien navega con tabulador tiene que ver donde esta. */
.fg-tab:focus-visible,
.fg-dock-tarjeta:focus-visible,
.fg-drawer:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--fg-ring);
}

.fg-tab.activa {
    background-color: #fff;
    border-color: var(--fg-line);
    border-top: 2px solid var(--fg-p);
    color: var(--fg-ink);
    padding-top: 6px;
}

/* Punto de "tiene cambios sin guardar" */
.fg-tab-sucio {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--fg-warning);
}

.fg-tab-cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    color: var(--fg-muted);
    font-size: 14px;
    line-height: 1;
}

.fg-tab-cerrar:hover {
    background-color: #FEE2E2;
    color: var(--fg-danger-btn);
    text-decoration: none;
}

.fg-tab-mas {
    padding: 5px 11px;
    border: 1px dashed #D9D2E9;
    border-radius: 6px;
    background-color: transparent;
    color: var(--fg-p);
    font-size: 13px;
    font-weight: 700;
}

.fg-tab-mas:hover:not([disabled]) { background-color: var(--fg-soft); }
.fg-tab-mas[disabled] { color: #CBD5E1; border-color: var(--fg-line); cursor: not-allowed; }

/* ── Cuerpo ───────────────────────────────────────────────────────────────── */

.fg-drawer-cuerpo {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
}

/* Cada borrador ocupa todo el cuerpo del cajon. Los inactivos siguen en el DOM,
   ocultos con ng-show, para no perder lo tecleado. */
.fg-panel-borrador { min-height: 100%; }

/* ── El formulario dentro del cajon ───────────────────────────────────────────
   NuevoServicio se maqueto para el ancho completo de la pantalla, en dos
   columnas de Bootstrap. Dentro de 600px esas columnas dan ~250px y los campos
   quedan inservibles. Como las clases col-sm-* miran el ancho del VIEWPORT y no
   el del contenedor, no se desapilan solas: hay que forzarlo aqui. */

.ns-panel [class*="col-sm-"],
.ns-panel [class*="col-md-"] {
    float: none;
    width: 100%;
}

/* col-xs-12 ya mide 100% de ancho en Bootstrap SIN necesidad de este
   override (a diferencia de col-sm- y col-md-, no depende del viewport), asi
   que nadie lo habia tocado. Pero Bootstrap SI lo deja flotando (float:left)
   a cualquier ancho, y eso rompia el renglon siguiente: un '.col-xs-12' con
   un grupo de botones flotado a la derecha adentro (p.ej. '.ns-titulo-seccion'
   con 'Direccion'/'Barrio'/'Quitar') seguia flotando, mientras que el
   '.form-group.col-sm-8' de la fila de abajo YA quedaba sin flotar por la
   regla de arriba. Un bloque sin flotar despues de un hermano flotado no
   'sabe' del flotado: arranca en el mismo Y que el, como si este no existiera
   en el flujo normal. El resultado visual era que el input de Direccion se
   pintaba ENCIMA de los botones del titulo, tapando el clic sin ningun error
   en consola (Playwright lo confirmo: "elemento intercepta eventos de puntero").
   Iguala el trato: col-xs-* tambien deja de flotar aqui dentro. */
.ns-panel [class*="col-xs-"] {
    float: none;
}

/* ── Barra de acciones del borrador ──────────────────────────────────────────
   Va pegada al fondo del cajon: el formulario es largo y, suelta al final del
   documento, Guardar quedaba a varios giros de rueda. Pegada, la salida esta
   siempre a la vista sin tapar nada, porque el cuerpo reserva su alto. */

.ns-panel .ns-acciones {
    position: sticky;
    bottom: -16px;          /* compensa el relleno del cuerpo del cajon */
    z-index: 2;
    margin: 14px -16px -16px;
    padding: 10px 16px 14px;
    border-top: 1px solid var(--fg-line);
    background-color: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -4px 14px rgba(26, 8, 69, 0.06);
}

.ns-panel .ns-acciones-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ns-panel .ns-botones {
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
}

/* Sin btn-group: pegados, tres botones de peso parecido se leen como un solo
   bloque. Separados y con icono, cada uno se reconoce por su forma. */
.ns-panel .ns-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.ns-panel .ns-btn > .fa { font-size: 13px; }

/* Las dos acciones secundarias, en gris con borde: no compiten con la
   principal, pero siguen siendo botones y no enlaces. */
.ns-panel .ns-btn.btn-default {
    border: 1px solid var(--fg-line);
    background-color: #fff;
    color: var(--fg-ink);
}

.ns-panel .ns-btn.btn-default:hover:not([disabled]) {
    border-color: var(--fg-pl);
    background-color: var(--fg-soft);
    color: var(--fg-pd);
}

/* La principal: la unica en color y la ultima, que es donde acaba la lectura. */
.ns-panel .ns-btn-principal {
    padding: 0 18px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(108, 58, 237, 0.28);
}

.ns-panel .ns-btn[disabled] { opacity: .5; box-shadow: none; cursor: not-allowed; }

/* Aviso de campos pendientes: mismo sitio que los botones que bloquea, y en
   tono de aviso, no de error: no es un fallo, es trabajo por terminar. */
.ns-panel .ns-falta {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 12px;
    border: 1px solid #FDE9C8;
    border-left: 3px solid var(--fg-warning);
    border-radius: 6px;
    background-color: #FFFBF3;
    font-size: 12px;
    line-height: 1.45;
    color: #7A5A18;
}

.ns-panel .ns-falta > .fa { margin-top: 2px; color: var(--fg-warning); }

/* Sustituye al bloque punteado de 340px: con el mapa abierto al lado basta una
   linea que diga donde esta y como cerrarlo. */
.ns-panel .ns-mapa-abierto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--fg-line);
    border-radius: 14px;
    background-color: var(--fg-soft);
    color: var(--fg-pd);
    font-size: 12px;
    font-weight: 600;
}

.ns-panel .ns-mapa-abierto a {
    color: var(--fg-muted);
    font-weight: 400;
    text-decoration: underline;
}

.ns-panel .ns-mapa-abierto a:hover { color: var(--fg-danger-btn); }

.ns-panel .panel { box-shadow: none; }
.ns-panel .form-group { margin-bottom: 10px; }
.ns-panel .control-label { margin-bottom: 3px; }

/* El formulario trae su propia caja; dentro del cajon sobra el doble marco. */
.ns-panel > div > div > div { padding: 0; }

/* ══ 3. MAPA ACOPLADO AL CAJON ═════════════════════════════════════════════
   El panel de mapa es unico y vive bajo la tabla. Cuando lo toma un borrador se
   acopla a la izquierda del cajon, para que el operador vea a la vez el campo y
   el punto que esta señalando.

   Es un cambio de POSICION por CSS, no de sitio en el arbol: el <div id="map">
   no se re-parenta, asi que la instancia de Google sobrevive intacta. Lo unico
   que hace falta es un 'resize', que dispara MapaPanel.tomar(). */

.fg-servicios .fg-mapa-acoplado {
    position: fixed;
    right: 616px;           /* 600 del cajon + 16 de aire */
    bottom: 16px;
    top: 56px;              /* bajo la barra superior: el mapa ocupa el alto util */
    z-index: 1029;          /* bajo el cajon (1045) y bajo el velo de los
                               modales (1040): mientras haya una modal abierta
                               el mapa queda atenuado, que es lo correcto */

    /* Ocupa TODO el hueco que deja el cajon, pegado al menu lateral. Reservar
       espacio para que se viera la grilla dejaba el mapa en ~450px reales en
       una pantalla de 1320, que es justo lo que se veia pequeño: mientras se
       ubica un punto, lo que importa es el mapa, y la grilla esta a un clic de
       Minimizar. */
    left: 72px;
    width: auto;
    min-width: 360px;

    display: flex;
    flex-direction: column;
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(26, 8, 69, 0.22);
}

/* El lienzo se come todo el alto que sobra de la cabecera, la barra y la lista
   de puntos, en vez de una altura fija que dejaba huecos o desbordaba. */
.fg-servicios .fg-mapa-acoplado .fg-mapa-lienzo { flex: 1 1 auto; min-height: 260px; }
.fg-servicios .fg-mapa-acoplado .fg-mapa-lienzo #map { height: 100%; min-height: 260px; }

/* ══ 3b. BARRA DE HERRAMIENTAS DEL MAPA ════════════════════════════════════
   La instala el borrador que tiene el mapa (MapaPanel.controles). Vive aqui y
   no en el formulario para que pulsar Origen/Destino y ver el efecto sean el
   mismo golpe de vista. */

.fg-servicios .fg-mapa-barra {
    display: flex;
    flex-wrap: nowrap;          /* un solo renglon: cada franja de cromo es alto
                                   que se le quita al mapa */
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--fg-line);
    background-color: #FCFBFE;
    overflow-x: auto;           /* si no cabe, se desplaza; nunca salta de linea */
}

.fg-servicios .fg-mapa-grupo { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }

/* Es un deshacer, no una accion primaria: se lee sin buscarla, pero no compite
   con Origen/Destino, que es lo que se usa a cada rato. */
.fg-servicios .fg-mapa-inicial { color: var(--fg-muted); white-space: nowrap; }
.fg-servicios .fg-mapa-inicial:hover { color: var(--fg-pd); }
.fg-servicios .fg-mapa-grupo-fin { margin-left: auto; }

/* El campo de coordenadas se estira con el panel en vez de quedarse en un
   ancho fijo que obligaba a leer la mitad de la coordenada. */
.fg-servicios .fg-mapa-coord { width: 100%; min-width: 200px; }
.fg-servicios .fg-mapa-barra > .fg-mapa-grupo:nth-child(2) { flex: 1 1 auto; min-width: 0; }

.fg-servicios .fg-mapa-km {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    background-color: var(--fg-soft);
    color: var(--fg-pd);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Direccion que Google deduce del punto marcado. Flota SOBRE el mapa, abajo a
   la izquierda, en vez de ocupar un renglon propio: es una sugerencia efimera
   y no debe robarle alto al lienzo. Una sola linea recortada. */
.fg-servicios .fg-mapa-aprox {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 26px;           /* por encima de la franja de creditos de Google */
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 560px;
    padding: 6px 8px 6px 12px;
    border: 1px solid var(--fg-line);
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.96);
    box-shadow: 0 2px 10px rgba(26, 8, 69, 0.18);
    font-size: 12.5px;
    color: var(--fg-muted);
}

.fg-servicios .fg-mapa-aprox-txt {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--fg-ink);
}

/* Con el cajon a pantalla completa no hay hueco al lado: el mapa vuelve a su
   sitio bajo la tabla y el operador alterna con Minimizar. */
@media (max-width: 991px) {
    .fg-servicios .fg-mapa-acoplado {
        position: static;
        width: auto;
        min-width: 0;
        max-width: none;
        top: auto;
        right: auto;
        bottom: auto;
        display: block;
        margin: 0;
        box-shadow: none;
    }

    .fg-servicios .fg-mapa-acoplado .fg-mapa-lienzo #map { height: 320px; }
    .fg-servicios .fg-mapa-coord { width: 100%; }
    .fg-servicios .fg-mapa-grupo-fin { margin-left: 0; }
    .fg-servicios .fg-mapa-aprox { position: static; max-width: none; box-shadow: none; }
}

/* Entre 992 y 1199 el hueco a la izquierda del cajon es estrecho: el mapa se
   despega del menu lateral y toma lo que quede, sin minimo que lo desborde. */
@media (min-width: 992px) and (max-width: 1199px) {
    .fg-servicios .fg-mapa-acoplado { left: 8px; min-width: 0; }
}

/* ══ 4. DOCK DE MINIMIZADOS ════════════════════════════════════════════════ */

.fg-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1025;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background-color: #fff;
    border-top: 1px solid var(--fg-line);
    box-shadow: 0 -4px 18px rgba(26, 8, 69, 0.10);
}

/* Deja de ser un aviso de pausa -minimizado la grilla se refresca- y pasa a ser
   un simple recordatorio de que hay trabajo abierto: de ambar a tinte de marca. */
.fg-dock-aviso {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px;
    border: 1px solid var(--fg-line);
    border-radius: 14px;
    background-color: var(--fg-soft);
    color: var(--fg-pd);
    font-size: 12px;
    font-weight: 600;
}

.fg-dock-tarjetas { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }

.fg-dock-tarjeta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 12px;
    border: 1px solid var(--fg-line);
    border-radius: 16px;
    background-color: #fff;
    font-size: 12px;
    font-weight: 600;
    color: var(--fg-ink);
    cursor: pointer;
}

.fg-dock-tarjeta:hover {
    border-color: var(--fg-pl);
    background-color: var(--fg-soft);
    color: var(--fg-pd);
}

.fg-dock-tarjeta .fg-tab-sucio { flex: 0 0 auto; }

/* ══ 5. RESPONSIVO ═════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .fg-drawer { width: 100vw; }
    .fg-fab.fg-fab-apartado { right: 26px; }
    .fg-dock-tarjetas { margin-left: 0; }
}