/* ============================================================================
   Facilu Flow — Ficha de usuario (#!/Usuario/:id, la misma para alta y edicion)
   ----------------------------------------------------------------------------
   Capa de PRESENTACION. Se carga despues de facilu-theme.css y
   facilu-formularios.css y reutiliza sus clases genericas (.fg-form,
   .fg-campos, .fg-campo-N, .fg-label, .fg-tabla, .fg-lista-chk...).

   Criterios de diseno de esta pantalla:

   1. CABECERA DE IDENTIDAD. En el flujo listado -> detalle no habia forma de
      saber a quien se estaba editando: el titulo de pagina dice "USUARIOS" y
      nada mas. La cabecera responde "quien es este registro" (nombre, documento,
      correo) y "en que estado esta" (pastillas Estado/Tipo).

   2. JERARQUIA POR OBLIGATORIEDAD. Antes "Coordenadas Geograficas" (opcional,
      casi siempre vacio) ocupaba una tarjeta tan grande como la identidad,
      mientras "Ciudades" -- que el formulario EXIGE para guardar -- quedaba al
      final, fuera de pantalla y con pinta de opcional. Ahora la columna
      principal lleva lo obligatorio y la lateral lo secundario.

   3. PIE PEGAJOSO. El formulario mide ~1.300px de alto; Guardar quedaba al
      fondo. Pegado abajo esta siempre a un click.
   ========================================================================= */

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

.fg-usuario-ficha .fg-ficha-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    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-usuario-ficha .fg-ficha-avatar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--fg-soft);
    color: var(--fg-pd);
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
}

.fg-usuario-ficha .fg-ficha-avatar > .fa { font-size: 20px; color: #C4B5FD; }

.fg-usuario-ficha .fg-ficha-texto { min-width: 0; flex: 1 1 260px; }

.fg-usuario-ficha .fg-ficha-titulo {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--fg-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fg-usuario-ficha .fg-ficha-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-size: 12px;
    color: var(--fg-muted);
}

.fg-usuario-ficha .fg-ficha-meta > span { overflow-wrap: anywhere; }

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

.fg-usuario-ficha .fg-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    background-color: var(--fg-soft);
    color: var(--fg-pd);
}

.fg-usuario-ficha .fg-chip-ok { background-color: #D1FAE5; color: #065F46; }
.fg-usuario-ficha .fg-chip-off { background-color: #FEE2E2; color: #991B1B; }

/* ══ 2. REJILLA DE DOS COLUMNAS ═════════════════════════════════════════════
   Principal (obligatorio) | Lateral (ciudades, servicios, opcionales).
   Reduce el alto de ~1.300px a ~una pantalla y media. */

.fg-usuario-ficha .fg-usuario-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: 0 14px;
}

.fg-usuario-ficha .fg-col-main,
.fg-usuario-ficha .fg-col-aside { min-width: 0; }

/* ══ 3. TARJETAS ════════════════════════════════════════════════════════════ */

.fg-usuario-ficha .box { margin-bottom: 14px; }
.fg-usuario-ficha .box-header.with-border { padding: 11px 16px; }
.fg-usuario-ficha .box-body { padding: 14px 16px 2px; }

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

/* ══ 4. AVISOS EN LINEA ═════════════════════════════════════════════════════
   Las reglas que antes solo aparecian como `swal` DESPUES de pulsar Guardar
   ("falta la ciudad", "los cambios de acceso no se aplican") se muestran donde
   y cuando aplican. */

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

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

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

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

/* ══ 5. CIUDADES: fila de alta + tabla ══════════════════════════════════════ */

.fg-usuario-ficha .fg-add-fila {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

/* El `.form-group` traia su propio margen inferior: con `align-items:flex-end`
   ese margen empujaba el boton 12px por debajo del select y la fila se veia
   descuadrada. El margen lo pone ahora la fila. */
.fg-usuario-ficha .fg-add-fila > .form-group { margin-bottom: 0; }

.fg-usuario-ficha .fg-add-fila > .fg-add-campo { flex: 1 1 auto; min-width: 0; }
.fg-usuario-ficha .fg-add-fila > .fg-add-campo > .form-control { width: 100%; }
.fg-usuario-ficha .fg-add-fila .btn { flex: 0 0 auto; }

.fg-usuario-ficha .fg-tabla { margin: 10px 0 12px; }

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

.fg-usuario-ficha .fg-col-acc { width: 84px; text-align: right; }

/* ══ 6. PIE DE ACCIONES PEGAJOSO ════════════════════════════════════════════ */

.fg-usuario-ficha .fg-pie-acciones {
    position: sticky;
    bottom: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    padding: 11px 16px;
    border: 1px solid var(--fg-line);
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 -2px 6px rgba(26, 8, 69, 0.08);
}

.fg-usuario-ficha .fg-pie-acciones .btn { margin: 0; }
.fg-usuario-ficha .fg-pie-acciones .btn-primary { padding-left: 18px; padding-right: 18px; font-weight: 600; }

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

/* ══ 7. RESPONSIVO ══════════════════════════════════════════════════════════ */

/* En una sola columna las tarjetas se aplanan con `display: contents` para que
   el orden deje de depender de en que columna vivan: asi lo OBLIGATORIO
   (identidad, acceso, ciudades) va antes que lo opcional, igual que en
   escritorio. En escritorio `display:contents` no aplica y los `order` se
   ignoran, porque cada tarjeta esta dentro de su columna. */
@media (max-width: 991px) {
    .fg-usuario-ficha .fg-usuario-grid { grid-template-columns: minmax(0, 1fr); }

    .fg-usuario-ficha .fg-col-main,
    .fg-usuario-ficha .fg-col-aside { display: contents; }

    .fg-usuario-ficha .fg-orden-1 { order: 1; }
    .fg-usuario-ficha .fg-orden-2 { order: 2; }
    .fg-usuario-ficha .fg-orden-3 { order: 3; }
    .fg-usuario-ficha .fg-orden-4 { order: 4; }
    .fg-usuario-ficha .fg-orden-5 { order: 5; }
    .fg-usuario-ficha .fg-orden-6 { order: 6; }
}

@media (max-width: 600px) {
    .fg-usuario-ficha .fg-ficha-chips { margin-left: 0; width: 100%; }

    .fg-usuario-ficha .fg-add-fila { flex-wrap: wrap; }
    .fg-usuario-ficha .fg-add-fila > .fg-add-campo { flex: 1 1 100%; }
    .fg-usuario-ficha .fg-add-fila .btn { width: 100%; }

    .fg-usuario-ficha .fg-pie-acciones { flex-wrap: wrap; }
    .fg-usuario-ficha .fg-pie-nota { flex: 1 1 100%; margin: 0 0 6px; }
    .fg-usuario-ficha .fg-pie-acciones .btn { flex: 1 1 auto; }
}