/* ============================================================================
   Facilu Flow — pantalla "Servicios Activos" (#!/Servicios)
   ----------------------------------------------------------------------------
   Capa de PRESENTACION de una sola pantalla. No toca comportamiento: todos los
   ng-model / ng-click / ng-repeat de la vista siguen siendo los mismos.

   Se carga despues de facilu-theme.css y consume sus tokens (--fg-*). Las
   reglas de maquetacion viven bajo `.fg-servicios` para no filtrarse al resto
   de la aplicacion; solo las clases de ESTADO se declaran sin ambito, porque
   la vista tambien las usa dentro de los modales.

   Criterio de diseno:
     · El estado del servicio se leia pintando la fila entera de un color
       saturado con texto negro encima (#6C3AED con tinta negra da 2.1:1, muy
       por debajo de AA). Aqui el color pasa a ser ACENTO: filete lateral de
       4px + fondo tintado al 6-10% + pastilla de estado con contraste AA.
       Se conserva el mismo codigo de color por estado, asi que el operador que
       ya lee la tabla "por el color" no tiene que reaprender nada.
     · La rejilla de 10 botones-icono por fila se compacta en un panel de
       acciones de ancho fijo, para que la tabla recupere espacio de lectura.
   ========================================================================= */

/* ══ 1. ESTADOS DEL SERVICIO ════════════════════════════════════════════════
   El color marca la EXCEPCION, no la regla. Tenir la fila entera funciona si
   los estados estan repartidos, pero en esta pantalla lo habitual es que casi
   todo este en el mismo estado: con 6 de 6 en "Sin Mensajero" la tabla entera
   quedaba rosa, que es exactamente igual de informativo que si fuera blanca, y
   ademas ensucia la lectura de los datos.

   Asi que el fondo de la fila se va. El estado queda codificado dos veces, que
   es suficiente para localizarlo de un vistazo:
     · un filete lateral de 3px, que forma una columna de color escaneable;
     · la pastilla de la columna Estado, en tono solido y con contraste AA.
   El unico fondo que se pinta es el de hover, igual para todas las filas. */

.fg-servicios .table > tbody > tr.red-background > td,
.fg-servicios .table > tbody > tr.oferta-background > td,
.fg-servicios .table > tbody > tr.green-background > td,
.fg-servicios .table > tbody > tr.ensitio-background > td,
.fg-servicios .table > tbody > tr.confirmado-background > td {
    background-color: transparent;
}

.fg-servicios .fg-tabla > tbody > tr:hover > td { background-color: var(--fg-soft); }

/* Fila cuyo servicio se esta viendo en el mapa. Es un vinculo entre dos zonas
   distantes de la pantalla, asi que se marca de forma inequivoca. */
.fg-servicios .fg-tabla > tbody > tr.fg-fila-sel > td {
    background-color: #EDE4FE;
    box-shadow: inset 0 1px 0 #C9B4F5, inset 0 -1px 0 #C9B4F5;
}

.fg-servicios .fg-tabla > tbody > tr.fg-fila-sel > td:first-child {
    border-left-color: var(--fg-p);
}

/* Filete lateral: se pinta sobre la primera celda porque un `border-left` en
   `tr` no es fiable con border-collapse en todos los navegadores. */
.fg-servicios .fg-tabla > tbody > tr > td:first-child {
    border-left: 3px solid transparent;
}

