/* ============================================================================
   Facilu Flow — Conductores: listado (#!/ConductorListado) y ficha
   (#!/Conductor/:id, la misma para alta y edicion)
   ----------------------------------------------------------------------------
   Capa de PRESENTACION. No toca comportamiento: todos los ng-model / ng-click /
   ng-repeat de las vistas siguen siendo los mismos.

   Se carga despues de facilu-theme.css, facilu-servicios.css y
   facilu-formularios.css, y reutiliza sus clases genericas (.fg-tabla,
   .fg-estado, .fg-acciones, .fg-pie, .fg-form...). Las reglas del listado viven
   bajo `.fg-conductores` y las de la ficha bajo `.fg-conductor-ficha`.
   ========================================================================= */

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

/* ══ 1. BARRA: FILTROS ══════════════════════════════════════════════════════ */

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

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

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

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

.fg-conductores .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-conductores .fg-f-buscar { flex: 1 1 220px; min-width: 170px; max-width: 340px; }
.fg-conductores .fg-f-buscar .form-control { width: 100%; }

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

.fg-conductores .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-conductores .fg-check:hover { background-color: var(--fg-soft); }
.fg-conductores .fg-check input { margin: 0; }

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

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

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

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

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

.fg-conductores .fg-col-domi { width: 46px; text-align: center; }
.fg-conductores .fg-col-est { width: 90px; }
.fg-conductores .fg-col-verif { width: 90px; }
.fg-conductores .fg-col-acc { width: 220px; }

/* Pastilla de estado del conductor (Activo/Inactivo). Mismo componente visual
   que `.fg-estado` de facilu-servicios.css, con su propia paleta porque aqui
   "Activo/Inactivo" no es uno de los estados de servicio ya cubiertos. */
