/* ============================================================================
   Facilu Flow — Estadisticas (#!/Estadisticas).
   ----------------------------------------------------------------------------
   Capa de PRESENTACION. No toca comportamiento: ningun ng-model/ng-click/
   ng-repeat/ng-show ni expresion {{ }} cambia. Los 4 paneles seguian el
   diseno original de AdminLTE (cabeceras de color solido, tabla plana, barras
   de progreso a rayas de los 2010s) sin ningun toque de marca: esta hoja los
   lleva al mismo lenguaje visual que el resto de la SPA (tarjetas con sombra
   suave, cifras grandes, insignias planas, barras de progreso finas).
   ========================================================================= */

/* ══ 1. TARJETA CONTENEDORA ══════════════════════════════════════════════
   Los 4 paneles ya no son 4 "box" anidados en grilla 2x2 (mucho scroll,
   mucho color de sobra): pasan a ser pestañas dentro de una sola tarjeta,
   cada una a ancho completo -- deja mas espacio horizontal para la grafica
   nueva y la tabla al mismo tiempo. */

.fg-estadisticas .box {
    border-radius: 10px;
    border-top-width: 3px;
    box-shadow: 0 1px 3px rgba(26, 8, 69, 0.08);
    margin-bottom: 18px;
}

.fg-estadisticas .box-header.with-border {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--fg-line);
}

.fg-estadisticas .box-body { padding: 15px 16px; }

.fg-estadisticas .fg-barra-pie { margin-top: 8px; }

.fg-estadisticas .fg-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ══ 2. PESTAÑAS ══════════════════════════════════════════════════════════ */

.fg-estadisticas .fg-tabs {
    border-bottom-color: var(--fg-line);
    margin-bottom: 16px;
}

.fg-estadisticas .fg-tabs > li > a {
    border-radius: 8px 8px 0 0;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-muted);
    border-color: transparent;
}

.fg-estadisticas .fg-tabs > li > a .fa { margin-right: 6px; color: inherit; }

.fg-estadisticas .fg-tabs > li > a:hover {
    background-color: var(--fg-soft);
    border-color: transparent;
    color: var(--fg-pd);
}

.fg-estadisticas .fg-tabs > li.active > a,
.fg-estadisticas .fg-tabs > li.active > a:hover,
.fg-estadisticas .fg-tabs > li.active > a:focus {
    color: var(--fg-pd);
    background-color: #fff;
    border-color: var(--fg-line) var(--fg-line) transparent;
}

/* El filtro Desde/Hasta de cada pestaña (fg-barra) quedaba pegado
   directamente contra la grafica/tabla de abajo -- 0px de separacion real,
   confirmado con getBoundingClientRect. */
.fg-estadisticas .tab-pane > .fg-barra { margin-bottom: 14px; }

/* ══ 3. GRAFICAS (Chart.js, ya cargado globalmente) ══════════════════════
   Un canvas de tamaño fijo por pestaña (no responsive:true) para no lidiar
   con el clasico problema de Chart.js dentro de un tab-pane oculto
   (offsetWidth 0 al momento de crear el chart si la pestaña no esta activa
   todavia). El controlador redibuja/hace resize al abrir cada pestaña. */

.fg-estadisticas .fg-chart-wrap {
    margin-bottom: 16px;
    padding: 12px 12px 4px;
    border: 1px solid var(--fg-line);
    border-radius: 8px;
    background-color: #fff;
    overflow-x: auto;
}

.fg-estadisticas .fg-chart { max-width: 100%; }

.fg-estadisticas .fg-chart-nota {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--fg-muted);
}

/* ══ 3. GENERAL CANTIDAD DE SERVICIOS ════════════════════════════════════
   La fila "Activos" pintaba TODA la fila en verde solido -- muy 2015. Pasa a
   una pastilla suave con acento a la izquierda, igual que el resto de
   insignias de estado de la app (ver fg-posicion-fila-* en facilu-posicion). */

.fg-estadisticas .fg-tabla > tbody > tr.fg-fila-exito > td {
    background-color: #ECFDF5 !important;
    border-left: 3px solid var(--fg-success-btn);
    color: var(--fg-ink) !important;
}

.fg-estadisticas .fg-tabla > tbody > tr.fg-fila-exito > td:first-child { border-radius: 6px 0 0 6px; }
.fg-estadisticas .fg-tabla > tbody > tr.fg-fila-exito > td:last-child { border-radius: 0 6px 6px 0; }

.fg-estadisticas .fg-tabla > tbody > tr.fg-fila-exito .fg-cifra { color: var(--fg-success-btn); }

.fg-estadisticas .fg-tabla .fg-cifra { font-size: 14px; }

/* ══ 4. SERVICIOS POR CLAVE ══════════════════════════════════════════════
   Las insignias de porcentaje usaban los 4 colores de estado de Bootstrap
   (verde/ambar/rojo/cian) para algo que no es un estado -- son 4 canales de
   origen del servicio. Pasan a chips planos en tonos de marca, mas chicos y
   menos "semaforo". La barra apilada se adelgaza y pierde el rayado. */

