/* ============================================================================
   Facilu Flow — patron compartido "formulario" (alta/edicion), reutilizado por
   todas las pantallas de formulario del menu (Gastos, Noticias, PagosQAP,
   PagosCreditos, PenalizarTiempo, Conductor, etc.).
   ----------------------------------------------------------------------------
   Capa de PRESENTACION compartida. No toca comportamiento: todos los
   ng-model / ng-submit / ng-click de cada vista siguen siendo los mismos, y la
   grilla horizontal Bootstrap (`col-sm-4` label + `col-sm-8` input) tampoco se
   toca — solo se afina densidad, tipografia y el pie de acciones.

   Cada pantalla marca su raiz con la clase generica `.fg-form`. Si una pantalla
   combina formulario + listado (patron "busqueda + form + historial"), su raiz
   lleva ambas clases: `class="fg-form fg-listado"`.
   ========================================================================= */

.fg-form .box-header.with-border { padding: 12px 16px; }
.fg-form .box-header .box-title { font-size: 15px; font-weight: 700; }

.fg-form .box-body.form-horizontal { padding: 14px 16px 6px; }

.fg-form .form-group { margin-bottom: 12px; }

.fg-form .control-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fg-muted);
    padding-top: 7px;
}

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

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

/* ══ PIE DE ACCIONES ═══════════════════════════════════════════════════════ */

.fg-form .box-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
}

.fg-form .box-footer .btn { margin: 0; }

.fg-form .box-footer .btn-default { border-color: var(--fg-line); }

.fg-form .box-footer .btn-primary {
    padding-left: 18px;
    padding-right: 18px;
    font-weight: 600;
}

/* Nota a la izquierda del pie (p.ej. "Campos obligatorios"): sin ella el pie
   queda una franja en blanco con los botones aislados a la derecha. */
.fg-form .box-footer .fg-pie-nota {
    margin-right: auto;
    font-size: 12px;
    color: var(--fg-muted);
}

@media (max-width: 480px) {
    .fg-form .box-footer { flex-wrap: wrap; }
    .fg-form .box-footer .fg-pie-nota { flex: 1 1 100%; margin-right: 0; margin-bottom: 4px; }
    .fg-form .box-footer .btn { flex: 1 1 auto; }
}

/* ══ SECCIONES (formularios largos con varios `box` apilados) ══════════════ */

.fg-form .fg-seccion-titulo {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-pd);
    margin: 4px 0 10px;
}

/* ══ SUB-TABLAS DINAMICAS (agregar/eliminar fila: ciudades, valores, etc.) ══ */

.fg-form .fg-tabla { margin-bottom: 0; font-size: 12.5px; }

/* Bootstrap parcheado a mano pinta `.table>thead:first-child>tr:first-child>th`
   de #3c8dbc con mayor especificidad que la regla de arriba (mismo problema ya
   resuelto en facilu-listados.css/facilu-servicios.css/etc.): se replica la
   cadena `:first-child` para ganarle sin `!important`. */
.fg-form .fg-tabla > thead > tr > th,
.fg-form .fg-tabla > thead:first-child > tr:first-child > th {
    padding: 7px 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;
    color: var(--fg-muted);
}

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

/* ══ LISTAS DE CHEQUEO (checklist-model: tipos de servicio, validaciones, etc.) ══ */

.fg-form .list-group-item {
    padding: 8px 12px;
    border-color: var(--fg-line);
    font-size: 13px;
}

.fg-form .list-group-item:hover { background-color: var(--fg-soft); }

.fg-form .img-responsive.img-thumbnail {
    border-color: var(--fg-line);
}

.fg-form .fg-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 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-form .fg-check:hover { background-color: var(--fg-soft); }
.fg-form .fg-check input { margin: 0; }

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

/* ══ GRILLA DE CAMPOS (etiqueta arriba, 12 columnas) ═══════════════════════
   Alternativa a la grilla horizontal Bootstrap (label col-sm-4 + input
   col-sm-8): ahí el ancho útil del control cambia campo a campo y hay campos
   sin etiqueta propia. Nació en Conductor.html (fg-conductor-ficha) y se
   generaliza aquí para cualquier fg-form nuevo. */
