/*
 * FotosGaleria — componente reutilizable de fotos (#1797). Lo usan Proyectos (pestaña Fotos), Productos (galería),
 * Clientes (foto única) y cualquier módulo que monte FotosGaleria.mount(). Responsivo por CONTENEDOR (container queries):
 * el mismo componente se acomoda en un panel ancho de escritorio, en un modal y en 360 px de celular. Sigue los tokens de
 * design-tokens.css, así que funciona en modo claro y oscuro sin reglas extra salvo el fondo del visor y la insignia.
 * Radios: botones y chips 4 px, tarjetas 6 px; el círculo completo solo en el avatar. Sin animaciones de entrada.
 */

.fg {
    container: fg / inline-size;
    display: flex; flex-direction: column; gap: var(--space-4, 16px);
    min-width: 0; color: var(--text-primary);
}
.fg [hidden] { display: none !important; }
.fg .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2, 8px); }
.fg .btn[disabled] { opacity: .55; cursor: not-allowed; }
.fg button:focus-visible, .fg input:focus-visible, .fg select:focus-visible, .fg textarea:focus-visible,
.fg-lightbox button:focus-visible, .fg-dialogo button:focus-visible, .fg-dialogo textarea:focus-visible {
    outline: 2px solid var(--primary-500); outline-offset: 2px;
}
.fg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Barra de acciones y chips ───────────────────────────────────────────── */
.fg-barra { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); flex-wrap: wrap; }
.fg-acciones { display: flex; gap: var(--space-2, 8px); flex-wrap: wrap; }
.fg-chips {
    display: flex; gap: var(--space-2, 8px); min-width: 0;
    overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-1, 4px);
}
.fg-chip {
    flex: 0 0 auto; min-height: 44px; padding: 0 var(--space-4, 16px); scroll-snap-align: start;
    border: 1px solid var(--surface-border-strong); border-radius: var(--radius-md, 4px);
    background: var(--surface-card); color: var(--text-secondary); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: var(--space-2, 8px);
}
.fg-chip:hover { background: var(--surface-hover); }
.fg-chip[aria-pressed="true"] { background: var(--primary-50); border-color: var(--primary-500); color: var(--primary-500); }
.fg-chip-n { font-size: .75rem; font-weight: 700; color: var(--text-muted); }
.fg-chip[aria-pressed="true"] .fg-chip-n { color: inherit; }
@container fg (max-width: 560px) {
    .fg-barra { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
    .fg-acciones .btn { flex: 1 1 0; }
}

/* ── Zona de arrastre ────────────────────────────────────────────────────── */
.fg-drop {
    display: flex; align-items: center; justify-content: center; gap: var(--space-3, 12px); flex-wrap: wrap;
    min-height: 56px; padding: var(--space-3, 12px) var(--space-4, 16px);
    border: 2px dashed var(--surface-border-strong); border-radius: var(--radius-lg, 6px);
    background: var(--surface-bg); color: var(--text-secondary); text-align: center; cursor: pointer; font: inherit;
    width: 100%;
}
.fg-drop:hover, .fg-drop--sobre { border-color: var(--primary-500); background: var(--primary-50); color: var(--primary-500); }
.fg-drop strong { font-size: .875rem; font-weight: 600; color: var(--text-primary); }
.fg-drop small { font-size: .78rem; color: var(--text-secondary); }
.fg-drop--sobre strong, .fg-drop--sobre small { color: var(--primary-500); }

/* ── Visor + panel ───────────────────────────────────────────────────────── */
.fg-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4, 16px); align-items: start; }
@container fg (min-width: 680px) {
    .fg-main { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); }
}

