.producto-foto {
    display: flex; align-items: center; gap: 22px; padding: 20px;
    margin: 12px 0 22px; border: 1px solid #dfe7ef; border-radius: 12px;
    background: #f8fafc; color: #334155;
}
.producto-foto-preview {
    display: flex; align-items: center; justify-content: center; flex: 0 0 128px;
    width: 128px; height: 120px; border: 1px dashed #cbd5e1; border-radius: 10px;
    background: #fff; text-align: center; color: #94a3b8; overflow: hidden;
}
.producto-foto-preview a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.producto-foto-preview img { width: auto; height: auto; max-width: 116px; max-height: 108px; object-fit: contain; }
.producto-foto-contenido { flex: 1; min-width: 0; }
.producto-foto-titulo { font-size: 15px; font-weight: 600; color: #1e293b; margin-bottom: 6px; }
.producto-foto-opcional { font-size: 11px; font-weight: 400; color: #64748b; background: #e9eef5; border-radius: 12px; padding: 3px 8px; margin-left: 8px; vertical-align: middle; }
.producto-foto-ayuda { color: #64748b; font-size: 12px; margin: 0 0 12px; }
.producto-foto-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.producto-foto-seleccionar { border: 1px solid #cbd5e1; border-radius: 6px; color: #25669c; background: #fff; padding: 8px 13px; font-weight: 600; }
.producto-foto-seleccionar:hover, .producto-foto-seleccionar:focus { background: #eef5fb; border-color: #74a5d0; }
.producto-foto-seleccionar .fa { margin-right: 6px; }
.producto-foto-nombre { font-size: 12px; color: #64748b; overflow-wrap: anywhere; }
.producto-foto-formatos { margin: 9px 0 0; font-size: 11px; color: #7b889b; }
.producto-foto .producto-foto-campo, .producto-foto .producto-foto-quitar-campo { margin: 0; }
.producto-foto-campo .help-block { margin: 5px 0 0; }
.producto-foto-quitar-campo .checkbox { margin: 10px 0 0; font-size: 12px; color: #a94442; }
.producto-foto-input:focus + .help-block { outline: 2px solid #74a5d0; }
#visor-foto-producto { z-index: 1100; }
#visor-foto-producto .modal-dialog { width: calc(100% - 32px); max-width: 820px; margin: 30px auto; }
#visor-foto-producto .modal-content { border: 0; border-radius: 12px; overflow: hidden; }
#visor-foto-producto .modal-header { background: #fff; border-bottom: 1px solid #e2e8f0; }
#visor-foto-producto .modal-body { background: #f1f5f9; text-align: center; padding: 20px; min-height: 160px; }
#visor-foto-producto img { max-width: 100%; max-height: 72vh; width: auto; height: auto; border-radius: 6px; }
.modal-backdrop.producto-foto-backdrop { z-index: 1090; }
@media (max-width: 540px) {
    .producto-foto { align-items: flex-start; gap: 14px; padding: 14px; flex-wrap: wrap; }
    .producto-foto-preview { flex-basis: 96px; width: 96px; height: 96px; }
    .producto-foto-contenido { flex-basis: 220px; }
}