.fg-conductores .fg-estado-activo { background-color: #D1FAE5; color: #065F46; }
.fg-conductores .fg-estado-inactivo { background-color: #FEE2E2; color: #991B1B; }

.fg-conductores .fg-btn-icono {
    width: 26px;
    height: 24px;
    padding: 0;
    line-height: 22px;
    text-align: center;
}

.fg-conductores .fg-btn-icono > .fa { font-size: 13px; }

/* ══ 3. ACCIONES POR FILA ═══════════════════════════════════════════════════
   Misma logica que Servicios Activos: acciones frecuentes visibles en gris +
   menu para el resto, en vez de un `btn-group` de 4 botones con texto. */

.fg-conductores .fg-acciones {
    display: flex;
    gap: 3px;
    justify-content: flex-end;
    align-items: center;
}

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

/* `dropdown-append-to-body` saca el <ul> del DOM de `.fg-conductores` y lo
   cuelga de <body>: un selector con ancestro no lo alcanzaria. */
.fg-conductores-menu.dropdown-menu { min-width: 200px; padding: 5px 0; font-size: 13px; }

/* ══ 4. PIE: PAGINACION ══════════════════════════════════════════════════════ */

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

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

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

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

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

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

@media (max-width: 767px) {
    .fg-conductores .fg-filtros { flex: 1 1 100%; }
    .fg-conductores .fg-f-buscar,
    .fg-conductores .fg-f-select { flex: 1 1 100%; }
    .fg-conductores .fg-f-select .form-control { max-width: none; width: 100%; }
}

/* ══ 6. BARRA: ACCIONES DE PANTALLA ═════════════════════════════════════════
   `margin-left:auto` en vez de `space-between`: las acciones se pegan a la
   derecha sin abrir un hueco cuando los filtros no llenan la linea. Mismo
   criterio que .fg-servicios / .fg-listado. */

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

/* facilu-theme.css pinta de violeta TODO icono dentro de .box-header
   (`.box-header .fa { color: var(--fg-p) }`). Dentro de un .btn-primary el
   glifo queda del mismo violeta que el relleno y el boton se ve vacio.

   Se excluye el boton de ayuda: `.fg-btn-ayuda .fa-question-circle` de
   facilu-ayuda.css tiene menos especificidad (2 clases) que este selector
   (4 clases: .fg-conductores .box-header .btn .fa), asi que sin el :not() la
   "?" perderia el morado de marca que esa hoja le da a proposito. */
.fg-conductores .box-header .btn:not(.fg-btn-ayuda) > .fa { color: inherit; }

/* ══ 7. COLUMNA "CONDUCTOR" (nombre + correo) ═══════════════════════════════ */

.fg-conductores .fg-col-nombre { min-width: 190px; }

.fg-conductores .fg-nombre {
    display: block;
    font-weight: 600;
    color: var(--fg-ink);
}

.fg-conductores .fg-col-nombre .fg-sub {
    display: block;
    font-size: 11px;
    line-height: 1.4;
    color: var(--fg-muted);
    word-break: break-all;
}

/* ══ 8. PIE: CONTEO ═════════════════════════════════════════════════════════ */

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

.fg-conductores .fg-conteo {
    font-size: 12px;
    color: var(--fg-muted);
}

.fg-conductores .fg-vacio-accion { margin-top: 14px; }

/* El estado vacio pone `display:block` + 30px a todo .fa para dibujar el icono
   grande; dentro del boton de accion eso lo sacaria de linea y lo centraria. */
.fg-conductores .fg-vacio .btn > .fa {
    display: inline;
    margin-bottom: 0;
    font-size: inherit;
    color: inherit;
}

/* ============================================================================
   FICHA DEL CONDUCTOR (#!/Conductor/:id) — alta y edicion
   ----------------------------------------------------------------------------
   La vista lleva `class="fg-form fg-conductor-ficha"`: hereda el patron de
   formulario compartido (facilu-formularios.css) y afina aqui lo propio de esta
   ficha, que es larga y mezcla campos, listas de chequeo y avisos.

   El formulario paso de la grilla horizontal de Bootstrap (label a la izquierda
   en `col-sm-4`, control en `col-sm-8`) a etiqueta ARRIBA del control sobre una
   grilla de 12 columnas. Motivo: con la grilla horizontal el ancho util del
   control cambiaba campo a campo y habia campos sin etiqueta (el numero de
   documento no tenia ninguna).
   ========================================================================= */

/* ══ 1. CABECERA DE LA FICHA ════════════════════════════════════════════════ */

.fg-conductor-ficha .fg-ficha-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    padding: 12px 16px;
    border: 1px solid var(--fg-line);
    border-left: 4px solid var(--fg-p);
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.fg-conductor-ficha .fg-ficha-id {
    display: flex;
    flex: 1 1 320px;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.fg-conductor-ficha .fg-ficha-avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border: 1px solid var(--fg-line);
    border-radius: 50%;
    background: var(--fg-soft);
}

.fg-conductor-ficha .fg-ficha-avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fg-conductor-ficha .fg-ficha-avatar-vacio {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.fg-conductor-ficha .fg-ficha-avatar-vacio > .fa {
    font-size: 22px;
    color: #C4B5FD;
}

.fg-conductor-ficha .fg-ficha-texto { min-width: 0; }

.fg-conductor-ficha .fg-ficha-titulo {
    margin: 0 0 5px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--fg-ink);
}

.fg-conductor-ficha .fg-ficha-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.fg-conductor-ficha .fg-ficha-ayuda { font-size: 12.5px; color: var(--fg-muted); }

.fg-conductor-ficha .fg-ficha-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* ══ 2. PASTILLAS DE LA CABECERA ════════════════════════════════════════════ */

.fg-conductor-ficha .fg-chip {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    background-color: #E2E8F0;
    color: #334155;
}

.fg-conductor-ficha .fg-chip-neutro { background-color: var(--fg-soft); color: var(--fg-pd); }
.fg-conductor-ficha .fg-chip-ok { background-color: #D1FAE5; color: #065F46; }
.fg-conductor-ficha .fg-chip-off { background-color: #FEE2E2; color: #991B1B; }
.fg-conductor-ficha .fg-chip-warn { background-color: #FEF3C7; color: var(--fg-warning-ink); }
.fg-conductor-ficha .fg-chip-domi { background-color: #CFFAFE; color: #155E75; }

/* ══ 3. SECCIONES ═══════════════════════════════════════════════════════════ */

.fg-conductor-ficha .box-header.with-border { padding: 11px 16px; }
.fg-conductor-ficha .box-body { padding: 14px 16px; }

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

.fg-conductor-ficha .fg-box-sub {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--fg-muted);
}

.fg-conductor-ficha .fg-box-acciones {
    display: flex;
    gap: 5px;
    margin-top: 8px;
}

.fg-conductor-ficha .fg-box-alto .box-body { min-height: 110px; }

/* ══ 4. GRILLA DE CAMPOS ════════════════════════════════════════════════════ */

.fg-conductor-ficha .fg-campos {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 14px;
}

.fg-conductor-ficha .fg-campo-3 { grid-column: span 3; }
.fg-conductor-ficha .fg-campo-4 { grid-column: span 4; }
.fg-conductor-ficha .fg-campo-6 { grid-column: span 6; }
.fg-conductor-ficha .fg-campo-12 { grid-column: span 12; }

.fg-conductor-ficha .fg-campo { margin-bottom: 14px; min-width: 0; }

.fg-conductor-ficha .fg-label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--fg-ink);
}

.fg-conductor-ficha .fg-req { color: var(--fg-danger-btn); font-weight: 700; }

.fg-conductor-ficha .fg-opt {
    font-size: 11px;
    font-weight: 400;
    color: var(--fg-muted);
}

.fg-conductor-ficha .fg-hint {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--fg-muted);
}

.fg-conductor-ficha .fg-mayus { text-transform: uppercase; }

/* jcs-autoValidate cuelga su mensaje como .help-block dentro del .form-group:
   sin esto queda con el interlineado de parrafo de Bootstrap y separa los
   campos de forma desigual segun cual tenga error. */
.fg-conductor-ficha .help-block {
    margin: 4px 0 0;
    font-size: 11.5px;
    line-height: 1.4;
}

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

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

/* Alinea la altura del interruptor con la de un .form-control vecino. */
.fg-form.fg-conductor-ficha .fg-check-bloque { display: flex; height: 34px; margin: 0; }

.fg-conductor-ficha .fg-password { display: flex; align-items: center; gap: 8px; }
.fg-conductor-ficha .fg-password .form-control { flex: 1 1 auto; }

/* ══ 5. AVISOS ══════════════════════════════════════════════════════════════ */

.fg-conductor-ficha .fg-aviso {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid var(--fg-line);
    border-radius: 4px;
    background: var(--fg-soft);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--fg-ink);
}

.fg-conductor-ficha .fg-aviso > .fa { margin-top: 2px; font-size: 14px; }

.fg-conductor-ficha .fg-aviso-info { border-color: #BAE6FD; background: #F0F9FF; }
.fg-conductor-ficha .fg-aviso-info > .fa { color: var(--fg-info-btn); }

.fg-conductor-ficha .fg-aviso-ok { border-color: #A7F3D0; background: #ECFDF5; }
.fg-conductor-ficha .fg-aviso-ok > .fa { color: var(--fg-success-btn); }

.fg-conductor-ficha .fg-aviso-warn { border-color: #FDE68A; background: #FFFBEB; }
.fg-conductor-ficha .fg-aviso-warn > .fa { color: #B45309; }

/* ══ 6. LISTAS DE CHEQUEO ═══════════════════════════════════════════════════
   Antes eran items de .list-group apilados en una columna unica, con el
   checkbox suelto al lado del texto: solo el cuadrito era clicable y una lista
   de 8 validaciones ocupaba media pantalla. Ahora son tarjetas en rejilla y la
   fila entera es el area de click (label). */

.fg-conductor-ficha .fg-lista-chk {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px;
    margin: 0;
}

.fg-conductor-ficha .fg-lista-chk > .list-group-item {
    margin: 0;
    padding: 0;
    border: 1px solid var(--fg-line);
    border-radius: 4px;
}

.fg-conductor-ficha .fg-lista-chk > .list-group-item:hover {
    border-color: #C4B5FD;
    background-color: var(--fg-soft);
}

.fg-conductor-ficha .fg-chk-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 9px 11px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--fg-ink);
    cursor: pointer;
}

.fg-conductor-ficha .fg-chk-fila input { flex: 0 0 auto; margin: 0; }

.fg-conductor-ficha .fg-vacio-chk {
    padding: 14px;
    border: 1px dashed var(--fg-line);
    border-radius: 4px;
    text-align: center;
    font-size: 12.5px;
    color: var(--fg-muted);
}

/* ══ 7. PIE DE ACCIONES ═════════════════════════════════════════════════════ */

.fg-conductor-ficha .box-footer { justify-content: flex-end; }

.fg-conductor-ficha .fg-pie-nota {
    margin-right: auto;
    font-size: 12px;
    color: var(--fg-muted);
}

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

@media (max-width: 1199px) {
    .fg-conductor-ficha .fg-campo-3 { grid-column: span 4; }
}

@media (max-width: 991px) {
    .fg-conductor-ficha .fg-campo-3,
    .fg-conductor-ficha .fg-campo-4 { grid-column: span 6; }
}

@media (max-width: 767px) {
    .fg-conductor-ficha .fg-campo-3,
    .fg-conductor-ficha .fg-campo-4,
    .fg-conductor-ficha .fg-campo-6 { grid-column: span 12; }

    .fg-conductor-ficha .fg-ficha-acciones { margin-left: 0; width: 100%; }
    .fg-conductor-ficha .fg-ficha-acciones .btn { flex: 1 1 auto; }
}

/* ══ 9. PESTAÑAS DE VÍNCULO EMPRESA (paso 4, PLAN_MIGRACION_CONDUCTOR_EMPRESA.md §4/§1.6) ═══ */

/* Tira de contadores del ciclo de vida del vinculo (§11): panorama de los 6 estados en un solo
   lugar. Cada pastilla es un acceso a donde se gestiona ese estado. */
.fg-contadores-vinculo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.fg-contadores-vinculo .fg-cv {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--fg-line);
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    color: var(--fg-muted);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}

.fg-contadores-vinculo .fg-cv:hover,
.fg-contadores-vinculo .fg-cv:focus {
    text-decoration: none;
    border-color: var(--fg-pl);
    box-shadow: 0 0 0 3px var(--fg-ring);
}

.fg-contadores-vinculo .fg-cv b {
    font-size: 15px;
    font-weight: 700;
    color: var(--fg-ink);
}

/* El color vive en el numero, no en el fondo: seis pastillas de color pleno compiten con la
   tabla, que es lo que el operador de verdad mira. */
.fg-contadores-vinculo .fg-cv-activa b { color: var(--fg-success-btn); }
.fg-contadores-vinculo .fg-cv-pendiente b { color: var(--fg-warning); }
.fg-contadores-vinculo .fg-cv-desvinculando b { color: var(--fg-info-btn); }
.fg-contadores-vinculo .fg-cv-cerrada b { color: var(--fg-muted); }

.fg-tabs-conductores { margin-bottom: 0; border-bottom: none; }
.fg-tabs-conductores + .tab-content > .tab-pane > .box { border-top-left-radius: 0; }
.fg-badge-pendientes {
    background: #dd4b39;
    margin-left: 6px;
}