.fg-visor {
    position: relative; aspect-ratio: 16 / 10; width: 100%; overflow: hidden;
    background: #0b1220; border: 1px solid var(--surface-border); border-radius: var(--radius-lg, 6px);
    display: flex; align-items: center; justify-content: center;
}
.fg-visor-img { width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in; }
.fg-visor-cargando { position: absolute; inset: 0; background: linear-gradient(90deg, #111a2c 25%, #1a2740 50%, #111a2c 75%); background-size: 200% 100%; animation: fg-brillo 1.2s ease-in-out infinite; }
.fg-flecha {
    position: absolute; top: 50%; margin-top: -22px; width: 44px; height: 44px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--radius-md, 4px);
    background: rgba(11, 18, 32, .7); color: #fff; cursor: pointer; font: inherit;
}
.fg-flecha:hover { background: rgba(11, 18, 32, .9); }
.fg-flecha[disabled] { opacity: .35; cursor: default; }
.fg-flecha--ant { left: var(--space-3, 12px); }
.fg-flecha--sig { right: var(--space-3, 12px); }
.fg-contador {
    position: absolute; left: 50%; bottom: var(--space-3, 12px); transform: translateX(-50%);
    padding: var(--space-1, 4px) var(--space-3, 12px); border-radius: var(--radius-md, 4px);
    background: rgba(11, 18, 32, .75); color: #fff; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.fg-visor-portada {
    position: absolute; top: var(--space-3, 12px); left: var(--space-3, 12px);
    display: inline-flex; align-items: center; gap: var(--space-1, 4px);
    padding: 2px var(--space-2, 8px); border-radius: var(--radius-md, 4px);
    background: rgba(11, 18, 32, .75); color: #fff; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
}

.fg-panel { display: flex; flex-direction: column; gap: var(--space-3, 12px); min-width: 0; }
.fg-campo { display: flex; flex-direction: column; gap: var(--space-1, 4px); min-width: 0; }
.fg-campo label, .fg-etq { font-size: .8rem; font-weight: 600; color: var(--text-primary); }
.fg .fg-campo input, .fg .fg-campo select {
    width: 100%; min-height: 44px; padding: 0 var(--space-3, 12px);
    border: 1px solid var(--input-border); border-radius: var(--input-radius, 4px);
    background: var(--input-bg); color: var(--input-text); font: inherit; font-size: 16px !important;   /* main.css fija 14px con alta especificidad; iOS hace zoom bajo 16px */
}
.fg-campo input[readonly], .fg-campo select[disabled], .fg-campo input[disabled] { background: var(--surface-bg); color: var(--text-secondary); }
.fg-pareja { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3, 12px); }
@container fg (max-width: 420px) { .fg-pareja { grid-template-columns: 1fr; } }
.fg-meta { font-size: .78rem; color: var(--text-secondary); margin: 0; }
.fg-panel-acciones { display: flex; gap: var(--space-2, 8px); flex-wrap: wrap; }
.fg-panel-acciones .btn { flex: 1 1 140px; }
.fg-estado { font-size: .78rem; color: var(--text-secondary); min-height: 1.2em; margin: 0; }
.fg-estado--error { color: var(--error); }

/* ── Cuadrícula de miniaturas ────────────────────────────────────────────── */
.fg-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--space-3, 12px);
}
@container fg (max-width: 480px) {
    .fg-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-2, 8px); }
}
.fg-item { min-width: 0; }
.fg-mini {
    position: relative; display: flex; flex-direction: column; width: 100%; padding: 0; min-height: 44px;
    border: 1px solid var(--surface-border); border-radius: var(--radius-lg, 6px); overflow: hidden;
    background: var(--surface-card); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer;
}
.fg-mini:hover { border-color: var(--surface-border-strong); }
.fg-mini--sel { outline: 2px solid var(--primary-500); outline-offset: 2px; border-color: var(--primary-500); }
.fg-mini--arrastrando { opacity: .45; }
.fg-mini--destino { box-shadow: -3px 0 0 0 var(--primary-500); }
.fg-mini-img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; display: block; background: var(--gray-100, #eef2f8); }
.fg-mini-leyenda { padding: var(--space-1, 4px) var(--space-2, 8px); font-size: .75rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1.9em; }
.fg-insignia {
    position: absolute; top: var(--space-1, 4px); left: var(--space-1, 4px);
    padding: 1px var(--space-2, 8px); border-radius: var(--radius-md, 4px);
    background: #1e3a5f; color: #fff; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
}
[data-theme="dark"] .fg-insignia { background: #7ea3cc; color: #0a1018; }
.fg-mini--pend { cursor: default; }
.fg-mini--pend .fg-mini-img { opacity: .55; }
.fg-prog { height: 6px; background: var(--surface-border); border-radius: var(--radius-md, 4px); margin: 0 var(--space-2, 8px) var(--space-1, 4px); overflow: hidden; }
.fg-prog > i { display: block; height: 100%; width: 0; background: var(--primary-500); transition: width .15s linear; }
.fg-mini--error { border-color: var(--error); }
.fg-error-txt { padding: var(--space-1, 4px) var(--space-2, 8px); font-size: .75rem; color: var(--error); line-height: 1.3; }
.fg-error-acc { display: flex; gap: var(--space-1, 4px); padding: 0 var(--space-1, 4px) var(--space-1, 4px); }
.fg-error-acc .btn { flex: 1; min-height: 44px; padding: 0 var(--space-2, 8px); font-size: .78rem; }

/* ── Pie ─────────────────────────────────────────────────────────────────── */
.fg-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); flex-wrap: wrap; padding-top: var(--space-3, 12px); border-top: 1px solid var(--surface-border); font-size: .78rem; color: var(--text-muted); }
.fg-pie-reordenar { display: none; }
@media (hover: hover) and (pointer: fine) { .fg-pie-reordenar { display: inline-flex; align-items: center; gap: var(--space-1, 4px); } }
.fg-papelera-btn {
    display: inline-flex; align-items: center; gap: var(--space-2, 8px); min-height: 44px; padding: 0 var(--space-3, 12px);
    border: 1px solid var(--surface-border-strong); border-radius: var(--radius-md, 4px); background: var(--surface-card);
    color: var(--text-secondary); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.fg-papelera-btn:hover { background: var(--surface-hover); }
.fg-tag { padding: 1px var(--space-2, 8px); border-radius: var(--radius-md, 4px); border: 1px solid var(--surface-border-strong); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary); }