.fg-servicios .fg-tabla > tbody > tr.red-background > td:first-child { border-left-color: var(--fg-danger); }
.fg-servicios .fg-tabla > tbody > tr.oferta-background > td:first-child { border-left-color: #EA580C; }
.fg-servicios .fg-tabla > tbody > tr.green-background > td:first-child { border-left-color: var(--fg-success); }
.fg-servicios .fg-tabla > tbody > tr.ensitio-background > td:first-child { border-left-color: var(--fg-warning); }
.fg-servicios .fg-tabla > tbody > tr.confirmado-background > td:first-child { border-left-color: var(--fg-p); }

/* Pastilla de estado. Hereda el color del estado de la fila. */
.fg-estado {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.01em;
    white-space: nowrap;
    background-color: #E2E8F0;
    color: #334155;
}

tr.red-background .fg-estado { background-color: var(--fg-danger-btn); color: #fff; }
tr.oferta-background .fg-estado { background-color: #C2410C; color: #fff; }
tr.green-background .fg-estado { background-color: var(--fg-success-btn); color: #fff; }
tr.ensitio-background .fg-estado { background-color: var(--fg-warning); color: var(--fg-warning-ink); }
tr.confirmado-background .fg-estado { background-color: var(--fg-p); color: #fff; }

/* Mismas clases de estado aplicadas directamente sobre la pastilla (no sobre
   la fila), para vistas de detalle de un solo servicio donde no hay <tr> que
   tinte por herencia (p. ej. el modal de Informe en ServiciosHistorial). */
.fg-estado.red-background { background-color: var(--fg-danger-btn); color: #fff; }
.fg-estado.green-background { background-color: var(--fg-success-btn); color: #fff; }

/* En los modales de ESTA pantalla las mismas clases significan otra cosa
   (disponibilidad del conductor) y ahi si hay mezcla real de estados, asi que
   el tinte de fila aporta. Se deja, muy suave.

   Va acotado a `.fg-modal` y no a `.modal` a secas porque otras diez vistas
   (Posicion, RecaudosConductor, QuejasReclamos...) usan estas mismas clases con
   su propia paleta: sin el ambito, estas reglas se las pisarian. */
.fg-modal .table > tbody > tr.red-background > td { background-color: #FEF2F2; }
.fg-modal .table > tbody > tr.green-background > td { background-color: #F6FEFA; }
.fg-modal .table > tbody > tr.white-background > td { background-color: #fff; color: var(--fg-muted); }

/* ══ 2. BARRA UNICA: CONTADORES + FILTROS + ACCIONES ═══════════════════════
   Los contadores y las acciones estaban en la cabecera separados por un
   `space-between`, y los filtros vivian en una caja aparte debajo. Entre las
   dos franjas se iban ~150px de alto para mostrar seis controles. Ahora es
   una sola linea: los contadores anclan a la izquierda, las acciones a la
   derecha y los filtros ocupan y absorben todo el espacio intermedio. */

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

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

/* Fila 2: la accion a la izquierda y los contadores a la derecha, bajo los
   accesos de la fila de arriba. */
.fg-servicios .fg-barra-pie { justify-content: space-between; }

.fg-servicios .fg-metrics {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* Contador: icono + cifra, sin rotulo. Es una pastilla de ~52px en lugar de la
   tarjeta de dos pisos que marcaba la altura de toda la cabecera. */
.fg-servicios .fg-metric {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--fg-line);
    border-radius: 15px;
    background-color: var(--fg-soft);
    white-space: nowrap;
    cursor: default;
}

.fg-servicios .fg-metric-val {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--fg-pd);
}

.fg-servicios .fg-metric > .fa {
    font-size: 13px;
    color: var(--fg-pl);
}

/* `margin-left:auto` en vez de `space-between` en el contenedor: asi las
   acciones se pegan al borde derecho SIN abrir un hueco cuando los filtros no
   llenan la linea, que era justo el defecto de la cabecera anterior. */
.fg-servicios .fg-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}

/* El tema pinta de violeta de marca TODO icono dentro de .box-header:
   `.box-header .fa { color: var(--fg-p) }` (facilu-theme.css). Esa regla apunta
   al <i>, asi que le gana a la herencia del color del boton que lo contiene: en
   un .btn-primary el glifo acaba del mismo violeta que el relleno y desaparece.
   Se veia como un boton vacio.

   Dentro de un boton el icono no es decoracion de cabecera: es el rotulo. Debe
   tomar el color que declare el boton, sea cual sea la variante. */
.fg-servicios .box-header .btn > .fa { color: inherit; }

/* Boton de solo icono: cuadrado, para que no quede el ancho de un boton con
   rotulo y el icono flotando descentrado dentro. */
.fg-servicios .fg-btn-icono {
    width: 30px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

/* Sin rotulo al lado, el glifo es todo el boton: a 12px un trazo fino como el
   de `fa-plus` casi no se ve sobre el relleno de color. */
.fg-servicios .fg-btn-icono > .fa { font-size: 14px; }

/* ══ 3. FILTROS EN LINEA ═══════════════════════════════════════════════════
   El rotulo va DENTRO del control como addon en vez de encima: en una barra
   horizontal, una etiqueta sobre cada campo obliga a una segunda linea entera
   solo para texto gris. */

.fg-servicios .box-header.with-border { padding: 10px 15px; }
.fg-servicios .box-body { padding: 0 15px 12px; }

.fg-servicios .fg-filtros {
    display: flex;
    flex: 1 1 560px;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.fg-servicios .fg-filtros .input-group { width: auto; }

.fg-servicios .fg-filtros .input-group-addon {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding-left: 9px;
    padding-right: 9px;
}

/* El buscador crece, pero con techo: sin `max-width` se comia todo el sobrante
   de la linea y empujaba los ultimos filtros a otra fila. Al salir de esta fila
   el boton "Buscar" y los contadores, el techo sube. */
.fg-servicios .fg-f-buscar { flex: 1 1 260px; min-width: 170px; max-width: 520px; }
.fg-servicios .fg-f-buscar .form-control { width: 100%; }

.fg-servicios .fg-f-select { flex: 0 1 auto; }
.fg-servicios .fg-f-select .form-control { width: auto; max-width: 170px; }

.fg-servicios .fg-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px 10px;
    border: 1px solid #D9D2E9;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: var(--fg-ink);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.fg-servicios .fg-check:hover { background-color: var(--fg-soft); }
.fg-servicios .fg-check input { margin: 0; }

/* ══ 4. TABLA ══════════════════════════════════════════════════════════════
   DENSIDAD. Es una pantalla de vigilancia: el operador necesita ver de un
   golpe cuantos mas servicios mejor. Cada dato ocupaba dos lineas (rotulo
   encima, valor debajo), asi que una fila con usuario + telefono + conductor
   + tipo + origen + nota gastaba 8-10 lineas y solo entraban 3 servicios en
   pantalla.

   Regla que se aplica aqui: el rotulo solo existe cuando el dato es ambiguo.
   "3112226666" con un icono de telefono no necesita la palabra "Telefono";
   una direccion en la columna Origen no necesita la palabra "Direccion". Lo
   que queda como rotulo va EN LINEA con el valor, nunca encima. */

.fg-servicios .fg-tabla {
    margin-bottom: 0;
    font-size: 12.5px;
    line-height: 1.4;
}

/* Cabecera de la tabla.
   OJO con la especificidad: el bootstrap.min.css de este proyecto esta EDITADO
   A MANO y trae inyectado

       .table>thead:first-child>tr:first-child>th{background:#3c8dbc;color:white;
                                                  text-align:center;margin:3px}

   que pinta de azul la cabecera de todas las tablas de la aplicacion. Ese
   selector puntua (3 clases/pseudo, 3 elementos) y le gana a un
   `.fg-servicios .fg-tabla > thead > tr > th`. Por eso aqui se replican los
   `:first-child`: asi sumamos (4,3) y ganamos sin recurrir a !important y sin
   tocar el archivo de vendor. */
.fg-servicios .fg-tabla > thead > tr > th,
.fg-servicios .fg-tabla > thead:first-child > tr:first-child > th {
    padding: 8px;
    border-top: 0;
    border-bottom: 2px solid var(--fg-line);
    background: var(--fg-soft);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    color: var(--fg-muted);
    white-space: nowrap;
}

.fg-servicios .fg-tabla > thead > tr > th.fg-col-acc,
.fg-servicios .fg-tabla > thead:first-child > tr:first-child > th.fg-col-acc {
    text-align: right;
}

.fg-servicios .fg-tabla > tbody > tr > td {
    padding: 7px 8px;
    border-top: 1px solid var(--fg-line);
    vertical-align: top;
}

/* Linea de dato. `fg-lin` es el valor principal; `fg-sub` lo acompana en gris
   y un punto mas pequeno. Ambos son bloques de una sola linea. */
.fg-servicios .fg-lin {
    display: block;
    color: var(--fg-ink);
}

.fg-servicios .fg-sub {
    display: block;
    color: var(--fg-muted);
    font-size: 11.5px;
}

.fg-servicios .fg-sub .fa {
    width: 12px;
    margin-right: 3px;
    text-align: center;
    color: #94A3B8;
}

/* Rotulo en linea, para los pocos casos donde el dato no se explica solo. */
.fg-servicios .fg-etq {
    color: var(--fg-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.fg-servicios .fg-fuerte {
    font-weight: 700;
    color: var(--fg-ink);
}

/* Truncado por defecto: una direccion larga no debe estirar la fila a tres
   lineas. El texto completo queda en el title del elemento. */
.fg-servicios .fg-trunc {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Las direcciones son el dato mas largo de la tabla y truncarlas a una linea
   se comia el numero de la casa o el barrio. Se les permiten DOS lineas y se
   corta ahi: se conserva la informacion util y la fila sigue teniendo un techo
   de altura predecible. */
.fg-servicios .fg-clamp2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Anchos de columna. El truncado necesita que la celda tenga un techo: en una
   tabla de layout automatico, sin `max-width` la celda crece con el contenido
   y el ellipsis no llega a dispararse nunca. */
.fg-servicios .fg-col-marcas { width: 46px; }
.fg-servicios .fg-col-cod { width: 84px; }
.fg-servicios .fg-col-fecha { width: 92px; }
.fg-servicios .fg-col-serv { width: 17%; max-width: 200px; }
.fg-servicios .fg-col-dir { width: 20%; max-width: 250px; }
.fg-servicios .fg-col-imp { width: 130px; }
.fg-servicios .fg-col-est { width: 108px; }
/* 5 botones de 26px + 4 huecos de 3px = 142px. */
.fg-servicios .fg-col-acc { width: 150px; }

.fg-servicios .fg-col-fecha .fg-sub { white-space: normal; }

/* Fila de chips (conductor + tipo de servicio) */
.fg-servicios .fg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 2px;
}

.fg-servicios .fg-codigo {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--fg-pd);
}

.fg-servicios .fg-clave {
    display: block;
    font-family: Menlo, Consolas, monospace;
    font-size: 10.5px;
    color: var(--fg-muted);
}

/* La nota es un enlace al detalle, pero no debe parecer un enlace suelto en
   medio de la celda: se lee como bloque de cita y solo se delata al pasar por
   encima. */
.fg-servicios .fg-nota {
    display: block;
    margin-top: 3px;
    padding: 2px 7px;
    border-left: 2px solid #CBD5E1;
    background-color: rgba(148, 163, 184, 0.10);
    border-radius: 0 3px 3px 0;
    font-size: 11px;
    line-height: 1.4;
    color: #475569;
    cursor: pointer;
}

a.fg-nota:hover,
a.fg-nota:focus {
    border-left-color: var(--fg-p);
    background-color: var(--fg-soft);
    color: var(--fg-pd);
    text-decoration: none;
}

.fg-servicios .fg-nota .fa-expand { font-size: 9px; opacity: 0.75; }

.modal .fg-nota-texto {
    resize: vertical;
    font-size: 13px;
    line-height: 1.55;
    background-color: var(--fg-soft);
}

.modal .fg-copiado {
    margin-right: 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--fg-success-btn);
}

.fg-servicios .fg-marcas {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 3px;
}

.fg-servicios .fg-marca {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--fg-line);
    border-radius: 3px;
    background-color: #F1F5F9;
    /* #64748B sobre #F1F5F9 se queda en 4.3:1, por debajo de AA para texto
       pequeno. #475569 lo sube a 6.4:1 sin cambiar la sensacion de gris. */
    color: #475569;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.6;
}

.fg-servicios .fg-marca-aviso {
    border-color: #FDE68A;
    background-color: #FFFBEB;
    color: #92400E;
}

/* Chips. El de conductor solo aparece si hay conductor: antes se pintaba la
   pastilla vacia en todos los servicios sin asignar. */
.fg-servicios .fg-chip {
    display: inline-block;
    max-width: 100%;
    padding: 1px 7px;
    border-radius: 9px;
    border: 1px solid var(--fg-line);
    background-color: #F1F5F9;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    vertical-align: baseline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El chip de conductor iba en verde. Con el nombre del mensajero en verde, el
   tipo de servicio en gris, las marcas en verde/ambar y los botones de colores,
   la fila tenia cinco acentos compitiendo. Lo distingue el icono, no el color. */
.fg-servicios .fg-chip-conductor {
    background-color: #fff;
    border-color: #D9D2E9;
    color: var(--fg-ink);
}

.fg-servicios .fg-importes { font-size: 11.5px; line-height: 1.5; }

/* Rotulo a la izquierda, cifra pegada a la derecha: las cantidades forman
   columna y se comparan entre filas sin leerlas una a una. */
.fg-servicios .fg-imp-fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.fg-servicios .fg-importes .fg-imp-lbl { color: var(--fg-muted); }

.fg-servicios .fg-importes .fg-imp-val {
    font-weight: 700;
    color: var(--fg-ink);
    /* Cifras de ancho fijo: sin esto el "1" es mas estrecho que el "8" y las
       columnas de dinero quedan dentadas. */
    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
}

.fg-servicios .fg-codigo {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Telefono pulsable, pero sin el violeta de enlace: dentro de una celda densa
   un enlace de color mas se lee como ruido. Se delata al pasar por encima. */
.fg-servicios .fg-tel { color: var(--fg-muted); }

.fg-servicios .fg-tel:hover,
.fg-servicios .fg-tel:focus {
    color: var(--fg-pd);
    text-decoration: none;
}

.fg-servicios .fg-tel:hover > .fa { color: var(--fg-p); }

.fg-servicios .fg-sin-dato {
    color: #CBD5E1;
    font-size: 14px;
}

.fg-servicios .fg-novedad {
    display: block;
    margin-bottom: 3px;
    padding: 2px 7px;
    border-radius: 3px;
    background-color: #FFFBEB;
    border: 1px solid #FDE68A;
    color: #92400E;
    font-size: 10.5px;
    font-weight: 600;
}

/* ── Panel de acciones ──────────────────────────────────────────────────────
   Once botones-icono por fila eran dos filas de colores surtidos: rojo, verde,
   violeta, turquesa... Cada boton pedia atencion y ninguno la conseguia, y con
   el ancho justo no siempre se veian todos.

   Ahora: CUATRO acciones frecuentes visibles, en gris neutro, mas un menu con
   el resto. El color de la fila se reserva entero para la pastilla de estado,
   que es el dato que el operador vigila. Dentro del menu si hay color, pero
   solo semantico: rojo para cancelar, verde para finalizar. */

.fg-servicios .fg-acciones {
    display: flex;
    gap: 3px;
    justify-content: flex-end;
}

.fg-servicios .fg-acciones .btn {
    width: 26px;
    height: 24px;
    padding: 0;
    line-height: 22px;
    text-align: center;
    border-radius: 4px;
}

/* Una sola familia de iconos en toda la fila. Antes dos de los once botones
   usaban Glyphicons (pencil / ok), con otro grosor de trazo y otra linea base
   que los descolgaba de los de Font Awesome que tienen al lado. */
.fg-servicios .fg-acciones .btn > .fa {
    font-size: 13px;
    line-height: inherit;
}

.fg-servicios .fg-acciones .fg-mas > .btn { color: var(--fg-muted); }
.fg-servicios .fg-acciones .fg-mas.open > .btn,
.fg-servicios .fg-acciones .fg-mas > .btn:hover { color: var(--fg-pd); }

/* El menu se cuelga del <body> (dropdown-append-to-body) porque .table-responsive
   trae `overflow-x:auto` a cualquier ancho en este build y lo recortaria. */
.fg-servicios-menu.dropdown-menu,
.fg-servicios .dropdown-menu {
    min-width: 216px;
    padding: 5px 0;
    font-size: 13px;
}

.dropdown-menu .fg-menu-item {
    display: block;
    padding: 6px 14px;
    color: var(--fg-ink);
    white-space: nowrap;
    cursor: pointer;
}

.dropdown-menu .fg-menu-item > .fa {
    width: 17px;
    margin-right: 7px;
    text-align: center;
    color: var(--fg-muted);
}

.dropdown-menu .fg-menu-item:hover,
.dropdown-menu .fg-menu-item:focus {
    background-color: var(--fg-soft);
    color: var(--fg-pd);
    text-decoration: none;
}

.dropdown-menu .fg-menu-item:hover > .fa { color: var(--fg-p); }

.dropdown-menu .fg-menu-peligro,
.dropdown-menu .fg-menu-peligro > .fa { color: var(--fg-danger-btn); }

.dropdown-menu .fg-menu-peligro:hover,
.dropdown-menu .fg-menu-peligro:hover > .fa {
    background-color: #FEF2F2;
    color: #991B1B;
}

.dropdown-menu .fg-menu-exito,
.dropdown-menu .fg-menu-exito > .fa { color: var(--fg-success-btn); }

.dropdown-menu .fg-menu-exito:hover,
.dropdown-menu .fg-menu-exito:hover > .fa {
    background-color: #ECFDF5;
    color: #065F46;
}

/* Estado vacio de la tabla */
.fg-servicios .fg-vacio {
    padding: 44px 16px !important;
    text-align: center;
    color: var(--fg-muted);
    background-color: #fff !important;
}

.fg-servicios .fg-vacio .fa {
    display: block;
    margin-bottom: 10px;
    font-size: 30px;
    color: #CBD5E1;
}

/* ══ 5. PIE: REFRESCO Y PAGINACION ═════════════════════════════════════════
   La barra decia "3/20 Seg", que obliga a interpretar un contador ascendente.
   Se invierte a cuenta atras ("proxima en 17 s") y la barra pasa a ser un hilo
   fino: es un indicador ambiental, no un dato que compita con la tabla. */

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

.fg-servicios .fg-refresco {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--fg-muted);
}

.fg-servicios .fg-refresco-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--fg-success);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
    animation: fg-latido 2s ease-out infinite;
}

@keyframes fg-latido {
    70% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .fg-servicios .fg-refresco-punto { animation: none; }
}

.fg-servicios .fg-refresco b { color: var(--fg-ink); }

/* Pausa: ambar, que es la senal convencional de "detenido a proposito", no roja
   -no hay error- ni gris -no es un estado neutro que se pueda ignorar-. */
.fg-servicios .fg-refresco-pausa {
    padding: 4px 12px;
    border: 1px solid #FDE68A;
    border-radius: 14px;
    background-color: #FFFBEB;
    color: #92400E;
}

.fg-servicios .fg-refresco-pausa b { color: #78350F; }
.fg-servicios .fg-refresco-pausa .fa { font-size: 11px; }

.fg-servicios .fg-refresco-pista {
    width: 120px;
    height: 4px;
    border-radius: 2px;
    background-color: var(--fg-line);
    overflow: hidden;
}

.fg-servicios .fg-refresco-relleno {
    display: block;
    height: 100%;
    background-color: var(--fg-p);
    transition: width 0.9s linear;
}

.fg-servicios .pagination { margin: 0; }

/* ══ 6. MAPA ═══════════════════════════════════════════════════════════════
   El contenedor mide 400px desde el primer pintado, pero la instancia de
   Google no se crea hasta que el operador pulsa el boton de mapa de una fila:
   hasta entonces se veia un rectangulo gris sin explicacion. Se le pone marco,
   cabecera, leyenda de pines y un rotulo de ayuda.

   El rotulo lleva pointer-events:none a proposito: si reaparece con un mapa ya
   creado detras (servicio finalizado, sin marcadores) no debe bloquear el
   paneo ni el zoom. */

.fg-servicios .fg-mapa-caja {
    border: 1px solid var(--fg-line);
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
}

.fg-servicios .fg-mapa-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--fg-line);
    background-color: var(--fg-soft);
}

.fg-servicios .fg-mapa-titulo {
    font-size: 13px;
    font-weight: 700;
    color: var(--fg-ink);
}

.fg-servicios .fg-mapa-titulo .fa { margin-right: 6px; color: var(--fg-p); }

.fg-servicios .fg-leyenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: var(--fg-muted);
}

.fg-servicios .fg-leyenda > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fg-servicios .fg-mapa-derecha {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.fg-servicios .fg-mapa-cerrar { flex: 0 0 auto; }

.fg-servicios .fg-mapa-titulo b {
    margin-left: 4px;
    color: var(--fg-pd);
}

/* Distintivo de modo edicion: el mapa esta prestado a un borrador y el doble
   clic coloca el punto en vez de ampliar. */
.fg-servicios .fg-mapa-modo {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 9px;
    background-color: var(--fg-p);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.fg-servicios .fg-pin {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.18);
}

.fg-servicios .fg-pin-origen { background-color: #22C55E; }
.fg-servicios .fg-pin-mensajero { background-color: #3B82F6; }
.fg-servicios .fg-pin-destino { background-color: #EF4444; }

.fg-servicios .fg-mapa-lienzo { position: relative; }

.fg-servicios .fg-mapa-aviso {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px;
    text-align: center;
    background-color: #F8FAFC;
    color: var(--fg-muted);
    pointer-events: none;
}

.fg-servicios .fg-mapa-aviso .fa {
    font-size: 32px;
    color: #CBD5E1;
}

.fg-servicios .fg-mapa-aviso b {
    color: var(--fg-ink);
    font-size: 14px;
}

.fg-servicios .fg-mapa-aviso small { max-width: 420px; line-height: 1.5; }

.fg-servicios .fg-mapa-lienzo #map {
    height: 420px;
    width: 100%;
}

/* Lista de puntos bajo el mapa */
.fg-servicios .fg-puntos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--fg-line);
}

.fg-servicios .fg-punto {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--fg-line);
    border-radius: 16px;
    background-color: #fff;
    font-size: 12px;
    font-weight: 600;
    color: var(--fg-ink);
}

.fg-servicios .fg-punto:hover,
.fg-servicios .fg-punto:focus {
    border-color: var(--fg-pl);
    background-color: var(--fg-soft);
    color: var(--fg-pd);
    text-decoration: none;
}

.fg-servicios .fg-punto .fa { color: var(--fg-p); }

/* ══ 7. MODALES ════════════════════════════════════════════════════════════
   Todo va bajo `.fg-modal`, una clase puesta en la raiz de los seis modales de
   esta pantalla. Sin ese ambito, reglas como la de `thead` de aqui abajo se
   aplicarian a los modales de toda la aplicacion. */

.fg-modal .modal-content {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 12px 48px rgba(26, 8, 69, 0.28);
}

.fg-modal .modal-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--fg-line);
    background-color: var(--fg-soft);
    border-radius: 8px 8px 0 0;
}

.fg-modal .modal-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--fg-ink);
}

.fg-modal .modal-header .close {
    margin-top: 2px;
    font-size: 22px;
    color: var(--fg-muted);
    opacity: 0.8;
    text-shadow: none;
}

.fg-modal .modal-header .close:hover { color: var(--fg-ink); opacity: 1; }

.fg-modal .modal-body { padding: 18px 20px; }

.fg-modal .modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--fg-line);
    background-color: #FBFAFF;
    border-radius: 0 0 8px 8px;
}