.fg-form .fg-campos {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 14px;
}

/* `form-horizontal .form-group` (bootstrap.css) le mete +/-15px de margen
   horizontal a cada `.form-group` para compensar el padding de las columnas
   `.col-sm-*` de la grilla vieja. Aquí ya no hay columnas Bootstrap que
   compensar — sobre una celda de CSS Grid ese margen negativo la saca de su
   pista y desborda la fila entera. Se neutraliza con mayor especificidad. */
.fg-form .fg-campos > .form-group {
    margin: 0 0 14px;
}

.fg-form .fg-campo-2 { grid-column: span 2; }
.fg-form .fg-campo-3 { grid-column: span 3; }
.fg-form .fg-campo-4 { grid-column: span 4; }
.fg-form .fg-campo-6 { grid-column: span 6; }
.fg-form .fg-campo-8 { grid-column: span 8; }
.fg-form .fg-campo-12 { grid-column: span 12; }

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

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

.fg-form .fg-req { color: var(--fg-danger-btn); font-weight: 700; }
.fg-form .fg-opt { font-size: 11px; font-weight: 400; color: var(--fg-muted); }

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

@media (max-width: 1199px) { .fg-form .fg-campo-3 { grid-column: span 4; } }
@media (max-width: 991px) {
    .fg-form .fg-campo-2,
    .fg-form .fg-campo-3,
    .fg-form .fg-campo-4 { grid-column: span 6; }
}
@media (max-width: 767px) {
    .fg-form .fg-campo-2,
    .fg-form .fg-campo-3,
    .fg-form .fg-campo-4,
    .fg-form .fg-campo-6,
    .fg-form .fg-campo-8 { grid-column: span 12; }
}

/* El tamano del campo lo da el numero de columnas que ocupa (`fg-campo-N`), no
   un `max-width` sobre el control: topar el ancho del `.form-control` dentro de
   una celda mas ancha deja los bordes derechos sin alinear y el formulario se
   ve descuadrado. El control llena su celda; para que un dato corto se vea
   corto, se le dan menos columnas. */
.fg-form .fg-campo > .form-control { width: 100%; }

/* ══ LISTAS DE CHEQUEO EN REJILLA (checklist-model) ═════════════════════════
   Antes: columna única con el checkbox suelto junto al texto (solo el
   cuadrito clicable). Ahora: tarjetas en rejilla donde toda la fila es el
   área de click. Misma pareja de clases que Conductor.html. */
.fg-form .fg-lista-chk {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px;
    margin: 0;
}

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

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

.fg-form .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-form .fg-chk-fila input { flex: 0 0 auto; margin: 0; }

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

/* ══ POLITICA DE CONTRASEÑA (modal "Cambiar contraseña") ════════════════════
   Lista de requisitos que se marca sola mientras se escribe. Antes el unico
   indicio era un placeholder ("Minimo 6 Carcateres") y el error solo aparecia
   despues de enviar. */

.fg-contrasena .fg-politica {
    margin: 12px 0 0;
    padding: 10px 12px;
    list-style: none;
    border: 1px solid var(--fg-line);
    border-radius: 4px;
    background: var(--fg-soft);
}

.fg-contrasena .fg-politica > li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--fg-muted);
}

.fg-contrasena .fg-politica > li > .fa { font-size: 13px; color: #CBD5E1; }

.fg-contrasena .fg-politica--ok { color: var(--fg-ink); font-weight: 600; }
.fg-contrasena .fg-politica--ok > .fa { color: var(--fg-success-btn); }

.fg-contrasena .fg-no-coincide { color: var(--fg-danger-btn); }

.fg-contrasena .modal-footer .btn { margin: 0 0 0 8px; }

/* Estado vacío de una sub-tabla dinámica (ciudades, valores por servicio). */
.fg-form .fg-tabla .fg-vacio {
    padding: 20px 8px !important;
    text-align: center;
    color: var(--fg-muted);
}