/* ============================================================================
   Facilu Flow — pantalla "Servicios Historial" (#!/ServiciosHistorial)
   ----------------------------------------------------------------------------
   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 facilu-servicios.css y reutiliza sus
   clases genericas (.fg-estado, .fg-tabla, .fg-lin, .fg-sub, .fg-chip, .fg-nota,
   .fg-acciones, .fg-modal, .fg-pie...). Las reglas de maquetacion propias de
   esta pantalla viven bajo `.fg-historial` para no filtrarse al resto de la
   aplicacion.
   ========================================================================= */

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

/* ══ 1. BARRA: FILTROS + ACCIONES ═══════════════════════════════════════════
   Mismo patron que Servicios Activos: los filtros ocupan una fila flexible con
   el rotulo como addon dentro del control, y las acciones de cabecera se
   agrupan a la derecha sin rotulo (tooltip). */

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

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

.fg-historial .fg-barra-pie { justify-content: space-between; }

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

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

.fg-historial .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;
}

.fg-historial .fg-f-buscar { flex: 1 1 200px; min-width: 150px; max-width: 320px; }
.fg-historial .fg-f-buscar .form-control { width: 100%; }

.fg-historial .fg-f-fecha { flex: 0 1 auto; }
.fg-historial .fg-f-fecha .form-control { width: 108px; }

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

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

.fg-historial .box-header .btn > .fa { color: inherit; }

.fg-historial .fg-btn-icono {
    width: 30px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.fg-historial .fg-btn-icono > .fa { font-size: 14px; }

/* ══ 2. TABLA ══════════════════════════════════════════════════════════════ */

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

.fg-historial .fg-tabla > thead > tr > th,
.fg-historial .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-historial .fg-tabla > thead > tr > th.fg-col-acc,
.fg-historial .fg-tabla > thead:first-child > tr:first-child > th.fg-col-acc {
    text-align: right;
}

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

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

/* Filete lateral de estado, igual criterio que Servicios Activos: el color es
   acento (filete + pastilla), no fondo de fila completo. */
.fg-historial .table > tbody > tr.green-background > td,
.fg-historial .table > tbody > tr.red-background > td {
    background-color: transparent;
}

.fg-historial .fg-tabla > tbody > tr > td:first-child { border-left: 3px solid transparent; }
.fg-historial .fg-tabla > tbody > tr.green-background > td:first-child { border-left-color: var(--fg-success); }
.fg-historial .fg-tabla > tbody > tr.red-background > td:first-child { border-left-color: var(--fg-danger); }

.fg-historial .fg-col-marcas { width: 44px; }
.fg-historial .fg-col-cod { width: 90px; }
.fg-historial .fg-col-fecha { width: 108px; }
.fg-historial .fg-col-serv { width: 16%; max-width: 190px; }
.fg-historial .fg-col-dir { width: 18%; max-width: 220px; }
.fg-historial .fg-col-imp { width: 130px; }
.fg-historial .fg-col-est { width: 96px; }
.fg-historial .fg-col-acc { width: 122px; }

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

/* ══ 2b. VOCABULARIO DE CELDA ═══════════════════════════════════════════════
   Mismas clases que facilu-servicios.css (.fg-lin, .fg-sub, .fg-chip...), pero
   acotadas a `.fg-historial`: en el CSS de origen viven bajo `.fg-servicios` y
   no se heredan fuera de esa pantalla. */

.fg-historial .fg-lin { display: block; color: var(--fg-ink); }

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

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

.fg-historial .fg-etq {
    color: var(--fg-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-right: 3px;
}

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

.fg-historial .fg-trunc {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fg-historial .fg-clamp2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fg-historial .fg-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }

.fg-historial .fg-codigo {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--fg-pd);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

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

.fg-historial .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;
}

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

.fg-historial .fg-marca {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--fg-line);
    border-radius: 3px;
    background-color: #F1F5F9;
    color: #475569;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.6;
}

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

.fg-historial .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;
}

.fg-historial .fg-chip-conductor { background-color: #fff; border-color: #D9D2E9; color: var(--fg-ink); }

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

.fg-historial .fg-imp-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }

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

.fg-historial .fg-importes .fg-imp-val {
    font-weight: 700;
    color: var(--fg-ink);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.fg-historial .fg-tel { color: var(--fg-muted); }
.fg-historial .fg-tel:hover, .fg-historial .fg-tel:focus { color: var(--fg-pd); text-decoration: none; }
.fg-historial .fg-tel:hover > .fa { color: var(--fg-p); }

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

.fg-historial .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;
}

/* ══ 2c. PANEL DE ACCIONES ═══════════════════════════════════════════════════ */

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

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

.fg-historial .fg-acciones .btn > .fa { font-size: 13px; line-height: inherit; }

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

/* `dropdown-append-to-body` saca el <ul> del DOM de `.fg-historial` y lo cuelga
   de <body>: un selector `.fg-historial .dropdown-menu` no lo alcanzaria. Se
   pone la clase directamente en el elemento, sin depender de un ancestro. */
.fg-historial-menu.dropdown-menu { min-width: 216px; padding: 5px 0; font-size: 13px; }

/* ══ 3. PIE: PAGINACION ══════════════════════════════════════════════════════ */

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

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

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

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

/* ══ 4. RESPONSIVO ═══════════════════════════════════════════════════════════ */

@media (max-width: 1399px) {
    .fg-historial .fg-col-serv { max-width: 155px; }
    .fg-historial .fg-col-dir { max-width: 175px; }
}

@media (max-width: 991px) {
    .fg-historial .fg-f-select .form-control { max-width: 120px; }
}

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