/* Cabeceras de tabla dentro del modal. Mismo problema de especificidad que en
   la tabla principal: el bootstrap.min.css parcheado a mano las pinta de
   #3c8dbc con `.table>thead:first-child>tr:first-child>th`. Se replican los
   `:first-child` para ganarle sin !important. */
.fg-modal .table > thead > tr > th,
.fg-modal .table > thead:first-child > tr:first-child > th {
    padding: 8px 10px;
    border-top: 0;
    border-bottom: 2px solid var(--fg-line);
    background: var(--fg-soft);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    color: var(--fg-muted);
    white-space: nowrap;
}

.fg-modal .table { font-size: 13px; margin-bottom: 0; }

.fg-modal .table > tbody > tr > td {
    padding: 8px 10px;
    border-top: 1px solid var(--fg-line);
    vertical-align: middle;
}

.fg-modal .table-responsive { border: 0; }

/* Pie de tabla del modal: la paginacion a la derecha, separada por un filete.
   Antes era un `.clearfix` con `pull-right` y las flechas quedaban flotando
   sin nada que las anclara. */
.fg-modal .fg-modal-pie {
    display: flex;
    justify-content: flex-end;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--fg-line);
}

.fg-modal .fg-vacio {
    padding: 34px 16px !important;
    text-align: center;
    color: var(--fg-muted);
    background-color: #fff !important;
}