.fg-estadisticas .fg-tabla .label {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
}

/* AdminLTE.min.css fija background-color y color:#fff de .label-success/warning/danger/info
   con !important (ver .bg-green,...,.label-success{background-color:#00a65a !important} y el
   grupo .label-*{color:#fff !important}). Sin !important aqui esas reglas ganan pase lo que pase
   con la especificidad de este selector, y las pastillas seguian saliendo con los colores solidos
   de AdminLTE (verde/ambar/rojo/cian "de fabrica") en vez de la version pastel de marca. */
.fg-estadisticas .fg-tabla .label-success { background-color: #ECFDF5 !important; color: var(--fg-success-btn) !important; }
.fg-estadisticas .fg-tabla .label-warning { background-color: #FFFBEB !important; color: var(--fg-warning-ink) !important; }
.fg-estadisticas .fg-tabla .label-danger { background-color: #FEE2E2 !important; color: var(--fg-danger-btn) !important; }
.fg-estadisticas .fg-tabla .label-info { background-color: #ECFEFF !important; color: var(--fg-info-btn) !important; }

.fg-estadisticas .fg-tabla .progress {
    height: 6px;
    margin: 0;
    border-radius: 999px;
    background-color: var(--fg-soft);
    box-shadow: none;
    overflow: hidden;
}

.fg-estadisticas .fg-tabla .progress-bar {
    box-shadow: none;
}

.fg-estadisticas .fg-tabla .progress-bar-striped {
    background-image: none;
}

.fg-estadisticas .fg-tabla .progress-bar-success { background-color: var(--fg-success-btn); }
.fg-estadisticas .fg-tabla .progress-bar-warning { background-color: var(--fg-warning); }
.fg-estadisticas .fg-tabla .progress-bar-danger { background-color: var(--fg-danger); }
.fg-estadisticas .fg-tabla .progress-bar-info { background-color: var(--fg-info-btn); }

/* ══ 5. LISTADO SERVICIOS POR HORAS ══════════════════════════════════════
   Barra de una sola serie: mismo tratamiento fino que la de "Servicios por
   Clave" (sin rayado, sin sombra, mas delgada), en el color primario. */

.fg-estadisticas .fg-tabla .progress:only-child,
.fg-estadisticas .fg-tabla td .progress {
    height: 6px;
    margin: 0;
    border-radius: 999px;
    background-color: var(--fg-soft);
    box-shadow: none;
    overflow: hidden;
    min-width: 90px;
}

/* ══ 6. TIPO SERVICIOS — CANTIDAD ═════════════════════════════════════════
   La barra bajo el nombre del tipo de servicio (fg-progreso-fila) ya usa el
   patron compartido; solo se afina su grosor/color en este contexto. */

.fg-estadisticas .fg-progreso-fila {
    height: 5px;
    background-color: var(--fg-soft);
    overflow: hidden;
}

.fg-estadisticas .fg-progreso-fila .progress-bar { box-shadow: none; }

/* ══ 7. RESPONSIVE ════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .fg-estadisticas .box-body { padding: 12px; }
}

/* ══ 8. CIFRAS Y COLUMNAS NUMERICAS ══════════════════════════════════════
   Las tablas de estadisticas son casi todas numeros y venian alineadas a la
   izquierda y con tipografia proporcional: las unidades no caian bajo las
   unidades y comparar dos filas obligaba a leer digito a digito. `tabular-nums`
   fija el ancho de cada cifra y `.fg-col-num` alinea cabecera y celda juntas. */

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

.fg-estadisticas .fg-tabla > tbody > tr > td.fg-col-num,
.fg-estadisticas .fg-tabla .fg-cifra {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* La columna de la barra de distribucion no es un dato que se lea: no debe
   competir en ancho con las cifras. */
.fg-estadisticas .fg-tabla .fg-col-barra { width: 180px; min-width: 140px; }

/* ══ 9. TIRA DE INDICADORES (KPI) ════════════════════════════════════════
   Las cifras que resumen la pantalla estaban dentro de una fila mas de la
   tabla, con el mismo peso visual que el resto. Suben a tarjetas: es lo
   primero que mira un operador al entrar y ahora se lee sin buscarlo. */

.fg-estadisticas .fg-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.fg-estadisticas .fg-kpi {
    position: relative;
    padding: 12px 14px;
    border: 1px solid var(--fg-line);
    border-left: 3px solid var(--fg-p);
    border-radius: 8px;
    background-color: #fff;
}

.fg-estadisticas .fg-kpi-rotulo {
    display: block;
    margin-bottom: 2px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.fg-estadisticas .fg-kpi-valor {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--fg-ink);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.fg-estadisticas .fg-kpi-pie {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
}

.fg-estadisticas .fg-kpi-exito { border-left-color: var(--fg-success-btn); }
.fg-estadisticas .fg-kpi-exito .fg-kpi-valor { color: var(--fg-success-btn); }

.fg-estadisticas .fg-kpi-neutro { border-left-color: #CBD5E1; }

.fg-estadisticas .fg-kpi-acento { border-left-color: var(--fg-ap); }

/* ══ 10. PANEL DE DETALLE VACIO ══════════════════════════════════════════
   Las pantallas maestro-detalle (Conductores, Operadoras) dejaban la mitad
   derecha en blanco hasta hacer clic en una fila: parecia un fallo de carga.
   Ahora hay una invitacion explicita en su lugar. */

.fg-estadisticas .fg-panel-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 28px 18px;
    border: 1px dashed var(--fg-line);
    border-radius: 8px;
    background-color: var(--fg-soft);
    text-align: center;
    color: var(--fg-muted);
}

.fg-estadisticas .fg-panel-vacio > .fa {
    margin-bottom: 10px;
    font-size: 26px;
    color: #C4B5FD;
}

.fg-estadisticas .fg-panel-vacio b {
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
    color: var(--fg-ink);
}

.fg-estadisticas .fg-panel-vacio small { font-size: 11.5px; }

/* ══ 11. TITULO DEL PANEL DE DETALLE ═════════════════════════════════════ */

.fg-estadisticas .fg-detalle-cabecera {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--fg-line);
}

.fg-estadisticas .fg-detalle-titulo {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--fg-ink);
}

.fg-estadisticas .fg-detalle-sub {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--fg-muted);
}

/* ══ 12. SEGUNDA FILA DE CABECERA ════════════════════════════════════════
   Antes vivia dentro del <tbody> como una fila de datos disfrazada: recibia
   el :hover de fila y se despegaba visualmente de la cabecera real. */

.fg-estadisticas .fg-tabla > thead > tr + tr > th {
    padding-top: 4px;
    border-bottom: 2px solid var(--fg-line);
    border-top: 0;
    font-size: 10px;
}

/* ══ 13. ESTADO VACIO ════════════════════════════════════════════════════ */

.fg-estadisticas .fg-vacio small {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
}

/* ══ 14. CABECERA DE SECCION ═════════════════════════════════════════════
   Los <h3 class="box-title"> con un <small> detras quedaban en una sola
   linea larguisima (el calendario de "Ultimos Meses" pasaba de los 120
   caracteres). El subtitulo baja a su propia linea. */

.fg-estadisticas .box-title > small {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--fg-muted);
}

/* ══ 15. CALENDARIO DE "ULTIMOS MESES" ═══════════════════════════════════
   Las barras del calendario viven en `table.fg-calendario-dia`, que no lleva
   la clase `.fg-tabla`: se quedaban con el .progress de AdminLTE (20px de
   alto, rayado, con sombra interior) mientras el resto de la familia ya usa
   la barra fina. Estas reglas solo alcanzan a esta pantalla porque
   `.fg-calendario` no existe en ninguna otra. */

.fg-estadisticas .fg-calendario-dia .progress {
    height: 5px;
    margin: 0;
    border-radius: 999px;
    background-color: var(--fg-soft);
    box-shadow: none;
    overflow: hidden;
}

.fg-estadisticas .fg-calendario-dia .progress-bar {
    box-shadow: none;
    background-image: none;
    background-color: var(--fg-success-btn);
}

/* El numero de dia es el ancla de lectura de cada celda. */
.fg-estadisticas .fg-calendario-dia > tbody > tr > td:first-child {
    width: 26px;
    color: var(--fg-ink);
    font-variant-numeric: tabular-nums;
}

.fg-estadisticas .fg-calendario-dia > tbody > tr > td:nth-child(2) {
    color: var(--fg-muted);
    font-size: 11px;
    white-space: nowrap;
}

/* Un dia sin datos no debe pesar lo mismo que uno con servicios. */
.fg-estadisticas .fg-calendario > tbody > tr > td { background-color: #fff; }

/* ══ 16. ICONOS DENTRO DE BOTONES DE LA CABECERA ═════════════════════════
   facilu-theme.css pinta de violeta de marca TODO icono dentro de .box-header
   (`.box-header .fa { color: var(--fg-p) }`) y esa regla apunta al <i>, asi
   que le gana a la herencia del color del boton. En el boton "Búsqueda"
   (btn-primary, relleno violeta) el glifo acababa del mismo color que el
   fondo: el boton se veia SIN icono en las 13 pantallas de Estadisticas.
   Dentro de un boton el icono no es decoracion de cabecera, es el rotulo.

   Se excluye el boton de ayuda: `.fg-btn-ayuda .fa-question-circle`
   (facilu-ayuda.css) son 2 clases y este selector 3, asi que sin el :not()
   la "?" perderia a proposito su morado de marca. */
.fg-estadisticas .box-header .btn:not(.fg-btn-ayuda) > .fa { color: inherit; }

/* ══ 17. BOTON DE AYUDA EN LA BARRA ══════════════════════════════════════
   `fg-toolbar-actions` lo empuja al extremo derecho de su fila, igual que en
   Servicios Activos, Historico y Conductores. */

.fg-estadisticas .fg-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}