/* ── Vacío y errores ─────────────────────────────────────────────────────── */
.fg-vacio { text-align: center; padding: var(--space-8, 32px) var(--space-6, 24px); color: var(--text-muted); border: 1px dashed var(--surface-border); border-radius: var(--radius-lg, 6px); }
.fg-vacio-titulo { font-size: .95rem; font-weight: 600; color: var(--text-secondary); margin: var(--space-3, 12px) 0 var(--space-1, 4px); }
.fg-vacio-texto { font-size: .82rem; margin: 0 0 var(--space-3, 12px); }
.fg-cargando { height: 220px; border-radius: var(--radius-lg, 6px); background: linear-gradient(90deg, var(--gray-100, #eef2f8) 25%, var(--gray-200, #e2e8f0) 50%, var(--gray-100, #eef2f8) 75%); background-size: 200% 100%; animation: fg-brillo 1.2s ease-in-out infinite; }
@keyframes fg-brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.fg-aviso { display: flex; align-items: center; gap: var(--space-2, 8px); flex-wrap: wrap; padding: var(--space-2, 8px) var(--space-3, 12px); border-radius: var(--radius-xl, 8px); background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: .8rem; }
[data-theme="dark"] .fg-aviso { background: #2a1416; border-color: #5b2226; color: #fca5a5; }
.fg-aviso span { flex: 1; min-width: 0; }

/* ── Papelera ────────────────────────────────────────────────────────────── */
.fg-pap-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.fg-pap-item { display: flex; align-items: center; gap: var(--space-3, 12px); padding: var(--space-3, 12px); border: 1px solid var(--surface-border); border-radius: var(--radius-lg, 6px); background: var(--surface-card); flex-wrap: wrap; }
.fg-pap-img { width: 72px; height: 54px; object-fit: cover; border-radius: var(--radius-md, 4px); background: var(--gray-100, #eef2f8); flex-shrink: 0; }
.fg-pap-info { flex: 1 1 160px; min-width: 0; font-size: .8rem; color: var(--text-secondary); }
.fg-pap-info strong { display: block; color: var(--text-primary); font-size: .875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-pap-acc { display: flex; gap: var(--space-2, 8px); flex-wrap: wrap; }
@container fg (max-width: 480px) { .fg-pap-acc { width: 100%; } .fg-pap-acc .btn { flex: 1; } }

/* ── Foto única (cliente) ────────────────────────────────────────────────── */
.fg-cliente { display: flex; align-items: center; gap: var(--space-4, 16px); flex-wrap: wrap; }
.fg-cliente-info { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2, 8px); }
@container fg (max-width: 360px) { .fg-cliente { flex-direction: column; align-items: flex-start; } }

/* ── Avatar (listas y fichas) ────────────────────────────────────────────── */
.fg-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
    width: var(--fg-av, 36px); height: var(--fg-av, 36px); border-radius: 9999px;
    background: var(--gray-200, #e2e8f0); color: var(--text-primary); font-weight: 700; font-size: calc(var(--fg-av, 36px) * .38);
}
.fg-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-thumb { display: inline-block; flex-shrink: 0; width: var(--fg-th, 40px); height: var(--fg-th, 40px); border-radius: var(--radius-md, 4px); overflow: hidden; background: var(--gray-100, #eef2f8); vertical-align: middle; }
.fg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-thumb--vacio { display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); border: 1px dashed var(--surface-border-strong); background: transparent; }
.fg-portada-cab { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--radius-lg, 6px); border: 1px solid var(--surface-border); background: var(--gray-100, #eef2f8); }

/* ── Visor a pantalla completa y diálogos ────────────────────────────────── */
.fg-lightbox { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; background: rgba(5, 9, 18, .94); }
.fg-lightbox img { max-width: 100vw; max-height: 100vh; object-fit: contain; }
.fg-lightbox .fg-flecha--ant { left: var(--space-3, 12px); }
.fg-lightbox .fg-flecha--sig { right: var(--space-3, 12px); }
.fg-lightbox-cerrar { position: absolute; top: var(--space-3, 12px); right: var(--space-3, 12px); width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--radius-md, 4px); background: rgba(11, 18, 32, .7); color: #fff; cursor: pointer; }
.fg-lightbox .fg-contador { bottom: var(--space-4, 16px); }

.fg-dialogo-fondo { position: fixed; inset: 0; z-index: 10060; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, .55); padding: var(--space-4, 16px); }
.fg-dialogo { width: min(480px, 100%); max-height: 90vh; overflow: auto; background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--surface-border); border-radius: var(--radius-lg, 6px); box-shadow: var(--shadow-lg); }
.fg-dialogo-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); padding: var(--space-4, 16px) var(--space-5, 20px); border-bottom: 1px solid var(--surface-border); }
.fg-dialogo-cab h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.fg-dialogo-cuerpo { padding: var(--space-5, 20px); display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.fg-dialogo-cuerpo p { margin: 0; font-size: .875rem; color: var(--text-secondary); }
.fg-dialogo-cuerpo textarea { width: 100%; min-height: 88px; padding: var(--space-3, 12px); border: 1px solid var(--input-border); border-radius: var(--input-radius, 4px); background: var(--input-bg); color: var(--input-text); font: inherit; font-size: 1rem; resize: vertical; }
.fg-dialogo-pie { display: flex; justify-content: flex-end; gap: var(--space-2, 8px); padding: var(--space-4, 16px) var(--space-5, 20px); border-top: 1px solid var(--surface-border); flex-wrap: wrap; }
.fg-dialogo-pie .btn { min-height: 44px; }
.fg-icono-cerrar { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--text-secondary); border-radius: var(--radius-md, 4px); cursor: pointer; }
.fg-icono-cerrar:hover { background: var(--surface-hover); }

/* Contenedor modal para «Ver galería» */
.fg-modal-fondo { position: fixed; inset: 0; z-index: 10040; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, .55); padding: var(--space-4, 16px); }
.fg-modal { width: min(1040px, 100%); max-height: 94vh; display: flex; flex-direction: column; background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--surface-border); border-radius: var(--radius-lg, 6px); box-shadow: var(--shadow-lg); }
.fg-modal-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); padding: var(--space-3, 12px) var(--space-5, 20px); border-bottom: 1px solid var(--surface-border); }
.fg-modal-cab h2 { margin: 0; font-size: 1.05rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-modal-cuerpo { padding: var(--space-5, 20px); overflow: auto; min-height: 0; }
@media (max-width: 540px) { .fg-modal-fondo, .fg-dialogo-fondo { padding: var(--space-2, 8px); } .fg-modal-cuerpo { padding: var(--space-3, 12px); } }

/* Sección de fotos dentro de formularios existentes (producto) */
.fg-seccion { display: flex; align-items: center; gap: var(--space-4, 16px); flex-wrap: wrap; }
.fg-seccion-info { flex: 1 1 200px; min-width: 0; font-size: .85rem; color: var(--text-secondary); }
.fg-seccion-info strong { color: var(--text-primary); }
.fg-seccion-info a, .fg-enlace { color: var(--text-link); font-weight: 600; background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }

@media (prefers-reduced-motion: reduce) { .fg-visor-cargando, .fg-cargando { animation: none; } .fg-prog > i { transition: none; } }

/* Miniatura sin vista previa (archivo que no es una imagen o no se pudo leer) */
.fg-mini-roto { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; width: 100%; background: var(--gray-100, #eef2f8); color: var(--text-muted); }