.fg-modal .fg-vacio .fa {
    display: block;
    margin-bottom: 8px;
    font-size: 26px;
    color: #CBD5E1;
}

.fg-modal .fg-vacio b { color: var(--fg-ink); }

.fg-modal .fg-seccion,
.modal .fg-seccion {
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--fg-line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.modal .fg-bloque { margin-bottom: 20px; }
.modal .fg-bloque:last-child { margin-bottom: 0; }

/* Etiquetas de formulario: mismo tratamiento que los rotulos de la tabla y de
   las secciones, para que el modal no parezca otra aplicacion. */
.fg-modal .control-label {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
}

.fg-modal .control-label,
.fg-modal .control-label small {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.fg-modal .form-control { font-size: 13px; }

.fg-modal textarea.form-control { resize: vertical; }

.modal .fg-ayuda {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--fg-muted);
}

/* ══ 8. RESPONSIVO ═════════════════════════════════════════════════════════ */

/* Por debajo de 1400px las tres columnas de texto se aprietan demasiado: se
   les baja el techo para que el ellipsis actue antes de que la fila crezca. */
@media (max-width: 1399px) {
    .fg-servicios .fg-col-serv { max-width: 165px; }
    .fg-servicios .fg-col-dir { max-width: 205px; }
    .fg-servicios .fg-col-imp { width: 118px; }
}

@media (max-width: 991px) {
    .fg-servicios .fg-f-select .form-control { max-width: 130px; }
    .fg-servicios .fg-mapa-lienzo #map { height: 320px; }
    .fg-servicios .fg-pie { justify-content: center; }
}

@media (max-width: 767px) {
    .fg-servicios .fg-filtros { flex: 1 1 100%; }
    .fg-servicios .fg-f-buscar,
    .fg-servicios .fg-f-select { flex: 1 1 100%; }
    .fg-servicios .fg-f-select .form-control { max-width: none; width: 100%; }
    .fg-servicios .fg-toolbar-actions { margin-left: 0; }
}

/* ══ 9. TOAST DE CONDUCTORES PENDIENTES (mejoras/PLAN_AVISO_CONDUCTORES_PENDIENTES.md §10) ═══
   A diferencia de NotificationService (swal, modal de pantalla completa, siempre respuesta a un
   clic del operador), este aviso lo dispara un sondeo de fondo mientras el operador puede estar
   haciendo cualquier otra cosa en la pantalla -- no puede bloquear la interaccion. Sin overlay,
   esquina superior derecha, se autodescarta solo. */
/* Badge de pendientes de la barra. No usa btn-warning: ese es ambar con texto marron oscuro y a
   este tamaño se leia apagado al lado del rojo pleno del chat. Va en el mismo cian del toast,
   para que el aviso que aparece y el contador que queda sean reconocibles como lo mismo. */
.fg-servicios .fg-btn-pendientes {
    background-color: var(--fg-info-fill);
    border-color: #0E7490;
    color: #fff;
    font-weight: 600;
}
.fg-servicios .fg-btn-pendientes:hover,
.fg-servicios .fg-btn-pendientes:focus,
.fg-servicios .fg-btn-pendientes:active {
    background-color: #0E7490;
    border-color: #155E75;
    color: #fff;
}

/* Relleno pleno, no una tarjeta blanca con borde: sobre un fondo blanco con tablas blancas, el
   aviso se leia como un bloque mas de la pantalla en vez de como algo que acaba de pasar. */
.fg-toast-pendientes {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 1060; /* por encima de .box, por debajo de un modal real (1050+ backdrop) */
    max-width: 340px;
    background: var(--fg-info-fill);
    border: 1px solid #0E7490;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(8, 145, 178, 0.35);
    padding: 13px 15px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: fg-toast-entrada .25s ease-out;
}
.fg-toast-pendientes .fa-clock-o {
    color: #fff;
    font-size: 19px;
    margin-top: 1px;
}
.fg-toast-pendientes-texto { flex: 1 1 auto; font-size: 13px; color: #fff; font-weight: 500; }
.fg-toast-pendientes-texto a,
.fg-toast-pendientes-texto a:hover,
.fg-toast-pendientes-texto a:focus {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}
.fg-toast-pendientes-cerrar {
    background: none;
    border: none;
    color: rgba(255, 255, 255, .75);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}
.fg-toast-pendientes-cerrar:hover { color: #fff; }
@keyframes fg-toast-entrada {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 767px) {
    .fg-toast-pendientes { left: 12px; right: 12px; max-width: none; top: 60px; }
}